整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
先讓我們回顧下前端入門——html 超鏈接的用法 <a href="url"> , 超鏈接是一個非常偉大的發明，它鏈接了整個互聯網，沒有它就沒有互聯網。
超鏈接在發明之初就給它設計了一個默認的樣式，就是藍色帶下劃線的樣式，如下圖：
默認樣式
關于為什么超鏈接是藍色帶下劃線的歷史，可以參考這里：https://baijiahao.baidu.com/s?id=1710334071632114373&wfr=spider&for=pc
當網頁變得越來越豐富，用戶的需求越來越高的時候，這樣的樣式已經不符合大眾的審美，所以通過css來美化超鏈接非常有用和有趣。
鏈接可以使用任何 CSS 屬性（例如 color、font-family、background 等）來設置樣式。
如下圖：
除此之外，可以根據鏈接狀態來設置不同樣式，鏈接狀態分別有：
如下示例：
/* 未被訪問的鏈接 */
a:link {
color: red;
}
/* 已被訪問的鏈接 */
a:visited {
color: green;
}
/* 將鼠標懸停在鏈接上 */
a:hover {
color: hotpink;
}
/* 被選擇的鏈接 */
a:active {
color: blue;
}未被訪問的鏈接
已被訪問的鏈接
將鼠標懸停在鏈接上
被選擇的鏈接
如果為多個鏈接狀態設置樣式，請遵循如下順序規則：
以上是鏈接的各種偽類，描述了鏈接的不同狀態，你可以試試在不同狀態下給設置不同的屬性，比如背景色，字體或者文本修飾等等。
鏈接通常用來當做按鈕使用，點擊它跳轉頁面或執行一些事件或js函數。如下示例：
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}定義了一個背景色為紅色的按鈕，如下圖：
注意：如果想在點擊這個按鈕后禁止跳轉頁面，可以給href屬性設置javascript：void();,在以后會講到JavaScript在網頁中的使用，這里你已經看到，在href屬性中通過Javascript：的形式可以執行一段js語句或函數，這里void()就是阻止鏈接跳轉。
上面只是一個簡單的例子，當然你也可以制作更漂亮的按鈕，比如加上圓角、陰影、或漸變背景等。
當鼠標移動到鏈接上時，你會看到鼠標變成一個手形，通過css cursor 屬性可以改變鼠標指針的形狀，如下圖：
可以嘗試按照上面的屬性依次練習一遍，鏈接的樣式到此就介紹完了，感謝關注。
上篇：前端入門——css字體和文本
鏈接是網頁的基本元素之一，幾乎每個網頁我們都可以看到超鏈接。在之前講 HTML 的時候就講過，超鏈接會自帶一些默認樣式，例如未點擊的超鏈接會顯示帶下劃線的藍色字體、點擊時字體變為紅色、點擊后字體變為紫色。這種點擊前后不一致的樣式，其實是超鏈接的偽類樣式，偽類就是不根據名稱、屬性或者內容，而是根據標簽處于某種行為或狀態時的特征來修飾樣式，也就是說超鏈接將根據不同的狀態顯示不同的樣式。
首先，我們知道超鏈接本身是帶有默認下劃線的，但是一般我們在網頁中看到的超鏈接都是沒有下劃線的，那么要如何去掉超鏈接的下劃線呢？ 其實前面我們講文本樣式的時候提到過，就是使用 text-decoration 屬性。
示例：
下面是兩個超鏈接：
<body>
<p><a href="#">普通的超鏈接</a></p>
<p><a href="#" class="no">去掉下劃線的超鏈接</a></p>
</body>
我們使用類選擇器 no ，去掉其中一個鏈接的下劃線：
.no{
text-decoration: none;
}
在瀏覽器中的演示效果：
超鏈接有一個特點，就是可以根據它們所處的狀態來設置不同的樣式。
超鏈接的四種狀態（偽類）如下所示：
偽類樣式的基本語法：
a:偽類名 {
屬性:屬性值;
}
示例：
例如設置不同狀態下超鏈接的字體顏色：
<a href="#">這是一個超鏈接</a>
CSS 樣式代碼：
a:link{ color: #F00; } /* 未被訪問的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標指針移動到鏈接上 */
a:active {color: #ff7300;} /* 正在被點擊的鏈接 */
在瀏覽器中的演示效果：
上面講到的四種超鏈接偽類，在設置樣式時對順序有沒有要求呢？當然有啦，在 CSS 設置超鏈接偽類的順序為：a:link 和 a:visited --> a:hover --> a:active。
其中 a:hover 必須位于 a:link 和 a:visited 之后，a:active 必須位于 a:hover 之后，如果設置順序不對，則樣式可能不起作用。
在瀏覽網頁的時候，我們通?？梢钥吹绞髽说闹羔樞螤钜话憧梢詾榧^、手形、I字形等，這些效果都可以通過 CSS 中的 cursor 屬性來設置。
cursor 屬性的常用屬性值如下所示：
示例：
舉個例子，例如要設置當鼠標移動到超鏈接上時，將鼠標指針變為十字狀：
a:hover {
color: green;
cursor: crosshair;
}
在瀏覽器中的演示效果：
本節我們講了四種超鏈接偽類，即 a:link、a:visited、a:hover 、a:active。其中用的比較多的還是a:hover 鼠標懸浮其上。一定要記住如果想要同時使用好幾種狀態，四種狀態的書寫順序， a:hover 必須位于 a:link 和 a:visited 之后，a:active 必須位于 a:hover 之后。
1）字體的屬性
字體屬性用于定義字體的類型、字號大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示：
屬 性 | 可 取 值 | 描 述 |
font | font-style、font-variant、font-weight、font-size（或 line-height）、font-family | 在一個聲明中設置所有的字體屬性 |
font-family | 字體名稱、inherit | 設置字體類型 |
font-size | xx-small、x-small、small、medium（默認）、large、x-large、xx-large smaller、larger length、%、inherit | 設置字體大小 |
font-weight | normal（默認）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold） | 設置字體粗細 |
font-style | normal、italic、oblique、inherit | 設置字體風格 |
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h3 {
font-size: 20px;
font-family: 隸書;
line-height: 28px;
}
span {
font: italic 16px 華文彩云;
}
</style>
</head>
<body>
<h3>Web 前端技術</h3>
<span
>在當今社會中，Web 已經成為網絡信息共享和發布的主要形式。要想開發 Web 應用
系統，就必須掌握 Web 前端技術。</span
>
</body>
</html>顯示為，
（2）CSS 中鏈接標簽可用的偽類：
CSS 中，偽類是添加到選擇器的關鍵字，給指定元素設置一些特殊狀態，我們以 : 開頭。
鏈接有以下四個狀態。這四種狀態也稱之為超鏈接的偽類。
狀態 | 效果 |
a:link | 普通的、未被訪問的鏈接。 |
a:hover | 鼠標指針位于鏈接的上方。 |
a:active | 鏈接被單擊的時刻。 |
a:visited | 用戶已訪問的鏈接。 |
針對超鏈接的上述四種狀態設置樣式規則，能起到美化超鏈接的作用。例如，為了完成下對超鏈接的顯示要求，編寫的 CSS 樣式代碼如下。
狀 態 | 顏 色 | 背 景 色 | 文 本 修 飾 |
未訪問 | 藍色 | 無 | 無下畫線 |
鼠標移到 | 黑色 | #DDDDDD | 下畫線 |
正單擊 | 紅色 | #AAAAAA | 刪除線 |
已訪問 | 綠色 | 無 | 無下畫線 |
對于超鏈接的偽類，我們推薦的使用順序是：:link - :visited - :hover - :active。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
text-decoration: none;
}
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="#">這是一個鏈接</a>
</body>
</html>
顯示為，
為什么要按照這樣的順序來使用呢？ 調整幾個偽類的順序，看看會發生什么。
我們把 a:link 放到最后，效果如下：
從圖中可以發現其中的樣式屬性都被覆蓋了。
（3）列表相關的樣式屬性：
屬 性 | 可 取 值 | 描 述 |
list-style | list-style-type、list-style-position、list-style-image | 在一個聲明中設置所有的列表屬性 |
list-style-image | URL、none | 設置圖像為列表項標志 |
list-style-position | inside、outside、inherit | 設置列表中列表項標志的位置 |
list-style-type | disc（默認）、circle、square、decimal 等 | 設置列表項標志的類型 |
例子，
wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif*請認真填寫需求信息，我們會在24小時內與您取得聯系。
