CSS 指层叠样式表(Cascading Style Sheets)，用于设定网页中元素的显示方式。
css的语法结构：
第一种：
选择器 { declaration1; declaration2; … }
1、该种样式表由选择器以及一条或多条声明两个部分组成；
2、该种样式表只能定义在style标签或css文件中，每个style标签或css文件可定义多个CSS样式表；
第二种：标签内属性：
style= " declaration1; declaration2;…"
1、该种样式表只由一条或多条声明组成；
2、该种样式表只能定义在style标签属性；
3、HTML文档中每个标签都有一个style标签属性。
无论使用哪一种方式定义CSS样式表，样式表中的declaration都由一个样式属性（非标签属性，即样式属性不能当标签属性直接用在标签中）和一个样式属性值组成，样式属性和样式属性值使用冒号分开；声明之间使用分号间隔；
注意事项：
1、如果一个样式属性有多个样式属性值，则样式属性值之间使用逗号间隔；
2、 在CSS中样式属性及其样式属性值对大小写不敏感，且不忽略空格；
3、如果属性值由多个单词组成，则建议使用引号引起来——如果用在style标签属性中，则使用单引号，否则使用双引号；
按照CSS样式定义位置可分为3种：外部样式表，内部样式表，内联样式
1、外部样式表
如何实现：将CSS样式写在css样式文件中，使用link标签将该css文件引入到HTML文档中。
什么时候用：当多个HTML文档中某些标签的样式规则相同时，为了实现这些样式表的重用，同时也为了方便管理样式表，则需要将其声明在一个CSS样式表文件中。
link标签还用于设置HTML文档头部小图标，语法结构：<link rel="shortcut icon" href="图片路径"/>或<link rel="shortcut icon" type="image/x-icon" href="图片路径"/>
2、内部样式表
如何实现：将CSS样式直接写在HTML文档中的style标签内。
什么时候用：当一个HTML文档中的样式在其它HTML文档中不具有共性，但是本HTML文档中的多个标签的样式相同，这时为了实现这些样式规则的重用，同时也为了方便管理样式规则，则需要将其声明在内部样式表中。
3、内联样式（标签内部添加的属性）
如何实现：将CSS样式写在HTML文档某个标签的style标签属性的属性值中。
什么时候用：当一个HTML文档中的某个标签样式与其他标签样式不相同，或者该文档中的标签样式与父标签样式不统一，则此时就需要声明内联样式。
总结：外部样式表和内部样式表中的每个样式表都需要使用{}，只有内联样式（标签内部的属性）不允许使用大括号，比如：<p style="color:red;text-align:center;">p标签</p>
CSS定义位置优先级：
1、如果按照一般插入CSS样式的顺序（即先使用link插入外部样式表，再使用style标签插入内部样式表，最后再在style标签属性中插入内联样式）来说，内联样式优先级最高，外部样式表优先级最低，如下所示：内联样式 > 内部样式表 > 外部样式表。（由内到外，优先级由高到低）
css选择器：
选择器：浏览器通过选择器为满足条件的HTML元素添加CSS样式：
<!DOCTYPE html>
<html>
<head>
<!--hover称作伪类-->
<!--上面对于该类本的编写是为了确定输入框光标距离开始位置处的距离-->
<meta charset="UTF-8">
<title></title>
<style>
a{
background: red;
}
</style>
</head>
<body>
<a href="http://sina.com">体育</a>
<input />
</body>
</html>
标签选择器：浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，其语法如下：
标签选择器名 { declaration1; declaration2; … }
<!DOCTYPE html>
<html>
<head>
<!--hover称作伪类-->
<!--上面对于该类本的编写是为了确定输入框光标距离开始位置处的距离-->
<meta charset="UTF-8">
<title></title>
<style>
a{
font: 12px/20px "microsoft yahei","微软雅黑","simsun","宋体";
color: #000;
text-decoration: none;
}
a:hover{
color: #e66100;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="http://sina.com">体育</a>
<input />
</body>
</html>
类选择器：浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式，其语法如下：
类选择器名 { declaration1; declaration2; … }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--选择器：浏览器选择匹配的元素施加相应的样式-->
<style>
/*标签选择器：标签名*/
span{
color: red;
}
/*class选择器（第二优先级）： #id标签属性，id 不允许重复*/
.blue_txt{
color: blue;
}
</style>
</head>
<body>
<span>郑州大学</span>
<span id="black_txt">ZZU</span>
<b id="black_txt">QQ</b>
<i class="blue_txt">微信</i>
<p>白日依山近</p>
<span class="green_txt">黄河入海流</span>
</body>
</html>
注意：
1、class标签属性的属性值不能以数字开头；
2、class标签属性的属性值可以有多个，每个值之间用空格间隔；
id选择器：浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式，其语法如下：
# id选择器名 { declaration1; declaration2; … }
1、id标签属性的属性值不能以数字开头；
2、id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；
3、id标签的优先级要高于类标签即class标签
后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式，语法如下：
父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 { declaration1; declaration2; … }选择器之间用空格间隔；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--选择器：浏览器选择匹配的元素施加相应的样式-->
<style>
/*后代选择器，html为父代，body子父代，后面是子代*/
html body #black_txt{
color: black;
}
</style>
</head>
<body>
<span>郑州大学</span>
<span id="black_txt">ZZU</span>
<b id="black_txt">QQ</b>
<i class="blue_txt">微信</i>
<p>白日依山近</p>
<span class="green_txt">黄河入海流</span>
</body>
</html>
如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码， 该选择器的选择器名由多个选择器组成，使用逗号分隔，其语法如下：
选择器1,选择器2,选择器3…{ declaration1; declaration2; … }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--选择器：浏览器选择匹配的元素施加相应的样式-->
<style>
/*分组选择器，同级的话标签重复则以下面的标签为主*/
p,.green_txt{
color: green;
}
</style>
</head>
<body>
<span>郑州大学</span>
<span id="black_txt">ZZU</span>
<b id="black_txt">QQ</b>
<i class="blue_txt">微信</i>
<p>白日依山近</p>
<span class="green_txt">黄河入海流</span>
</body>
</html>
通配符选择器匹配HTML文档中的任何HTML元素，其语法如下：
*{ declaration1; declaration2; … }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--选择器：浏览器选择匹配的元素施加相应的样式-->
<style>
/*通配符选择器：匹配当前页面的所有标签,里面特点是为了消除不同浏览器的空白*/
*{
margin: 0px;
padding: 0px;
}
p{
border: #000000 1px solid;
}
</style>
</head>
<body>
<span>郑州大学</span>
<span id="black_txt">ZZU</span>
<b id="black_txt">QQ</b>
<i class="blue_txt">微信</i>
<p>白日依山近</p>
<span class="green_txt">黄河入海流</span>
</body>
</html>
选择器优先级：
id选择器优先级最高，标签选择器优先级最低，如下所示：id选择器 > 类选择器 > 标签选择器，如下代码：
CSS伪类：
CSS 伪类用于向某些选择器添加特殊的效果，语法结构如下：
选择器:伪类 { declaration1; declaration2; … }
1、若:link、:visited、:hover和:active一起使用，:hover 必须被置于 :link 和 :visited 之后，:active 必须被置于 :hover 之后，即:link -> :visited -> :hover -> :active 。
CSS伪类用一个冒号来表示，而CSS伪元素则用两个冒号来表示，但由于兼容性问题，推荐一律使用一个冒号。
常用css属性：
1、边框属性：
用于为元素的所有边框设置宽度，或者单独地为4个边框设置宽度， 该属性有多个值：
border-style样式属性：
只有当border-style样式属性不是 none或者hidden 时边框才可能出现；
border-color样式属性
边框样式属性简写：
依次按照宽度、样式和颜色的顺序设置边框样式可以简化边框样式属性的设置。
1、边框样式属性简写允许不设置其中某个值（比如border:solid #ff0000; ）；
2、使用border设置边框属性时，border-width、border-style和border-color的值只能取一种，例如：{border:20px solid red;}是有效的，但是{border:20px 60px solid red;}、 {border:20px solid dotted red;}或{border:20px solid red green;}等等都是无效的。
轮廓线样式属性：
outline-color样式属性
outline-style样式属性
outline-width样式属性
outline样式属性
背景样式属性：
background-color样式属性
background-image样式属性（设置标签背景图片，该样式属性有多个属性值）
background-repeat样式属性
background-attachment样式属性
background-position样式属性（设置标签背景图片位置，该样式属性有多个属性值）
background-origin样式属性
background-clip样式属性（）
字体样式属性：
font-style样式属性
font-variant样式属性
font-weight样式属性
font-size样式属性
font-family样式属性
font样式属性：
用于在一个声明中设置所有的字体样式属性（即font-style、font-variant、font-weight、font-size/line-height和font-family），且该样式属性设置属性值时不需要设置所有字体样式属性所对应的属性值，但需要按照font-style、font-variant、font-weight、font-size/line-height和font-family顺序进行排列，中间用空格隔开。
1、注意 font样式属性至少要指定字体大小和字体系列；
2、没有font-color样式属性，如果要设置字体的颜色需要使用color样式属性；
3、font样式属性的属性值也可设置为inherit，但Internet Explorer浏览器不支持属性值 "inherit“ 如果样式声明列表中有line-height样式属性，又有font样式属性，则line-height无效，必须与font一起使用。