CSS

CSS通常译为层叠样式表或级联样式表。使用层叠样式可以更有效的控制网页的外观，并扩充精确设置网页元素位置和创建特殊效果的能力。可以将内容与表现形式分开。

一．创建和应用CSS样式

1.1创建和应用类样式

在HTML 文档的头文件部分，可以<style>标签用于指定嵌入文档的样式表，并在<style>与</style>标签之间定义CSS 类样式。

<!—

[*|标签].类名称{属性：值;属性：值;……}

………………

</style>

*号表示CSS样式可以应用与所有包含class属性的HTML标签中。

使用某个标签名称表示该CSS类样式只能用于该标签所包含的内容。

1.2应用HTML标签样式

<!—

选择符1{属性:值;属性：值;……}

选择符2{属性:值;属性:值;…….}

</style>

例: p{font-family:”黑体”;font-size:9px;}

1.3创建高级样式

1组合选择符

<!—

选择符1，选择符2，…{属性:值;属性：值;……}

</style>

2情景选择符

加入希望所有出现在段落中的斜体字均以蓝色显示，就需要用 p em 作为选择符，其中 p 成为情景选择符。

<!—

情景标签选择符{属性:值;属性：值;……}

</style>

3id选择符

<!—

[标签]#类选择符名称{属性：值;属性：值;….}

………

</style>

其中类选择符名称由用户自己指定。通常在网页正文中可以通过id属性将上述样式应用与按钮。

4伪类选择符

选择符：伪类{属性:值;属性:值;…..}

通过使用伪类选择符定义网页中超链接的外观。此时使用 a 作为选择符，伪类名称包括link,visited,hover,active 分别表示未访问的超链接，以访问的超链接，鼠标指针指向的超链接以及活动的超链接。

二．设置CSS属性

2.1常用字体属性

1. font-family: name

2. font-size: absolute-size|relative-size|length

3. color: color

4. font-style: normal|italic|oblique

5. line-height:normal|length

6. font-weight: normal|bold|bolder|lighter|number

7. text-transform: uppercase|lowercase|capitalize|none

8. font-variant:normal|small-caps

用于设置对象中的文本是否为小型大写字母。

9. text-decoration:underline|overline|line-throungh|blink|none

10. font:font-style||font-variant||font-weight||font-size||line-height||font-familly

2.2 设置背景属性

2.2.1 与背景设置相关的CSS属性

1 background-color: color|transparent

设置对象的背景颜色

2 background-image: url(URL) | nonr

设置对象的背景图像

3 background-repeat: repeat | no-repeat |repeat-x |repeat-y

设置图像如何被重复

4 background-attachment: scroll | fixed

用于设置背景图像是随对象滚动还是固定的

5 backgroud-position : length || length

background-positon : position || position

用于设定图像的最初位置

6 background: background-color || background-image || background-repeat||

background-attachment || background-positon

复合属性，用于设置对象的背景样式

2.2.2区块属性

1 word-spacing : normal | length

设置英文单词之间的距离

2 letter-spacing : normal | length

设置文字之间的属性

3 text-align: left | center | right | justify

设置水平对齐方式

4 text-indent: length

设置对象中文本的缩进量

5 white-space: normal | pre | nowrap

如何处理元素内的空格

6 display: block | inline | list-item |none

设置如何处理元素内的换行

2.2.3 边框属性

1 border: border-width || border-style || border-color

复合属性

2 border-color: color

设置边框四周的颜色，一个参数用于四周，二个参数第一个用于上下第二个用于左右，三个参数第一个上第二个左右第三个下，四个参数分别作用与上à右à下à左。

4 border- medium | thin | thick | length

分别设置上下左右边框

Border-top border-top-color border-top-style border-top-width

Border-left border-bottom border-right

其中最重要的一部分Div并没有介绍，有空整理一下。