Pro017-从零开始HTML[#017]——5分钟-CSS 层叠样式表

标签

#017_Apl_CSS

    上一节课我们学习了如何该表 HTML 显示内容的样式，不过这些样式都是在 HTML 文档内部的，如果，我们有大量的页面需要按照这个样式表来对文档进行格式化，而且这个样式表规定的风格是十分完善的，是可以通用到所哟页面的，我们就需要用到外部样式表——层叠样式表。CSS(CascadingStyleSheets)

---

CSS有什么用？

    HTML 通过样式定义如何显示 HTML 元素，样式通常存储在样式表中，CSS里面层叠了大量的样式表，把样式添加到 HTML 中，是为了解决内容与表现分离的问题，与此同时，外部样式表可以极大提高工作效率。

上节课内容回顾

    上节课我们在 head 部分添加了一个内部样式表（代码见黄色框部分），正如我们开头所说的，如果项目的 HTML 文件越来越多，是不是每一个 HTML 文档的开头都要加上这样一个内不样式表啊，这个内部样式表相对来说已经是一个简单的内部样式表了，如果之后定义的样式越来越多，那么不是每个 HTML 文档都多上了一大段。

    这时候，就要用到 CSS 了。

css 文档

    可以看见，在 css 文档中，我们用来定义样式的代码和在 HTML 文档中的基本一样，改变的 只是文档的后缀，css 文档 后缀不是 .html 而是 .css 

link 标签调用外部样式表

    然后用 #011 课程里面说过的 link 标签，从外部导入样式表，除了 href 属性是填入对应的 css 文件的相对地址，其他直接照抄。

---

css 文档怎么编写

    css 文档就是内部样式表 content 内容值 的拆解，我们可以把原来内部样式表的内容值逐一拆解放入 css 中，另存为 .css 文件，放到项目对应文件夹，这样就能用了。

css 文档编写

---

同一个 HTML 元素被重复定义

     细心的同学可能注意到了，我把之前的内部样式表注释掉了。这是因为，同一个 HTML 元素被多个样式定义的时候，一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字越大优先权越高。

1、浏览器缺省设置

2、外部样式表

3、内部样式表（位于 [head>] 标签内部）

4、内联样式（在 HTML 元素内部）

    我们需要根据自己的需求，合理利用这些优先级，制作出自己想要的显示元素效果。

最终效果图