CSS基本语法(2)

浏览数：18 / 时间：2015年06月09日

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>

View Code

二、背景属性

背景属性参数： 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>

View Code

三、列表常用属性

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>