Home  >  Article  >  Web Front-end  >  Basic CSS syntax (2)_html/css_WEB-ITnose

Basic CSS syntax (2)_html/css_WEB-ITnose

WBOY
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>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn