CSS 基础

层叠样式表 (Cascading Style Sheets, CSS) 是一种样式表语言，用来描述 HTML 或 XML 文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题 1。

速查清单

引用 CSS。在 HTML 文件中使用 CSS 进行样式渲染一共有三个方法：

  1. 内联样式（不推荐）：在 HTML 中的每一个想要润色的标签中添加 style 属性进行渲染；
  2. 内部样式表（不推荐）：在 HTML 的 head 中编写 style 标签进行全局 CSS 进行渲染；
  3. 外部样式表（最推荐）：在 .css 为后缀的文件中进行编写相应的样式内容，最后在 HTML 的 head 标签中通过 link 引用该样式文件即可。

选择器。选择指定的标签类别进行渲染，根据渲染对象的不同，选择器一共有三种大类：

  1. 标签选择器。顾名思义就是根据已有的标签进行样式书写，格式示例为 p { color: red; }；
  2. 类选择器。根据自定义的类名进行样式书写，格式示例为 .ClassName { color: red; }；
  3. ID 选择器。根据页面中某一个元素唯一的 ID 进行样式书写，格式示例为 #OnlyId { color: red; }。

渲染优先级。内联样式 > ID 选择器 > 样式表。

背景。背景颜色（rgb 赋值、hex 赋值、name 赋值），背景图片（定位、滚动样式）。

文本。文字颜色、文字对齐。

字体。字体系列、字体大小。

链接。链接的样式（link、visited、hover、active 顺序记忆为 l o v e & ha te）。

盒子模型。每一个标签都是一个盒子，分为行级标签、块级标签等。对于每一个盒子，分为内边距（元素与边框的距离）、边框和外边距（各个盒子之间的距离）。其中：

  1. 内边距通过 margin 进行控制。属性值含有四个参数，分别代表上右下左的距离值，如果只含有三个，则其中第一个为上，第二个为左右，第三个为下；如果只含有两个，则其中第一个为上下，第二个为左右；如果只含有一个，则表示上右下左均为该值；
  2. 外边框通过 padding 进行控制。属性值同 margin 的属性值。

浮动布局。即 float 属性，可以理解为元素环绕属性，有 left 与 right 两个属性值。设定浮动属性后，元素将脱离文档流，上面的元素布局不变，下面的元素向上浮动调整。

定位布局。即 position 属性，是为了实现透视覆盖的视觉效果而诞生的。即设定一个元素的 position 值为 relative，即设定其为相对元素，接着在此相对元素的位置基础之上，设定其余元素的 position 值为 absolute 以及相应的位置参数大小，即可相对参照元素进行布局。

  1. CSS 参考文档 - MDN ↩