CSS 基础

认识 CSS

• CSS 表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表）是为网页添加样式的代码。CSS 代码可以直接写在 HTML 代码中，也可以写在单独的 CSS 文件中，然后通过 HTML 的 link 标签引入。

• 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）；

CSS 语法

• 层叠样式表（Cascading Stylesheet，简称 CSS），其基本目标是让浏览器以指定的特性去绘制页面元素，比如颜色、定位、装饰。CSS 的语法反映了这个目标，由下面两个部分构建：

  • 属性（property）是一个标识符，用可读的名称来表示其特性。
  • 值（value）则描述了浏览器引擎如何处理该特性。每个属性都包含一个有效值的集合，它有正式的语法和语义定义，被浏览器引擎实现。

• CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值的键值对被称为"声明"（declaration） 。CSS 引擎会计算页面上每个元素都有哪些声明，并且会根据结果绘制元素，排布样式。

• 在 CSS 中，无论是属性名还是属性值都是对大小写不敏感的。属性与值之间以英文冒号 ':' （U+003A COLON）隔开。属性与值前面、后面与两者之间的空白不是必需的，会被自动忽略。