6. 引入样式表的方法

外链式（使用link引入css文件）
内嵌式（在head中写style）
行内式（直接写在标签里面style属性中，工作禁止使用，比如 <div style="width: 200px;height: 200px; background: red;"></div>
导入式（在css中写@import，工作禁止使用，因为会有空白时期）

7. ID选择器和class选择器的区别

1）ID表示名字，ID的值在全网页中必须是唯一的，ID选择器符号是井号 # ；

2） class表示类名，多个标签可以是相同的类名，同一个标签可以同时属于多个类，类名用空格隔开，还可以使用原子类。类选择器符号是点 . 。

8. 能够继承的CSS属性

文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效。这些属性都有继承性：

color
font- 开头的，比如font-style: weight;
list- 开头的，比如list-style: none;
text- 开头的，比如text-decoration: underline;
line- 开头的，比如line-height: 30px;

9. 选择器权重计算

选择器选中计算方法：

1、先比近，近就是牛。即，如果直接选中了标签，那么它就是比继承的牛；

2、一样近就比权重，按（id数量，类数量，标签数量）的形式进行统计即可。

此外，一定要记住：

行内样式表（标签内部）> 内嵌样式表（当前文件中）> 外链样式表（外部文件link引入）

下面我们用4个题目进行举例，都是我们曾经做过的题目。

9.1 示例题目

这个小题目，以前做过。我们来看一看。

HTML结构如下：

<div class="box">
    <ul>
        <li class="current">大家好！</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
    </ul>
</div>

CSS属性如下：

.box ul li {
    color: red;
}
.current {
    color: green;
}

请问，“大家好！”的颜色是什么？

正确答案是红色。这是因为.box ul li 选中了标签，.current也选中了标签，它们俩一样近。所以要比权重。

.box ul li权重是（0, 1, 2）

.current权重是（0,1,0）

因此，应该.box ul li生效，答案是红色。

9.2 示例题目

再来看一道做过的题目：

HTML结构如下：

<header id="top-header">
    <nav class="daohang">
        <ul class="list">
            <li>文字</li>
        </ul>
    </nav>
</header>

CSS为：

#top-header .daohang .list {
    color: red;
}
header ul.list {
    color: blue;
}
#top-header li {
    color: orange;
}
header ul li {
    color: green;
}

请问文字是什么颜色的？并简述为什么？

正确答案是橙色。这是因为选择器“#top-header .daohang .list”和选择器“header ul.list”都是靠继承影

响文字的，权重可以看做是0。

选择器“#top-header li”权重是（1，0，1）

选择器“header ul li”权重是（0，0，3）

所以，最终颜色应该是橙色。

9.3 示例题目

看一道经典题目，这个题目是真实面试题。

HTML是：

<div class="base-box">
    <p>文字</p>
</div>

CSS是：

.base-box {

color: red !important;

font-style: italic;

}

p {
    color: green;
}

请问，“文字”的情况是？

正确答案是：绿色、倾斜。这是因为**!important无法提升“远近”的**。所以.base-box设置的红色，即便加上了!important 也依然比不过p，因为p是直接选中的。我们再次强调： !important无法提升“远近”的。所以文字一定是绿色的。.base-box还有一个属性，是文字倾斜，文字倾斜是可以正常继承给儿子的。因此本题答案：文字的情况是绿色、倾斜

9.4 示例题目

这也是道面试题，以前也可能见过。

CSS：

.wrap div {
    color: red;
}
.info {
    color: blue;
}

HTML：

<div class="wrap">
    <div class="inner">
        <div class="info">文字</div>
    </div>
</div>

解答：.wrap div 和.info都选中了文字所在标签，所以要比权重。明显的，.wrap div权重更大，胜出。因此文字是红色的。

注意，“.wrap div”这个选择器，选中了“文字”所在标签。因为.wrap div表示选择wrap这个盒子中的所有div，无论层次。但是如果加了一个大于号“>”，就是“亲儿子选择器”，就选不中了。

10. 盒模型

任何HTML元素，特别是块级元素，都可以看做是盒子。它由内容区域（width和height）、内边距（padding）、边框（border）组成。盒子和盒子之间是外边距（margin）。行内元素也有这些区域，但是一些属性值失效，比如行内元素不能设置width和height。

盒模型这里，重点就2句：

border、padding都默认是外扩的！不算在width、height中的哦。
上右下左！这个顺序要牢记

HTML与CSS基础重点总结（二）