2012/7/20CSS学习笔记
从CSS基本语句可以看出，属性石CSS 非常重要的部分。熟练掌握了CSS的各种属性将会是您编辑页面更加得心应手。下面我们就借助一些实例来讲解。
1.字体属性
这是最基本的属性，我们经常会用到。它主要包括以下这些属性：
| 属性 | 属性含义 | 属性值 |
| font-family | 使用什么字体 | 所有的字体 |
| font-style | 字体是否斜体 | Normal、italic、oblique |
| font-variant | 字体是否用小体大写 | Normal、small-caps |
| font-weight | 定义字体的粗细 | Normal、bold、bolder、lither等 |
| font-size | 定义字体的大小 | Absolute-size、relative-size、length、percentage等 |
2.颜色和背景属性:
| 属性 | 属性定义 | 属性书写格式 | 属性值 |
| Color | 定义前景色 | 例：p{color:red} | 颜色 |
| Backgroud-color | 定义背景色 | 例：body{backgroud-color:yellow} | 颜色 |
| Backgroud-image | 定义背景图案 | 例：body{backgroud:backgroud-image:url(.jpg)} | 图片路径 |
| Backgroud-repeat | 定义图案重复方式 | 例：body{backgroud-repeat；repeat-y} | Repeat-x,repeat-y、no-repeat |
| Backgroud-attachment | 设置滚动 | 例：body{background-attachmen:scroll} | Scroll Fixed |
| Backgroud-position | 背景图案的初始位置 | 例：body{backgourd:url(.jpg)top center} | Percentage、length、top、left、rigth、bottom等 |
比如代码：
color:yellow;
backgroud-img：url(ss01038.jpg);
backgroud-repeat:no-repeat;
margin-right:15em
这段代码设置了前景色为黄色，设置了背景图案地址，设置了背景图案不重复显示，另外还设置了距离右边框的距离。
3.文本属性
| 属性 | 属性定义 | 属性值 |
| Word-spacing | 定义了各个单词之间的间距 | Normal<length>(必须以长度为单位) |
| Letter-spacing | 定义了每个字母之间的间距 | 同上 |
| Text-decoration | 定义了文字的“装饰”样式 | None|underline|overline|line-through|blink |
| Vertical-align | 定义了元素在垂直方向上的位置 | Baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage> |
| Text-transform | 使文本转换为其他形式 | Capitalize|sub|super|top|text-top|middle|bottom|text-bottom|<percentage> |
| Text-align | 定义了文本的对齐方式 | Left|right|center|justify |
| Text-indent | 定义了文本的首行的缩进方式 | <length>|<percentage> |
| Line-height | 定义了文本的行高 | Normal|<number>|<length>|<percentage> |
利用文本属性中的Text-decoration属性就可以实现对超链接的修饰。看代码：
<html> <title>link css</title> <head> <style> <!-- //*定义伪类元素（a:）,大括号内定义了前景色属性和文本装饰属性， hover加上'font-size'属性目的是让鼠标激活链接时改变字体*// a:link{color:green;text-decoration:none} //*未访问时的状态，颜色为绿色(green),文本装饰属性（text-decoration）值为没有（none）*// a:visited{color:red,text-decoration:none} //*访问过的状态，颜色为红色(red),文本装饰属性值为没有*// a:hover{color:blue;text-decoration:overline;font-size:20pt} //鼠标激活的状态，颜色为蓝色，文本装饰属性为上划,字体大小为20pt*// --> </style> </head> <body> <p style="font-family:行书体; font-size:18pt"> <a href="http://www.baidu.com">未访问的连接</a></p> <p><a href="http://www.baidu.com">访问过的连接</a></p> <p><a href="http://www.baidu.com">鼠标激活的连接</a></p> </body> </html>
