CSS

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。

CSS3

摘要

CSS介绍

CSS基础语法

CSS选择器

element/id/class/......

背景

CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果

background-attachment

背景图像固定或随着页面其他部分滚动

background-color

background-image

background-position

background-repeat

文本

color

文本颜色

direction

文本方向

line-height

行高

letter-spacing

字符间距

text-align

对齐文本

text-decoration

向文本添加修饰

text-indent

缩进文本首行

text-transform

元素中的字母

unicode-bidi

文本方向

white-space

元素中空白的处理方式

word-spaccing

字间距

字体

font-family

font-size

font-style

font-variant

以小型大写字体或正常字体显示文本

font-weight

字体粗细

链接

a:link

a:visited

a:hover

鼠标指针位于连接上

a:active

被点击时刻

列表

list-style

list-style-image

list-style-position

list-style-type

表格

表格边框

折叠边框

表格宽高

表格文本对齐

表格内边距

表格颜色

轮廓

outline

轮廓属性

outline-color

outline-style

outline-width

表单

新增的主体结构元素

article

section

nav

aside

time

pubdate

全局属性

contentEditable

可编辑

designMode

hidden

spellcheck

检查拼写

tabindex

新增的非主体结构元素

header

footer

hgroup

address

表单单独属性

formaction

formmethod

formenctype

编码

formtarget

autofocus

required

labels

定位

positon

static

fixed

relative

absolutely

top/left/right/buttom

方向偏移量

overflow

元素溢出其区域发生的事情

clip

元素显示形状

vertical-align

垂直对齐方式

z-index

堆叠顺序/越大越靠前

浮动

left

right

none

不浮动

inherit

从父级继承浮动属性

去除浮动

clear

left

right

both

盒子模型

padding

padding-left

padding-right

padding-bottom

padding-top

border

border-top-style

border-width

margin

margin-top

content

width

height

常用操作

对齐

使用margin属性进行水平对齐

使用position属性进行左右对齐

使用float属性进行左右对齐

尺寸

height

line-height

max-height

max/min-width

max/min-width

width

分类

clear

设置一个元素的侧面是否允许其他浮动元素

cursor

规定当指向某元素之上时显示的指针类型

display

设置是否以及如何显示元素

float

定义浮动

position

visibility

设置是否可见

导航栏

垂直导航栏

水平导航栏

导航栏效果

图片

动画效果

2D/3D转换

2D

translate()

rotate()

scale()

skew()

matrix()

3D

rotateX()

rotateY()

过渡

transition

设置四个过渡属性

transition-property

过渡的名称

transition-duration

过渡效果花费的时间

transition-timing-function

过渡效果的时间曲线

transition-delay

过渡效果开始时间

动画

遵循@keyframes规则

动画时长

动画名称

多列

创建多列来对文本或者区域布局

属性

column-count

column-gap

column-rule