A標籤樣式定義
:link
:visited
:hover
:active
因為我們要定義連結樣式,所以其中必不可少的就是超級連結中的錨標籤--a,錨標籤和偽類連結起來書寫的方法就是定義連結樣式的基礎方法,它們的寫法如下:
a:link,定義正常連結的樣式;
a:visited,定義已訪問過連結的樣式;
a:hover,定義滑鼠懸浮在連結上時的樣式;
a:active,定義滑鼠點選連結時的樣式。
示例:
a:link {
color:#FF0000;
text-decoration:underline;
}
a:visited
{
color:#00FF00;
text-decoration:none;
}
a:hover
{
color:#000000;
text-decoration:none;
}
a:active
{
color:#FFFFFF;
text-decoration:none;
}
上面示例中定義的連結顏色是紅色,訪問過後的連結是綠色,滑鼠懸浮在連結上時是黑色,點選時的顏色是白色。
如果正常連結和已訪問過的連結樣式相同,滑鼠懸浮和點選時的樣式相同,也可以將它們合併起來定義:
a:link,
a:visited
{
color:#FF0000;
text-decoration:underline;
}
a:hover,
a:active
{
color:#000000;
text-decoration:none;
}
連結定義的順序
沒有規矩不成方圓,雖然連結定義寫好了,但它也是有規則的,如果這四項的書寫順序稍有差錯,連結的效果可能就沒有了,所以每次定義連結樣式時務必確認定義的順序,link--visited--hover-active,也就是我們常說到的LoVe
HAte原則(大寫字母就是它們的首字母)。
定義區域性連結樣式
在CSS中寫上a:link{}這樣的定義會使整個頁面的連結樣式改變,但有些區域性連結需要特殊化,這個問題也不難解決,只要在連結樣式定義的前面加上指定的id或class就可以了。
示例:
#sidebar a:link,
#sidebar
a:visiteid {
color:#FF0000;
text-decoration:none;
}
#sidebar
a:hover,
#sidebar
a:active {
color:#000000;
text-decoration:underline;
}
呼叫方法:
<div
id="sidebar"><a href="aa.aspx"
target="_blank">連結到aa頁面<a></div>
class的定義方法和id相同,只要將#sidebar改為.sidebar就行了,還有一種方法是直接定義連結的樣式,那樣更直接,不過呼叫時比較麻煩,需要給每個特定的連結加上定義的程式碼。
示例:
a.redlink a:link,
a.redlink
a:visiteid {
color:#FF0000;
text-decoration:none;
}
a.redlink
a:hover,
a.redlink
a:active {
color:#000000;
text-decoration:underline;
background:#FFFFFF;
}
呼叫方法:
<div><a
href="bb.aspx"
target="_blank" class="redlink"
>連結bb頁面<a></div>
相關推薦
A標籤樣式定義
CSS為一些特殊效果準備了特定的工具,我們稱之為“偽類”。其中有幾項是我們經常用到的,下面我們就詳細介紹一下經常用於定義連結樣式的四個偽類,它們分別是: :link :visited :hover :active 因為我們要定義連結樣式,所以其中必不可少的就是
改變當前點選的a標籤的樣式,將其他a標籤樣式還原
<strong>假設現在需要實現這樣的功能:下面有三個a標籤,點選任意一個a標籤,顏色變為藍色,其餘的恢復無色,如下圖</strong><p><img alt="" src="https://img-blog.csdn.net/20
a標籤樣式 和 a標籤屬性
一組專門的預定義的類稱為偽類,主要用來處理超連結的狀態。超連結文字的狀態可以通過偽類選擇符+樣式規則來控制。偽類選擇符包括: 總: a 表示所有狀態下的連線 如 .mycls a{color:red} ① a:link:未訪問連結 ,如 .mycls a:link {color:blue
A 標籤樣式
class Simple ...{ Simple(void) ...{ cout <<"hello"<<endl; }~Simple(void)...{}};int main()...{ Simple s();
a標籤超連結點選後無虛邊框,完美自定義超連結籤樣式
最近在做專案的時候,為了改變A標籤的固有樣式,老闆要求標籤的下劃線【text-decoration】與文字之間的距離應該增加1px。由於知識簡陋,沒找到好的方法,於是我就想到了笨方法:把text-decoration設定為none,然後給標籤註冊了一個mouseover事件
css定義超級連結a標籤裡面的title的樣式
<area shape="rect" coords="328,64,376,155" class="tooltip" title="顯示內容</br>顯示內容顯示內容顯示內容顯示內容: 65432戶" /> <script type="te
H5 audio 音訊標籤自定義樣式修改以及新增播放控制事件
20181023 更新 原來的程式碼拖動進度點只寫了mouse事件,手機端的話應該是touch事件。所有出現了有朋友說的無法拖動進度條的問題。現在更新的程式碼已經加上touch事件,即無論是手機模式瀏覽,還是PC模式瀏覽都可以拖動進度點來調節音訊播放進度。完整程式碼也已經放上碼雲,需要的
[Xcode10 實際操作]四、常用控制元件-(5)UILabel文字標籤自定義文字樣式
本文將演示給標籤物件新增描邊效果,在專案資料夾上,點選滑鼠右鍵選單, 選擇【Create File】->【Cocoa Touch Class】->【Next】-> 【Class】:MyLabel 【Subclass of 】:UILabel 【Language】:Swift -&g
JQuery 選擇某個td中第二個a標籤 控制特殊樣式
a標籤沒有disabled屬性,那麼當我們想禁用a標籤的點選事件的時候按照下面方法設定。下面是html程式碼: <a id="entry” class="entry">進入</a> js程式碼如下: $(“#entry”).attr("disabled",tru
關於a標籤點選去除預設樣式
我們在平時a標籤裡面巢狀一些字型圖片,這是很常見的。但是我們並不需要點選時候a標籤裡面的字型變色。這個小知識點,很簡單:css樣式: a{ text-decoration:none; color:
a標籤 CSS樣式 滑鼠懸停、點選、點選後、選定
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> a:link { color: #0
s 點選a標籤 獲取a的自定義屬性方法_javascript技巧
今天專案上遇到一個問題,需要在點選a標籤時,將完整的內容顯示出來 原先是想用jquery的click方法 <a ownattr=“……” onClick="showDetail(this)"&g
A標籤的css樣式
CSS為一些特殊效果準備了特定的工具,我們稱之為“偽類”。其中有幾項是我們經常用到的,下面我們就詳細介紹一下經常用於定義連結樣式的四個偽類,它們分別是: :link :visited :hover :active 因為我們要定義連結樣式,所以
css修改a標籤裡面的title的樣式
a {position:relative;} a:hover:before {position:absolute;top:20px;right:0;content:attr(title);col
.net新增前端樣式和JS新增標籤樣式、以及div/a 標籤的顯示和隱藏
jQuery display 隱藏後,原來位置被佔掉 visibility 隱藏後,原來位置還在 $("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").css('display','none'); $("#id"
如何去掉a標籤的下劃線及偽類樣式
首先,來了解下<a>標籤的一些樣式:<a>標籤的偽類樣式 一組專門的預定義的類稱為偽類,主要用來處理超連結的狀態。超連結文字的狀態可以通過偽類選擇符+樣式規則來控制。偽類選擇符包括: 總: a 表示所有狀態下的連線 如 a{colo
去除移動端a標籤點選樣式
a{ outline:none; -webkit-tap-highlight-color: rgba(0,0,0,0); } -webkit-tap-highlight-color是ios和android下點選元素時出現的陰影,-webkit-tap-high
a 標籤做成btn 樣式
a { display: block; height: 25px; width: 150px; text-align: center; background: #F00; color: #ffffff;
HTML5 a標籤定義超連結詳解
前言<a>標籤定義超連結,用於從一張頁面連結到另一張頁面。 <a>元素最重要的屬性是 href 屬性,它指示連結的目標。指向 w3school 的超連結:<a href="http://www.w3school.com.cn">W3Scho
從零開始前端學習[5]:關於html5預設標籤樣式的介紹以及定義清除
關於html5預設標籤樣式的介紹以及定義清除 預設樣式介紹 清除預設的樣式 預設樣式介紹 先來看程式碼,看效果 <!DOCTYPE html> <html la