CSS：修订间差异
第38行： 第38行：
|| [https://www.w3.org/TR/selectors-3/ CSS 官网：Selectors Level 3]
|| [https://www.w3.org/TR/selectors-3/ CSS 官网：Selectors Level 3]
}}
}}
{{表格链接|[https://www.baidu.com 百度]}}
===基本选择器===
===基本选择器===
{| class="wikitable"  style="width: 100%;
{| class="wikitable"  style="width: 100%;
第45行： 第46行：
!示例
!示例
|-
|-
|'''标签选择器'''<br \>Type selector <br />{{表格链接|[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors MDN]}}
|'''标签选择器'''<br \>Type selector <br /> <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors MDN]  
|elementname
|elementname  
|选取特定类型元素
|选取特定类型元素
|<code>p</code> 选择<nowiki><p>元素</nowiki>
|<code>p</code> 选择<nowiki><p>元素</nowiki>
|-
|-
|'''类选择器'''<br \> Class selector <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors MDN]
|'''类选择器'''<br \> Class selector <br /> <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors MDN]
|.classname
|.classname
|选取特定类的元素（单一页面中，一个类可以有多个实例）
|选取特定类的元素（单一页面中，一个类可以有多个实例）
第65行： 第66行：
|<code>img[src]</code> 选择img元素中含有src属性的元素，如 <img src="myimage.png">  
|<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]
|'''通配选择器'''<br \> Universal selector  <br /><br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors MDN]
|<nowiki>* ns|* *|*</nowiki>
|<nowiki>* ns|* *|*</nowiki>
|选取选择所有元素，或某个命名空间下所有元素
|选取选择所有元素，或某个命名空间下所有元素

2022年11月14日 (一) 07: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方式

选择器

CSS 选择器用于选取元素，然后可以为这些元素添加CSS规则。可分为4类：

  • 基本选择器（Basic selectors）
  • 分组选择器（Grouping selectors）
  • 组合选择器（Combinators）
  • 伪选择器（Pseudo）

了解更多 >> MDN：CSS 选择器 CSS 官网：Selectors Level 3


百度


基本选择器

名称 格式 描述 示例
标签选择器
Type selector

MDN 		elementname 选取特定类型元素 p 选择<p>元素
类选择器
Class selector

MDN 		.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

MDN 		* ns|* *|* 选取选择所有元素，或某个命名空间下所有元素 * 选择所有元素

了解更多 >> MDN：基本选择器


分组选择器

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

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

了解更多 >> MDN：组合器（combinators）


伪选择器

伪类

伪类选择器，使用冒号:加关键字表示，支持通过元素的状态信息来选择元素。 例如:hover选择鼠标悬停的元素，以下代码当用户将鼠标悬停在按钮上时改变按钮的颜色： 

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}
名称 描述 示例
:active 匹配被用户激活的元素。:active 伪类一般被用在 <a> 和 <button> 元素中。 a:active
:checked
:visited
:hover
:nth-child()
:nth-last-child()
MDN
:nth-of-type()

了解更多 >> MDN：CSS selectors CSS 官网：Selectors Level 3


伪元素

伪元素选择器，使用双冒号::加关键字表示，支持选择元素特定某部分。 例如::first-line选择元素第一行 

/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}


名称 描述 示例

了解更多 >> MDN：CSS 伪元素 MDN：CSS selectors CSS 官网：Selectors Level 3


属性

属性（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 布局


资源

官网

相关网站

参考资料

取自“https://zxdd.com/index.php?title=CSS&oldid=1170”