Css介绍

分析一个典型CSS的语句：

p { COLOR:#FF0000 ; BACKGROUND:#FFFFFF }

其中"p"我们称为"选择符"(selectors)，指明我们要给"p"定义样式；
样式声明写在一对大括号"{}"中；
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
"#FF0000"和"#FFFFFF"是属性的值(value)。

1. 基本语法规范

1.1. 选择符

任何HTML元素（如：<p>）都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如：P { text-indent: 3em }当中的选择符是P。

1.1.1. 群选择符

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔：

P , td , li { font-size : 12px ; }

1.1.1. 类选择符

单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，元素P用不同的颜色显示代码 :

p.a { color: #191970 }

p.b { color: #4b0082 }

以上的例子建立了两个类，a和b，供HTML的p元素使用。CLASS属性是用于在HTML中以指明元素的类，例如，

<P CLASS=a>每个选择符只允许有一个类。</p>

<P CLASS=b>每个选择符只允许有一个类。</p>

类的声明也可以无须相关的元素:

.note { font-size: small }

在这个例子，名为note的类可以被用于任何元素。

一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small，但如果网页制作者决定改变这个类的样式，使得它不再是小字体的话，那么这个名字就变得毫无意义了。

1.1.1. ID 选择符

ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下:

#svp94O { text-indent: 3em }

这点可以参考HTML中的ID属性:

1.1.1. 关联选择符

关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如，以下的上下文选择符是.note .cn

.note .cn { background: yellow }

.cn 必须在.note 中才有效。

<tr>

</tr>

</table>

1.2. 属性

一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。

例如：

p { COLOR:#FF0000 ; BACKGROUND:#FFFFFF }

COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔。

1.3. 值

声明的值是一个属性接受的指定。例如，属性颜色能接受值red。

例如：

p { COLOR: red ; BACKGROUND:#FFFFFF }

"red"和"#FFFFFF"是属性的值(value)。

1.4. 伪类和伪元素

伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素（即同类元素的集合）。伪元素指元素的一部分，例如段落的第一个字母。

伪类或伪元素规则的形式如下：

选择符:伪类 { 属性: 值 } 或选择符:伪元素 { 属性: 值 }

伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:

选择符.类: 伪类 { 属性: 值 } 或选择符.类: 伪元素 { 属性: 值 }

CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}

a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}

a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}

a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

2. CSS属性列表

属性名称

属性含义

属性值

字体属性（Font）

font-family

font-style

font-variant

font-weight

font-size

使用什么字体

字体是否斜体

是否用小体大写

字体的粗细

字体的大小

所有的字体

Normal、italic、oblique

Normal、small-caps

Normal、bold、bolder、lithter等

Absolute-size、relative-size、length、percentage等

颜色和背景属性

Color

Background-color

Background-image

Background-repeat

Background-attachment

Background-position

定义前景色

定义背景色

定义背景图案

重复方式

设置滚动

初始位置

颜色

路径

Repeat-x、repeat-y、no-repeat

Scroll、Fixed

Percentage、length、top、left、right、bottom等

文本属性

Word-spacing

Letter-spacing

Text-decoration

Vertical-align

Text-transform

Text-align

Text-indent

Line-height

单词之间的间距

字母之间的间距

文字的装饰样式

垂直方向的位置

文本转换

对齐方式

首行的缩进方式

文本的行高

Normal <length>

同上

None|underline|overline|line-through|blink

lowercase|none

Left|right|center|justify

Normal|<number>|<length>|<percentage>

边距属性

Margin-top

Margin-right

Margin-bottom

Margin-left

顶端边距

右侧边距

底端边距

左侧边距

Length|percentage|auto

同上

填充距属性

Padding-top

Padding-right

Padding-bottom

Padding-left

顶端填充距

右侧填充距

底端填充距

左侧填充距

Length|percentage

同上

边框属性

Border-top-width

Border-right-width

Border-bottom-width

Border-left-width

Border-width

Border-color

Border-style

Border-top

Border-right

Border-bottom

Border-left

Width

Height

Float

Clear

顶端边框宽度

右侧边框宽度

底端边框宽度

左侧边框宽度

一次定义宽度

设置边框颜色

设置边框样式

一次定义顶端

一次定义右侧

一次定义底端

一次定义左侧

定义宽度属性

定义高度属性

文字环绕

哪一边环绕

Thin|medium|thick|length

同上

Color

None|dotted|dash|solid等

Border-top-width|color等

同上

Length|percentage|auto

Length|auto

Left|right|none

Left|right|none|both

分级属性

Display

White-space

List-style-type

List-style-image

List-style-position

List-style

定义是否显示

怎样处理空白

加项目编号

加图案

第二行起始位置

一次定义列表

Block、inline、list-item、none

Normal、pre、nowrap

Disc、circle、square等

<url>|none

Inside、outside

鼠标（Cursor）属性

自动

定位“十”字

默认指针

手形

移动

箭头朝右方

箭头朝右上方

箭头朝左上方

箭头朝上方

箭头朝右下方

箭头朝左下方

箭头朝下方

箭头朝左方

文本“I”形

等待

帮助

Auto

Crosshair

Default

Hand

Move

e-resize

Ne-resize

Nw-resize

n-resize

Se-resize

Sw-resize

s-resize

w-resize

Text

Wait

Help