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>
坚持每天进一步一点点，加油！
时间： 2024-10-09 21:31:31