3、字体、背景、和文本的属性
1，CSS当中的样式属性详解
Css当中的属性非常多，大体上可以分为以下几类：字体、背景、文本、位置、布局、边缘、列表。
1）、字体
字体的属性主要包括文字的字体、大小、颜色、显示效果等基本样式，下面是各种字体属性的详细介绍。
Font-family:该属性用于设置字体系列。
Font-size:该属性定义文字的大小，可以使用度量单位来设置字体的大小，也可以使用一个相对的字体大小。还可以使用绝对的大小标记符。
绝对大小的设置为 xx-small、x-small、small、medium、large、x-large、xx-large中的任意一个。Xx-small为最小，xx-large为最大。
font-style
该属性用于定义字体样式为Normal、Italic或者Oblique（斜体）。
text-decoration
该属性用于在文本中条件下划线、上划线、中划线、闪烁效果。
font-weight
该属性用于设置粗体字的磅值
该属性的值有：normal、bold、bolder、lighter、100~900
2)背景
背景包括背景颜色、背景图像、以及背景图像的控制。
Background-color:设置背景色，transparent表示透明的背景色。
Background-image：设置元素的背景图像
Background-repeat：确定背景图像是否以及如何重复。
这个属性的取值no-repeat：表示背景图像只在元素的显示区域中出现一遍。
Repeat：在水平和垂直方向上垂直。
Repeat-x和Repeat-y分别在水平或者垂直方向上重复
Background-attachment：确定背景图像是否跟随内容滚动，
设置为fixed时，表示固定背景图像，为scroll时，表示图像跟随内容的移动而移动。
Background-position:指定背景图像的水平位置和垂直位置。水平位置的取值可以是left、center、right。也可以是数值。
垂直的取值可以是top、center、bottom。也可以是数值。
3）文本
文本的属性包括：文字间距、对齐方式、上标、下标、排列方式、首行缩进。
Word-spacing:设置单词之间的间距。
Letter-spacing：设置字符之间的间距
Text-align：设置文本的水平对齐方式，取值可以是left、right、center、justfy
Text-indent：设置第一行文本的缩进值
Line-height：设置文本所在行的行高。
文档流
4）位置
位置属性就是制定元素的位置。
Position：设置对象的定位方式。有三种取值：absolute(绝对定位)、relative(相对定位)和static(无特殊定位)默认为static。
Left：设置元素左边的水平位置
Top：设置元素顶部的垂直位置
Width：设置元素显示的宽度
Height：设置元素显示的高度
Z-index:使用定位后，
5、边缘
Margin类用于设置元素的边界与其他元素的空隙大小。
Margin-top：设置元素的上边界和与其他元素之间的空隙大小。
Margin-right：设置元素的右边界与其他元素之间的空隙大小。
Margin-bottom：设置元素的下边界与其他元素之间的空隙大小。
Margin-left：设置元素的左边界与其他元素之间的空隙大小。
Margin：用作上面4个属性的略写。
代码：字体属性
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> p { font-family:'Comic Sans MS'; font-size:xx-large; color:green; font-style:italic; text-decoration:none; } a { text-decoration:none; } </style> </head> <body> <a href="#">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a> <p>今天中午我决定去买58908094个茶叶蛋吃</p> <p>今天中午我决定去买5个茶叶蛋吃</p> <p>今天中午我决定去买5个茶叶蛋吃</p> <p>今天中午我决定去买5个茶叶蛋吃</p> <p>今天中午我决定去买5个茶叶蛋吃</p> <p>今天中午我决定去买5个茶叶蛋吃</p> </body> </html>
代码：背景属性
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /*body { background-image:url(images/1.jpg); background-attachment:scroll; }*/ div.div1 { height:500px; background-color:yellow; background-image:url(images/1.jpg); background-repeat:no-repeat; background-position:right; } </style> </head> <body> <div class="div1"></div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /> </body> </html>
代码：文本属性
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> div.div1 p { background-color:yellow; word-spacing:20px; letter-spacing:20px; } div.div2 p { text-align:center; text-indent:30px; background-color:green; line-height:35px; } </style> </head> <body> <div class="div1"> <p>学了 不一定 会，会了 不一定 能 找到 工作 ，找到工作不一定高薪，高薪不一定能买得起房子，买得起房子不一定能取得其老婆，取得其老婆不一定能以下省略一千字。。。。</p> </div> <div class="div2"> <p>我要好好学习天天向上，否则就单身一辈子</p> </div> </body> </html>
