从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>