CSS — 创建CSS的三种方式（一）

下一篇

CSS — 选择器、属性（二)

---

一、什么是 CSS?

• CSS 指层叠样式表 (Cascading Style Sheets)
• 将内容展示和样式管理解耦
• 可以达到一份内容实现多种主题的效果
• 详情可以参考

今日内容

---

一、最基础的CSS 元素及属性

1、style 元素

style：表示样式

---

2、有3种方式创建CSS

内联样式表

• 规则：在标签内使用style 属性指定css代码
• 特点：该style 只能控制 内嵌的 样式

<a style = "font-size: 40px; color: #c7edcc"> Shonan </a>

• 缺点：当页面（多份html代码）重复使用一种类型的 style 时，代码大赘余，不易于维护。

---

文档内嵌样式表

• 特点： 文档内嵌样式表 : 可以控制 外部的 a标签和内部的 a标签 的属性

<style type = "text/css">
    a{
        font-size: 40px;
        color: #c7edcc;
    }
</style>

• 优点：实现了内容与表现相分离，解决了内部样式出现的冗余的问题
• 缺点：一个网站里多个页面（多份html代码），且用到同一种样式的时候，会造成小冗余。

---

外部样式表

• 特点：可以控制一个多个文件的 样式属性 ，只要文件有连接上
  等级低于文档内嵌样式表

文件类型：a.css

a{
    font-size: 40px;
    color: aquamarine;
}

文件类型：xxx.html

<link rel = "stylesheet" type = "text/css" href = "a.css">

• rel (relationship（关系）): 代表资源与
• link：引入外部资源的标签
• type：样式表对应的类型
• href：引入资源的位置

---

当3种方式并存的时候，应该页面显示哪种？

• 答：就近模式

---

三、层叠是什么？

• 层叠： 后面的代码控制的属性 会覆盖 前面的 属性