CSS基本语法(2)_html/css_WEB-ITnose-html教學-PHP中文網

this is a test of background !

首頁

web前端

html教學

CSS基本语法(2)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:44 AM

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 id="this-is-a-test-of-background">this is a test of background !</h3>14           <h3 id="this-is-a-test-of-background">this is a test of background !</h3>15           <h3 id="this-is-a-test-of-background">this is a test of background !</h3>16           <h3 id="this-is-a-test-of-background">this is a test of background !</h3>17           <h3 id="this-is-a-test-of-background">this is a test of background !</h3>18           <h3 id="this-is-a-test-of-background">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>

登入後複製

坚持每天进一步一点点，加油！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn