CSS基本教程

CSS的id和class选择器区别：

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
<style>
/*css的id 和class选择器区别*/
#password
{ 
      color:red;
	  text-align:center;
}  
.girl
{
      color:blue;
}
</style>
</head>
<body>
<p id="password">感谢你曾来过</p>
<p class="girl">taht girl</p>
</body>
</html>

代码运行情况

CSS创建（外部样式表）注释：

其中

rel 属性规定当前文档与被链接文档之间的关系。

只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持。

type设置或获取对象的 MIME 类型

href设置或获取目标 URL ，浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

mystyle.css文件：

p{color:blue}

CSS创建（外部样式表）代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>感谢你曾来过</p>
</body>
</html>

代码运行情况

插入背景图片

background-size属性指定背景图片大小。

background-repeat 属性设置是否及如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。

background-position 属性设置背景图像的起始位置。

margin-right 属性设置元素的右外边距。

插入背景图片代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页制作</title> 
<style>
body 
{
    background-image:url('that girl.png');
	background-size:500px 500px;
	background-repeat:no-repeat;
	background-position:right top;
	margin-right:500px;
}
</style>
</head>
<body>
<h1>taht girl</h1>

<p>There's a girl but I let her get away (曾经心爱的女孩 我却让她擦肩而过 )，
It's all my fault cause pride got in the way(自尊心作祟 一切都是我的错)
，And I'd be lying if I said I was ok(若说无事 其实只是谎言未戳破)</p>
</body>

</html>

代码运行情况：

CSS文本代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
<style>
body {color:blue}
h1 
{
  color:orange;
  text-align:center;
}
p.date {text-align:right;}
<!--当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。-->
p.main {text-align:justify;}

p.ending {text-indent:50px;}

</style>
</head>

<body>
<h1>日记</h1>
<p class="date">2018年2月11日</p>
<p class="main">结束了，我们 。只怪那个笨蛋太傻，反应太慢。等他反应过来时，我们已经错过彼此最认真的时候。虽然那个笨蛋一直未放弃，努力挽回。几次的努力，换回只是你的轻易放弃，他心灰意冷。</p>
<!--&quot;文字&quot;代表  "文字"（引号）-->
<p class="ending"><b> 我告诉我自己：</b>这次我们真结束，&quot;我将不会再回头！&quot;</p>

</body>
</html>

代码运行情况：

CSS基本链接代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页制作</title> 
<style>
a:link {color:red;}      /* 未访问链接*/
a:visited {color:orange;}  /* 已访问链接 */
a:hover {color:blue;}  /* 鼠标移动到链接上 */
a:active {color:black;}  /* 鼠标点击时 */
</style>
</head>
<body>
<!--target="_blank" 点击链接后会新开一个窗口来打开指定网址-->
<p><b><a href="20180727(文本）.html" >这是一个链接</a></b></p>

</body>
</html>

css代码运行情况

点击“这是一个链接”按钮，会跳转到另一个如下的页面。

CSS高级链接代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页制作</title> 
<style>
a.one:link {color:black;}
a.one:visited {color:blue;}
a.one:hover {color:red;}

a.two:link {color:black;}
a.two:visited {color:blue;}
a.two:hover {font-size:150%;}

a.three:link {color:black;}
a.three:visited {color:blue;}
a.three:hover {background:red;}

a.four:link {color:black;}
a.four:visited {color:blue;}
a.four:hover {font-family: serif;}

a.five:link {color:black;text-decoration:none;}
a.five:visited {color:blue;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>将鼠标移至链接上改变样式.</p>
<p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p>
<p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>
</body>

</html>

代码运行情况：

CSS高级链接

a:link 未访问链接
a:visited 已访问链接

display 属性规定元素应该生成的框的类型。

block 此元素将显示为块级元素，此元素前后会带有换行符

font-weight 属性设置文本的粗细。

padding：对象四边的补丁边距，也称补白，内边距等。

text-decoration 属性规定添加到文本的修饰。

a:hover 鼠标移动到链接上

a:active 鼠标点击时

cass高级链接代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页制作</title> 
<style>
a:link,a:visited
{
    display:block;
    font-weight:normal;
    color:blue;
    background-color:black;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
}
a:hover,a:active
{
    background-color:orange;
}
</style>
</head>

<body>
<a href="20180727(文本）.html" target="_blank">这是一个链接</a>
</body>
</html>

代码运行情况：

点击“这是一个链接”按钮，会跳转到另一个如下的页面。

css表格代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title网页制作</title>
<style>
table,th,td
{
	border:1px solid black;
}
th
{
    background-color:green;
	color:whire;
}
</style>
</head>

<body>
<table>
<tr>
<th>姓名</th>
<th>分数</th>
</tr>
<tr>
<td>小王</td>
<td>92</td>
</tr>
<tr>
<td>小龙</td>
<td>90</td>
</tr>
</table>
</body>
</html>

代码运行情况：

盒子模型：

border一般用于分离元素，border的外围一般是指元素的最外围

border的属性只要有三个color(颜色) width(粗细) style(样式)

padding 用于控制content 与 border之间的距离

margin是指元素与元素之间的距离，从直观上来看就是指用于控制块与块之间的距离。

盒子模型代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页制作</title>
<style>
div {
    background-color: white;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

代码运行情况：

链接水平显示：

li{ display:inline;}的作用是把li转换成内联元素显示。

li默认为块级元素，一个li会独自占据一行，display:inline会把块级元素转换成内联元素，内联元素大小会根据内容多少而变换，且不会自动换行。

链接水平显示代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页制作</title> 
<style>
li{display:inline;}
</style>
</head>
<body>

<p>tjfsuxyy博客：</p>

<ul>
<li><a href="https://blog.csdn.net/tjfsuxyy/article/details/80801888" target="_blank">python逻辑回归</a></li>
<li><a href="https://blog.csdn.net/tjfsuxyy/article/details/80804219" target="_blank">python决策树</a></li>
<li><a href="https://blog.csdn.net/tjfsuxyy/article/details/80845633" target="_blank">python 第三方包导入</a></li>

</ul>

</body>
</html>

代码运行情况：

点击不同按钮，会跳转到不同的页面上。

猜你喜欢