親注冊(cè)登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦。ò蕡D片、文字詳情等)請(qǐng)您及時(shí)注冊(cè)登錄-bmrsportswear.com
您需要 登錄 才可以下載或查看,沒有賬號(hào)?立即注冊(cè)
x
本帖最后由 asp老師 于 2014-11-30 23:06 編輯
我們此時(shí)新建一個(gè)10.html文件 ,和一個(gè)10.css的文件,并且把這個(gè)10.css文件導(dǎo)入到10.html源代碼當(dāng)中,代碼如下;- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>無標(biāo)題文檔</title>
- <link href="10.css" rel="stylesheet" type="text/css">
- </head>
- <body>
- <h1><a href="#" target="_blank">道勤網(wǎng)與您一起發(fā)展!學(xué)習(xí)</a><h1>
- </body>
- </html>
復(fù)制代碼
此時(shí)呢,我們?cè)诮ocss當(dāng)中定義一個(gè)css,改變a鏈接的顏色;代碼如下
那么這樣呢,我們就改變了此時(shí)的鏈接顏色!
如果是加為這樣的css代碼:
- a{color:#933;}
- a:link {color:#933;}
- a:visited {color:#9C6;}
復(fù)制代碼 我們來分析一下 這個(gè)
a{color:#933;} 表示a標(biāo)簽的顏色為 #933
a:link {color:#933;} 這個(gè)表示的是 沒有訪問過的鏈接顏色為 #933
a:visited{color:#9c6;} 這個(gè)表示的是訪問過的鏈接 顏色變?yōu)?#9c6
好我們?cè)趤砜催@段的 css代碼:
- a{color:#933;}
- a:link {color:#933;}
- a:visited {color:#9C6;}
- a:hover{color:#009;}
復(fù)制代碼 那么這個(gè) a:hover{color:#009;} 表示的就是是當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽的時(shí)候,那么顏色變?yōu)?009顏色。
好我們?cè)诶^續(xù)添加一個(gè)代碼:
- a{color:#933;}
- a:link {color:#933;}
- a:visited {color:#9C6;}
- a:hover{color:#009;}
- a:active{color:#F06;}
復(fù)制代碼 那么我們此時(shí)看到這里有個(gè)a:active{color:#F06;} 那么這個(gè)表示的當(dāng)我們鼠標(biāo)左鍵點(diǎn)擊的時(shí)候那么這個(gè)鏈接的顏色變?yōu)?F06 這個(gè)顏色。
不過我們來總結(jié)下,一般情況下用到這2個(gè)就可以的
- a{color:#933;}
- a:link {color:#933;}
- a:hover{color:#009;}
復(fù)制代碼 不是2個(gè)嘛,怎么會(huì)有三個(gè)代碼呢,其實(shí)第一個(gè)代碼和第二個(gè)代碼的效果是一樣的,所以我們可以這樣來
- a{color:#933;}
- a:hover{color:#009;}
復(fù)制代碼
------------------------------------------------------------------好此時(shí)我們修改代碼為這樣的代碼:
- a{color:#933;}
- a:hover{color:#009; font-size:36px; background:#0C3;}
復(fù)制代碼 好我們來分析這段代碼:
首先呢:
1.剛開始a標(biāo)簽的鏈接顏色為 #933
2.當(dāng)我們把鼠標(biāo)放上去的時(shí)候:顏色變?yōu)?font style="background-color:rgb(247, 247, 247)">#009 同時(shí)字體顏色變?yōu)?6px 而且同時(shí)還有了背景顏色#0C3
效果如下:
剛開始的效果;
01.jpg (17.72 KB, 下載次數(shù): 57)
下載附件
2014-11-30 19:39 上傳
鼠標(biāo)放上去的效果:
02.jpg (20.11 KB, 下載次數(shù): 64)
下載附件
2014-11-30 19:39 上傳
我們把這樣的代碼用到包含選擇器中,看下是否好呢?好看下面代碼
源代碼:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>無標(biāo)題文檔</title>
- <link href="10.css" rel="stylesheet" type="text/css">
- </head>
- <body>
- <h1><a href="http://www.baidu.com" target="_blank">道勤網(wǎng)與您一起發(fā)展!學(xué)習(xí)</a><h1>
- <h2><a href="http://www.baidu.com" target="_blank">不錯(cuò)的地方</a></h2>
- </body>
- </html>
復(fù)制代碼
css代碼:
- h1 a{color:#933;}
- h1 a:hover{color:#009; font-size:36px; background:#0C3;}
復(fù)制代碼
那么此時(shí)我們可以看到這樣呢,之后h1 下的a標(biāo)簽才會(huì)起到作用,h2標(biāo)簽的內(nèi)容是沒有發(fā)生作用的。
點(diǎn)擊查看其他div+css教程
第一節(jié) div css基本書寫規(guī)則和原理詳細(xì)解答
第二節(jié)在div css當(dāng)中并列標(biāo)簽的應(yīng)用規(guī)則詳解
第三節(jié) div+ css中文字和圖片背景的常用css熟悉詳解
第四節(jié)div+css當(dāng)中的 內(nèi)聯(lián)樣式和外聯(lián)的區(qū)別講解
第五節(jié)div+css當(dāng)中 class類別選擇符的應(yīng)用詳解
第六課. DIV +CSS當(dāng)中的 id選擇器的應(yīng)用和匹配原理詳解
第七課 div css當(dāng)中 組合選擇符的應(yīng)用和原理詳解
第八課 div css 通配選擇符和包含選擇器的用法技巧
第九課 div css里面 常用選擇器的課程總結(jié)
第十課 div css 中css偽類元素的講解和應(yīng)用原理詳解
第十一課 div css當(dāng)中的 背景圖片的定位概念
道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題!
如果您是道勤主機(jī)用戶,那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信:q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服!
如果您不是我們的客戶也沒問題,點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后,我們?yōu)槟赓M(fèi)進(jìn)行無縫搬家服務(wù),讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)! |