欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS控制樣式的三種方式(優(yōu)先級對比驗證)

  發(fā)布時間：2013-07-22 12:57:41   作者：佚名   我要評論
大家都知道，CSS的中文名叫做層疊樣式表，而CSS在控制樣式的時候，有三種引入方式,這里簡單介紹下CSS控制樣式的三種方式

好了，直入主題，大家都知道，CSS的中文名叫做層疊樣式表，而CSS在控制樣式的時候，有三種引入方式，分別是：

1>外部樣式表 : 將樣式規(guī)則直接寫在*.css文件中，然后再*.html頁面中通過<link>標(biāo)簽引入的方式
2>內(nèi)部樣式表 :（位于 <head> 標(biāo)簽內(nèi)部）
3>內(nèi)聯(lián)樣式 :（在 HTML 元素內(nèi)部）

按照W3School網(wǎng)站(點這里直達(dá))的說法，當(dāng)同一個 HTML 元素被不止一個樣式定義時，它們是有優(yōu)先級之分的，如下，將優(yōu)先級從小到大排列出來，其中4的優(yōu)先級最高：

1.瀏覽器缺省設(shè)置
2.外部樣式表
3.內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
4.內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）

對于這個結(jié)論，相信大家一定有很多疑問，而網(wǎng)上很多都是直接對官網(wǎng)的內(nèi)容進(jìn)行復(fù)制然后粘貼發(fā)布就算了，讓我們非常厭倦和煩惱，所以，在這里讓我們一起來驗證對比下。

注意：本次驗證主要針對后面3個優(yōu)先級，關(guān)于瀏覽器缺省設(shè)置這個，相信大家都知道，他一定是最低的，我們在此就不過多的舉例驗證了。

一、驗證環(huán)境的描述

瀏覽器：FireFox 22.0
語言：HTML 4.01/CSS
開發(fā)工具:Aptana Studio 3

二、使用三種方式直接對標(biāo)簽進(jìn)行元素定義樣式
1>首先，我們先直接使用外部樣式表來定義div標(biāo)簽的樣式：

xiaoxuetu.css


復(fù)制代碼
代碼如下:

div {
color:blue
}

xiaoxuetu.html


復(fù)制代碼
代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS樣式表優(yōu)先級測試</title>
<meta charset="UTF-8" /></p> <p> <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</head>
<body>
<div>外部樣式表</div>
</body>
</html>

顯示效果：



下面我們開始驗證吧。

2>外部樣式表 VS 內(nèi)部樣式表（先定義內(nèi)部樣式表，再引入外部樣式表定義文件） 加入內(nèi)部樣式表，也就是說，直接在<head>標(biāo)簽中定義樣式規(guī)則，這個時候我們修改一下xiaoxuetu.html中的代碼：

xiaoxuetu.html


復(fù)制代碼
代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS樣式表優(yōu)先級測試</title>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
div {
color: green
}
</style>
<link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</head>
<body>
<div>外部樣式表(藍(lán)色) VS 內(nèi)部樣式表(綠色)</div>
</body>
</html>

顯示效果：



得出優(yōu)先級結(jié)果：外部樣式表 > 內(nèi)部樣式表

3>外部樣式表 VS 內(nèi)部樣式表（先引入外部樣式表定義文件，再定義內(nèi)部樣式表）這步很簡單，其實就是直接將link標(biāo)簽剪切移動到上面到head標(biāo)簽中定義內(nèi)部樣式表的前面：

xiaoxuetu.html


復(fù)制代碼
代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS樣式表優(yōu)先級測試</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<style type="text/css" media="screen">
div {
color: green;
}
</style>
</head>
<body>
<div>外部樣式表(藍(lán)色) VS 內(nèi)部樣式表(綠色)</div>
</body>
</html>


顯示效果：



得出優(yōu)先級結(jié)果：內(nèi)部樣式表 > 外部樣式表

從<2>和<3>這兩部測試我們可以知道，在直接對標(biāo)簽的樣式進(jìn)行定義時，外部樣式表和內(nèi)部樣式表的優(yōu)先與他們的引入順序有關(guān),嘿嘿，是不是很慶幸沒有完全相信官網(wǎng)所說的咧……

4>外部樣式表 VS 內(nèi)聯(lián)樣式 直接在div標(biāo)簽中定義樣式，這個時候我們修改下xiaoxuetu.html的代碼：

xiaoxuetu.html


復(fù)制代碼
代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS樣式表優(yōu)先級測試</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</head>
<body>
<div style="color:red;">外部樣式表(藍(lán)色) VS 內(nèi)聯(lián)樣式(紅色)</div>
</body>
</html>


顯示效果：


得出優(yōu)先級結(jié)果：內(nèi)聯(lián)樣式 > 外部樣式表

