CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS 将网页内容和显示样式进行分离，提高了显示功能。

css 的最新版本是 css3，我们目前学习的是 css2.1。 因为 css3 和 css2.1 不矛盾，必须先学 2.1 然后学 3。

接下来我们要讲一下为什么要使用 CSS。

HTML 的缺陷：

CSS 优点：

比如说，有一个样式需要在一百个页面上显示，如果是 html 来实现，那要写一百遍，现在有了 css，只要写一遍。现在，html 只提供数据和一些控件，完全交给 css 提供各种各样的样式。

盒子模型、浮动、定位

我们先来看一段简单的 css 代码：

解释如下：

我们写 css 的地方是 style 标签，就是“样式”的意思，写在 head 里面。后面的课程中我们将知道，css 也可以写在单独的文件里面，现在我们先写在 style 标签里面。

如果在 sublime 中输入 1

type 表示“类型”，text 就是“纯文本”，css 也是纯文本。

但是，如果在 sublime 中输入st或者style然后按 tab 键，可以自动生成的格式如下：（不建议）

css 对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。

语法格式：（其实就是键值对）

或者可以写成：

解释：

举例：

完整版代码举例：

效果：

格式：

注意：CSS 只有/* */这种注释，没有//这种注释。而且注释要写在标签里面才算生效哦。

接下来，我们要开始真正地讲 css 的知识咯。

css 怎么学？CSS 有两个知识部分： 1） 选择器，怎么选； 2） 属性，样式是什么

我们先来接触 CSS 的一些简单常见的属性，因为接下来需要用到。后期会专门用一篇文章来写 CSS 的属性。

以下属性值中，括号中的内容表示 sublime 中的快捷键。

字体颜色：（c）

color 属性的值，可以是英语单词，比如 red、blue、yellow 等等；也可以是 rgb、十六进制(后期详细讲)。

字号大小：（fos）

font 就是“字体”，size 就是“尺寸”。px 是“像素”。单位必须加，不加不行。

背景颜色：（bgc）

background 就是“背景”。

加粗：（fwb）

font 是“字体” weight 是“重量”的意思，bold 粗。

不加粗：（fwn）

normal 就是正常的意思。

斜体：（fsi）

italic 就是“斜体”。

不斜体：（fsn）

下划线：（tdu）

decoration 就是“装饰”的意思。

没有下划线：（tdn）

CSS 的书写方式，实就是问你 CSS 的代码放在哪个位置。CSS 代码理论上的位置是任意的，但通常写在标签里。

CSS 的书写方式有三种：

行内样式：在某个特定的标签里采用 style 属性。范围只针对此标签。

内嵌样式（内联样式）：在页面的 head 标签里里采用标签。范围针对此页面。

外链样式：引入外部样式表 CSS 文件。这种引入方式又分为两种：

下面来详细讲一讲这三种方式。

采用 style 属性。范围只针对此标签适用。

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

举例：

效果：

在 head 标签中加入标签，对多个标签进行统一修改，范围针对此页面。

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

举例：

引入样式表文件的方式又分为两种：

（1）采用标签。例如：

（2）采用 import，必须写在标签中，并且必须是第一句。例如：@import url(a.css) ;

两种引入样式方式的区别：外部样式表中不能写标签，但是可以写 import 语句。

具体操作如下：

我们先在 html 页面的同级目录下新建一个a.css文件，那说明这里面的代码全是 css 代码，此时就没有必要再写标签这几个字了。 a.css的代码如下：

上方的 css 代码中，注意像素要带上 px 这个单位，不然不生效。 然后我们在 html 文件中通过标签引入这个 css 文件就行了。效果如下：

这里再讲一个补充的知识：标签的 rel 属性：。其属性值有以下两种：

看字面意思可能比较难理解，我们来举个例子，一下子就明白了。 举例：

现在我们来定义 3 个样式表：

a.css：定义一个实线的黑色边框

ba.css：蓝色的虚线边框

c.css：来个背景图片

然后我们在 html 文件中引用三个样式表：

上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title 属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在 IE 中打开网页）

CSS 选择器：就是指定 CSS 要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS 的选择器分为两大类：基本选择器和扩展选择器。

基本选择器：

下面来分别讲一讲。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

举例：

上方选择器的意思是说：所有的

标签里的内容都将显示 14 号字体。

效果：

再比如说，我想让“千古壹号学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么我可以用标签把“前端”这两个字围起来，然后给标签加一个标签选择器。

代码如下：

【总结】需要注意的是：

（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

针对某一个特定的标签来使用，只能使用一次。css 中的 ID 选择器以”#”来定义。

举例：

效果：

id 选择器的选择符是“#”。

任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

另外，特别强调的是：HTML 页面，不能出现相同的 id，哪怕他们不是一个类型。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的 div，是非法的！

一个标签可以被多个 css 选择器选择：

比如，我们可以同时让标签选择器和 id 选择器作用于同一个标签。如下：

然后我们通过网页的审查元素看一下效果：

现在，假设选择器冲突了，比如 id 选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？ 实际上，css 有着非常严格的计算公式，能够处理冲突.

一个标签可以被多个 css 选择器选择，共同作用，这就是“层叠式”的第一层含义（第一层含义和第二层含义，放到 css 基础的第三篇文章里讲）。

、针对你想要的所有标签使用。优点：灵活。

css 中用.来表示类。举例如下：

效果：

和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点：

特性 1：类选择器可以被多种标签使用。

特性 2：同一个标签可以使用多个类选择器。用空格隔开。举例如下：（正确）

初学者常见的错误，就是写成了两个 class。举例如下：（错误）

类选择器使用的举例：

类选择器的使用，能够决定一个人的 css 水平。

比如，我们现在要做下面这样一个页面：

正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化。对应 css 里的代码如下：

然后让每个标签去选取自己想要用的类选择器：

也就是说：

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

问题：到底用 id 还是用 class？

答案：尽可能的用 class，除非极特殊的情况可以用 id。

原因：id 是 js 用的。也就是说，js 要通过 id 属性得到标签，所以 css 层面尽量不用 id，要不然 js 就很别扭。另一层面，我们会认为一个有 id 的元素，有动态效果。

举例如下：

上图所示，css 和 js 都在用同一个 id，会出现不好沟通的情况。

我们记住这句话：类上样式，id 上行为。意思是说，class属性交给 css 使用，id属性交给 js 使用。

上面这三种选择器的区别：

通用选择器，将匹配任何标签。不建议使用，IE 有些版本不支持，大网站增加客户端负担。

效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

举例：

效果：

高级选择器：

下面详细讲一下这几种高级（扩展）选择器。

对于E F这种格式，表示所有属于 E 元素后代的 F 元素，有这个样式。空格就表示后代。

后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

后代选择器，描述的是祖先结构。

看定义可能有点难理解，我们来看例子吧。

举例 1：

空格就表示后代。.div1 p 表示.div1的后代所有的p。

这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。

举例：

上方代码的意思是说：定义了标签中的标签中的标签的样式。 同理：h3 和 b 和 i 标签不一定是连续紧挨着的，只要保持一个后代的关联即可。