CSS 简介

CSS 是什么

CSS 是层叠样式表(Cascading Style Sheets)，用于设置和布置网页，可以对元素位置进行排版，可以为元素添加背景和边框，可以为元素添加动效动画等等。

CSS 的历史

CSS1：1996 年 12 月正式推出 CSS1，对字体、尺寸、颜色、文本、位置、背景、边框等进行了规范，这个阶段主要使用 table 和 CSS1 来定位表单的外观和样式。

CSS2：1998 年 5 月正式推出 CSS2，扩展了 CSS1，添加了很多新属性和伪元素，这个阶段主要使用 div 和 li 来分割元素再搭配 CSS2 来定义表单界面的外观。

CSS2.1：2004 年 2 月正式推出了 CSS2.1，纠正了 CSS2 中的一些错误，也删除了一些不被浏览器所支持的属性（有些出现在 CSS3 规范中了）。

CSS3：2010 年推出的全新版本 CSS3，被分为若干个相互独立的模块，包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS3 有哪些模块

CSS3 没有采用总体结构，而是采用了分工协作的模块化结构。原因是为了避免浏览器因为不支持一部分功能而不支持整个部分了，先让浏览器支持的模块尽可能多，一些不必要的可以不支持，对于 PC 端和移动端就是如此。

模块名称	功能描述
basic box model	定义各种与盒模型相关的样式
Line	定义各种与直线相关的样式
List	定义各种与列表相关的样式
Hyperlink Presentation	定义各种与超链接相关的样式。譬如锚的显示方式、激活时的视觉效果等
Presentation Levels	定义页面中元素的不同的样式级别
Speech	定义各种与语音相关的样式。譬如音量、音速、说话间歇时间属性
Background and border	定义各种与背景和边框相关的样式
Text	定义各种与文字相关的样式
Color	定义各种与颜色相关的样式
Font	定义各种与字体相关的样式
Paged Media	定义各种页眉、页脚、页数等页面元数据的样式
Cascading and inheritance	定义怎样对属性进行赋值
Value and Units	将页面上各种各样的值与单位进行统一，以供其他模块使用
Image Values	定义对 image 元素的赋值方式
2D Transforms	在页面中实现 2 维空间上的变形效果
3D Transforms	在页面上实现 3 维空间上的变形效果
Transitions	在页面中实现平滑过渡的视觉效果
Animations	在页面中实现动画
CSSOM View	查看管理页面或页面的视觉效果，处理元素的位置信息
Synatax	定义 CSS 样式表的基本结构、样式表中的一些语法细节、浏览器对于样式的分析规则
Generated and Replaced Content	定义怎样在元素中插入内容
Marquee	定义当一些元素的内容太大，超过了指定的元素尺寸时，是否以及怎样显示溢出部分
Ruby	定义页面中 ruby 元素（用于显示拼音文字）的样式
Writing Modes	定义页面中文本数据的布局方式
Basic User Interface	定义屏幕、纸张上进行输出时页面的渲染方式
Namespaces	定义使用命名空间时的语法
Media Queries	根据媒体类型来实现不同的样式
‘Reader’Media Type	定义用于屏幕阅读器之类的阅读程序时的样式
Multi-column Layout	在页面中使用多栏布局方式
Template Layout	在页面中使用特殊布局方式
Flexible Box Layout	创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局
Grid Position	在页面中使用网络布局方式
Generated Content for Paged Media	在页面中使用印刷时使用的布局方式

CSS 长什么样子

css 是由一个选择器(selector)起头，后面接一对大括号{ }，然后在大括号里面定义一些属性和对应的属性值。

h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}