DHTML【7】--CSS
本節(jié)將要介紹CSS的選擇器，CSS有三種常用的選擇器，還有三種擴(kuò)展選擇器，說到選擇器，那么選擇器是做什么用的呢？
上一節(jié)我們介紹CSS常用屬性的時(shí)候，我們都是通過在標(biāo)簽內(nèi)定義Style屬性來介紹的，但是如果Style中的屬性有很多，并且我們還要把相同類型的標(biāo)簽用同一個(gè)CSS樣式來美化，我們總不能Copy代碼吧，首先頁(yè)面太亂，再者代碼量大，在大型的網(wǎng)站開發(fā)中會(huì)影響執(zhí)行效率，最后自己操作起來也很麻煩，遇到這個(gè)問題，我們改怎么解決呢？
這就是選擇器要做的事情，我們可以先定義好一個(gè)樣式，然后再指定給那些需要美化的標(biāo)簽，這樣難道不好嗎？好，從美學(xué)角度講，一個(gè)頁(yè)面的同類事物只有一個(gè)風(fēng)格會(huì)給用戶整體舒服感，那么選擇器該怎么用呢？下面先請(qǐng)看下圖：
此圖看和想5分鐘，好好體會(huì)一下。了解了分類和用途之后，下面我們就結(jié)合代碼，看看你的體會(huì)對(duì)嗎？
1.標(biāo)簽選擇器
<html>
<head>
<styletype="text/css">
div{background:#FF0000}
</style>
</head>
<body>
<div >我是div</div>
<div >我也是div</div>
<p>我是p</p>
<p>我也是p</p>
<inputtype="text" value="我是TXT"/>
</body>
</html>
在瀏覽器中查看發(fā)現(xiàn)所有的div標(biāo)簽全被美化了，其他標(biāo)簽都是默認(rèn)狀態(tài)，<style type="text/css"></style>這段代碼可以先不用管，下一節(jié)會(huì)介紹，主要看紅色標(biāo)記的部分，標(biāo)簽選擇要寫在head標(biāo)簽內(nèi)，寫法格式要好好掌握。
2.類選擇器
<html>
<head>
<styletype="text/css">
.waring{Blue;}< /span>
.highlight{font-size:xx-large;cursor:help;}
</style>
</head>
<body>
<div>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3 class="highlight">我是h3</h3>
</div>
</body>
</html>
在瀏覽器中查看發(fā)現(xiàn)，只有在class屬性被定義的標(biāo)簽被相應(yīng)美化了，其他標(biāo)簽仍為默認(rèn)樣式，類選擇器的名稱是自定義的。
3.ID選擇器
<html>
<head>
<styletype="text/css">
#myTxt
{
?font-size:36px;
?background-color:#00ff00;
}
</style>
</head>
<body>
<div>
<p>我是p</p>
<input id="myTxt" type="text"value="我是text"/>
</div>
</body>
</html>
ID選擇器和我們平時(shí)開發(fā)取對(duì)象很相似，最具有針對(duì)性。
對(duì)于以上的三種選擇器，三種選擇器可以結(jié)合使用，但是瀏覽器會(huì)給他們排個(gè)優(yōu)先級(jí)，就是標(biāo)簽的樣式被定義多次，該顯示哪個(gè)樣式，瀏覽器會(huì)其中優(yōu)先級(jí)最高的樣式，樣式優(yōu)先級(jí)：ID>class>標(biāo)簽。
4.關(guān)聯(lián)選擇器
<html>
<head>
<styletype="text/css">
div h1{background:#00ff00}
</style>
</head>
<body>
<div>
<p>我是p</p>
<h1>我是h1</h1>
</div>
<h1>我也是h1</h1>
</body>
</html>
在瀏覽器中查看，我們發(fā)現(xiàn)，只有div標(biāo)簽內(nèi)的h1標(biāo)簽被修飾了，div標(biāo)簽內(nèi)的其他標(biāo)簽，甚至div外的h1標(biāo)簽都沒有被修飾，這就是關(guān)聯(lián)組合器的作用，神奇吧。
5.組合選擇器
<html>
<head>
<styletype="text/css">
div,h1,p{background:#00ff00}
</style>
</head>
<body>
<div>我是div</div>
<h1>我也是h1</h1>
<p>我是p</p>
<h2>我是h2</h2>
</body>
</html>
在瀏覽器中查看，我們會(huì)發(fā)現(xiàn)，只有div,h1,p這三種標(biāo)簽被修飾了，其他標(biāo)簽沒有被修飾，這也是標(biāo)簽選擇器的組合用法，達(dá)到頁(yè)面效果統(tǒng)一。
6.偽元素選擇器
<html>
<head>
<styletype="text/css">
?a:active{color:Green};
?a:hover{cursor:help};
?a:link{color:Red};
?a:visited{color:Blue};
</style>
</head>
<body>
<ahref="www.baidu.com">百度網(wǎng)首頁(yè)</a>
</body>
</html>
這是我介紹的最后一個(gè)選擇器了，上面代碼在瀏覽器中查看，發(fā)現(xiàn)超鏈接默認(rèn)的顏色變?yōu)榱司G色，鼠標(biāo)放上去的時(shí)候鼠標(biāo)指針形狀為問號(hào)幫助樣式，當(dāng)我們鼠標(biāo)按下時(shí)超鏈接的顏色變?yōu)榧t色，訪問完再回到頁(yè)面，發(fā)現(xiàn)超鏈接的顏色變?yōu)樗{(lán)色，我說完這些你也大概知道上面的代碼是什么意思了，為選擇器不僅可以用于a標(biāo)簽，還可以用于p等標(biāo)簽，具體怎么用就去查幫助文檔吧，怎么查呢？
DHTML->HTML元素->a標(biāo)簽->樣式。
好了，關(guān)于選擇器我就介紹到這里，之所以舉這么簡(jiǎn)單的例子，是因?yàn)槲抑饕v的是原理，不想因?yàn)槌鯇W(xué)者突然看到其他難點(diǎn)而忽略了重點(diǎn)。好了，本節(jié)就到這里，下一節(jié)將繼續(xù)HTML與CSS的結(jié)合方式。
轉(zhuǎn)載于:https://blog.51cto.com/jhq0113/1264543
總結(jié)
以上是生活随笔為你收集整理的DHTML【7】--CSS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nagios安装与配置
- 下一篇： 浏览器重绘和重排