CSS：修订间差异

2020年8月23日 (日) 06:08的版本

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

和 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）,用冒号:隔开。

名称	中文名称	格式	描述	示例选择器	示例选取结果
Type selector	标签选择器(或元素选择器)	elementname	选取特定类型元素	p	选择 <p>
Class selector	类选择器	.classname	选取特定类的元素（单一页面中，一个类可以有多个实例）	.my-class	选择 <p class="my-class"> 和 <a class="my-class">
ID selector	ID 选择器	#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），如下：

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

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

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

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

@@ 第159行： / 第159行： @@
 * [https://developer.mozilla.org/zh-CN/docs/Web/CSS MDN文档：CSS（层叠样式表）]
 * [https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics MDN文档：CSS 基础]
+[[分类:编程语言]]