其他css屬性和特性

阿新 • • 發佈：2021-10-01

其他css屬性和特性

設定元素的顏色和透明度

下表列出了這些屬性。

顏色相關屬性

屬性	說明	值
color	設定元素的前景色	<顏色>
opacity	設定顏色的透明度	<數值>

設定前景色

color屬性設定元素的前景色。一般而言，元素對color屬性之於它的意義可以有不同的解讀，不過實際上，color屬性一般用來設定文字的顏色。程式碼清單1展示了color屬性的用法。

程式碼清單1 使用color屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style>
            @font-face {
                font-style: normal;
                font-weight: normal;
                font-family: '水果冰淇淋';
                src: url('http://120.77.46.246/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
            }
            #huangzihan {
                padding: 5px;
                border: medium double black;
                background-color: lightgray;
                font-family: "水果冰淇淋";
                font-size: larger;
            }
            #黃子涵 {
                font-size: xx-large;
                border: medium solid white;
                background-color: green;
                color: rgba(255, 255, 255, 0.7);
                -webkit-animation-duration: 10000ms;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: alternate;
                -webkit-animation-timing-function: linear;
                -webkit-animation-name: 'ColorSwap';
            }
            a:hover {
                -webkit-animation-duration: 10000ms;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: alternate;
                -webkit-animation-timing-function: linear;
                -webkit-animation-name: 'huangzihan2';
            }
            @-webkit-keyframes huangzihan2 {
                from {
                    color: red;
                }
                
                14% {
                    color: orange;
                }
                
                42% {
                    color: yellow;
                }
                
                56% {
                    color: green;
                }
                
                70% {
                    color: cyan;
                }
                
                84% {
                    color: blue;
                }
                
                to {
                    color: purple;
                }
            }
            @-webkit-keyframes ColorSwap {
                from {
                    font-size: small;
                    background-color: red;
                }
                
                14% {
                    background-color: orange;
                    padding: 2px;
                }
                
                42% {
                    background-color: yellow;
                    padding: 3px;
                }
                
                56% {
                    background-color: green;
                    padding: 4px;
                }
                
                70% {
                    background-color: cyan;
                    padding: 5px;
                }
                
                84% {
                    background-color: blue;
                    padding: 6px;
                }
                
                to {
                    border: medium solid white;
                    background-color: purple;
                    color: white;
                }
            }
        </style>
    </head>
    <body>
        <p id="huangzihan">
            煤氣燈不禁影照街裡一對蚯蚓，照過以倆心相親一對小情人
            沉默以擁吻抵抗一切的冰與冷，晚意借北風輕輕的飄起長長裙
            多溫馨心裡風中那笑聲 淌淚，嚐盡了失意的我將一切都褪去
            再到這風中心中竟仿似傷痕累累，然後再記憶起當晚跟你在這裡
            相依相擁中交出的心早已失去<span id="黃子涵">黃子涵</span>失去已破碎不可以再追灑淚
            煤氣燈不禁影照街裡一對蚯蚓，照過以倆心相親一對小情人
            多久了，我都沒變，愛你這回事，整整六年
            有一個人能去愛，多珍貴。沒關係你也不用給我機會
            反正我還有一生可以浪費
            <a href="https://baike.baidu.com/item/%E8%AE%B8%E9%AD%8F%E6%B4%B2/18762132?fr=aladdin">黃子涵是靚仔</a>
        </p>
        <p>
            <button>Running</button>
            <button>Paused</button>
        </p>
        <script>
            var buttons = document.getElementsByTagName("BUTTON");
            for(var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function(e) {
                    document.getElementById("黃子涵").style.webkitAnimationPlayState = e.target.innerHTML;
                }
            }
        </script>
    </body>
</html>

在這個例子中，我用了兩次color屬性：一次為span元素設定前景色和透明度，一次設定滑鼠懸停在a元素上時連結的前景色。效果如下圖所示。在印刷頁面上可能不好辨認效果，要想看清楚可以在瀏覽器中顯示示例HTML文件。

設定元素的透明度

請注意，我在前面的例子中使用了rgba函式設定span元素的顏色。通過提供一個小於1的alpha值可以讓文字變透明。從上圖中可能看不出來，但實際上透明意味著文字允許一小部分背景色透過。可以使用opacity屬性讓整個元素和文字內容透明。這個屬性的取值範圍是0到1，前者代表完全透明，後者代表完全不透明。程式碼清單2展示了opacity屬性的用法。

