CSS之引入方式和选择器
css(層疊樣式表) 在一個(gè)網(wǎng)頁(yè)中主要負(fù)責(zé)了頁(yè)面的數(shù)據(jù)樣式。
編寫css代碼的方式：
第一種： 在style標(biāo)簽中編寫css代碼。 只能用于本頁(yè)面中，復(fù)用性不強(qiáng)。
格式 ：
<style type="text\css">
? ? ? ? 編寫css的代碼。
? ? ?</style>
例子：
? ? ? ?<style type="text\css">
? ? ? ? ?a{
? ? ? ? ? ? ? ?color:#F00;
? ? ? ? ? ? ? text-decoration:none;//超鏈接的下劃線消失
? ? ? ? ? ? }
? ? ? ?</style>
第二種： 可以引入外部的css文件。 推薦使用。
方式1： 使用link標(biāo)簽。 推薦使用...
格式：
<link href="css文件的路徑" rel="stylesheet"> //href是說(shuō)明css樣式路徑，而rel是說(shuō)明css樣式與該html文件為樣式腳本的關(guān)系
例子： <link href="1.css" rel="stylesheet"/>
方式2：使用<style>引入
格式：
<style type="text/css" >
@import url("css的路徑");
</style>
例子：
<style type="text/css" >
@import url("1.css");
</style>
第三種方式：直接在html標(biāo)簽使用style屬性編寫。 只能用于本標(biāo)簽中，復(fù)用性較差。 不推薦使用。
例子：
<a style="color:#0F0; text-decoration:none" href="#">新聞的標(biāo)題1</a>
?
css的注釋
html的注釋：<!-- html的注釋 -->
css /* css的注釋 ..*/
?
?
2.選擇器
選擇器： 選擇器的作用就是找到對(duì)應(yīng)的數(shù)據(jù)進(jìn)行樣式化。
1.標(biāo)簽選擇器： 就是找到所有指定的標(biāo)簽進(jìn)行樣式化。
格式：
標(biāo)簽名{
樣式1；樣式2....
}
例子：
div{
color:#F00;
font-size:24px;
}
2. 類選擇器: 使用類選擇器首先要給html標(biāo)簽指定對(duì)應(yīng)的class屬性值。
格式：
.class的屬性值{
樣式1；樣式2...
}
例子：
.two{
background-color:#0F0;
color:#F00;
font-size:24px;
}
類選擇器要注意的事項(xiàng)：
1. html元素的class屬性值一定不能以數(shù)字開頭。
2. 類選擇器的樣式是要優(yōu)先于標(biāo)簽選擇器的樣式。
3. ID選擇器： 使用ID選擇器首先要給html元素添加一個(gè)id的屬性值。
3. ID選擇器的格式：
#id屬性值{
樣式1；樣式2...
}
id選擇器要注意的事項(xiàng)：
1. ID選擇器的樣式優(yōu)先級(jí)是最高的，優(yōu)先于類選擇器與標(biāo)簽選擇器。
2. ID的屬性值也是不能以數(shù)字開頭的。
3. ID的屬性值在一個(gè)html頁(yè)面中只能出現(xiàn)一次。
4. 交集選擇器： 就是對(duì)選擇器1中的選擇器2里面的數(shù)據(jù)進(jìn)行樣式化。
選擇器1 選擇器2{
樣式1，樣式2....
}
例子：
.two span{
background-color:#999;
font-size:24px;
}
5. 并集選擇器： 對(duì)指定的選擇器進(jìn)行統(tǒng)一的樣式化。
格式：
選擇器1,選擇器2..{
樣式1；樣式2...
}
span,a{
border-style:solid;
border-color:#F00;
}
6. 通用選擇器:
*{
樣式1；樣式2...
}
?
?
*{
text-decoration:line-through;
background-color:#CCC;
}
?
代碼：
<!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> <style type="text/css">*{text-decoration:line-through;background-color:#CCC;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無(wú)標(biāo)題文檔</title> </head> <body><div id="one" class="two">這個(gè)是<span>第一個(gè)div標(biāo)簽</span>...</div><div class="two">這個(gè)是<span>第二個(gè)div標(biāo)簽</span>...</div><span>這個(gè)是一個(gè)span標(biāo)簽</span><br/><a class="two" href="#">新聞標(biāo)題</a></body> </html>?
?
?
7、偽類選擇器：偽類選擇器就是對(duì)元素處于某種狀態(tài)下進(jìn)行樣式的。
格式：標(biāo)簽：偽類{}
注意：
1. a:hover 必須被置于 a:link 和 a:visited 之后
2. a:active 必須被置于 a:hover 之后
四大偽類：
?
a:link{color:#F00} /* 沒有被點(diǎn)擊過---紅色 */
a:visited{color:#0F0} /* 已經(jīng)被訪問過的樣式---綠色 */
a:hover{color:#00F;} /* 鼠標(biāo)經(jīng)過的狀態(tài)---藍(lán) */
a:active{color:#FF0;}/*鼠標(biāo)選中的時(shí)候，即是點(diǎn)擊鼠標(biāo)左鍵，但是不打開*/
?
代碼：
實(shí)現(xiàn)鼠標(biāo)移動(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>無(wú)標(biāo)題文檔</title> </head> <style type="text/css" >table{background-color:#CCC;border-collapse:collapse;border:3px;}tr:hover{background-color:#06F;} </style><body><table border="1px" width="400px" height="300px" align="center" ><tr><th>姓名</th><th>成績(jī)</th><th>人品</th></tr><tr><td>張三</td><td>98</td><td>差</td></tr><tr><td>李四</td><td>50</td><td>極好</td></tr><tr><td>綜合測(cè)評(píng)</td><td colspan="2">不錯(cuò)</td></tr> </table> </body> </html>?
?運(yùn)行效果：
?
轉(zhuǎn)載于:https://www.cnblogs.com/mswangblog/p/6440651.html
與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的CSS之引入方式和选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win10 如何配置 java jdk1
- 下一篇： 6、Qt Meta Object sys