溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關css中怎么控制超鏈接樣式，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
一、偽類
CSS控制元素的某種狀態---偽類（用于向某些選擇器添加特殊的效果）
偽類的語法：元素標簽 偽類名稱{屬性：屬性值;}
二、超鏈接
a:link:未訪問的鏈接
a:hover:鼠標移動到鏈接上
a:active:鼠標按下鏈接
a:visited:已訪問的鏈接
如果在點擊過后再返回到該頁面還有一些效果的話 就按照該順序給鏈接添加狀態 L V H A
代碼如下:
<style type="text/css">
a:link{text-decoration:none; color:#000;}
a:visited{text-decoration:none; color:#6F0;}
a:hover{text-decoration:underline; color:#00F;}
a:active{text-decoration:overline; color:#F00;}
a.web:visited{text-decoration:none; color:#000;}
</style>
</head>
<body>
<div id="link">
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>" class="web">網頁設計</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">平面設計</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">網站前端</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">動畫設計</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">軟件開發</a> |
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">網頁營銷</a>
<a href="<a href="http://www.baidu.com">http://www.baidu.com</a>">我會閃</a>
</div>
</body>
三、:focus{屬性:屬性值}設置對象在成為輸入焦點時的樣式(IE6/7不支持)
代碼如下:
<style type="text/css">
input{
width:200px;
height:25px;
border:2px solid #FF0;
}
input:focus{
background:#9FF;
}
</style>
</head>
<body>
<label>用戶名： <input type="text" name="username"/></label>
<label>密 碼： <input type="text" name="pwd"/></label>
</body>
四、練習
1.給鏈接加上邊框
代碼如下:
<style type="text/css">
a{
font-size:36px;
}
a:link{
color:#009;
text-decoration:none;
border-bottom:2px solid #F00;
line-height:150%;
/*line-height:是為了和下劃線分開點*/
}
</style>
</head></p>
<p><body>
<a href="#">PHP.COM中文網</a>
</body>
2.在超鏈接中用背景圖象添加記號（給超鏈接a加上背景圖片即可）
代碼如下:
<style type="text/css">
a:link{
color: #f00;
padding-left:13px;
background:url(fasfas.gif) no-repeat left center;
text-decoration:none;
}
a:visited{
color:#900;
padding-left:13px;
background:url(das.gif) no-repeat left center;
text-decoration:none;</p>
<p>}
<!--將visited改為hover可以實現鼠標浮動的效果-->
</style>
</head></p>
<p><body>
<p>PHP100.COM中文網,<a href="<a href="http://www.baidu.com">PHP</a">www.baidu.com">PHP</a</a>>資源共享站</p>
</body>
7.創建按鈕和翻轉
代碼如下:
<style type="text/css">
a {
Display: block;
Width: 140px;
Padding: 3px;
height:30ox
Line-height: 30px;
Background-color: #94b8e9;
Border: 1px solid black;
Color: #000;
Text-decoration: none;
Text-align: center;
}
a:hover {
background-color: #369;
color:#fff;
}
</style>
</head>
<body>
<a href="http:\\www.baidu.com">PHP100.COM中文網</a>
</body>
8.純 css 工具提示
代碼如下:
<style type="text/css">
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover {
font-size: 100%; /* Fixes bug in IE5.x/Win */
}
a.tooltip:hover span {
display:block;
position:absolute;
top:1em;
left:2em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:# 000;
}
</style>
</head>
<body>
<p><a href="#">PHP.COM<span>PHP官網</span></a></p>
<p>
<a href="<a href="http://www.anfsdfasdybufdsfdasfdd.com/">http://www.anfsdfasdybufdsfdasfdd.com/</a>" class="tooltip">Andy Budd<span> (This website
rocks) </span></a> is a web developer based in Brighton England.
</p>
</body>
看完上述內容，你們對css中怎么控制超鏈接樣式有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