程式碼清單2 使用opacity屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style>
            @font-face {
                font-style: normal;
                font-weight: normal;
                font-family: '水果冰淇淋';
                src: url('http://120.77.46.246/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
            }
            #huangzihan {
                padding: 5px;
                border: medium double black;
                background-color: lightgray;
                font-family: "水果冰淇淋";
                font-size: larger;
            }
            #黃子涵 {
                font-size: xx-large;
                border: medium solid white;
                background-color: green;
                color: rgba(255, 255, 255, 0.7);
                -webkit-animation-duration: 10000ms;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: alternate;
                -webkit-animation-timing-function: linear;
                -webkit-animation-name: 'ColorSwap';
            }
            a:hover {
                -webkit-animation-duration: 10000ms;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: alternate;
                -webkit-animation-timing-function: linear;
                -webkit-animation-name: 'huangzihan2';
            }
            @-webkit-keyframes huangzihan2 {
                from {
                    color: red;
                }
                
                14% {
                    color: orange;
                }
                
                42% {
                    color: yellow;
                }
                
                56% {
                    color: green;
                }
                
                70% {
                    color: cyan;
                }
                
                84% {
                    color: blue;
                }
                
                to {
                    color: purple;
                }
            }
            @-webkit-keyframes ColorSwap {
                from {
                    font-size: small;
                    background-color: red;
                }
                
                14% {
                    background-color: orange;
                    padding: 2px;
                    opacity: 0.4;
                }
                
                42% {
                    background-color: yellow;
                    padding: 3px;
                }
                
                56% {
                    background-color: green;
                    padding: 4px;
                    opacity: 0.4;
                }
                
                70% {
                    background-color: cyan;
                    padding: 5px;
                }
                
                84% {
                    background-color: blue;
                    padding: 6px;
                    opacity: 0.4;
                }
                
                to {
                    border: medium solid white;
                    background-color: purple;
                    color: white;
                }
            }
        </style>
    </head>
    <body>
        <p id="huangzihan">
            煤氣燈不禁影照街裡一對蚯蚓，照過以倆心相親一對小情人
            沉默以擁吻抵抗一切的冰與冷，晚意借北風輕輕的飄起長長裙
            多溫馨心裡風中那笑聲 淌淚，嚐盡了失意的我將一切都褪去
            再到這風中心中竟仿似傷痕累累，然後再記憶起當晚跟你在這裡
            相依相擁中交出的心早已失去<span id="黃子涵">黃子涵</span>失去已破碎不可以再追灑淚
            煤氣燈不禁影照街裡一對蚯蚓，照過以倆心相親一對小情人
            多久了，我都沒變，愛你這回事，整整六年
            有一個人能去愛，多珍貴。沒關係你也不用給我機會
            反正我還有一生可以浪費
            <a href="https://baike.baidu.com/item/%E8%AE%B8%E9%AD%8F%E6%B4%B2/18762132?fr=aladdin">黃子涵是靚仔</a>
        </p>
        <p>
            <button>Running</button>
            <button>Paused</button>
        </p>
        <script>
            var buttons = document.getElementsByTagName("BUTTON");
            for(var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function(e) {
                    document.getElementById("黃子涵").style.webkitAnimationPlayState = e.target.innerHTML;
                }
            }
        </script>
    </body>
</html>

在這個例子中，我將span元素的opacity屬性的值設為0.4。效果如下圖所示，不過印在紙上效果可能不是太明顯。

設定表格樣式

下表總結了為table元素設定獨特樣式的屬性。

表格相關屬性

屬性	說明	值
`border-collapse`	設定相鄰單元格的邊框處理樣式	collapse separate
`border-spacing`	設定相鄰單元格邊框的間距	1 ~ 2個長度值
`caption-side`	設定表格標題的位置	top bottom
`empty-cells`	設定空單元格是否顯示邊框	hide show
`table-layout`	指定表格的佈局樣式	auto fixed

合併表格邊框

border-collapse用來控制table元素相鄰單元格邊框的樣式，下圖顯示的是預設處理樣式。

瀏覽器為表格繪製了一個邊框，同時還為每個單元格繪製了邊框，顯示出來就是雙邊框。使用border-collapse屬性可以改變這種效果，如程式碼清單3所示。

