Cascading Style Sheet，简称： CSS

表示层叠样式表又称为串联样式列表、级联样式表、串接样式表、阶层式样式表

是为网页添加样式的代码。

CSS 是一种语言吗？

  • MDN 解释： CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言；
  • 维基百科解释：是一种计算机语言，但是不算是一种编程语言；

CSS 历史

早期的网页都是通过HTML来编写的，但是我们希望HTML页面可以更加丰富

  • 这个时候就增加了很多具备特殊样式的元素：比如 i、 strong、 del 等等；
  • 后来也有不同的浏览器实现各自的样式语言，但是没有统一的规划；
  • 1994 年，哈肯·维姆·莱和伯特·波斯合作设计 CSS，在 1996 年的时候发布了 CSS1；
  • 1997 年初， W3C 组织才专门成立了 CSS 的工作组， 1998 年 5 月发布了 CSS2；
  • 2006~2009 非常流行 “DIV+CSS”布局的方式来替代所有的 html 标签；
  • 从 CSS3 开始，所有的 CSS 分成了不同的模块（modules），每一个“modules” 都有于 CSS2 中额外增加的功能，以及向后兼容
  • 2011 年 6 月 7 日， CSS 3 Color Module 终于发布为 W3C Recommendation

CSS 的出现是为了美化 HTML 的，并且让结构（HTML）与样式（CSS）分离

  • 美化方式一：为 HTML 添加各种各样的样式，比如颜色、字体、大小、下划线等等；
  • 美化方式二：对 HTML 进行布局，按照某种结构显示（CSS 进行布局 – 浮动、 flex、 grid）

编写规则

声明（Declaration）一个单独的 CSS 规则，

如 color: red; 用来指定添加的CSS样式

  • 属性名（Property name） ：要添加的 css 规则的名称；
  • 属性值（Property value） ：要添加的 css 规则的值；
  • 使用分号分割

CSS提供了3种方法，可以将CSS样式应用到元素上：

  • 内联样式（inline style）
  • 内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）
  • 外部样式表（external style sheet）

内联样式

内联样式表存在于 HTML 元素的 style 属性之中, 也称行内样式.

内部样式

将 CSS 放在 HTML 文件 <head>元素里的 <style>元素之中

外部样式

将 css 编写一个独立的文件中，并且通过 <link>元素引入进来

  • 第一步： 将 css 样式在一个独立的 css 文件中编写（后缀名为. css）
  • 第二步： 通过<link>元素引入进来

如果引入的外部样式文件过多时, 可以创建索引文件

只引入索引文件即可