1、CSS(Cascading Style Sheets)
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
2、多类名选择器
我们可以给标签指定多个类名，从而达到更多的选择目的。
注意：
1、样式显示效果跟HTML元素中的类名先后顺序没有关系,受css样式书写的上下顺序有关。
2、各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
3、行高
ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。
一般页面中的行高设置比字号大7~8像素左右就可以了, 比如当前使用14像素的字号，行高设为24像素左右合适。
4、标签语义化
语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用
语义化的网页的好处，最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取。
核心：合适的地方给一个最为合理的标签。
语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
不管是谁都能看懂这块内容是什么。
遵循的原则：先确定语义的HTML ，再选合适的CSS。
小技巧：
1.重语义的地方多用有语义的标签，比如 h 和 p 等等，少用没有语义的标签比如 div span 等等。
2. 如果有地方可以用p 又可以用div，特别是文字段落， 优先选用 p标签（结构更清晰）
3.少用纯样式标签 比如 b u font，可以运用css样式。 如果有强调的地方，可以考虑 strong em 等 有强调语义的标签。
5、标签显示模式
1）、块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块级元素右h、p、div、ul、ol、li
2）、行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有a、strong、b、em、i、del、s、ins、u、span
注意：
1、只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2、链接里面不能再放链接。
3）块级元素和行内元素区别
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
4）行内块元素（inline-block）
在行内元素中有几个特殊的标签<img>、<input>、<td>,可以对它们设置宽高和对齐属性
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
6、伪类和伪元素
1）、伪类
伪类可以用于文档状态的改变、动态的事件等，例如用户的鼠标点击某个元素、未被访问的链接。
:link伪类将应用于未被访问过的链接
:hover伪类将应用于有鼠标指针悬停于其上的元素。
:active伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited伪类将应用于已经被访问过的链接
:focus伪类将应用于拥有键盘输入焦点的元素。（ie8以上支持）
链接伪类，他们规定执行有顺序的，不能随便更改位置：
要按照 :link --> :visited --> :hover --> :active 的顺序。
2）伪元素
:first-line 和 :first-letter 伪元素只能用于块级元素
7、引入CSS样式表
1）行内式（内联样式）
是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
2）内部样式表（内嵌式）
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
3）外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
注意： link 是个单标签哦!!!
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
-href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
-type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
-rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
4）导入式
导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用style标签，并在style标签内的开头处使用@import语句，即可导入外部样式表文件。其基本语法格式如下：
8、CSS 三大特性
层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。
不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素高属性。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
1、 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
2、行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
3、权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 -- CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
9、CSS 背景(background)
1）背景位置
（1）position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
（2）如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
2）背景附着
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
10、盒子模型
CSS就三个大模块：盒子模型 、 浮动 、 定位
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用css摆放盒子的过程，就是网页布局。
1）表单的边框清零
因为表单边框颜色浏览器不同，样式不同，因此我们需要清零，自己定义样式和颜色，从而达到浏览器兼容效果。
input {border: 0;}
textarea {border: 0;}
2）表格的细线边框
table{ border-collapse:collapse; border-spacing: 0;}
border-collapse:collapse; 表示边框合并在一起。
border-spacing:px; 定义边框之间的间距。
这样就不用给表格指定 cellpadding 和 cellspacing
3）轮廓 outline
链接获得焦点 有虚线 和 文本框或者文本域获得焦点时，谷歌等浏览器有 蓝色边框，为了提高用户体验。
outline:none;
body a:focus {outline:none;}
textarea { outline: none; }
4）a:focus 和 a:active 区别
a:focus 获得焦点的时候 鼠标松开时显示的颜色
a:active 当前活动元素 鼠标在元素上按下还没有松开
5）外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
（1）必须是块级元素。
（2）盒子必须指定了宽度（width）
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;}
6）清除元素的默认内外边距
为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：
*{
padding:0; 清除内边距
margin:0; 清除外边距
}
注意： 行内元素是只有左右内外边距的，是没有上下内外边距的。
7）外边距合并
（1）相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
（2）嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
8）宽度和高度
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
