查看“CSS”的源代码

层叠样式表（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 {
  color: red;
}</nowiki>
保存到style.css文件中，然后在THML文档头部标签<head>引入。
 <link href="style.css" rel="stylesheet">
在浏览器打开html文件可以看到所有段落文件都变为红色。


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


===引入CSS方式===


==选择器==
CSS 选择器用于选取元素，然后可以为这些元素添加CSS规则。可分为4类：
* 基本选择器（Basic selectors）
* 分组选择器（Grouping selectors）
* 组合选择器（Combinators）
* 伪选择器（Pseudo）

{{了解更多
|[https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors MDN：CSS 选择器]
|| [https://www.w3.org/TR/selectors-3/ CSS 官网：Selectors Level 3]
}}
===基本选择器===
{| class="wikitable"  style="width: 100%;
!名称
!格式
!描述
!示例
|-
|'''标签选择器'''<br \>Type selector <br />{{表格链接|[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors MDN]}}
|elementname
|选取特定类型元素
|<code>p</code> 选择<nowiki><p>元素</nowiki>
|-
|'''类选择器'''<br \> Class selector <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors MDN]
|.classname
|选取特定类的元素（单一页面中，一个类可以有多个实例）
|<code>.my-class</code> 可以选择 <<nowiki />p class="my-class"> 和 <<nowiki />a class="my-class">
|-
|'''ID 选择器'''<br \> ID selector
|#idname
|选取特定 ID 的元素（单一页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）
|<code>#my-id</code> 可以选择 <<nowiki />p id="my-id"> 或 <<nowiki />a id="my-id">
|-
|'''属性选择器'''<br \> Attribute selector
|<nowiki>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</nowiki>
|选取特定属性的元素
|<code>img[src]</code> 选择img元素中含有src属性的元素，如 <img src="myimage.png"> 
|-
|'''通配选择器'''<br \> Universal selector  <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors MDN]
|<nowiki>* ns|* *|*</nowiki>
|选取选择所有元素，或某个命名空间下所有元素
|<code>*</code> 选择所有元素
|}

{{了解更多
|[https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors#基本选择器  MDN：基本选择器]
}}

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

 <nowiki>h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
等价：
h1, h2, h3 { font-family: sans-serif }</nowiki>

===组合选择器===
两选择器可以通过组合选择符来组合选择，CSS里现在共有4种组合选择符（Combinators），如下：
{| class="wikitable"  style="width: 100%;
!符号
!语法
!描述
!示例
|-
|>
|A > B
|子代选择器，只选择A元素子代的元素B
|<code>div > p</code> 选取div下的所有子元素p
|-
| （空格）
|A B
|后代选择器，选择A元素下的元素B，不管子代还是孙代等。
|<code>div p</code> 选取div下的所有元素p
|-
|<nowiki>+</nowiki>
|A + B
|相邻兄弟选择器，选择与元素A相邻的同级元素B。
|<code>div + p</code> 选取与元素div相邻的同级元素p
|-
|~
|A ~ B
|兄弟选择器，选择与元素A同级的元素B，不管相不相邻。
|<code>div ~ p</code> 选取与元素div的同级元素p
|}

{{了解更多
|[https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors#组合器（combinators） MDN：组合器（combinators）]
}}

===伪选择器===
====伪类====
伪类选择器，使用冒号<code>:</code>加关键字表示，支持通过元素的状态信息来选择元素。 例如<code>:hover</code>选择鼠标悬停的元素，以下代码当用户将鼠标悬停在按钮上时改变按钮的颜色：
<syntaxhighlight lang="CSS" >
/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}
</syntaxhighlight>

{| class="wikitable" 
! 名称
! 描述
! 示例
|-
| :active
| 匹配被用户激活的元素。:active 伪类一般被用在 <a> 和 <button> 元素中。
| <code>a:active</code>
|-
| :checked
| 
| 
|-
| :visited
| 
| 
|-
| :hover
| 
| 
|-
| :nth-child()
| 
| 
|-
| :nth-last-child() <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child MDN]
| 
| 
|-
| :nth-of-type()
| 
| 
|-
| 
| 
| 
|}
{{了解更多 
| [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors MDN：CSS selectors]
| [https://www.w3.org/TR/selectors-3/ CSS 官网：Selectors Level 3]
}}

====伪元素====
伪元素选择器，使用双冒号<code>::</code>加关键字表示，支持选择元素特定某部分。 例如<code>::first-line</code>选择元素第一行
<syntaxhighlight lang="CSS" >
/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}
</syntaxhighlight>


{| class="wikitable" 
! 名称
! 描述
! 示例
|-
| 
| 
| 
|-
| 
| 
| 
|-
| 
| 
| 
|}

{{了解更多 
| [https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements  MDN：CSS 伪元素]
| [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors MDN：CSS selectors]
| [https://www.w3.org/TR/selectors-3/ CSS 官网：Selectors Level 3]
}}

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

CSS中定义的所有属性见网页 [https://www.w3.org/Style/CSS/all-properties CSS官网：所有属性]。该页面为属性索引按字母排序，包括所有8个成熟度等级css属性，如编辑稿，草案，推荐等，用颜色区分成熟度等级。

===字体属性===


{{了解更多 
| [https://www.w3.org/TR/CSS22/fonts.html CSS 官网：CSS22-字体]
}}


{{了解更多 
| [https://www.w3.org/Style/CSS/all-properties CSS 官网：所有属性]
}}

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

{{了解更多
|[https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout 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/

===相关网站===
* [http://zh.html.net/tutorials/css/ HTML.net：CSS 教程]
* [http://chinese-school.netfirms.com/CSS-tutorial-Chinese-index.htm netfirms.com：CSS 教程]

==参考资料==
* [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 基础]

[[分类:编程语言]]