CSS：修订间差异

2021年9月28日 (二) 04:24的版本

层叠样式表（Cascading Style Sheets），缩写为 CSS。是一种计算机语言，由W3C定义和维护。用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）。CSS 与 HTML 和 JavaScript 并称 Web 三大核心技术。

简介

时间轴

1996年12月17日，W3C发布CSS 1。
1998年5月12日，W3C发布CSS 2。
2011年6月7日，W3C发布CSS 2.1。

了解更多 >> W3C：所有CSS规范

基本知识

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：

p {
  color: red;
}

保存到style.css文件中，然后在THML文档头部标签<head>引入。

<link href="style.css" rel="stylesheet">

在浏览器打开html文件可以看到所有段落文件都变为红色。

结构

CSS是由一个个规则集构成。规则集由选择器(Selector)和一条条声明(Declaration)构成。声明是一条单独的规则，每个声明用分号;隔开，所有声明在大括号里。一条声明包含属性（Properties）和属性值（Property value）,用冒号:隔开。

引入CSS方式

选择器

基本选择器

名称	格式	描述	示例
标签选择器 Type selector	elementname	选取特定类型元素	`p` 选择<p>元素
类选择器 Class selector	.classname	选取特定类的元素（单一页面中，一个类可以有多个实例）	`.my-class` 可以选择 <p class="my-class"> 和 <a class="my-class">
ID 选择器 ID selector	#idname	选取特定 ID 的元素（单一页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）	`#my-id` 可以选择 <p id="my-id"> 或 <a id="my-id">
属性选择器 Attribute selector	[attr] [attr=value] [attr~=value] [attr\|=value] [attr^=value] [attr$=value] [attr*=value]	选取特定属性的元素	`img[src]` 选择img元素中含有src属性的元素，如 <img src="myimage.png">
通配选择器 Universal selector	* ns\|* \|	选取选择所有元素，或某个命名空间下所有元素	`*` 选择所有元素
伪类选择器 Pseudo classes	:pseudo-class(value)	选取特定伪类特定值的元素	`a:hover` 鼠标悬停的a元素

选择器组

选择器用逗号,分隔开，表示一个选择器列表，后面的声明会应用在每个选择器上。与每个选择器分开声明相等，如：

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
等价：
h1, h2, h3 { font-family: sans-serif }

组合选择器

两选择器可以通过组合选择符来组合选择，CSS里现在共有4种组合选择符（Combinators），如下：

符号	语法	描述	示例	示例结果
>	A > B	子代选择器，只选择A元素子代的元素B	div > p	选取div下的所有子元素p
（空格）	A B	后代选择器，选择A元素下的元素B，不管子代还是孙代等。	div p	选取div下的所有元素p
+	A + B	相邻兄弟选择器，选择与元素A相邻的同级元素B。	div + p	选取与元素div相邻的同级元素p
~	A ~ B	兄弟选择器，选择与元素A同级的元素B，不管相不相邻。	div ~ p	选取与元素div的同级元素p

伪类

CSS 伪类用于在不能使用文档树或其他简单选择器选择不了时进行选择。使用冒号:加关键字表示。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

伪元素

属性

属性（Properties）和属性值（Property value）值构成一条声明。

CSS中定义的所有属性见网页 CSS官网：所有属性。该页面为属性索引按字母排序，包括所有8个成熟度等级css属性，如编辑稿，草案，推荐等，用颜色区分成熟度等级。

字体属性

了解更多 >> CSS 官网：CSS22-字体

了解更多 >> CSS 官网：所有属性

布局

名称	写法	描述
正常布局流 Normal flow	不操作	不对HTML进行任何布局控制，按浏览器默认的HTML布局方式显示。
弹性盒子 Flexbox	display: flex;	Flexbox 是CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写。
网格布局 Grid	display: grid;
浮动 float	float: 值;	float 属性可取值： left — 将元素浮动到左侧。 right — 将元素浮动到右侧。 none — 默认值, 不浮动。 inherit — 继承父元素的浮动属性。
定位 positioning	position: 值;
表格布局	表格	是一种传统方法，现在使用更灵活的Flexbox和Grid。

了解更多 >> MDN文档：CSS 布局

资源

官网

CSS 官网：https://www.w3.org/Style/CSS/
CSS 2.2 文档：https://www.w3.org/TR/CSS22/
CSS 2.1 文档：https://www.w3.org/TR/CSS21/
CSS 2 文档：https://www.w3.org/TR/1998/REC-CSS2-19980512/
CSS 1 文档： https://www.w3.org/TR/CSS1/

