CSS控制超連結

最後更新：2014-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style blog http io color os sp strong on

一、偽類

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="http://www.baidu.com" class="web">網頁設計</a> | <a href="http://www.baidu.com">平面設計</a> | <a href="http://www.baidu.com">網站前端</a> | <a href="http://www.baidu.com">動畫設計</a> | <a href="http://www.baidu.com">軟體開發</a> | <a href="http://www.baidu.com">網頁營銷</a> <a href="http://www.baidu.com">我會閃</a> </div> </body>

a偽類的應用：

　　a、四個偽類全用(搜尋引擎、新聞門戶、小說網站)

　　b、一般網站只用（ a{} a:hover{} ）

IE6不支援a以外其它任何標籤的偽類；

IE6以上的瀏覽器支援所有標籤的hover偽類；

三、: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><body> <a href="#">PHP100.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; } <!--將visited改為hover可以實現滑鼠浮動的效果--></style></head><body> <p>PHP100.COM中文網,<a href="www.baidu.com">PHP</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="#">PHP100.COM<span>PHP官網</span></a></p> <p> <a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England. </p></body>

CSS控制超連結

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

CSS控制超連結

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support