CSS基本语法(2)_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:44:451135浏览
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 width: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>
坚持每天进一步一点点，加油！