1 CSS的基础定义
CSS 的全称为：层叠式表 ( Cascading Style Sheets ) 。
CSS是一种标记语言，用来给HTML结构设置样式。
层叠样式表中的“层叠“是指像化妆一样一层一层 “涂”上去。而层叠样式表中的“表“主要表示记录”化妆”的操作。CSS给HTML所搭建的页面结构美化，也就是“化妆”的原理。
2 CSS的编写位置
CSS样式文件按照编写位置有3种引入方式，分别为行内式、内部式以及外联式，而这3种引入CSS方式的样式又分别被称为行内样式表、内部样式表以及外联样式表。
2.1 行内式引入
行内式引入是指在HTML标签中添加style属性，并给style属性的属性值赋予对应的声明块。声明块的格式为：CSS属性名：CSS属性值;，要写多个声明块，必须严格按照声明块格式，并排写在一起即可。CSS行内引入方式案例，如下图2 CSS的行内引入所示：
⚠注意
行内式写法只能对所指定的标签进行美观，没有体现结构与样式分离的思想，不便于后期样式的维护，一般用于学习案例效果调整。
2.2 内部式引入
内部式引入是指：<title> 标签下方添加 <style> 双标签，并在<style>标签里面，书写选择器，再在选择器中写声明块，具体格式为： 选择器 { CSS属性名：CSS属性值; CSS属性名：CSS属性值; ......}。CSS的内部引入案例，如下图3 CSS的内部式引入所示：
⚠注意
<style>标签理论上可以放在 HTML 文档的任何地方，但一般都放在<head>标签 中。虽然CSS内部式引入方式体现了部分结构与样式分离的思想，但是无法在多个.html文件实现复用，常用于单个.html的样式编写。
2.3 外联式引入
外联式引入是指把CSS代码写在单独的 .css 文件中，随后在 HTML 文件中的<head>标签中，用<link>标签引入使用。
- 第1步 把CSS代码写在
index.css文件中。如下图4 CSS的样式文件所示：
.html文件中用<link>标签在<head>标签中引入index.css文件。 如下图5 CSS的外联式引入所示：
⚠注意
<link>标签要写在<head>标签中。<link>标签中的href属性 表示引入的文档来自于哪里。<link>标签中的rel属性 表示引入的文档与当前文档之间的关系。- 实际开发中最推荐的一种使用方式。
2.4 样式表优先级
若是CSS样式同时使用行内引用、内部引用以及外联引用，且每种引入方式中的样式CSS属性名均一致，仅只有CSS属性值不同，哪一种样式引入方式中CSS样式生效呢？
例如，CSS行内引入方式、CSS内部引入方式以及CSS外联引入方式，都对<p>设置了颜色样式，其中CSS行内引入方式只给一个指定的<p>标签设置了蓝色，CSS内部引入方式给所有的<p>标签设置了绿色，而CSS外部引入方式也给所有的<p>标签设置了红色。可以明显看出，行内引入方式的样式优先级将高于其它两种，至于内部引入方式与外联引入方式的样式优先级，看它们在HTML结构中的顺序。具体如下图6 针对同一标签的3种CSS的引入方式所示：
针对同一标签，同属性名不同属性值的CSS样式优先级原理，是浏览器加载HTML文件时会将所有的CSS引入方式的样式表都加载进来，然后按照HTML结构的中CSS代码块先后位置顺序进行渲染。渲染的原则是，HTML结构中位置靠后的样式会覆盖位置靠前的样式。
样式表优先级规则
- 针对同一标签的3种CSS引入种方式的样式表优先级：行内样式>内部样式=外部样式（内部样式、外部样式，这二者的优先级相同，且后面的样式会覆盖前面的（简记：“后来 者居上”）。）
- 同一个样式表中，优先级也和编写顺序有关，且后面的样式会覆盖前面的样式（简记：“后来 者居上”）。
2.5 引入方式总结
CSS的3种CSS引入方式优劣如下表7 三种引入方式比较表 所示：
3 CSS的语法规范
CSS的语法规范由选择器以及声明块两部分组成，选择器用于寻找元素，声明块用于给寻找到的元素添加相关属性。具体如下图8 CSS语法规范所示：
/* */
3.1 CSS代码风格
CSS的代码风格包含展开风格以及紧凑风格两部分。
- 展开风格 —— 开发时推荐，便于维护和调试。如下图9 CSS代码风格之展开风格所示：
图9 CSS代码风格之展开风格
- 紧凑风格 —— 项目上线时推荐，可减小文件体积。如下 图10 CSS代码风格之紧凑风格所示：
3.2 CSS属性书写顺序
为了能让网络加载资源更加流畅，书写顺序很重要。
- 布局定位属性：
display/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式） - 自身属性：
width/height/margin/padding/border/background - 文本属性：
color/font/text-decoration/text-align/vertical-align/white-space/break-word - 其他属性（
CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...
4 使用Chrome调试工具
要检查检查、调试代码，可以借助Chrome浏览器的调试工具。
-
第1步 打开调试工具
- 方式一： 浏览器窗口内任意位置 / 选中标签 ▶ 鼠标右键 ▶ 检查
- 方式二： 按住键盘上的 【F12】 键
-
第2步 使用调试工具
图11 Chrome调试工具
⚠注意： 如果页面样式显示不出来，直接打开Chrome开发工具，选择添加样式的元素，查看
style。
- 如果有样式属性，只是前面有警告标识，说明属性写错了，一般是属性名、属性值、
:、;以及{}出错。- 如果没有样式属性，则表示选择器出错，一般是选择器名写错或者复合选择器层级出错。
5 CSS的学习方法
主要是学习 CSS的选择器以及声明块 两部分内容。 （声明块大多是为改变 元素的形状 大小、颜色以及位置 从而设计出来的。）
