一、設(shè)置元素的顏色和透明度
a、color
color 屬性規(guī)定文本的顏色。這個屬性設(shè)置了一個元素的前景色（在 HTML 表現(xiàn)中，就是元素文本的顏色）；光柵圖像不受 color 影響。這個顏色還會應(yīng)用到元素的所有邊框，除非被 border-color 或另外某個邊框顏色屬性覆蓋。要設(shè)置一個元素的前景色，最容易的方法是使用 color 屬性。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{ 8 width: 100px; 9 height:100px;10 background: red;11 color:blue;12 border-width: 2px;13 border-style: solid;14 }15 </style>16 </head>17 <body>18 <div>19 abc20 </div>21 </body>22 </html>
b、opacity
opacity屬性設(shè)置元素的不透明級別。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{ 8 width: 100px; 9 height:100px;10 background: red;11 color:blue;12 opacity: 0.1;13 border-width: 2px;14 border-style: solid;15 }16 </style>17 </head>18 <body>19 <div>20 abc21 </div>22 </body>23 </html>
我們還可以使用rgba顏色或者h(yuǎn)sla顏色設(shè)置元素的透明度。
二、設(shè)置表格樣式
a、border-collapse
border-collapse 屬性設(shè)置表格的邊框是否被合并為一個單一的邊框，還是象在標(biāo)準(zhǔn)的 HTML 中那樣分開顯示。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #tb1{ 8 border-collapse: collapse; 9 }10 #tb2{11 border-collapse: separate;12 }13 </style>14 </head>15 <body>16 <table border="1" id="tb1">17 <tr>18 <th>姓名</th>19 <th>年齡</th>20 </tr>21 <tr>22 <th>li</th>23 <th>24</th>24 </tr>25 </table>26 <table border="1" id="tb2">27 <tr>28 <th>姓名</th>29 <th>年齡</th>30 </tr>31 <tr>32 <th>li</th>33 <th>24</th>34 </tr>35 </table>36 </body>37 </html>
b、border-spacing
border-spacing 屬性設(shè)置相鄰單元格的邊框間的距離（僅用于“邊框分離”模式）。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #tb1{ 8 border-collapse: separate; 9 border-spacing: 2px;10 }11 12 </style>13 </head>14 <body>15 <table border="1" id="tb1">16 <tr>17 <th>姓名</th>18 <th>年齡</th>19 </tr>20 <tr>21 <th>li</th>22 <th>24</th>23 </tr>24 </table>25 </body>26 </html>
c、caption-side
caption-side 屬性設(shè)置表格標(biāo)題的位置。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #tb1{ 8 caption-side: bottom; 9 }10 11 </style>12 </head>13 <body>14 <table border="1" id="tb1">15 <caption>16 學(xué)生信息17 </caption>18 <tr>19 <th>姓名</th>20 <th>年齡</th>21 </tr>22 <tr>23 <th>li</th>24 <th>24</th>25 </tr>26 </table>27 </body>28 </html>
d、empty-cells
empty-cells 屬性設(shè)置是否顯示表格中的空單元格（僅用于“分離邊框”模式）。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #tb1{ 8 border-collapse: separate; 9 empty-cells: hide;10 }11 #tb2{12 border-collapse: separate;13 empty-cells: show;14 }15 </style>16 </head>17 <body>18 <table border="1" id="tb1">19 <caption>20 學(xué)生信息21 </caption>22 <tr>23 <th>姓名</th>24 <th>年齡</th>25 </tr>26 <tr>27 <th>li</th>28 <th></th>29 </tr>30 </table>31 <table border="1" id="tb2">32 <caption>33 學(xué)生信息34 </caption>35 <tr>36 <th>姓名</th>37 <th>年齡</th>38 </tr>39 <tr>40 <th>li</th>41 <th></th>42 </tr>43 </table>44 </body>45 </html>
e、table-layout
tableLayout 屬性用來顯示表格單元格、行、列的算法規(guī)則。
固定表格布局與自動表格布局相比，允許瀏覽器更快地對表格進(jìn)行布局。在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾取卧耖g距，而與單元格的內(nèi)容無關(guān)。通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。
在自動表格布局中，列的寬度是由列單元格中沒有折行的最寬的內(nèi)容設(shè)定的。此算法有時會較慢，這是由于它需要在確定最終的布局之前訪問表格中所有的內(nèi)容。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #tb1{ 8 table-layout: fixed; 9 width: 20%;10 }11 #tb2{12 table-layout: auto;13 width: 20%;14 }15 </style>16 </head>17 <body>18 <table border="1" id="tb1">19 <caption>20 學(xué)生信息21 </caption>22 <tr>23 <th>姓名</th>24 <th>年齡</th>25 </tr>26 <tr>27 <th>lililiuasdadasda</th>28 <th>24</th>29 </tr>30 </table>31 <table border="1" id="tb2">32 <caption>33 學(xué)生信息34 </caption>35 <tr>36 <th>姓名</th>37 <th>年齡</th>38 </tr>39 <tr>40 <th>lililiuasdadasda</th>41 <th>24</th>42 </tr>43 </table>44 </body>45 </html>
三、設(shè)置列表樣式
a、list-style
list-style 簡寫屬性在一個聲明中設(shè)置所有的列表屬性。可以按順序設(shè)置如下屬性：
可以不設(shè)置其中的某個值，比如 "list-style:circle inside;" 也是允許的。未設(shè)置的屬性會使用其默認(rèn)值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 ol{ 8 list-style: lower-alpha inside; 9 }10 </style>11 </head>12 <body>13 <ol>14 <li>banana</li>15 <li>apple</li>16 <li>cabbage</li>17 </ol>18 </body>19 </html>
b、list-style-type
list-style-type 屬性設(shè)置列表項標(biāo)記的類型。
c、list-style-position
list-style-position 屬性設(shè)置在何處放置列表項標(biāo)記。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 ol.inside{ 8 list-style: lower-alpha inside; 9 }10 ol.outside{11 list-style: lower-alpha outside;12 }13 li{14 background: #ccc;15 }16 </style>17 </head>18 <body>19 <ol class="inside">20 <li>banana</li>21 <li>apple</li>22 <li>cabbage</li>23 </ol>24 <ol class="outside">25 <li>banana</li>26 <li>apple</li>27 <li>cabbage</li>28 </ol>29 </body>30 </html>
d、list-style-image
list-style-image 屬性使用圖像來替換列表項的標(biāo)記。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 ol.inside{ 8 list-style-image:url(https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3719996677,3436193373&fm=58&w=121&h=121&img.PNG&bpow=1024&bpoh=1024); 9 list-style-position: inside;10 }11 12 </style>13 </head>14 <body>15 <ol class="inside">16 <li>banana</li>17 <li>apple</li>18 <li>cabbage</li>19 </ol>20 21 </body>22 </html>四、設(shè)置光標(biāo)樣式
cursor
cursor 屬性規(guī)定要顯示的光標(biāo)的類型（形狀）。該屬性定義了鼠標(biāo)指針放在一個元素邊界范圍內(nèi)時所用的光標(biāo)形狀（不過 CSS2.1 沒有定義由哪個邊界確定這個范圍）。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 ol.inside{ 8 list-style-image:url(https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3719996677,3436193373&fm=58&w=121&h=121&img.PNG&bpow=1024&bpoh=1024); 9 list-style-position: inside;10 }11 li{12 cursor: help;13 }14 </style>15 </head>16 <body>17 <ol class="inside">18 <li>banana</li>19 <li>apple</li>20 <li>cabbage</li>21 </ol>22 23 </body>24 </html>鼠標(biāo)放到對應(yīng)元素上會顯示問號。
