CSS

Eric讨论 | 贡献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),如下:

符号 语法 描述 示例 示例结果
> 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;
}


伪元素

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


属性

属性(Properties)和属性值(Property value)值构成一条声明。

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

字体属性

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



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



资源

官网

相关网站

参考资料