网页设计中的CSS样式代码详解

CSS 背景属性

属性 描述 值

IE

4

F

1

N

6

W3C

1

background

简写属性，作用是将背景属性设置在一个声明中。

background-color

background-image

background-repeat

background-attachment



on

background-attachment

背景图像是否固定或者随着页面的其余部分滚动。

background-color

设置元素的背景颜色。

background-positi

scroll

fixed

4 1 6 1

color-rgb

color-hex

color-name

transparent

url

none

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

x-% y-%

4 1 4 1

background-image

把图像设置为背景。

4 1 4 1

background-position

设置背景图像的起始位置。

4 1 6 1

x-pos y-pos

repeat

repeat-x

repeat-y

no-repeat

4 1 4 1 background-repeat

设置背景图像是否及如何重复。

CSS 边框属性 (border)

属性 描述 值

IE

4

F

1

N

4

W3C

1

border

简写属性。作用是在一个声明中用来设置四个边框的所有属性。

border-width

border-style

border-color

border-bottom

简写属性。作用是在一个

声明中用来设置下边框的所有属性。

border-bottom-width

4 1 6 1

border-style

border-color

border-color

border-style

thin

medium

thick

length

color 4 1 6 1

4

4

4

1

1

1

6

6

4

2

2

1

border-bottom-color

border-bottom-style

border-bottom-width

设置下边框的颜色。

设置下边框的样式。

设置下边框的宽度。

border-color

设置四个边框的颜色，可以设置一到四个颜色。

border-left

简写属性。用于在一个声

明中设置左边框的所有属性。

th

border-left-wid4 1 6 1

border-style

border-color

border-color

border-style

thin

medium

thick

length

border-right-width

4 1 6 1

4

4

4

1

1

1

6

6

4

2

2

1

border-left-color

border-left-style

border-left-width

设置左边框的颜色。

设置左边框的样式。

设置左边框的宽度。

border-right

简写属性。将所有用于右

边框的属性设置于一个声明中。

border-style

border-color

border-color

border-style

thin

medium

thick

length

none

hidden

dotted

dashed

solid

4 1 6 1

4

4

4

1

1

1

6

6

4

2

2

1

border-right-color

border-right-style

border-right-width

设置右边框的颜色

设置右边框的样式

设置右边框的宽度。

border-style

设置四个边框的样式，可

以设置一到四个样式。

border-top

简写属性。将所有用于上

边框的属性设置于一个声明中。

h

double

groove

ridge

inset

outset

border-top-widt4 1 6 1

border-style

border-color

border-color

border-style

thin

medium

thick

length

thin

medium

thick

length

4 1 4 1

4

4

4

1

1

1

6

6

4

2

2

1

border-top-color

border-top-style

border-top-width

设置上边框的颜色。

设置上边框的样式。

设置上边框的宽度。

border-width

简写属性。在一个声明中

设置四个边框的宽度，可

以设置一到四个值。

CSS 文本属性

属性 描述 值

IE F N W3C

color

设置文本颜色。

color 3

6

1

1

4

6

1

2

direction

设置文本方向。

ltr

rtl

normal

length

left

right

center

justify

none

underline

overline

line-through

blink

length

%

letter-spacing

设置字符间距。

4 1 6 1

text-align

对齐元素中的文本。

4 1 4 1

text-decoration

向文本添加修饰。

4 1 4 1

text-indent

缩进元素中文本的首

行。

4 1 4 1

text-shadow

none

color

length

none

capitalize

uppercase

lowercase

normal

embed

text-transform

控制元素中的字母。

4 1 4 1

unicode-bidi

设置文本方向。



5 2

bidi-override

normal

pre

nowrap

normal

length

6 1 6 1

5 1 4 1 white-space

设设置元素中空白的

处理方式。

word-spacing

设置字间距。

CSS 字体属性 (font)

属性 描述 值

IE

4

F

1

N

4

W3C

1

font

