div+css之04超鏈接偽類

阜和教育

PhotoshopCS4

網(wǎng)頁設(shè)計超鏈接偽類超鏈接偽類知識點

鏈接的四種樣式

將鏈接轉(zhuǎn)換為塊狀用css制作按鈕首字下沉超鏈接偽類超鏈接的四種樣式a:link{color:#FF0000}/*未訪問的鏈接*/

a:visited{color:#00FF00}/*已訪問的鏈接*/

a:hover{color:#FF00FF}/*鼠標移動到鏈接上*/

a:active{color:#0000FF}/*選定的鏈接*/四種狀態(tài)的順序一定不能顛倒，否那么有些不生效超鏈接偽類偽類不是一個真實的類，正常的類是以點開始，后邊跟一個名稱，而它是以a開始后邊跟個冒號，再跟個狀態(tài)限定字符；比方第三個a:hover的樣式，只有當鼠標移動到該鏈接上時它才生效，而a:visited只對已訪問過的鏈接生效。偽類使得用戶體驗大大提高，比方我們可以設(shè)置鼠標移上時改變顏色或下劃線等屬性來告知用戶這個是可以點擊的，設(shè)置已訪問過的鏈接的顏色變灰暗或加刪除線告知用戶這個鏈接的內(nèi)容已訪問過了超鏈接偽類練習：做一個默認狀態(tài)下是藍色，鼠標放上是紅色加下劃線，選定〔按下〕時為紫色，已訪問過為灰色加刪除線超鏈接偽類將鏈接轉(zhuǎn)換為塊級元素鏈接在默認狀態(tài)下是內(nèi)聯(lián)元素，轉(zhuǎn)換為塊級元素后可以獲得更大的點擊區(qū)域，可以設(shè)置寬度和高度，將鏈接轉(zhuǎn)換為塊狀，只需增加一個display:block的css屬性即可。CSS代碼：a{display:block;height:30px;width:100px;line-height:30px;text-align:center;background:#CCC;}這樣設(shè)置的結(jié)果是全局a都執(zhí)行這個樣式顯示超鏈接偽類視圖操作：超鏈接偽類超鏈接偽類超鏈接偽類超鏈接偽類為塊化的A加上觸發(fā)樣式：a:hover{color:#FFF;text-decoration:none;background:#333;}超鏈接偽類視圖操作：超鏈接偽類超鏈接偽類用css制作按鈕同理，用背景圖片替換掉背景顏色的屬性，就可以作出用css制作的按鈕。首先，準備好按紐的兩張圖片Css代碼：a{display:block;height:34px;width:107px;line-height:2;text-align:center;background:url(images/btn_bg.gif)no-repeat0px0px;color:#d84700;font-size:14px;font-weight:bold;text-decoration:none;padding-top:3px;}a:hover{background:url(images/btn_bg_hover.gif)no-repeat0px0px;}超鏈接偽類視圖操作：超鏈接偽類超鏈接偽類超鏈接偽類超鏈接偽類超鏈接偽類首字下沉首字下沉是css偽類上的又一個運用，它可以直接通過css樣式表向某個選擇器中的文本首字母添加特殊的樣式，而不需要把首字添加一個標簽或通過程序來實現(xiàn)，今天以制作word里的首字下沉為例來講解，應用如下偽元素：:first-letter超鏈接偽類在頁面中添加如下一段內(nèi)容：<p>時尚，我寫日記，還有衣服拍照片，你們喜歡我的搭配，對你們有幫助，我會講中文一點點，我住在上海。我是lily,我來自法國，我拍很多照片^_^</p>設(shè)置p的樣式：p{width:400px;line-height:1.5;font-size:14px;}然后設(shè)置p:first-letter的樣式超鏈接偽類超鏈接偽類Css代碼：<styletype="text/css">p{width:400px;line-height:1.5;font-size:14px;}p:first-letter{font-family:"microsoftya