程式碼清單3 使用`border-collapse`屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style>
            @font-face {
                font-style: normal;
                font-weight: normal;
                font-family: '水果冰淇淋';
                src: url('http://120.77.46.246/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
            }
            table {
                border-collapse: collapse;
                font-family: '水果冰淇淋';
                font-size: xx-large;
            }
            th, td {
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <caption>黃子涵-歌手-歌曲</caption>
            <colgroup id="colgroup1">
                <col id="col1And2" span="2"/>
                <col id="col3"/>
            </colgroup>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th>序號</th><th>名字</th><th>歌曲</th>
                    <th colspan="2">籍貫 & 年齡</th>
                </tr>
                <tbody>
                    <tr>
                        <th>1</th><td>樑漢文</td><td>七友</td>
                        <td>中國香港</td><td>50</td>
                    </tr>
                    <tr>
                        <th>2</th><td>范瑋琪</td><td>一個像夏天一個像秋天</td>
                        <td>中國臺灣</td><td>45</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="5">&copy; 2021 版權屬於黃子涵</th>
                    </tr>
                </tfoot>
            </thead>
        </table>
    </body>
</html>

collapse值告訴瀏覽器不要為相鄰元素繪製兩個邊框，效果如下圖所示。

配置獨立邊框

如果你一定要為border-collapse屬性使用預設值separate，再加幾個其他屬性同樣可以改善表格的外觀。border-spacing屬性定義相鄰元素邊框的間距，如程式碼清單4所示。

程式碼清單4 使用`border-spacing`屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style>
            @font-face {
                font-style: normal;
                font-weight: normal;
                font-family: '水果冰淇淋';
                src: url('http://120.77.46.246/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
            }
            table {
                border-collapse: separate;
                font-family: '水果冰淇淋';
                font-size: xx-large;
                border-spacing: 10px;
            }
            th, td {
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <caption>黃子涵-歌手-歌曲</caption>
            <colgroup id="colgroup1">
                <col id="col1And2" span="2"/>
                <col id="col3"/>
            </colgroup>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th>序號</th><th>名字</th><th>歌曲</th>
                    <th colspan="2">籍貫 & 年齡</th>
                </tr>
                <tbody>
                    <tr>
                        <th>1</th><td>樑漢文</td><td>七友</td>
                        <td>中國香港</td><td>50</td>
                    </tr>
                    <tr>
                        <th>2</th><td>范瑋琪</td><td>一個像夏天一個像秋天</td>
                        <td></td><td></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="5">&copy; 2021 版權屬於黃子涵</th>
                    </tr>
                </tfoot>
            </thead>
        </table>
    </body>
</html>

在這個例子中，我在邊框之間指定了10畫素的空白，效果如下圖所示。

處理空單元格

我們也可以告訴瀏覽器如何處理空單元格。預設情況下，即使單元格為空，瀏覽器也會為單元格設定獨立的邊框，就像程式碼清單4的圖中顯示的那樣。可以使用empty-cells屬性控制這種行為。empty-cells的預設值為show，建立的效果請回頭看一下程式碼清單2的圖。如果將該屬性設定為hide，瀏覽器就不會繪製邊框。程式碼清單24-5展示的是在前一個例子的style元素中新增empty-cells屬性。

程式碼清單5 使用`empty-cells`屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style>
            @font-face {
                font-style: normal;
                font-weight: normal;
                font-family: '水果冰淇淋';
                src: url('http://120.77.46.246/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
                src: url('http://192.168.1.102/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
            }
            table {
                border-collapse: separate;
                font-family: '水果冰淇淋';
                font-size: xx-large;
                border-spacing: 10px;
                empty-cells: hide;
            }
            th, td {
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <caption>黃子涵-歌手-歌曲</caption>
            <colgroup id="colgroup1">
                <col id="col1And2" span="2"/>
                <col id="col3"/>
            </colgroup>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th>序號</th><th>名字</th><th>歌曲</th>
                    <th colspan="2">籍貫 & 年齡</th>
                </tr>
                <tbody>
                    <tr>
                        <th>1</th><td>樑漢文</td><td>七友</td>
                        <td>中國香港</td><td>50</td>
                    </tr>
                    <tr>
                        <th>2</th><td>范瑋琪</td><td>一個像夏天一個像秋天</td>
                        <td></td><td></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="5">&copy; 2021 版權屬於黃子涵</th>
                    </tr>
                </tfoot>
            </thead>
        </table>
    </body>
</html>

加上這個屬性後的改變如下圖所示。

設定標題的位置

如果為table元素新增caption，標題會顯示在表格的頂部。不過，我們可以使用caption-side屬性改變這種預設行為。這個屬性有兩個值：top （預設值）和bottom。程式碼清單6展示了這個屬性的用法。

程式碼清單6 使用caption-side屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style>
            @font-face {
                font-style: normal;
                font-weight: normal;
                font-family: '水果冰淇淋';
                src: url('http://120.77.46.246/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
            }
            table {
                border-collapse: collapse;
                font-family: '水果冰淇淋';
                font-size: xx-large;
                border-spacing: 10px;
                caption-side: bottom;
            }
            th, td {
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <caption>黃子涵-歌手-歌曲</caption>
            <colgroup id="colgroup1">
                <col id="col1And2" span="2"/>
                <col id="col3"/>
            </colgroup>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th>序號</th><th>名字</th><th>歌曲</th>
                    <th colspan="2">籍貫 & 年齡</th>
                </tr>
                <tbody>
                    <tr>
                        <th>1</th><td>樑漢文</td><td>七友</td>
                        <td>中國香港</td><td>50</td>
                    </tr>
                    <tr>
                        <th>2</th><td>范瑋琪</td><td>一個像夏天一個像秋天</td>
                        <td></td><td></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="5">&copy; 2021 版權屬於黃子涵</th>
                    </tr>
                </tfoot>
            </thead>
        </table>
    </body>
</html>

設定caption-side屬性的效果如下圖所示。

指定表格佈局

預設情況下，瀏覽器會根據表格每一列中最寬的單元格設定整列單元格的寬度。這意味著你不需要擔心還要親自解決單元格大小的問題，不過，這同時意味著在能夠確定頁面佈局之前，瀏覽器必須獲取所有的表格內容。

瀏覽器顯示錶格釆用的方法是由table-layout屬性決定的，之前說過，它的預設值是auto。使用另一個值fixed可以禁用自動佈局。在fixed模式中，表格的大小是由表格自身和單獨每列的width值設定的。如果沒有列寬值可用，瀏覽器會設定等距離的列寬。

因此，只要獲取了一行的表格資料，瀏覽器就可以確定列寬。其他行內的資料會自動換行以適應列寬（可能導致行高比auto模式下略高）。

程式碼清單7展示了table-layout屬性的用法。

程式碼清單7 使用`table-layout`屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style>
            @font-face {
                font-style: normal;
                font-weight: normal;
                font-family: '水果冰淇淋';
                src: url('http://120.77.46.246/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
                src: url('http://192.168.1.102/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
            }
            table {
                border-collapse: collapse;
                font-family: '水果冰淇淋';
                font-size: xx-large;
                border-spacing: 10px;
                caption-side: bottom;
                table-layout: fixed;
                width: 100%;
            }
            th, td {
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <caption>黃子涵-歌手-歌曲</caption>
            <colgroup id="colgroup1">
                <col id="col1And2" span="2"/>
                <col id="col3"/>
            </colgroup>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th>序號</th><th>名字</th><th>歌曲</th>
                    <th colspan="2">籍貫 & 年齡</th>
                </tr>
                <tbody>
                    <tr>
                        <th>這裡有個very very 長的句子</th><td>樑漢文</td><td>七友</td>
                        <td>中國香港</td><td>50</td>
                    </tr>
                    <tr>
                        <th>2</th><td>范瑋琪</td><td>一個像夏天一個像秋天</td>
                        <td></td><td></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="5">&copy; 2021 版權屬於黃子涵</th>
                    </tr>
                </tfoot>
            </thead>
        </table>
    </body>
</html>

在這個例子中，我設定了table元素的width屬性佔據100%的可用空間，將表格的佈局樣式設為fixed。我還改變了第二行中一個單元格的內容，以展示佈局效果，如下圖所示。

注意頁面可用空間是如何在表格的五列之間均勻分配，以及第二行中的長標題如何斷行來適應列寬的，斷行導致了第二行比其他行高。

設定列表樣式

有許多屬性是專門用來設定列表樣式的，下表總結了這些屬性。

列表相關屬性

屬性	說明	值
`list-style-type`	指定列表中使用的標記的型別
`list-style-image`	指定影象作為列表標記	<影象>
`list-style-position`	指定標記相對於列表專案盒子的位置	inside outside
`list-style`	設定所有列表特徵的簡寫屬性

list-style簡寫屬性的格式如下所示：

list-style: <list-style-type> <list-style-position> <list-style-image>

設定列表標記型別

list-style-type屬性用來設定標記（有時候也稱為專案符號）的樣式，這個屬性允許的值如下表所示。

`list-style-type`屬性的值

值	說明
none	沒有標記
box check circle diamond disc dash square	使用指定形狀的標記，注意並不是所有的瀏覽器都支援每一種形狀
decimal	使用十進位制數字作為標記
binary	使用二進位制數作為標記
`lower-alpha`	使用小寫字母字元作為標記
`upper-alpha`	使用大寫字母字元作為標記

上表只是展示了一部分可用的樣式。除了這裡列岀的，列表標記還有很多樣式，比如不同的字母字元、不同的符號樣式，以及數字約定。www.w3.org/TR/css3-lists 列出了完整的列表樣式。程式碼清單8展示了 list-style-type屬性的用法。

程式碼清單8 使用`list-style-type`屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style>
            @font-face {
                font-style: normal;
                font-weight: normal;
                font-family: '水果冰淇淋';
                src: url('http://120.77.46.246/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
            }
            ol {
                list-style-type: lower-alpha;
                font-family: '水果冰淇淋';
                font-size: x-large;
            }
        </style>
    </head>
    <body>
        黃子涵-歌手。
        
        還有這些歌手：
        <ol>
            <li>許嵩</li>
            <li>周柏豪</li>
            <li>齊秦</li>
            <li style="list-style-type: decimal">Twins</li>
            <li>房東的貓</li>
            <li>孫燕姿</li>
            <li>謝霆鋒</li>
        </ol>
    </body>

可以將這個屬性應用到整個列表或者單獨的列表項。這個例子中兩種方法我都用上了（不過，最終的結果可能讓讀者有點迷糊），效果請見下圖。

使用影象作為列表標記

list-style-image屬性可以將影象用做列表標記。程式碼清單9展示了這個屬性的用法。

程式碼清單9 使用影象作為列表標記

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style>
            @font-face {
                font-style: normal;
                font-weight: normal;
                font-family: '水果冰淇淋';
                src: url('http://120.77.46.246/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
            }
            ol {
                font-family: '水果冰淇淋';
                font-size: x-large;
                list-style-image: url('http://120.77.46.246/HTML5權威指南/第24章 其他CSS屬性和特性/huangzihan1.jpeg');
            }
        </style>
    </head>
    <body>
        黃子涵-歌手。
        
        還有這些歌手：
        <ol>
            <li>許嵩</li>
            <li>周柏豪</li>
            <li>齊秦</li>
            <li>Twins</li>
            <li>房東的貓</li>
            <li>孫燕姿</li>
            <li>謝霆鋒</li>
        </ol>
    </body>

應用這個屬性後的效果如下圖所示。

設定列表標記的位置

可以使用list-style-position屬性指定標記相對於li元素內容框的位置。這個屬性有兩個值：inside和outside，前者定義標記位於內容框內部，後者定義標記位於內容框外部。程式碼清單10展示了list-style-position屬性和它的值的用法。

程式碼清單10 指定標記的位置

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style>
            @font-face {
                font-style: normal;
                font-weight: normal;
                font-family: '水果冰淇淋';
                src: url('http://120.77.46.246/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
            }
            ul {
                font-family: '水果冰淇淋';
                font-size: x-large;
                list-style-image: url('http://120.77.46.246/HTML5權威指南/第24章 其他CSS屬性和特性/huangzihan1.jpeg');
            }
            li.inside {
                list-style-position: inside;
            }
            li.outside {
                list-style-position: outside;
            }
            li {
                background-color: lightgray;
            }
        </style>
    </head>
    <body>
        黃子涵-歌手。
        
        還有這些歌手：
        <ul>
            這裡是inside：
            <li class="inside">許嵩</li>
            <li class="inside">周柏豪</li>
            <li class="inside">齊秦</li>
            <li class="inside">Twins</li>
            這裡是outside：
            <li class="outside">房東的貓</li>
            <li class="outside">孫燕姿</li>
            <li class="outside">謝霆鋒</li>
            <li class="outside">陳奕迅</li>
        </ul>
    </body>

我將li的項分成了兩類，分別為它們的list-style-position屬性應用了不同的值，效果如下圖所示。

在上圖中，我為所有的H元素設定了background-color屬性，這樣方便大家看清楚list-style-position屬性不同值的效果。

設定游標樣式

cursor屬性用來改變游標的外形。下表總結了該屬性的值。

cursor屬性的值

屬性	說明	值
cursor	設定游標的樣式	auto、crosshair、default、help、move、pointer、progress、text、wait、`n-resize`、`s-resize`、`e-resize`、`w-resize`、`ne-resize`、`nw-resize`、`se-resize`、`sw-resize`

當滑鼠劃過被設定樣式的元素時，cursor屬性的不同取值告訴瀏覽器顯示不同的游標形狀。cursor屬性的用法如程式碼清單11所示。

程式碼清單11 使用cursor屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style>
            @font-face {
                font-style: normal;
                font-weight: normal;
                font-family: '水果冰淇淋';
                src: url('http://120.77.46.246/HTML5權威指南/第22章 設定文字樣式/水果冰淇淋.woff');
            }
            p {
                padding: 5px;
                border: medium double black;
                background-color: lightgray;
                font-family: '水果冰淇淋';
                font-size: x-large;
            }
            #黃子涵 {
                font-size: xx-large;
                border: medium solid white;
                background-color: blue;
                color: rgba(255, 255, 255, 0.7);
                cursor: progress;
                -webkit-animation-duration: 10000ms;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: alternate;
                -webkit-animation-timing-function: linear;
                -webkit-animation-name: 'ColorSwap';
            }
            ul {
                font-family: '水果冰淇淋';
                font-size: x-large;
                list-style-image: url('http://120.77.46.246/HTML5權威指南/第24章 其他CSS屬性和特性/huangzihan1.jpeg');
            }
            li.inside {
                list-style-position: inside;
            }
            li.outside {
                list-style-position: outside;
            }
            li {
                background-color: lightgray;
            }
            @-webkit-keyframes ColorSwap {
                from {
                    background-color: red;
                }
                
                14% {
                    background-color: orange;
                }
                
                42% {
                    background-color: yellow;
                }
                
                56% {
                    background-color: green;
                }
                
                70% {
                    background-color: cyan;
                }
                
                84% {
                    background-color: blue;
                }
                
                to {
                    background-color: purple;
                }
            }
            a:hover {
                -webkit-animation-duration: 10000ms;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: alternate;
                -webkit-animation-timing-function: linear;
                -webkit-animation-name: 'huangzihan2';
            }
            @-webkit-keyframes huangzihan2 {
                from {
                    color: red;
                }
                
                14% {
                    color: orange;
                }
                
                42% {
                    color: yellow;
                }
                
                56% {
                    color: green;
                }
                
                70% {
                    color: cyan;
                }
                
                84% {
                    color: blue;
                }
                
                to {
                    color: purple;
                }
            }
        </style>
    </head>
    <body>
        黃子涵-歌手。
        
        還有這些歌手：
        <ul>
            這裡是inside：
            <li class="inside">許嵩</li>
            <li class="inside">周柏豪</li>
            <li class="inside">齊秦</li>
            <li class="inside">Twins</li>
            這裡是outside：
            <li class="outside">房東的貓</li>
            <li class="outside">孫燕姿</li>
            <li class="outside">謝霆鋒</li>
            <li class="outside">陳奕迅</li>
        </ul>
        <p>
            煤氣燈不禁影照街裡一對蚯蚓，照過以倆心相親一對小情人
            沉默以擁吻抵抗一切的冰與冷，晚意借北風輕輕的飄起長長裙
            多溫馨心裡風中那笑聲 淌淚，嚐盡了失意的我將一切都褪去
            再到這風中心中竟仿似傷痕累累，然後再記憶起當晚跟你在這裡
            相依相擁中交出的心早已失去<span id="黃子涵">黃子涵</span>失去已破碎不可以再追灑淚
            煤氣燈不禁影照街裡一對蚯蚓，照過以倆心相親一對小情人
            多久了，我都沒變，愛你這回事，整整六年
            有一個人能去愛，多珍貴。沒關係你也不用給我機會
            反正我還有一生可以浪費
            <a href="https://baike.baidu.com/item/%E8%AE%B8%E9%AD%8F%E6%B4%B2/18762132?fr=aladdin">黃子涵是靚仔</a>
        </p>
    </body>