CSS指层叠样式表。

CSS基础语法

1
2
3

selector {
	property: value
}

属性多于1个时，属性之间要用分号隔开。

如果值多于1个单词，则需要加上引号。

CSS高级语法

1
2
3

selector1, selector2, ..., selectorX {
	property: value
}

选择器分组，同时指定多个相同的样式。

1
2
3

body {
	color: blueviolet
}

继承，若<body>内的元素没有单独设定样式，则继承<body>的样式。

派生选择器

后代选择器

根据元素在其上下文位置定义样式。

1
2
3

li strong {
	color: blue
}

会对

1
2
3

<li>
	<strong>BLUE</strong>
</li>

产生效果。

子元素选择器

1
2
3

li>strong>i {
	color: blue
}

不可以跳跃层级，而后代选择器可以。

相邻兄弟选择器

1
2
3

h1+p {
	......
}

可选择紧接在另一元素后的具有相同父元素的元素。

id选择器

为指定id的HTML元素指定样式。

1
2
3

#id {
	color: blue
}

可以和派生选择器一起使用。

类选择器

类似id选择器，也可以和派生选择器一起使用。

1
2
3

.class {
	color: blue
}

多类选择器

HTML中，class值可以包含多个值，用空格隔开。元素将同时受多种类选择器的控制。

还可以为特定的多类指定样式。

.important {
    font-weight: bold
}
.warning {
    font-style: italic
}
.important.warning {
    background: silver
}

属性选择器

对带有指定属性的HTML元素设定样式。

[title] {
	color: blue
}
[title=te] {
	color: red
}
[title~="title"] {
    color: green
}

会对

<p title="t">BLUE</p>
<p title="te">RED</p>
<p title>BLUE</p>
<p title="title">GREEN</p>
<p title="title hello">GREEN</p>

产生效果。

1
2
3

* {
	......
}

通配符。

CSS背景

属性	描述
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background-color	设置元素的背景颜色
background-image	把图像设置为背景
background-position	设置背景图像的起始位置
background-repeat	设置背景图像是否及如何重复

background-color属性不能继承，默认值为transparent（透明）。

CSS文本

属性	描述
color	设置文本颜色
direction	设置文本方向
line-height	设置行高
letter-spacing	设置字符间距
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-transform	控制元素中的字母
unicode-bidi	设置文本方向
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距
text-shadow	设置文字阴影
text-wrap	设置换行规则

CSS字体

CSS字体属性定义文本的字体系列、大小、加粗、风格和变形。

属性	描述
font-family	设置字体系列
font-size	设置字体的尺寸
font-style	设置字体风格
font-variant	以小型大写字体或者正常字体显示文本
font-weight	设置字体的粗细

CSS链接

CSS链接的四种状态：

a:link：普通的、未被访问的链接
a:visited：已访问的链接
a:hover：用户鼠标位于链接上方
a:active：链接被点击的时刻

a:link {
	color: #FF0000
}
a:hover {
	color: #00FF00
}

text-decoration属性用于去掉链接的下划线。

background-color属性设置背景颜色。

CSS列表

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图象设置为列表项标志
list-style-position	设置列表中列表项标志的位置
list-style-type	设置列表项标志的类型

CSS表格

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框
border-spacing	设置分隔单元格边框的距离
caption-side	设置表格标题的位置
empty-cells	设置是否显示表格中的空单元格
table-layout	设置显示单元、行和列的算法

CSS轮廓

属性	描述
outline	在一个声明中设置所有的轮廓属性
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度

CSS定位

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移
overflow	设置当元素的内容溢出其区域时发生的事情
clip	设置元素的形状
vertical-align	设置元素的垂直对齐方式
z-index	设置元素的堆叠顺序

CSS浮动

float浮动值：left、right、none、inherit。

clear清除浮动。

CSS盒子模型

由margin（外边距）、border（边框）、padding（内边距）、content（内容）组成。

width与height属性针对的是content的宽和高。

四部分内容均有相关属性设置。

CSS外边距有合并效果。

CSS2D、3D转换

transform属性。

CSS过渡

使元素从一种样式转换到另一种样式。

transition属性。

CSS动画

animation属性。

用@keyframes关键字定义效果。

CSS多列

column-width、column-gap等属性可以高效地实现分列的瀑布流式效果。