CSS全称 “层叠样式表”，主要用于在浏览器中的内容的显示样式，如：大小、颜色、字体加粗等。
使用CSS可以通过定义某一个样式，使不同网页位置上的文字有着统一的样式。
一、CSS由选择符和声明组成，而声明由属性和值组成。
选择符：又叫选择器，指明网页要应用样式的对象。
声明：在 { } 内的就是声明。属性：值 。如果有多个声明，则用 ；连接。
二、注释代码
CSS用 /* 注释 */ 来进行注释。（html是用<！- -注释- ->）
三、CSS代码插入的形式有三种 ：内联式、嵌入式、外部式
1、内联式CSS样式
内联式就是把CSS代码直接写入Html标签中。（要写在开始标签中）
内联式的CSS代码要写在style=" "双引号中，如果有多条CSS样式，可以使用分号 ; 隔开。
2、嵌入式CSS样式
把CSS代码写入 < style type=“text/css”> < /style> 之间。
3、外部式（外联式）
将CSS代码单独写入到一个外部文件中，这个CSS文件以 " .css"为拓展名。在< head>标签之间（不是style）使用< link>标签将CSS样式文件加入到Html文件中。
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel=“stylesheet” type=“text/css” 是固定写法不可修改。
3、< link>标签位置一般写在< head>标签之内。
三种写法的优先级：内联式 > 嵌入式 > 外联式 。
其中，嵌入式 > 外联式的前提是，嵌入式CSS样式所写的位置要在外联式的后面。
四、选择器
1、标签选择器
如：p、h1、h2、span、head等
2、类选择器
使用方法：
第一步：需要设样式的内容对应的标签要添加class属性。
第二步：设置类选择器的样式
3、id选择器
设置id=“id名称”
为id选择器设置样式
类选择器和id选择器区别：
类选择器使用点 . ，而id选择器使用 # 。同一个类选择器能多次使用，而同一个id选择器在文档中只能使用一次。
可以使用类选择器列表方法为一个元素设置多个样式。而id选择器不可以。
4、子选择器
大于符号> ，用于选择指定标签元素的第一代子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello HTML</title>
<style>
#test>li{
border:1px solid aquamarine;
}
</style>>
</head>
<body>
<label>子代选择器</label>>
<div name="div1">
<ol id="test">
<li>第一代
<ul>
<li>第二代</li>>
<li>第二代</li>>
</ul>>
</li>>
<li>第一代
<ul>
<li>第二代</li>>
<li>第二代</li>>
</ul>>
</li>>
</ol>>
</div>>
</body>
</html>
5、包含（后代）选择器
使用空格 ，来选择指定标签元素的 所有子后代元素。
将上述代码中的：
#test>li{ border:1px solid aquamarine; }
改成：
#test li{ border:1px solid aquamarine; }
6、通用选择器
使用一个通配符（*）来指定使用html中的所有标签元素。
如：下面代码会使 使用html标签中文本字体变成红色。
7、伪类选择符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello HTML</title>
<style>
a:hover{
font-size:30px;
color:yellow;
}
</style>>
</head>
<body>
<label>伪类选择符</label>>
<div name="div1">
<p>这是一段很长的关于<a href="http://www.biadu.com">波多野结衣</a>>的话。</p>>
</div>>
</body>
</html>
运行结果：当鼠标放在波多野结衣上时，字体会变化。
8、分组选择符
使用符号 ，来进行连接多个标签元素。
.first,#second{
color:blue;
font-size=20px;
}
如：
相当于：
五、继承、特殊性、层叠、重要性
1、继承：
CSS中的 某一些样式 具有继承性，继承是一种规则，意思是，该样式不仅应用到某一个标签元素，还将会应用到该标签的子后代元素上。比如：颜色。但是 有一些样式不具有继承性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello HTML</title>
<style>
p{
color:red; /*color具有继承性*/
border:1px solid greenyellow; /*border不具有继承性*/
}
</style>>
</head>
<body>
<div name="div1">
<p>这是一段很长很长的话，是关于<span>鲁迅</span>先生的。</p>>
</div>>
</body>
</html>
结果如下：color样式不仅应用到了< p>标签上，还应用到他的子后代< span>标签上。而border样式只应用到了< p>标签上。
2、特殊性：
如果对同一设置不同的CSS样式代码，浏览器则会按照权值的大小来选择应用哪一种样式，权值高的就用应用。
3、层叠：
在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
由层叠的性质可知：CSS样式的优先级，内联式>嵌入式>外联式
4、重要性：
有时某些样式需要被设置成最高权值，这是可以使用 !important。
六、文字排版
1、字体
body{
font-family:"Microsoft Yahei"; /*设字体为微软雅黑*/
}
注意：使用 “Microsoft Yahei” 或 “微软雅黑” 都可以显示，但是使用字母会更兼容。
2、颜色
p{
color:red; //设字体为红色
}
3、字号
span{
font-size:20px; //设字号为20px
}
4、粗体
h{
font-weight:bold; //加粗
}
5、斜体
label{
font-style:italic; //设置斜体
}
6、下划线
< label style="text-decoration:underline"> Hello Man < /label>
7、删除线
< p>原价：
< span style="text-decoration:line-through"> 300元 < /span>
 
现价：299元
< /p>
七、段落排版
1、缩进
p{
text-indent:2em; /*段落首行缩进2个字符*/
}
2、行间距
p{
line-height: 1.5em ; /*调整段落行间距为1.5em*/
}
3、文字间距、单词间距、字母间距
p{
letter-spacing:50px; /*设置文字之间的间距 或 字母之间的 间距*/
}
h1{
word-spacing:50px; /*设置单词之间的间距*/
}
注意：要区分 文字之间、字母之间、单词之间的间距。
4、对齐
为 块状元素 中的文本、图片设置为居中、居左 或 居右。
div{
text-align:center;/*居中*/
}
p{
text-align:left; /*居左*/
}
p{
text-align:right; /*居右*/
}
八、盒模型
块状元素、内联元素、块状内联元素
1、什么是盒模型？
盒模型就是盒状的边框，里面内容为文本、图片或其他标签元素。盒模型有 内填充 padding（内容到盒边框的距离）、外边距 margin（盒模型之间的距离）、边框 border（盒模型边框）。padding、margin、border 都有四个方向（left、right、top、botom）。像< div>、< ul> 、< table>等块状元素都具有盒模型的特征。
2、边框 border
可以设置边框的 粗细（border-width）、样式（border-style）、颜色（border-color） 三个属性。
边框样式（border-style）有 dashed（虚线）、dotted（点线）、solid（实线）。
3、填充
上、右、下、左（顺时针）。
九、布局模型
流动模型（Flow）、浮动布局（Float）、层模型（Layer）。
网页默认是流动布局。
1、流动模型
特点：块状元素会自上而下的按顺序垂直延伸分布。内联元素从左至右水平方向分布。
2、浮动模型
添加 float：left 设置为左浮。
6673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
