CSS 自学之路（一）

为文档添加样式有三种方式 ：

1. 行内样式
   <div style="width: 120px; height: 120px; background-color: red;"></div>

行内样式就是把样式写在 HTML 标签内，这种方式很少见人使用，因为这种方式下的 CSS 代码不仅不能复用，而且把 HTML 结构搞得乱七八糟。

2. 嵌入样式

    <style>
        div{
            width: 120px;
            height: 120px;
            background-color: red;
        }
    </style>
   

嵌入样式就是在 head 标签加上 style 标签，并在里面书写样式。这种方式的缺点是仅可以在当前文件复用样式，不可以在其它文件中使用。
3.链接样式
<link rel="stylesheet" type="text/css" href="style.css">
现在普遍使用链接样式为文档添加样式，因为这样就可以实现职责分离，HTML 负责结构，CSS 负责表现。

浏览器层叠各个样式来源的顺序为 链接 -> 嵌入 -> 行内， 这意味着什么呢？比如说我们在链接样式中将 p 标签的字体大小改为 24px， 而后又在使用行内的方式将 p 标签的字体大小改为 14px， 那么用户看到的将是 14px，因为在行内定义的样式后于链接样式被浏览器读取，所以链接引入的样式会被覆盖。有人要说了，我要让链接引入的样式是用户最终看到的样式，也就是让链接引入的样式权重超过行内引入的，可以借助 !important 实现这一功能。

color: #009966 !important;

除了以上三种，我们还可以在样式表中链接其它样式表，利用 @import 指令，如以下代码：

    @import url(foo.css);

不过值得注意的是， @import 指令必须出现在样式表中其他样式之前，否则利用 @import 引入的样式将不起作用。

---

接下来，将通过下面这段代码对一些选择器进行讲解。

<article>
    <p>Simple text</p>
    <p>Simple text</p>
    <div>
        <p>Div text</p>
    </div>
    <p>Simple text</p>
    <p>Simple text</p>
</article>

1. 子选择符
   article > p {
   color: #009966;
   }
   

   demo01.png
   可见，只有 article 的直接子类加上了颜色，而 article 孙子级别的 p 标签并没有被渲染颜色。

2. 紧邻同胞选择符
   div + p {
   color: #009966;
   }
   

   
   可见，只有与 div 紧相邻 （而且在 div 的后面） 的 p 标签才会被应用上样式。这种选择符有一个妙用，如下所示
   nav ul li + li{
   border-left: 2px solid #00CC66;
   }
   demo04.png
   可以利用这种方式巧妙的为规避掉第一个 li 标签，也就是为第一个 li 标签之后的所有 li 加上一个左边框。

3. 一般同胞选择符
   div ~ p {
   color: #009966;
   }
   

   demo03.png
   可见，只要是在 div 后面的同胞 p 元素都会被选中并渲染样式。

---

还有一种选择器叫做伪类选择器，这种选择器又可细化为 UI伪类 和 结构化伪类，UI伪类比如 :hover, :focus, :active 等。结构化伪类比如 :first-child, :last-child 等。在选择符中，单冒号用于表示伪类，双冒号表示伪元素。 什么是伪元素呢？伪元素就是在文档中若有实无的元素，比如 ::first-letter, ::first-line, ::before, ::after 等。

对于 CSS2 之前就已经有的伪元素，比如 :before, 单冒号和双冒号的写法实现的功能是一样的。 双冒号是 CSS3 引入的，用于区分伪类和伪元素。 如果你的网页只需要兼容 webkit, firefox, opera 等浏览器，建议采用伪元素使用双冒号的写法。 如果你不得不兼容 IE浏览器，还是用 CSS2 的单冒号写法比较安全。

下面来看看这段代码

<p>Simple text</p>
<p class="special">Simple text</p>
<p class="special" id="error">Simple text</p>
<p>Simple text</p>

为其书写样式

    p {
        color: black;
    }

    p.special{
        color: green;
    }

    p#error{
        color: red;
    }

demo05.png

结果是带有类的覆盖了原有的样式，带有 id 的覆盖了带有类的样式，这种结果的产生涉及到 "特指度" 的计算，其实也就是优先级的意思。 特指度可以利用 ICE 公式来计算，值越大则特指度越高。

            I-C-E
p           0-0-1 特指度 = 1
p.special   0-1-1 特指度 = 11
p#error     1-0-1 特指度 = 101

---

下面讲一个关于垂直外边距的误区，比方说下面这段代码。

<div></div>
<div></div>

div{
    width: 100px;
    height: 100px;
    border: 1px solid #386;
    margin-top: 50px;
    margin-bottom: 20px;
}

很多人可能认为这两个 div 之间的距离应该是 (50+20)px， 但其实是 50px，也就是说垂直外边距会发生重叠， 从而表现出较大的那一个。不过对于水平外边距则不存在这个问题。