Home > Article > Web Front-end > Basic CSS syntax (2)_html/css_WEB-ITnose
Basic CSS syntax (2)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:451105browse
CSS basic syntax (2)
1. Text font attributes
1. Text attributes: line-height, text-align, letter-spacing, text -decoration, white-space
2. Font attributes: 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 attributes
Background attribute parameters: background, background-color, background-img, background-repeat, background-position
1. background-repeat attribute Value:
repeat Tile horizontally and vertically at the same time, default value
repeat-x Tile horizontally
repeat-y Tile vertically
no -repeat The background image is not repeatedly tiled
2. The value of the background-position attribute
Xpos Ypos X represents the horizontal direction Y represents the vertical direction (positive value represents positive offset, while Down to left; negative value means reverse offset, while upward to right)
X% Y% Use percentage to indicate the position where the background appears (30% 50% vertically centered, horizontal offset 30%)
3. Common attributes of lists
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. The list-style attribute is used to define various styles of list items. The value of the list-style attribute is explained as follows: none No modifier
disc Number
2. float attribute Used to define the floating direction of the element.
Keep going a little further every day, come on!
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>