CSS, Cascading Style Sheets 层叠样式表,用于协助 HTML 排版布局。
使用
使用 CSS 的方法有三种:
- 外部样式表
- 内部样式表
- 内联样式
外部样式表
当样式较为复杂或复用性较强时,外部样式表是很好的选择,你可以在一个文件中定义整个站点的样式,每个 HTML 文件使用 link
标签链接到样式表,如:
<link rel="stylesheet" type="text/css" href="mystyle.css">
通常,这条语句存在于 head
标签中。
内部样式表
当一些样式只会被应用在单个文件时,可以考虑使用内部样式表。如:
<head>
<style>
p {
text-indent: 2rem;
}
body {
background-image: url("images/back40.gif");
}
</style>
</head>
内部样式定义在 head
中的 style
标签内。
内联样式
当一些样式只被某个元素需要时,可以考虑使用内联样式。如:
<p class="red" style="color: red;">This is a subtitle.</p>
<p class="orange bold" style="background-color: orange; font-weight: bold;">This is a small title with multiple class.</p>
<p class="red orange bold large" style="color: red; background-color: orange; font-weight: bold; font-size: x-large;">Class selector can apply on more than one element.</p>
通常情况下,我们应当避免内联样式。
语法

CSS 主要由两部分构成:选择器 与 声明。
图片来源:RUNNOOB
选择器
选择器表明了声明规则应该应用于何处,如:
h1 {
font-size: large;
}
这条语句表明了 large
字体应当应用于所有 h1
标签。
.header {
color: red;
}
这条语句表明了所有带有 header
类的元素都应是红色字体。
稍后我们会讲到这些选择器的区别。
ID 选择器
在 HTML 中,我们使用 id
属性 (attr) 来表示 ID;
而在 CSS 中,我们使用 #
来表示 ID。如:
#title-1 {
font-size: 2rem;
}
这条 CSS 语句所声明的规则会应用在 ID 为 title-1
的 HTML 元素上,如:
<h1 id="title-1">Maybe there is a title</h1>
预览:
Maybe there is a title
Class 选择器
在 HTML 中,我们使用 class
属性 (attr) 来表示类;
而在 CSS 中,我们使用 .
来表示 Class。如:
.red {
color: red;
}
.orange {
background-color: orange;
}
.bold {
font-wight: bold;
}
.large {
font-size: x-large;
}
这条语句所声明的规则会应用在 Class 为 title
的 HTML 元素上,如:
<p class="red">This is a subtitle.</p>
<p class="orange bold">This is a small title with multiple class.</p>
<p class="red orange bold large">Class selector can apply on more than one element.</p>
<p>Unless it doesn't have this attribute.</p>
预览:
This is a subtitle.
This is a small title with multiple class.
Class selector can apply on more than one element.
Unless it doesn't have this attribute.
Attr 选择器
有时,我们需要将样式应用在含有某个属性 (attr) 的元素上,如:
<p>Either this one.</p>
<p data-attr="true">This one with 'data-attr' attribute and its value is 'true'.</p>
<p data-attr="false">Nor this one.</p>
这时,我们可以使用 attr 选择器:
[data-attr=true] {
color: red;
}
也可以通过 attr()
方法动态获取属性值来应用,可以参考 Mozilla Developer 中的解释。内容不属于常用,不再赘述。
组合选择器
后代选择器
后代选择器用于选择某元素的后代元素,如选择所有包含在 div
元素中的 p
元素:
div p {
color: red;
}
子元素选择器
子元素选择器只能选择某元素的直接子元素,如:
div > p {
color: red;
}
<div>
<p>This is inside element.</p>
<div>
<p>But this is not.</p>
</div>
</div>
<p>But this is not.</p>
预览:
This is inside element.
But this is not.
But this is not.
相邻兄弟选择器
相邻兄弟选择器可选择紧随其后且父级相同的元素,如:
div + p {
color: red;
}
<div>
<p>Not me.</p>
</div>
<p>I'm red.</p>
预览:
Not me.
I'm red.
后续兄弟选择器
后续兄弟选择器类似于相邻选择器,但是会选取所有与指定元素同级且之后的元素,如:
div ~ p {
color: red;
}
<div>
<p>Not me.</p>
</div>
<p>I'm red.</p>
<p>I'm red, too.</p>
<p>Also me.</p>
预览:
Not me.
I'm red.
I'm red, too.
Also me.
伪类选择器
伪类选择器使用 :
来声明,如:
div:hover {
background-color: red;
}
这条语句表明了当鼠标悬浮在 div
元素上时,div
的背景颜色变为红色。
:first-child
选择第一个符合选择器规则的元素,如:
p:first-child {
color: red;
}
<p>I'm red.</p>
<p>Not me.</p>
预览:
I'm red.
Not me.
:hover
当鼠标悬浮在该元素上时处于该状态。
::before & ::after
配合 content
属性 (prop) 来为元素之前或之后添加内容,如:
p::before {
content: "BEFORE";
font-size: x-large;
}
p::after {
content: "AFTER";
background-color: red;
}
布局
display: none
隐藏元素,不在 DOM 中渲染。
display: inline
将其显示为内联元素(不换行,一行展示)。
display: block
将其展示为块元素(换行,一个元素一行)。
display: flex
Flex 弹性布局,重点,可参考 阮一峰老师的教程 。
定位
Position 定位属性指定了元素的定位类型,有如下五个值:
- static
- relative
- fixed
- absolute
- sticky
position: static
默认值,遵循正常的文档流,不会受到 top
, bottom
, left
或 right
影响。
position: fixed
相对于浏览器窗口固定,不随窗口滚动而移动。
常用于提示框、弹出层等非文档内容。
position: relative
相对其默认位置的定位,可以搭配 top
等属性。
position: absolute
相对于其直接父级定位,与文档流无关,所以不会占据空间,也可以与其他元素重叠。
position: sticky
这是一个特殊的定位方式,有两种体现形式:
默认情况下,它的表现与 position: relative
相同;
当页面滚动超出目标区域时,它的表现与 position: fixed
相同。
z-index: (number)
当元素处于可重叠的定位状态时(如 absolute,fixed 等),该属性表明了这些重叠元素的堆叠顺序,数值越大越靠上。
margin: (size)
该属性表明了元素的外边距,接受任意的距离数值。
padding: (size)
该属性表明了元素的内边距,接受任意的距离数值。
注意与提示
- 不要在属性值与单位间留有空格,如:
font-size: 10 px
,这是非法定义。 - 尽量在声明语句结尾加上
;
结束。