1、HTML 书写规范

 * 标记名称必须小写

 * 属性名必须小写

 * 标记必须严格嵌套

 * 标记必须封闭，即使是空元素

 * 属性值用双引号括起来，并且使用完整形式

 * 不允许将结构标记包含于内容标记

2、在 HTML 中引入 CSS 的方法

 * 行内式：在标记的 style 属性中设置 CSS 样式，适用于对特殊标记使用，不推荐使用

 * 嵌入式：将样式写在页面的 <head> 与 </head> 中，适用于单一页面

 * 链接式和导入式：将一个独立的 CSS 文件引入到 HTML 文件中。

ps：链接式和导入式的区别：

（1）语法不同，分别是：

1

<link href="style.css" rel="stylesheet" type="text/css" />
1
2
3

<style type="text/css">
	@import "style.css";
</style>

（2）显示效果不同。使用链接式时，在装载页面主体前装载 CSS 文件；使用导入式，在整个页面装载完成后再装载 CSS 文件。

3、基本 CSS 选择器

 * 标记选择器：每个 HTML 标记都可以作为想要的标记选择器的名称，用于声明页面中所有的标记的样式风格，语法：标记名 {name: value;}

 * 类别选择器：通过 HTML 标记的属性 class 来设置，名称可以由用户自定义，语法：.class {name: value;}。一个标记可以使用多个 class 类别选择器，一个 class 类别选择器可以用于多个标记。如：

1
2

<div class="class1 class2"></div>
<div class="class1 class3"></div>

 * ID 选择器：通过 HTML 标记的属性 id 来设置，名称由用户自定义，语法：#id {name: value;}。一个标记只能使用一个 ID 类别选择器，一个 ID 类别选择器只能用于一个标记。

ps：三种类型选择器的权重的规则：HTML 标签的权重为 1，class 的权重为 10，id 的权重为 100。

4、复合选择器

 * “交集”选择器：由两个选择器直接链接构成，结果是选中二者各自元素范围的交集。第一个必须是标记选择器，第二个必须是类别选择器或者 ID 选择器，选择器之间不能有空格。如：

1
2
3

div.class\_name {name: value;} —— <div class="class_name"></div> 

div.idName {name: value;} —— <div id="idName"></div> 

 * “并集”选择器：由多个选择器通过逗号连接而成，结果是同时选中各个基本选择器所选择的范围。主要用于声明风格相同的 CSS 选择器。如：

1

p, .class1, .class2, #id1 {name: value;}。

特殊情况，即所有标记都使用同种 CSS

 样式，可以利用全局选择器 “*”。

 * 后代选择器：通过嵌套的方式，对特殊位置的 HTML 标记进行声明，就可以使用后代选择器。写法是将外层的标记写在前面，内层的标记写在后面，之间用空格分隔。如：div p {name: value;}。后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的“各级后代”。

 * 子选择器：支队直接后代有影响的选择器，写法是将外层的标记写在前面，内层的标记写在后面，之间用大于号连接。如：div>p {name: value;}。

5、CSS 的继承特性

 * CSS 继承指的是子标记会继承父标记的所有样式风格，并可以在福标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。如：

1
2
3
4
5
6
7
8
9

<style>
    div {
        color: blue;
    }

    span {
        color: red;
    }
</style\>

div 这里显示的是 span CSS的继承 span 特性\div

6、CSS 的层叠特性

 * CSS 的全名叫“层叠样式表”，这里的层叠并不是继承，而是指对相同层的选择器的“冲突”的解决方案。

 * 根据权重的规则，可以将基础选择器的优先级表述为：巷内样式 > ID 样式 > 类别样式 > 标记样式。而对于复合选择器，可以对基础选择器的权重相加的总和来判断优先级。