CSS:修订间差异

无编辑摘要
 
(未显示同一用户的6个中间版本)
第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:
和 HTML 类似,CSS 也不是真正的编程语言,甚至不是标记语言。它是一门样式表语言,这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说,要选择一个 HTML 页面里所有的段落元素,然后将其中的文本改成红色,可以这样写 CSS:
  <nowiki>p {
  <nowiki>p {
第10行: 第19行:
在浏览器打开html文件可以看到所有段落文件都变为红色。
在浏览器打开html文件可以看到所有段落文件都变为红色。


===时间轴===


==结构==
===结构===
CSS是由一个个规则集构成。规则集由选择器(Selector)和一条条声明(Declaration)构成。声明是一条单独的规则,每个声明用分号;隔开,所有声明在大括号里。一条声明包含属性(Properties)和属性值(Property value),用冒号:隔开。
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]
}}
{{表格链接|[https://www.baidu.com 百度]}}
===基本选择器===
===基本选择器===
{| class="wikitable"  style="width: 100%;
{| class="wikitable"  style="width: 100%;
!名称
!名称
!中文名称
!格式
!格式
!描述
!描述
!示例选择器
!示例
!示例选取结果
|-
|-
|Type selector
|'''标签选择器'''<br \>Type selector <br /> <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors MDN]
|标签选择器(或元素选择器)
|elementname  
|elementname
|选取特定类型元素
|选取特定类型元素
|p
|<code>p</code> 选择<nowiki><p>元素</nowiki>
|选择 <<nowiki />p>
|-
|-
|Class selector
|'''类选择器'''<br \> Class selector <br /> <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors MDN] 
|类选择器
|.classname
|.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
|#idname
|选取特定 ID 的元素(单一页面中,每个 ID 只对应一个元素,一个元素只对应一个 ID)
|选取特定 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>
|<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 <br /><br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors MDN]
|通配选择器
|<nowiki>* ns|* *|*</nowiki>
|<nowiki>* ns|* *|*</nowiki>
|选取选择所有元素,或某个命名空间下所有元素
|选取选择所有元素,或某个命名空间下所有元素
|*
|<code>*</code> 选择所有元素
|选择所有元素
|-
|Pseudo classes
|伪类选择器
|<nowiki>:pseudo-class(value)</nowiki>
|选取特定伪类特定值的元素
|a:hover
|鼠标悬停的a元素
|-
|}
|}
===选择器组===
 
{{了解更多
|[https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors#基本选择器  MDN:基本选择器]
}}
 
===分组选择器===
选择器用逗号''','''分隔开,表示一个选择器列表,后面的声明会应用在每个选择器上。与每个选择器分开声明相等,如:
选择器用逗号''','''分隔开,表示一个选择器列表,后面的声明会应用在每个选择器上。与每个选择器分开声明相等,如:


第85行: 第92行:
!描述
!描述
!示例
!示例
!示例结果
|-
|-
|>
|>
|A > B
|A > B
|子代选择器,只选择A元素子代的元素B
|子代选择器,只选择A元素子代的元素B
|div > p
|<code>div > p</code> 选取div下的所有子元素p
|选取div下的所有子元素p
|-
|-
| (空格)
| (空格)
|A B
|A B
|后代选择器,选择A元素下的元素B,不管子代还是孙代等。
|后代选择器,选择A元素下的元素B,不管子代还是孙代等。
|div p
|<code>div p</code> 选取div下的所有元素p
|选取div下的所有元素p
|-
|-
|<nowiki>+</nowiki>
|<nowiki>+</nowiki>
|A + B
|A + B
|相邻兄弟选择器,选择与元素A相邻的同级元素B。
|相邻兄弟选择器,选择与元素A相邻的同级元素B。
|div + p
|<code>div + p</code> 选取与元素div相邻的同级元素p
|选取与元素div相邻的同级元素p
|-
|-
|~
|~
|A ~ B
|A ~ B
|兄弟选择器,选择与元素A同级的元素B,不管相不相邻。
|兄弟选择器,选择与元素A同级的元素B,不管相不相邻。
|div ~ p
|<code>div ~ p</code> 选取与元素div的同级元素p
|选取与元素div的同级元素p
|-
|}
|}


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


===伪类===
===伪选择器===
CSS 伪类用于在不能使用文档树或其他简单选择器选择不了时进行选择。 使用冒号:加关键字表示。例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
====伪类====
<nowiki>/* 所有用户指针悬停的按钮 */
伪类选择器,使用冒号<code>:</code>加关键字表示,支持通过元素的状态信息来选择元素。 例如<code>:hover</code>选择鼠标悬停的元素,以下代码当用户将鼠标悬停在按钮上时改变按钮的颜色:
<syntaxhighlight lang="CSS" >
/* 所有用户指针悬停的按钮 */
button:hover {
button:hover {
   color: blue;
   color: blue;
}</nowiki>
}
</syntaxhighlight>
 
{| class="wikitable"
! 名称
! 描述
! 示例
|-
| :active
| 匹配被用户激活的元素。:active 伪类一般被用在 <a> 和 <button> 元素中。
| <code>a:active</code>
|-
| :checked
|
|
|-
| :visited
|
|
|-
| :hover
|
|
|-
| :nth-child() <br />[https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child MDN]
|
|
|-
| :nth-last-child()
|
|
|-
| :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://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors MDN:CSS selectors]
| [https://www.w3.org/TR/selectors-3/ CSS 官网:Selectors Level 3]
| [https://www.w3.org/TR/selectors-3/ CSS 官网:Selectors Level 3]
第146行: 第222行:
}}
}}


==布局==
{| 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 布局]
}}
==资源==
==资源==
===官网===
===官网===
* [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/


===相关网站===
===相关网站===

2022年11月14日 (一) 07:26的最新版本

层叠样式表(Cascading Style Sheets),缩写为 CSS。是一种计算机语言,由W3C定义和维护。用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)。CSS 与 HTMLJavaScript 并称 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()
MDN
:nth-last-child()
: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 布局


资源

官网

相关网站

参考资料