css 的代码根据书写位置不同分为四种书写方式:内联式、内嵌式、 外联式、导入式。
内联式
内联式，也被习惯叫做行内式。
书写位置:在 HTML 标签之上的 style 属性中书写 css 样式。
所有的 css 样式属性总体组成标签的 style 属性的属性值。
<div style="width: 50px;height: 50px;"></div>
内联式必须写在标签上，没有完全脱离 HTML 标签。
css 样式代码让标签结构繁重，不利于 HTML 结构的解读。
一个内联式的 css 代码，只能给一个标签使用，如果多个标签有相同的样式，同 样的 css 代码需要书写多次，增加代码量。
因此，实际工作中不会使用内联式(行内式)编写 css 代码。
内嵌式
书写位置:在 HTML 文件中，<head> 标签内部有一个 <style> 标签。
<style> 标签书写在< title> 标签后面，所有 css 代码书写在 <style> 标签内部 。
<style> 标签有一个标签属性叫做 type，属性值是 ”text/css”。
<style>
table {
margin: 30px auto 0 auto;
border: 2px solid #000000;
border-collapse: collapse;
}
</style>
优点
a、实现了结构和样式的初步分离， css 只负责样式，HTML 负责结构。
b、多个标签可以利用一段代码设置 相同的样式，节省代码量。
缺点
a、结构和样式并没有完全分离，代码依 旧书写在 HTML 文件的<style>标签内部。
b、css 样式只能给一个 HTML 文件使用， 不能够被多个 HTML 文件同时利用。
c、在 HTML 中如果 css 代码太多，会造 成文件头重脚轻。
外联式
外联式 CSS，也可以叫做外链式 CSS、外部 CSS。 •书写位置:在一个单独的扩展名为 .css 的文件中。
书写语法:内部代码与内嵌式样式表中 <style> 标签内部的代码一样的。需要通过选择器去选中标签，添加对应的样式。
注意:在 .css 文件中书写时，不需要再加 <style> 标签
实现了 HTML 和 css 完全分离。
多个 HTML 文件可以共用一个 css 文件，便于提取公共 css，减少代码量。
可以实现一个 css 变化，多个 HTML 页面同时变化，减少工作量。
一个 HTML 文件可以引入多个 css 文件，可以实现同一个页面中 css 代码分层。
外联式引用
外联式样式表必须引入到 HTML 文件中，才能正常进行加载。
引入方式:在 HTML 中的 <head> 标签内部使用 <link> 标签进行引入。
<link> 标签属性:
rel： "stylesheet" 表示引入的外部文件与 HTML 之间的关系，样式表 href： css 文件路径 hypertext reference，超文本引用 type： "text/css" 表示加载时代码按照纯文本形式的 css 代码加载。 HTML5 中可以省略 type 属性不写。
导入式
书写位置:在内嵌式样式表 <style> 标签内部，或者在外联式样式表内部，导入其 他的外部的 .css 文件。
导入方式:利用一条 @import url(路径) 语句进行引入。
<style>
@import url(css/01.css);
</style>
导入式样式表的作用与外联式样式表基本相同。
但是由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好。
实际工作中，较少使用导入式，推荐使用外联式样式表。
CSS 规则
以内嵌式样式表为例
(1)所有的 css 代码都必须书写在 <head> 标签内部的一对 <style> 标签内。
(2)css 在给某个标签设置样式前，必须使用选择器先选中标签。
(3)css 样式的属性，属性名和属性值的键值对写法为 k:v; 。
(4)给每个选择器添加的样式属性都必须写在一对大括号 {} 之内。
(5)给一个标签添加的所有需要的样式，都要在 {} 内部一一罗列出来
注意事项
a、分号必要性:每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误。
b、 css 中所有属性与属性之间对空格、换行、缩进不敏感。
CSS 常用样式
颜色 color
作用:给文字设置颜色。 属性名 k :color 属性值 v :颜色名、颜色值。
颜色名
颜色名就是使用颜色的英文单词进行表示。
颜色值
颜色值指使用具体颜色的数值表示。 包括: rgb 模式和十六进制模式写法。
rgb 模式
rgb 模式:是根据红绿蓝三原色进行混合而成的颜色模式。
每个原色的取值范围是0-255，一共256个数值。三个原色共能混合成1677多万种颜色。
书写方法:rgb(红,绿,蓝)
常用颜色的 rgb 色值:
红色 rgb(255,0,0)
绿色 rgb(0,255,0)
蓝色 rgb(0,0,255)
黑色 rgb(0,0,0)
白色 rgb(255,255,255)
灰色 rgb(128,128,128)
十六进制模式
十六进制模式:是 rgb 模式的一种简化写法，使用十六进制的数字字符去替换十进 制的 0--255 的数字。
十六进制:逢十六进一，每个数位上只能出现 0-9，a-f 之间的字符。
书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换。
0→00
255→ff
• 书写方式:使用 # 开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。
常用颜色的十六进制色值:
红色 #ff0000
绿色 #00ff00
蓝色 #0000ff
黑色 #000000
白色 #ffffff
灰色 #808080
十六进制颜色值简写模式:如果红、绿、蓝三个原色的色值每一个都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写。
红色 #f00
绿色 #0f0
蓝色 #00f
字体 font-family
作用:定义元素内文字的字体。
属性名 k :font-family，字体属于 font 综合属性的一个单一属性。
属性值 v :字体名称，必须包裹在一对引号中，属性值可以有多个，值之 间用逗号分隔。
1 、font-family 可以设置多个字体名称，在实际加载时只会选择一种加载，选择的 依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找 到第一个支持的字体。
2、 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则 加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字 体作为后路。
3、中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响， 建议将英文字体写在属性值最前面。
p{font-family: 'arial','微软雅黑';}
字号 font-size
作用:设置文字的大小。
属性名 k :font-size，字号属于 font 综合属性的一个单一属性。
属性值 v :可以使用相对长度单位，也可以使用绝对长度单位。推荐使用 相对长度单位。
单位：
px 像素值，最常使用的单位
em 倍数，继承自祖先元素设置的字号的倍数
% 百分比，继承自祖先元素设置的字号的百分比
盒子实体化三属性
如果想在浏览器中具体看到一个盒子占有的实际位置，需要设置盒子可以实体化的三属性。
width px单位的数值 定义元素占有的宽度
height px单位的数值 定义元素占有的高度
background-color 颜色名、颜色值 定义元素的背景颜色
CSS 选择器
选择器
选择器:选择要添加样式的 HTML 标签的一种方法、模式。
首先学习 css2.1 版本的七种选择器:
基础选择器:标签选择器、id 选择器、类选择器、通配符选择器。 高级选择器:后代选择器、交集选择器、并集选择器。
标签选择器
通过标签名去选择标签元素。
书写方式:标签名。
选择范围:选中的是HTML文件中所有的同名标签。
注意:标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管嵌套多深，都能被选中。
优点:可以选中所有的同名标签，设置所有同名标签的公共样式。
缺点:只能实现全选，不能对局部的标签添加特殊样式。
id 选择器
通过标签上的 id 属性去选择标签。
书写方式:#id 属性值
选择范围:只能选中一个标签。
id 命名规则:必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。
每个 id 属性值必须是唯一的，不能与其他的 id 同名。
注意:如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置。
缺点:id 选择器只能实现单选，不能帮我们完成多选的功能。
类选择器
通过标签的 class 属性去选择标签。
书写方式:.class属性值
选择范围:是页面中所有 class 属性值相同的标签。
class 命名规则:必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。
特点 1:多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同 一个类选择器选中。
特点 2:一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性 值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一 个标签。
原子类:在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这 些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添 加给需要的标签即可。
类选择器的优点
1通过一个类选择器进行多选，选中多个标签，添加公共样式。
2一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量。
通配符选择器
通过一个特殊符号选择页面内所有的标签。
书写方式:*
选择范围:包含 <html>标签在内的所有标签。
优点:可以实现全选，简化书写。
缺点:通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
注意:实际上线的网站不允许使用 * 去清除默认内外边距。
不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。
后代选择器
通过标签之间存的嵌套关系(族谱关系)去选择元素，基本组成部分就是基础选择器。
后代选择器也叫包含选择器。
书写方式:空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。
选择范围:通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签。
注意:后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系。
优点:减少 class 属性的定义使用，选择效率更高。
交集选择器
通过一个标签之上满足所有的基础选择器的需求去选择标签。
书写方式:基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。
选择范围:选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中。
比较常见的是标签与类的交集。
交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签。
IE6 不支持类名连续交集写法。
交集选择器可以作为其他高级选择器的组成部分。
并集选择器
不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成 浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。
书写方式:将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
选择范围:是所有的单独选择器选中的标签的并集集合。
1如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。
2可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。
CSS继承性
如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。
CSS层叠性
思考问题:同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式 属性，标签最终该加载哪个?或者，在继承性中，如果多个祖先都设置了相同的文 字样式，后代中该继承哪个祖先级的?
解决方法:就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只 有一个属性会成功加载，它会层叠、覆盖掉其他的属性。
判断最终胜出的属性是谁，需要依赖判断优先级。
选中目标标签
第一步:比较多个选择器的权重，权重高的层叠权重低的。
基础选择器的权重:根据选择范围，范围越大权重越小，* < 标签选择器 < 类选择器 < id 选择器。
高级选择器权重比较方法:依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。
比较顺序:( id 个数, 类的个数, 标签的个数 )
第二步:如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠先写的。
选中目标标签的组先级
如果选择器选中的是祖先元素，文字的样式可以被继承。
第一步:比较就近原则，比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近，近的层叠远的。
第二步:如果选中的祖先级距离目标一样近(同一个祖先级)，比较选择器权重，权重大的层叠小的。
第三步:如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层叠前面的。
! important 关键字
如果在比较选择器权重的过程中，遇见一个 !important 关键字，可以将某条 CSS 样式属性的权重提升到最大。
书写位置:在某个css属性的属性值后面空格加 !important 。
注意:
就近原则中，不需要比较选择器权重，所有 important 会失效。
important 不能提升选择器的权重，只能提升某条属性的权重到最大。
行内式权重
行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。
但是，与 !important 关键字相比权重要低。
