先讓我們回顧下前端入門——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小時內與您取得聯系。