简写属性。作用是将所有针对字体的属性设置在一个声明中。

font-style

font-variant

font-weight

font-size/line-height



font-family

字体类型名称或者针对

某元素的类属族名名称

的优先列表。

font-size

设置字体的尺寸。

font-family

caption

icon

menu

message-box

small-caption

status-bar

family-name

generic-family

3 1 4 1

xx-small

x-small

small

medium

large

x-large

xx-large

3 1 4 1

font-size-adjust

为元素规定 aspect

值。

font-stretch

收缩或拉伸当前的字体

族。

smaller

larger

length

%

none number - - - 2

normal

wider

narrower

ultra-condensed

extra-condensed

condensed

semi-condensed

semi-expanded

expanded

extra-expanded

ultra-expanded

normal

italic

oblique

normal

small-caps

normal

bold

bolder

lighter

100

200

300

400

500

600

700

800

900

- - - 2

font-style

设置字体样式。

4 1 4 1

font-variant

以小型小写字体或者正

常字体显示文本

4 1 6 1

font-weight

设置字体的粗细。

4 1 4 1

CSS 外边距属性 (margin)

属性 描述 值

IE

4

F

1

N

4

W3C

1

margin

简写属性。在一个声明



margin-top

margin-right

margin-bottom

中设置外边距属性。

margin-bottom

设置元素的下外边距。

margin-left

auto

length

%

auto

length

%

auto

length

%

auto

length

%

3 1 4 1

3 1 4 1

3 1 4 1

4 1 4 1

margin-left

设置元素的左外边距。

margin-right

设置元素的右外边距。

margin-top

设置元素的上外边距。

CSS 内边距属性 (padding)

属性 描述 值

IE

4

F

1

N

4

W3C

1

padding

简写属性。作用是在一个声明中设置元素的内边距属性。



padding-top

padding-right

padding-bottom

padding-left

length

%

length

%

length

%

length

%

padding-bottom

设置元素的下内边距。

4 1 4 1

padding-left

设置元素的左内边距。

4 1 4 1

padding-right

设置元素的右内边距。

4 1 4 1

padding-top

设置元素的上内边距。

4 1 4 1

CSS 列表属性 (list)

属性 描述 值

IE

4

F

1

N

6

W3C

1

list-style

简写属性。用于将所有用于列表的属性设置于一个声明之中。

ion

list-style-type

list-style-posit

list-style-image

将图象设置为列表项标

记。

list-style-position

list-style-image

none

url

inside

4 1 6 1

4 1 6 1

设置列表中列表项标记

被放置的位置。

list-style-type

设置列表项标记的类型。



outside

none

disc

circle

square

decimal

decimal-leading-zero

lower-roman

upper-roman

lower-alpha

upper-alpha

lower-greek

lower-latin

upper-latin

hebrew

armenian

georgian

cjk-ideographic

hiragana

katakana

hiragana-iroha

katakana-iroha

auto

length

1 7 2

4 1 4 1

marker-offset

内容生成

属性 描述 值

IE F N W3C

content

生成文档中的内容。与 :before 以及 :after 伪元素配合使用。

string

url

counter(name)

counter(name,

list-style-type)

counters(name, string)

counters(name, string,

list-style-type)

attr(X)

open-quote

close-quote

no-open-quote

no-close-quote

1 6 2

counter-increment

设置某个选取器每次出现的计数器增量。

none

identifier number

2

counter-reset

设置某个选择器出现次数的计数器的值。

none

identifier number

2

quotes

设置引号的类型。

none

string string

- 1 6 2

轮廓

属性 描述 值

IE F N W3C

outline

简写属性。用来在一个声明中设置所有的 outline 属性。

outline-color

outline-style

outline-width

- 1.5 - 2

outline-color

设置围绕元素的轮廓的颜色。

color

invert

- 1.5 - 2

outline-style

设置围绕元素的轮廓的样式。

none

dotted

dashed

solid

double

groove

ridge

inset

outset

