CSSの基本構文(2)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSSの基本構文(2)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:44:45

オリジナル

1129 人が閲覧しました

基本的なCSS構文(2)

1. テキストのフォント属性

1. テキストの属性: line-height、text-align、letter-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>

ログイン後にコピー

2. 背景属性

背景属性パラメータ:background、background-color、background-img、background-repeat、background-position

1.background-repeat 属性の値:

repeat 水平方向と垂直方向に同時に並べて表示します、デフォルト値

repeat-x 水平方向に並べて表示します

repeat-y 垂直方向に並べて表示します

no-repeat 背景画像は表示されません繰り返しタイル化されます

2. 背景位置属性の値

Xpos Ypos X は水平方向を表します Y は垂直方向を表します (正の値は前方オフセットを表し、下方と左を表します。負の値は逆オフセットを表し、上方と右を表します) )

単語 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>

ログイン後にコピー

3. リストの共通属性

1. list-style 属性は、リスト項目のさまざまなスタイルを定義するために使用されます。は次のように説明されます。

none 修飾子なし

disc use with use out off off 's 's 's ‐ ‐ ‐ out‐、

に

 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>

ログイン後にコピー

毎日少しずつ進んでいきましょう！