和 HTML 类似,CSS 也不是真正的编程语言,甚至不是标记语言。它是一门样式表语言,这也就是说人们可以用它来选择性地为 HTML 元素添加样式。
CSS规则集
![](https://mdn.mozillademos.org/files/16483/css-declaration.png)
-
选择器(Selector):元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素。
-
声明(Declaration):如
color: red;
用来指定添加样式元素的属性。 -
属性(Properties):本例中
color
就是<p>
元素的属性。 -
属性的值(Property value):从指定属性的众多外观中选择一个值。
常用CSS选择器
选择器的种类远不止于此,更多信息请参阅 选择器。
选择器 | 示例 |
---|---|
类型选择器 | h1 { } |
通配选择器 | * { } |
类选择器 | .box { } |
ID选择器 | #unique { } |
标签属性选择器 | a[title] { } |
伪类选择器 | p:first-child { } |
伪元素选择器 | p::first-line { } |
后代选择器 | article p |
子代选择器 | article > p |
相邻兄弟选择器 | h1 + p |
通用兄弟选择器 | h1 ~ p |
联合选择 | p, li, h1 { } |
-
CSS选择器优先级:范围越小优先级越高
-
! important(强制优先) > 行内样式 > id选择器 > 类选择器 > 标签通配符 > 浏览器默认属性
盒子模型与常用属性
![](https://mdn.mozillademos.org/files/9443/box-model.png)
CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性:
-
padding
:即内边距,围绕着内容(比如段落)的空间。 -
border
:即边框,紧接着内边距的线。 -
margin
:即外边距,围绕元素外部的空间。 -
width
:元素的宽度 -
background-color
:元素内容和内边距底下的颜色 -
color
:元素内容(通常是文本)的颜色 -
text-shadow
:为元素内的文本设置阴影 -
display
:设置元素的显示模式(如给与块级元素行为)
常用字体与文本样式:
-
font-family
:字体 -
font-size
:字体大小 -
line-height
:行高 -
letter-spacing
:字间距