一、css選擇器
Css通過(guò)選擇器對(duì)不同的元素進(jìn)行控制，并賦予各種樣式聲明，即可實(shí)現(xiàn)各種效果。
1.標(biāo)記選擇器：——修改標(biāo)簽的默認(rèn)樣式
h3{
background:url(picture_h1.gif) no-repeat;
}
2.類(lèi)別選擇器——可以應(yīng)用于任何標(biāo)簽的樣式
.route{
clear:both; margin:0px;
padding:5px 0px 15px 0px;
}
3.ID選擇器——應(yīng)用于指定對(duì)象的樣式
#beauty ul li{
float:left;
width:97px;
text-align:center;
}
二、選擇器的聲明
1.全局聲明
* {
background-color:#2286c6;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
2.集體聲明
H1,h3,h3{
background-color:#2286c6;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
H2.special,special,#one{
background-color:#2286c6;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
三、選擇器的嵌套
1.p b {
background-color:#2286c6;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
<p>這里只有<b>我</b>生效</p>
說(shuō)明：只對(duì)p標(biāo)簽中的b標(biāo)簽生效。
2.#one li{padding-left:15px}
說(shuō)明：只對(duì)名稱(chēng)為one的對(duì)象中的li標(biāo)簽生效
3. H2.special {
background-color:#2286c6;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
說(shuō)明：只對(duì)h2標(biāo)記生效的類(lèi)。
4..top1 strong{color:red;}
使用：<p class=”top1”>其他內(nèi)容<strong>css控制部分</strong>其他內(nèi)容</p>
說(shuō)明：只對(duì)i標(biāo)記生效的類(lèi)
四、css的寫(xiě)法
1.方法一 分開(kāi)寫(xiě)一個(gè)對(duì)象的多個(gè)方面的屬性值：
選擇器 {屬性1:值;屬性2:值;屬性3:值;屬性4:值……}
例如：.tsw{
padding-top: 2px;
padding-right: 3px;
padding-bottom: 4px;
padding-left: 1px;
}
2.方法二 合在一起寫(xiě)一個(gè)對(duì)象的多個(gè)屬性值
選擇器 {屬性:值1 值2 值3 值4……}
.tsw{ padding:9px 6px 11px 6px;}
在css中選擇器用“，”分割，而{}內(nèi)同一屬性值之間必須用空格分隔，不同屬性值之間用“；”分隔；屬性和其值用“：”連接，而html中用=“”的方式。
H1,h3,h3{
background-color:#2286c6;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
body{
margin:12px;
background:#000000;
}
.tsw{ padding:9px 6px 11px 6px;}
.three{
filter:flipv alpha(opacity=80) wave(add=0, freq=5, lightstrength=30, phase=25, strength=14);
四、CSS繼承
所謂CSS的繼承是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)。繼承特性最典型的應(yīng)用通常發(fā)揮在整個(gè)網(wǎng)頁(yè)的樣式預(yù)設(shè)，需要指定為其它樣式的部份設(shè)定在個(gè)別元素里即可。這項(xiàng)特性可以給網(wǎng)頁(yè)設(shè)計(jì)者提供更理想的發(fā)揮空間。但同時(shí)繼承也有很多規(guī)則，應(yīng)用的時(shí)候容易讓人迷惑
CSS的一個(gè)主要特征就是繼承，它是依賴(lài)于祖先-后代的關(guān)系的。繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素，還可以應(yīng)用于它的后代。例如一個(gè)BODY定義了的顏色值也會(huì)應(yīng)用到段落的文本中。下面舉例說(shuō)明：
樣式定義：body{color:red;}
應(yīng)用舉例代碼：<p>CSS的<strong>層疊和繼承</strong>深入探討</p>
應(yīng)用舉例效果：
這段代碼的應(yīng)用結(jié)果是：“CSS的層疊和繼承深入探討”這段話(huà)是紅顏色的，“層疊和繼承”由于應(yīng)用了strong元素，所以是粗體。這很符合制作者的意圖，也是為什么繼承是CSS的一部分的原因。
CSS繼承的局限性
在CSS中，繼承是一種非常自然的行為，我們甚至不需要考慮是否能夠這樣去做，但是繼承也有其局限性。
首先，有些屬性是不能繼承的。這沒(méi)有任何原因，只是因?yàn)樗褪沁@么設(shè)置的。舉個(gè)例子來(lái)說(shuō)：border屬性，大家都知道，border屬性是用來(lái)設(shè)置元素的邊框的，它就沒(méi)有繼承性。如下圖所示，如果繼承了邊框?qū)傩?，那么文檔看起來(lái)就會(huì)很奇怪，除非采取另外的措施關(guān)掉邊框的繼承屬性。
如上圖所示，多數(shù)邊框類(lèi)屬性，比如象Padding（補(bǔ)白），Margin（邊界），背景和邊框的屬性都是不能繼承的。
繼承中容易引起的錯(cuò)誤
有時(shí)候繼承也會(huì)帶來(lái)些錯(cuò)誤，比如說(shuō)下面這條CSS定義：
Body{color:blue}
在有些瀏覽器中這句定義會(huì)使除表格之外的文本變成藍(lán)色。從技術(shù)上來(lái)說(shuō)，這是不正確的，但是它確實(shí)存在。所以我們經(jīng)常需要借助于某些技巧，比如將CSS定義成這樣：
Body,table,th,td{color:blue}
這樣表格內(nèi)的文字也會(huì)變成藍(lán)色。
多種樣式混合應(yīng)用
既然有了繼承性，那么在樣式表中的應(yīng)用上可能會(huì)有些讀者搞不清，多個(gè)樣式表同時(shí)應(yīng)用到一個(gè)對(duì)象上會(huì)發(fā)生什么情形呢？先舉個(gè)簡(jiǎn)單的例子：
樣式定義：.apple{color:red;} H1{color:yellow;}
應(yīng)用舉例代碼：<H1 CLASS=”apple”>這兒的蘋(píng)果好紅啊</H1>
應(yīng)用舉例效果：因?yàn)檫x擇符H1和.apple都匹配上面的H1元素，那么到底瀏覽器會(huì)應(yīng)用哪一個(gè)呢？通過(guò)在瀏覽器中觀(guān)察，我們發(fā)現(xiàn)這段文字應(yīng)用了.apple這個(gè)樣式，所以它顯示的是紅色。這是因?yàn)閮蓷l規(guī)則的特殊性不一樣，CSS規(guī)則必須這樣進(jìn)行處理。
樣式表中的特殊性描述了不同規(guī)則的相對(duì)權(quán)重，它的基本規(guī)則是：
統(tǒng)計(jì)選擇符中的ID屬性個(gè)數(shù)。
統(tǒng)計(jì)選擇符中的CLASS屬性個(gè)數(shù)。
統(tǒng)計(jì)選擇符中的HTML標(biāo)記名格式。
最后，按正確的順序?qū)懗鋈齻€(gè)數(shù)字，不要加空格或逗號(hào)，得到一個(gè)三位數(shù)。( 注意，你需要將數(shù)字轉(zhuǎn)換成一個(gè)以三個(gè)數(shù)字結(jié)尾的更大的數(shù))。相應(yīng)于選擇符的最終數(shù)字列表可以很容易確定較高數(shù)字特性凌駕于較低數(shù)字的。
以下是一個(gè)按特性分類(lèi)的選擇符的列表：
H1 {color:blue;} 特性值為：1
P EM {color:purple;} 特性值為：2
.apple {red;} 特性值為：10
P.bright {color:yellow;} 特性值為：11
P.bright EM.dark {color:brown;} 特性值為：22
#id316 {color:yellow} 特性值為：100
從上表我們可以看出#id316具有更高的特殊性，因而它有更高的權(quán)重。當(dāng)有多個(gè)規(guī)則都能應(yīng)用于同一個(gè)元素時(shí)，權(quán)重越高的樣式將被優(yōu)先采用。
CSS繼承的優(yōu)先級(jí)問(wèn)題
上面我們討論了CSS的繼承性和特殊性，在特殊性的框架下，被繼承的特性值為0，這就意味著任何顯示聲明的規(guī)則將會(huì)覆蓋其繼承樣式。因此，不管一條規(guī)則具有多高的權(quán)重，如果沒(méi)有其他規(guī)則能應(yīng)用于這個(gè)繼承元素，那么它也只是個(gè)被繼承的規(guī)則而已，舉例說(shuō)明。
樣式定義：
BODY {background:black;}
LI {color:gray;}
UL.white {color:white}
應(yīng)用舉例代碼：
<ul>
<li>舉例列表一</li>
<li>舉例列表二</li>
<li>舉例列表三</li>
<li>舉例列表四</li>
</ul>
應(yīng)用舉例效果：
有些讀者可能認(rèn)為除包含.white類(lèi)的列表項(xiàng)顯示為白色外，其余所有的列表項(xiàng)都應(yīng)該是灰色的。然而情況并非如此。
為什么會(huì)出現(xiàn)這樣的情況呢？因?yàn)閹нx擇符LI的顯式聲明的權(quán)值比從UL.white規(guī)則那里繼承過(guò)來(lái)的權(quán)值要大，所以每個(gè)列表項(xiàng)都是灰色的。
可能有些地方不是很好理解，大家多思考一下就會(huì)明白，平時(shí)在應(yīng)用樣式表的時(shí)候多留意思考一下。
下面我們?cè)賮?lái)看一個(gè)例子，若給定如下所示的標(biāo)記，則EM強(qiáng)調(diào)文字將會(huì)是灰色的，而非黑色，因?yàn)?/font>EM規(guī)則的權(quán)值要大于從H1元素繼承來(lái)的權(quán)值：
樣式定義：
H1#id316 {color:black;} 特性值為：101
EM {color:gray;} 特性值為：1
應(yīng)用舉例代碼：
<H1 ID=”id316”>深入探討<EM>CSS的繼承性</EM></H1>
應(yīng)用舉例效果：
這是因?yàn)榈诙lEM規(guī)則的特性值（1）要比被繼承的特性值（0）要大，事實(shí)上規(guī)定H1#id316的原始特性值（101）對(duì)其繼承值沒(méi)有影響，仍舊為0。
小技巧：
如果想讓H1始終為黑色，而EM文字在其他情況下紅色，那么下面的樣式表設(shè)置就是一個(gè)很好的方法：
H1，H1 EM {color:black;} 特性值為：1，2
EM {color:red;} 特性值為：1
給定這個(gè)規(guī)則后，除在H1元素內(nèi)的任何EM文字就都是紅色，而H1內(nèi)的EM文字仍舊為黑色，由于其選擇符分組，在第一條規(guī)則中就有兩條有效的規(guī)則（一條是對(duì)H1的，另一條是對(duì)H1 EM的）也就有兩個(gè)特性值——每條規(guī)則一個(gè)。
上面我們討論了多個(gè)樣式規(guī)則同時(shí)應(yīng)用于同一對(duì)象時(shí)，哪個(gè)規(guī)則會(huì)被最終應(yīng)用的一些情況，可能有些細(xì)心的讀者會(huì)說(shuō)，那STYLE元素呢？對(duì)啊，HTML代碼中可以直接應(yīng)用內(nèi)聯(lián)樣式STYLE的嘛。那么它的特性值如何呢？
回答是這樣的：帶有STYLE的元素在CSS1下其特性值為100，盡管類(lèi)似于#ID316這樣的ID選擇符的特性值也為100，但在實(shí)際應(yīng)用中，STYLE這一權(quán)值會(huì)更高一些，因?yàn)?/font>STYLE元素的值看起來(lái)要比多數(shù)普通規(guī)則的權(quán)值大。所以我們可以看出內(nèi)聯(lián)樣式具有高的特性值，具體的例子我們就不舉了，大家可以自己試試。
人為定義CSS繼承優(yōu)先級(jí)
在制作網(wǎng)頁(yè)的過(guò)程中，我們可能想要設(shè)置某個(gè)規(guī)則比其他的規(guī)則更重要，CSS中允許這樣設(shè)置，它們被稱(chēng)為重要規(guī)則（important rule）。這是根據(jù)其聲明的方式和它們的自然屬性來(lái)命名的。通過(guò)在一條規(guī)則的分號(hào)前插入！important這樣一個(gè)短語(yǔ)來(lái)標(biāo)記一條重要規(guī)則，比如說(shuō)：
P.apple {color:#red !important; background:white;}
顏色值#red被標(biāo)記為!important，而背景色white未被標(biāo)記，如果需要二條規(guī)則都是重要的話(huà)，那么每條規(guī)則都需要標(biāo)上!important。
正確地放置!important的位置是很重要的，否則整條規(guī)則將為無(wú)效。!important總是放在規(guī)則聲明的最后，在分號(hào)之前。
標(biāo)記為!important的規(guī)則具有最高的權(quán)值，也就是說(shuō)他沒(méi)有具體的特性值，但是比其他的權(quán)值都要大。需要注意的是，雖然制作者定義的樣式比用戶(hù)定義的樣式具有更高權(quán)值時(shí)，但!important規(guī)則恰恰相反：重要的用戶(hù)定義規(guī)則要比制作者定義的樣式具有更高權(quán)值，即使是標(biāo)記為!important的重要規(guī)則也是如此。
看了這么多文字介紹后，我們來(lái)舉個(gè)例子看一下：
樣式定義：
H1 {color:gray !important;}
應(yīng)用舉例代碼：
<H1 STYLE=”color:black;”>看這兒！</H1>
應(yīng)用舉例效果:
!important規(guī)則會(huì)覆蓋內(nèi)聯(lián)STYLE屬性的內(nèi)容，所以結(jié)果文字是灰色的而不是黑色的。
還有最后一種需要考慮的情況：繼承值總是具有特性值0的特點(diǎn)，即使是從帶有!important的規(guī)則繼承的值也是如此，在匹配重要規(guī)則的元素之外，重要性也會(huì)隨之消失，這點(diǎn)是需要我們特別注意的！
聯(lián)系客服
