CSS基本语法（2）
一、文本字体属性
1、 文本属性：line-height，text-align，letter-spacing，text-decoration，white-space
2、 字体属性：font，font-family，font-size，font-weight
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 4 <style type = "text/css"> 5 li{ 6 font: 15px 宋体; 7 text-align: left; 8 line-height: 28px; 9 } 10 .title{ 11 letter-spacing:5px; 12 white-space: nowrap; 13 text-decoration:underline; 14 } 15 .bigfont{ 16 font-size:16px; 17 color:red; 18 } 19 </style> 20 </head> 21 <body> 22 <div> 23 <ul> 24 <li class="title">CSS基本语法(2)</li> 25 <li class="bigfont">坚持不懈，努力学习CSS基本语法，为成为css高手而奋斗！</li> 26 <li>CSS的文本属性</li> 27 <li class="bigfont">学习CSS的下一步，是要更努力的学习javascript！</li> 28 <li>CSS的字体属性</li> 29 </ul> 30 </div> 31 </body> 32 </html>
二、背景属性
背景属性参数： background、background-color、background-img、background-repeat、background-position
1、background-repeat属性的取值：
repeat 横向纵向同时平铺，默认值
repeat-x 横向平铺
repeat-y 纵向平铺
no-repeat 背景图不重复平铺
2、background-position属性的取值
Xpos Ypos X表示水平方向 Y表示垂直方向（正值表示正向偏移，同时向下向左；负值表示反向偏移，同时向上向右）
X% Y% 使用百分比表示背景出现的位置 （30% 50%垂直方向居中，水平方向偏移30%）
X方向关键词 Y方向关键词 水平方向关键词left，center ，right 垂直方向关键词top，center，bottom
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 4 <style type = "text/css"> 5 div{ 6 background:url(img/test.jpg) no-repeat; 7 background-position:-100px 0px; 8 } 9 </style> 10 </head> 11 <body> 12 <div> 13 <h3>this is a test of background !</h3> 14 <h3>this is a test of background !</h3> 15 <h3>this is a test of background !</h3> 16 <h3>this is a test of background !</h3> 17 <h3>this is a test of background !</h3> 18 <h3>this is a test of background !</h3> 19 </div> 20 </body> 21 </html>
三、列表常用属性
1、list-style 属性用于定义列表项的各类风格，list-style属性取值说明如下：
none 无修饰符
disc 实心圆
circle 空心圆
square 实心正方形
decimal 数字
2、float 属性用于定义元素的浮动方向。
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 4 <style type = "text/css"> 5 li{ 6 150px; 7 color:red; 8 font:28px; 9 list-style:none; 10 float:right; 11 } 12 </style> 13 </head> 14 <body> 15 <div> 16 <ul> 17 <li>铅笔</li> 18 <li>钢笔</li> 19 <li>水笔</li> 20 <li>毛笔</li> 21 <li>画笔</li> 22 </ul> 23 </div> 24 </body> 25 </html>
坚持每天进一步一点点，加油！