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

<html>标签

#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 元素内部)

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

最终效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,801评论 1 45
  • CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器...
    百作不死的学习阅读 1,228评论 0 7
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,670评论 0 30
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 1,498评论 1 3