5>內(nèi)聯(lián)樣式 VS 內(nèi)部樣式表，這個時候我們修改下xiaoxuetu.html代碼：

xiaoxuetu.html


復(fù)制代碼
代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS樣式表優(yōu)先級測試</title>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
div {
color: green
}
</style>
</head>
<body>
<div style="color:red;">內(nèi)部樣式表(綠色) VS 內(nèi)聯(lián)樣式(紅色)</div>
</body>
</html>


顯示效果：


得出優(yōu)先級結(jié)果：內(nèi)聯(lián)樣式 > 內(nèi)部樣式表

從上面步驟<2>到<5>的對比中我們可以知道:內(nèi)部樣式的優(yōu)先級是最大的，而內(nèi)部樣式表和外部樣式表的優(yōu)先級得看他們的引入和定義順序，如果先用內(nèi)部樣式表定義了樣式，然后再引入通過外部樣式表定義的樣式，你們外部樣式表的樣式將會覆蓋內(nèi)部樣式表定義的樣式，反之亦是一樣。

當(dāng)然，這個情況只是用id或者class選擇的時候，也是一樣的。如果對一個標(biāo)簽的樣式定義既有class也有id選擇器的時候，同時又包含了三種樣式定義方式的，就得先看完下面的優(yōu)先級測試了。

三、判斷用id、class以及標(biāo)簽選擇器定義樣式的優(yōu)先級
本次測試中，為了減少其他因素的影響，只采用內(nèi)部樣式表來定義樣式，同時分別使用了ID選擇器和Class選擇器來選擇使用樣式的標(biāo)簽。

1>三種方式并存的時候

xiaoxuetu.html


復(fù)制代碼
代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS樣式表優(yōu)先級測試</title>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
fieldset {
width: 50%
}
div {
color: red;
}
#idtest {
color: green;
}
.classtest {
color: blue;
}
</style>
</head>
<body>
<fieldset>
<legend>單一顯示效果</legend>
<div id="idtest">只使用ID(綠色)</div>
<div class="classtest">只使用Class(藍(lán)色)</div>
</fieldset>
<p>&nbsp;</p>
<fieldset>
<legend>先引入ID定義的樣式再引入Class定義的樣式</legend>
<div id="idtest" class="classtest">小學(xué)徒</div>
</fieldset>
<p>&nbsp;</p>
<fieldset>
<legend>先引入Class定義的樣式再引入ID定義的樣式</legend>
<div id="idtest" class="classtest">小學(xué)徒</div>
</fieldset>
</body>
</html>


顯示效果：



得出優(yōu)先級結(jié)果 id選擇器 > class選擇器 > 標(biāo)簽選擇器

2>當(dāng)只有兩個class或者兩個id的時候

xiaoxuetu.html


復(fù)制代碼
代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS樣式表優(yōu)先級測試</title>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
#idtest {
color: green;
}
#idtest2 {
color: YellowGreen;
}
.classtest {
color: blue;
}
.classtest2 {
color: yellow;
}
</style>
</head>
<body>
<fieldset>
<legend>兩個class的時候</legend>
<div class="classtest2" class="classtest">classtest2(黃色)先classtest(藍(lán)色)后</div>
<div class="classtest" class="classtest2">classtest(藍(lán)色)先classtest2(黃色)后</div>
</fieldset>
<p>&nbsp;</p>
<fieldset>
<legend>兩個id的時候</legend>
<div id="idtest" id="idtest2">idtest(綠色)先idtest2(黃綠色)后</div>
<div id="idtest2" id="idtest">idtest2(黃綠色)先idtes(綠色)t后</div>
</fieldset>
</body>
</html>


顯示效果：



得出優(yōu)先級結(jié)果：當(dāng)且僅當(dāng)有兩個或者是多個class或者id的時候，誰在前面就誰的優(yōu)先級高。

3>只有標(biāo)簽div選擇器的時候

xiaoxuetu.html(藍(lán)色樣式先，紅色樣式后)


復(fù)制代碼
代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS樣式表優(yōu)先級測試</title>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
div {
color: blue;
}
div {
color: red;
}
</style>
</head>
<body>
<div>藍(lán)色樣式先，紅色樣式后</div>
</body>
</html>


顯示效果：



xiaoxuetu2.html(紅色樣式先，藍(lán)色樣式后)


復(fù)制代碼
代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS樣式表優(yōu)先級測試</title>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
div {
color: red;
}
div {
color: blue;
}
</style>
</head>
<body>
<div>紅色樣式先，藍(lán)色樣式后</div>
</body>
</html>


顯示效果:



從兩個結(jié)果我們可以知道，當(dāng)只有標(biāo)簽選擇器的時候，后面定義的樣式表的優(yōu)先級就越高。

四、總結(jié)