参考资料

@@ 第1行： / 第1行： @@
-层叠样式表（Cascading Style Sheets），缩写为 CSS。是一种计算机语言，由[[W3C]]定义和维护。用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）。
+层叠样式表（Cascading Style Sheets），缩写为 CSS。是一种计算机语言，由[[W3C]]定义和维护。用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）。CSS 与 [[HTML]] 和 [[JavaScript]] 并称 [[Web]] 三大核心技术。
 ==简介==
+===时间轴===
+* 1996年12月17日，W3C发布[https://www.w3.org/TR/CSS1/ CSS 1]。
+* 1998年5月12日，W3C发布[https://www.w3.org/TR/1998/REC-CSS2-19980512/ CSS 2]。
+* 2011年6月7日，W3C发布[https://www.w3.org/TR/CSS21/ CSS 2.1]。
+{{了解更多
+|[https://www.w3.org/Style/CSS/specs W3C：所有CSS规范]
+}}
+==基本知识==
 和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：
   <nowiki>p {
@@ 第10行： / 第19行： @@
 在浏览器打开html文件可以看到所有段落文件都变为红色。
-===时间轴===
-==结构==
+===结构===
 CSS是由一个个规则集构成。规则集由选择器(Selector)和一条条声明(Declaration)构成。声明是一条单独的规则，每个声明用分号;隔开，所有声明在大括号里。一条声明包含属性（Properties）和属性值（Property value）,用冒号:隔开。
+===引入CSS方式===
@@ 第20行： / 第31行： @@
 {| class="wikitable"  style="width: 100%;
 !名称
-!中文名称
 !格式
 !描述
-!示例选择器
+!示例
-!示例选取结果
 |-
-|Type selector
+|'''标签选择器'''<br \>Type selector
-|标签选择器(或元素选择器)
 |elementname
 |选取特定类型元素
-|p
+|<code>p</code> 选择<nowiki><p>元素</nowiki>
-|选择 <<nowiki />p>
 |-
-|Class selector
+|'''类选择器'''<br \> Class selector
-|类选择器
 |.classname
 |选取特定类的元素（单一页面中，一个类可以有多个实例）
-|.my-class
+|<code>.my-class</code> 可以选择 <<nowiki />p class="my-class"> 和 <<nowiki />a class="my-class">
-|选择 <<nowiki />p class="my-class"> 和 <<nowiki />a class="my-class">
 |-
-|ID selector
+|'''ID 选择器'''<br \> ID selector
-|ID 选择器
 |#idname
 |选取特定 ID 的元素（单一页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）
-|#my-id
+|<code>#my-id</code> 可以选择 <<nowiki />p id="my-id"> 或 <<nowiki />a id="my-id">
-|选择 <<nowiki />p id="my-id"> 或 <<nowiki />a id="my-id">
 |-
-|Attribute selector
+|'''属性选择器'''<br \> Attribute selector
-|属性选择器
 |<nowiki>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</nowiki>
 |选取特定属性的元素
-|img[src]
+|<code>img[src]</code> 选择img元素中含有src属性的元素，如 <img src="myimage.png">
-|选择img元素中含有src属性的元素，如 <img src="myimage.png">
 |-
-|Universal selector
+|'''通配选择器'''<br \> Universal selector
-|通配选择器
 |<nowiki>* ns|* *|*</nowiki>
 |选取选择所有元素，或某个命名空间下所有元素
-|*
+|<code>*</code> 选择所有元素
-|选择所有元素
 |-
-|Pseudo classes
+|'''伪类选择器'''<br \> Pseudo classes
-|伪类选择器
 |<nowiki>:pseudo-class(value)</nowiki>
 |选取特定伪类特定值的元素
-|a:hover
+|<code>a:hover</code> 鼠标悬停的a元素
-|鼠标悬停的a元素
-|-
 |}
 ===选择器组===
 选择器用逗号''','''分隔开，表示一个选择器列表，后面的声明会应用在每个选择器上。与每个选择器分开声明相等，如：
@@ 第189行： / 第186行： @@
 ==资源==
 ===官网===
-* [https://www.w3.org/Style/CSS/ CSS 官网]
+* CSS 官网：https://www.w3.org/Style/CSS/
+* CSS 2.2 文档：https://www.w3.org/TR/CSS22/
+* CSS 2.1 文档：https://www.w3.org/TR/CSS21/
+* CSS 2 文档：https://www.w3.org/TR/1998/REC-CSS2-19980512/
+* CSS 1 文档： https://www.w3.org/TR/CSS1/
 ===相关网站===