- 1.5 - 2

outline-width

设置围绕元素的轮廓的宽度。

thin

medium

thick

length

- 1.5 - 2

CSS 尺寸属性 (Dimension)

属性 描述 值

IE

4

F

1

N

6

W3C

1

height

设置元素高度。

auto

length

%

normal

number

length

%

line-height

设置行间距。

4 1 4 1

max-height

设置元素的最大高度。

none

length

%

none

length

%

length

%

length

%

auto

%

length

- 1 6 2

max-width

设置元素的最大宽度。

- 1 6 2

min-height

设置元素的最小高度。

- 1 6 2

min-width

设置元素的最小宽度。

- 1 6 2

width

设置元素的宽度。

4 1 4 1

CSS 分类属性 (Classification)

属性 描述 值

IE

4

F

1

N

4

W3C

1

clear

设置不允许存在浮动对象的边

left

right

both

none

url

auto

crosshair

default

pointer

move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help

none

inline

block

cursor

规定光标类型（形状）

4 1 6 2

display

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

4 1 4 1

p

list-item

run-in

compact

marker

table

inline-table

table-row-grou





float

设置图像或文本出现于另一元素中的何处

table-header-group

table-footer-group

table-row

table-column-group

table-column

table-cell

table-caption

left

right

none

static

relative

absolute

fixed

visible

hidden

collapse

4 1 6 2

4 1 4 2

4 1 4 1

position

元素的定位方式：静态、

相对定位、绝对定位、固

定定位

visibility

设置元素可见或不可见

CSS 定位属性 (Positioning)

属性 描述 值

IE

5

F

1

N

6

W3C

2

bottom

设置定位元素下外边距边界与其包含块下边界之间的偏移。

auto

%

length

clip

设置元素的形状。

shape

auto

auto

%

length

visible

4 1 6 2

left

设置定位元素左外边

距边界与其包含块左

边界之间的偏移。

overflow

设置当元素的内容溢

4 1 4 2

4 1 6 2

出其区域时发生的事

情。

hidden

scroll

auto

static

relative

absolute

fixed

auto

%

length

auto

%

length

baseline

sub

super

top

text-top

middle

bottom

text-bottom

length

%

auto

number

4 1 6 2

4 1 4 1

4 1 4 2

5 1 6 2

4 1 4 2

position

把元素放置到一个静

态的、相对的、绝对的、

或固定的位置中。

right

设置定位元素右外边

距边界与其包含块右

边界之间的偏移。

top

设置定位元素的上外

边距边界与其包含块

上边界之间的偏移。

vertical-align

设置元素的垂直排列。

z-index

设置元素的堆叠顺序。

CSS 表格属性

属性 描述

border-collapse

设置是否把表格边框合并为单一的边框。

border-spacing

设置分隔单元格边框的距离。（仅用于 "separated borders" 模型）

caption-side

设置表格标题的位置。

empty-cells

设置是否显示表格中的空单元格。（仅用于 "separated borders" 模型）

table-layout

设置显示单元、行和列的算法。

CSS 伪类

伪类 作用

IE F N W3C

:active

将样式添加到被激活的元素。

4 1 8 1

:focus

将样式添加到被选中的元素。

- - - 2

:hover

当鼠标悬浮在元素上方时，向元素添加样式。

4 1 7 1

:link

将特殊的样式添加到未被访问过的链接。

3 1 4 1

:visited

将特殊的样式添加到被访问过的链接。

3 1 4 1

:first-child

将特殊的样式添加到元素的第一个子元素。

1 7 2

:lang

允许创作者来定义指定的元素中使用的语言。

1 8 2

CSS 伪元素

伪元素 作用

IE F N W3C

:first-letter

向文本的第一个字母添加特殊样式。

5 1 8 1

:first-line

向文本的首行添加特殊样式。

5 1 8 1

:before

在元素内容之前插入内容。

1.5 8 2

:after

在元素内容之后插入内容。

1.5 8 2