1.當(dāng)只使用id選擇器、class選擇器或者標(biāo)簽選擇器的時候，不管是使用多少種樣式表定義方式，都是內(nèi)嵌樣式的優(yōu)先級最高，接下來外部樣式表和內(nèi)部樣式表的就得看他們的引入順序了;
2.當(dāng)只使用id選擇器或者class選擇器的時候，同一個標(biāo)簽內(nèi)不管使用了多少個，都是排在前面的優(yōu)先級更高;
3.當(dāng)只使用標(biāo)簽選擇器的時候，如果定義了多個一樣的，你們寫在最后面的標(biāo)簽選擇器生效，也就是它的優(yōu)先級最高;
4.當(dāng)同一個標(biāo)簽中既有id選擇器，又有class選擇器，同時又有標(biāo)簽選擇器的時候，優(yōu)先級的次序是id選擇器 > class選擇器 > 標(biāo)簽選擇器;
5.當(dāng)每一種都有的時候，那就根據(jù)具體情況具體分析吧，嘿嘿，哈哈……

恩，這篇文章我很用心寫的哦，如果大家覺得好，麻煩點擊一下贊吧，又或者你有什么疑問或者不一樣的意見，歡迎留言討論哦，因為白天要上班，所以我會在晚上有空的時候及時處理的，還請見諒哈。

轉(zhuǎn)載請注明出處：http://www.cnblogs.com/xiaoxuetu/

相關(guān)文章

  • CSS選擇器種類、優(yōu)先級與匹配原理詳解

    作為一個Web開發(fā)者，掌握必要的前臺技術(shù)也是很重要的特別是CSS選擇器的優(yōu)先級問題，為了廣大web愛好者可以更好的解決問題，這里就CSS選擇器的優(yōu)先級問題做了一些總結(jié)
    2013-08-01

  • CSS優(yōu)先級的相關(guān)知識詳細(xì)介紹

    所謂CSS優(yōu)先級，即是指CSS樣式在瀏覽器中被解析的先后順序，既然樣式有優(yōu)先級，那么就會有一個規(guī)則來約定這個優(yōu)先級，而這個“規(guī)則”就是本次所需要講的重點
    2013-04-22

  • 網(wǎng)頁css優(yōu)先級為您詳細(xì)解讀

    所謂CSS優(yōu)先級，即是指CSS樣式在瀏覽器中被解析的先后順序，CSS是層疊樣式表（Cascading Style Sheets）的簡稱，我們能通過CSS為文檔設(shè)置豐富且易于修改的外觀
    2013-04-19

  • css樣式優(yōu)先級及層疊的順序排序探討

    css樣式優(yōu)先級是按照樣式表中出現(xiàn)順序還是按照元素中class或者id值的聲明順序呢，這個問題貌似一直存在我們身邊卻一直無從選擇，接下來用實例為大家說明下，到底哪個高點，
    2013-03-14

  • CSS層疊樣式表之CSS解析機(jī)制的優(yōu)先級及樣式覆蓋問題探討

    多重樣式（Multiple Styles）： 如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時應(yīng)用于同一個元素，就是使多重樣式的情況.有個例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則
    2013-02-01

  • CSS優(yōu)先級和!important與IE6的BUG討論及解決方案

    本來我對他誰的ie6不支持!important也沒什么異議，可是正好在前幾天正好用個這個!important屬性解決了一個樣式優(yōu)先級的問題，而且是支持ie6的，這是為什么呢？到底ie6支不
    2013-01-23

  • IE6下CSS多類選擇符優(yōu)先級不起作用的bug分析及解決方法

    IE6，這個前端開發(fā)的夢魘總是在你不經(jīng)意的時候給你捅一刀,在ie6環(huán)境下CSS多類選擇符優(yōu)先級不起作用，多么的令人氣憤啊，經(jīng)過測試：IE6下這種類組合的優(yōu)先級不如單個類， 感
    2013-01-23

  • css樣式的優(yōu)先級究竟龐雜到什么程度

    css樣式的優(yōu)先級是一個龐雜的知識點，我甚至覺得它的龐雜可以與“浮動”以及“框模型”相提并論,今天就利用點時間把我所了解的寫下來，大家共同進(jìn)步
    2013-01-11

  • css選擇器優(yōu)先級深入理解

    css基礎(chǔ)選擇器有標(biāo)簽選擇器、類選擇器、id選擇器、通用選擇器,本文將深入介紹css選擇器優(yōu)先級,這會給正在解決優(yōu)先級問題的朋友，帶來些許幫助
    2012-12-04

  • 同級情況下CSS的優(yōu)先級探討

    CSS的調(diào)用方式一共有4種，分別是：行內(nèi)樣式，內(nèi)嵌式，link鏈接式，@import導(dǎo)入式，在同級的前提下，我們可以按樣就近原則來理解他們的優(yōu)先級，則越前定義的樣式，會被后面
    2010-07-23

最新評論