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

CSS控制樣式的三種方式(優(yōu)先級(jí)對(duì)比驗(yàn)證)

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

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

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)站(點(diǎn)這里直達(dá))的說法，當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，它們是有優(yōu)先級(jí)之分的，如下，將優(yōu)先級(jí)從小到大排列出來，其中4的優(yōu)先級(jí)最高：

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

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

注意：本次驗(yàn)證主要針對(duì)后面3個(gè)優(yōu)先級(jí)，關(guān)于瀏覽器缺省設(shè)置這個(gè)，相信大家都知道，他一定是最低的，我們?cè)诖司筒贿^多的舉例驗(yàn)證了。

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

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

二、使用三種方式直接對(duì)標(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)先級(jí)測(cè)試</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>

顯示效果：



下面我們開始驗(yàn)證吧。

2>外部樣式表 VS 內(nèi)部樣式表（先定義內(nèi)部樣式表，再引入外部樣式表定義文件） 加入內(nèi)部樣式表，也就是說，直接在<head>標(biāo)簽中定義樣式規(guī)則，這個(gè)時(shí)候我們修改一下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)先級(jí)測(cè)試</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)先級(jí)結(jié)果：外部樣式表 > 內(nèi)部樣式表

3>外部樣式表 VS 內(nèi)部樣式表（先引入外部樣式表定義文件，再定義內(nèi)部樣式表）這步很簡單，其實(shí)就是直接將link標(biāo)簽剪切移動(dòng)到上面到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)先級(jí)測(cè)試</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)先級(jí)結(jié)果：內(nèi)部樣式表 > 外部樣式表

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

4>外部樣式表 VS 內(nèi)聯(lián)樣式 直接在div標(biāo)簽中定義樣式，這個(gè)時(shí)候我們修改下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)先級(jí)測(cè)試</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)先級(jí)結(jié)果：內(nèi)聯(lián)樣式 > 外部樣式表

5>內(nèi)聯(lián)樣式 VS 內(nèi)部樣式表，這個(gè)時(shí)候我們修改下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)先級(jí)測(cè)試</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)先級(jí)結(jié)果：內(nèi)聯(lián)樣式 > 內(nèi)部樣式表

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

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

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

1>三種方式并存的時(shí)候

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)先級(jí)測(cè)試</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)先級(jí)結(jié)果 id選擇器 > class選擇器 > 標(biāo)簽選擇器

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

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)先級(jí)測(cè)試</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>兩個(gè)class的時(shí)候</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>兩個(gè)id的時(shí)候</legend>
<div id="idtest" id="idtest2">idtest(綠色)先idtest2(黃綠色)后</div>
<div id="idtest2" id="idtest">idtest2(黃綠色)先idtes(綠色)t后</div>
</fieldset>
</body>
</html>


顯示效果：



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

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

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)先級(jí)測(cè)試</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)先級(jí)測(cè)試</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>


顯示效果:



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

四、總結(jié)

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

恩，這篇文章我很用心寫的哦，如果大家覺得好，麻煩點(diǎn)擊一下贊吧，又或者你有什么疑問或者不一樣的意見，歡迎留言討論哦，因?yàn)榘滋煲习啵晕視?huì)在晚上有空的時(shí)候及時(shí)處理的，還請(qǐng)見諒哈。

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論