1CSS
1.1CSS概述
1.1.1什么是CSS
CSS：层叠样式表，用来修饰(美化)HTML网页的一门技术。使用CSS来设置样式，可以将设置样式的CSS代码和展示数据的HTML代码进行分离。并且还可以实现代码的复用，增强网页的展示能力。
1.2如何在HTML中引入CSS
1.2.1通过标签上的style属性引入CSS样式
大多数标签都可以具有style属性，可以通过style属性为当前标签设置样式。
这种方式可以快速为某些标签设置css样式。但这种方式设置样式不推荐大量使用，会造成页面结构的混乱，不利于后期的维护及扩展。
1.2.2通过head标签内部的style标签引入CSS样式
在head标签内部，可以提供一个style标签，在style标签内部可以选中元素进行修饰!
这种方式是将所有的css代码集中在一个style标签内部统一进行管理，实现了将展示数据的HTML代码和设置样式的CSS代码进行了初步分离。
1.2.3通过链接引入外部的CSS文件来引入CSS样式
通过head标签下的link标签可以引入外部的css文件
这种方式是将所有的css代码放在一个独立的文件中进行统一管理，真正的实现了html代码和css代码的分离。
1.3选择器
注意：选择器中不能随便空格，td.class表示td下的class类
td .class表示td里的下一级标签
所谓的选择器就是在HTML中帮助我们选择标签进行修饰的技术
1.3.1基本选择器
1.标签名(元素名)选择器
根据元素的名称来选择指定名称的元素进行样式的修饰.
格式：元素名{ css属性… }
示例：
2.class选择器
通过标签上通用的属性class，可以为标签指定所属的类(组)，所有class值相同的元素则为一组(类)，可以通过class属性的值选择这一组的标签，为这一组的标签统一设置样式。
格式：.类名{ css属性… }
示例：
3.ID选择器
通过标签上通用的属性id，可以为标签设置唯一的标识(ID的值在整个HTML中是独一无二的)，可以通过id的值选中指定的元素.
格式：#id值{ css属性… }
1.3.2扩展选择器
在基本选择器选择元素的基础上进行更加复杂选择的选择器
1.后代选择器
在父选择器选中元素的内部，选中指定的所有后代元素
格式：父选择器 后代元素选择器{ css属性… }
2.子元素选择器
在父选择器选中元素的内部，选中指定的所有子元素
格式：父选择器>子元素选择器{ css属性… }
3.分组选择器
将多个选择器选中的元素合并在一起统一设置样式。
格式：选择器1,选择器2, … 选择器n{ css属性… }
4.属性选择器
根据属性选中符合条件的元素来设置样式
格式：选择器[属性条件．．]{ css属性 }
5.相邻兄弟选择器
相邻兄弟指的是如果两个元素具有相同的父元素，并且紧挨着，这两个元素就是相邻兄弟元素。可以通过相邻兄弟选择器选中A元素后面的B元素。
格式：大哥+小弟{ css属性… }
6.伪元素选择器
根据元素的状态选中指定的元素。
选择器：link 表示元素未被点击时的状态
选择器：hover 表示鼠标悬停时的状态
选择器：active 表示元素被点击时的状态
选择器：visited 表示元素被点击之后的状态
1.4盒子模型
所谓的盒子模型指的是，可以将HTML页面中所有的元素都看成一个一个的盒子(或者是框)，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以使用相应属性来表示。
1.margin(外边距)
外边距合并的现象：在垂直方向上(上下外边距)外边距相遇时，会发生合并的现象，合并后的外边距是取其中的较大者!!
2.border(边框)
3.padding(内边距)
1.5常用的CSS属性
1.5.1元素类型的补充
(1)块级元素（block）
默认情况下，块级元素独占一行
可以设置宽和高，就是设置宽和高
如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)
外边距/边框/内边距都可以设置
(2)行内元素（inline）
默认情况下，多个行内元素处在同一行
不能设置宽和高
左右外边距/边框/内边距都可以设置，上下外边距设置无效
(3)行内块元素（inline-block）
既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)
1.5.2display
display用来设置元素的类型
取值：
block：块级元素的默认值
inline：行内元素的默认值
inline-block：行内块元素
none：表示隐藏元素
1.5.3text-align 设置元素中文本水平对齐方式
text-align 设置元素中文本水平对齐方式
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
1.5.4list列表属性
list-style-type: none/disc/square/circle…
1.5.5字体属性
font-size：设置字体大小
font-weight：设置字体粗细
font-family：设置字体
color：设置字体颜色
line-height：设置行高
text-decoration：设置字体下划线
1.5.6背景属性
background-color：设置背景颜色
background-image：设置背景图片
background-repeat：设置或检索对象的背景图像是否及如何铺排
background-position：设置或检索对象的背景图像位置
1.5.7其他
width：设置元素的宽度
height：设置元素的高度