从零开始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 元素内部)

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

最终效果图

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180704G1F33200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券