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

IE7與web標(biāo)準(zhǔn)設(shè)計(jì)（2）

互聯(lián)網(wǎng)   發(fā)布時(shí)間：2008-10-17 19:25:18   作者：佚名   我要評(píng)論
上文：IE7的web標(biāo)準(zhǔn)設(shè)計(jì) IE歷來(lái)被web標(biāo)準(zhǔn)的擁護(hù)者所詬病，而當(dāng)FireFox橫空出世以后，更多的網(wǎng)頁(yè)制作者開始關(guān)注web標(biāo)準(zhǔn)設(shè)計(jì)?？粗鳩ireFox的市場(chǎng)占有率不停的上升，微軟終于推出了IE7。但I(xiàn)E7是否真的能夠力挽狂瀾，是否真的能夠得到用戶的信任，是否真的能夠得到網(wǎng)頁(yè)設(shè)計(jì)者

上文：IE7的web標(biāo)準(zhǔn)設(shè)計(jì)
IE歷來(lái)被web標(biāo)準(zhǔn)的擁護(hù)者所詬病，而當(dāng)FireFox橫空出世以后，更多的網(wǎng)頁(yè)制作者開始關(guān)注web標(biāo)準(zhǔn)設(shè)計(jì)?？粗鳩ireFox的市場(chǎng)占有率不停的上升，微軟終于推出了IE7。但I(xiàn)E7是否真的能夠力挽狂瀾，是否真的能夠得到用戶的信任，是否真的能夠得到網(wǎng)頁(yè)設(shè)計(jì)者的認(rèn)可呢？
且看《IE7的web標(biāo)準(zhǔn)之道》系列文章，和你一起見證IE7的改變！
CSS選擇符
IE7最令網(wǎng)頁(yè)設(shè)計(jì)者興奮的改進(jìn)，便是支持更多、更豐富的CSS選擇符（也有翻譯為選擇器的）了。這樣通過(guò)CSS便能夠，更進(jìn)一步且方便的控制、定位前端結(jié)構(gòu)元素，從而更豐富、多樣的制定樣式。
因?yàn)橐恢辈幌矚g套用書本上的那些很“專業(yè)”、“晦澀”、“拗口”的名詞解釋。所以我的博客文章中出現(xiàn)的名詞解釋都是一種熊樣——俗、通俗（忒俗）！用非常直白甚至老土的話來(lái)解釋這些名詞，雖然看上去不專業(yè)，甚至有所偏差。但是能夠讓人一看就明白。因?yàn)槲蚁嘈诺囊稽c(diǎn)是：讓人看不明白的拽文，就是一陀文字堆成的屎！請(qǐng)?jiān)忂@句話的粗俗和無(wú)理，也請(qǐng)你原諒我下面這些名詞解釋的老土。
CSS選擇符其實(shí)大家都見過(guò)，甚至都用過(guò)?？纯聪旅娴睦?，就會(huì)自然明白了。
運(yùn)行代碼框

[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
示例中的"#"和"."就是CSS選擇符，正是因?yàn)橛羞x擇符，紅色字體和藍(lán)色字體這兩種樣式，才準(zhǔn)確的定位到了id為“div1”和class為“div2”的兩個(gè)div標(biāo)簽上。說(shuō)白了，選擇符其實(shí)就是CSS為樣式找到前臺(tái)結(jié)構(gòu)元素目標(biāo)的一種機(jī)制。
選擇符有很多種，上面的示例中，利用“#”符號(hào)的稱之為“ID選擇符”，因?yàn)樗歉鶕?jù)前臺(tái)結(jié)構(gòu)元素的id定位的。利用“.”符號(hào)的稱之為“類選擇符”，因?yàn)樗歉鶕?jù)前臺(tái)結(jié)構(gòu)元素的class名定位的。其他的還有“通配選擇符”、“類型選擇符”、“包含選擇符”……更詳細(xì)的資料請(qǐng)查看這篇文章《CSS基礎(chǔ)：CSS選擇符 》
更多高級(jí)選擇符
IE7與IE6相比，支持了更多的選擇符，正是因?yàn)橹С至诉@些豐富的選擇符，所以使得IE7可以更方便的實(shí)現(xiàn)一些，以前在IE6很難實(shí)現(xiàn)或者無(wú)法實(shí)現(xiàn)的效果。下面就讓我們看看這些令人興奮的、IE7新支持的選擇符。
#p#
相鄰?fù)x擇符
利用“相鄰選擇符”，可以根據(jù)一個(gè)元素定位到與之相鄰的另一個(gè)元素，并應(yīng)用樣式。說(shuō)白了，“相鄰選擇符”就是只對(duì)“與自己平行關(guān)系的”、“相鄰的”、“在我下面的”“哥們?cè)?rdquo;起作用。下面的例子，將更有助于你的理解（注意只有處于h1后面的p3，字體顏色發(fā)生了變化）。
<!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" />
<meta name="Keywords" content="簡(jiǎn)單的XHTML頁(yè)面" />
<meta name="Description" content="這是一個(gè)簡(jiǎn)單的XHTML頁(yè)面" />
<title>簡(jiǎn)單的XHTML頁(yè)面</title>
<style type="text/css">
h1 p {color:blue}
</style>
</head>
<body>
<p id="p1">這里是我哥們甲的哥們，“我”和它不太熟。</p>
<p id="p2">這里是我哥們甲，它在我前面面，“混”的比我好，所以我就不管它了。</p>
<h1>這里是“我”</h1>
<p id="p3">這里是我哥們乙，它在我后面，“混”的還不如我，所以我要照顧它一下。</p>
<p id="p4">這里是我哥們乙的哥們，“我”和它不太熟。</p>
</div>
</body>
</html>
下面是分別在IE6，IE7，F(xiàn)ireFox（版本2.0.0，12）和Oepra（版本9.25）的顯示效果截圖（IE6和IE7共存的方法，可以參考文章《IE6和IE7共存方法（別人是別人的，我是我的）》）。

下面是關(guān)于“子選擇符”和“后代選擇符”的一些補(bǔ)充資料
很多朋友把分不清“子選擇符”和“后代選擇符”的區(qū)別。其實(shí)它們的差別還是蠻大的。“后代選擇符”IE6，甚至更低IE版本，就已經(jīng)支持了。也許你已經(jīng)被這些“拗口”、“深?yuàn)W”的名詞搞迷糊了。到底什么“后代選擇符”呢？其實(shí)大家都用過(guò)，看看下面的例子就明白了。 現(xiàn)在無(wú)論是FireFox還是IE7，對(duì)于“子選擇符”的支持還都存在一定的問(wèn)題。
<!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" />
<meta name="Keywords" content="YES!B/S!,web標(biāo)準(zhǔn),楊正祎,博客園,實(shí)例代碼" />
<meta name="Description" content="這是一個(gè)簡(jiǎn)單YES!B/S!文章示例頁(yè)面,來(lái)自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁(yè)面</title>
<style type="text/css">
/*后代選擇符*/
#div1 p{
color:red;
}
/*子選擇符*/
#div1>p{
font-size:150%;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1">我是div1的兒子1
<p id="p1_1">我是div1的孫子</p>
</p>
<p id="p2">我是div1的兒子2</p>
</div>
</body>
</html>
示例中，"p1"和"p2"包含在“div1”內(nèi)，那么"p1"和"p2"就是“div1”的兒子，是后代，而“p1_1”包含在“p1”中，那么“p1_1”是“p1”的兒子，是后代。而“p1_1”也包含在“div1”中，則“p1_1”是“div1”的孫子，也是后代。使用“#div1 p{color:red;}”（后代選擇器）會(huì)將div1下面的所有段落的字體顏色都設(shè)置為了紅色。無(wú)論是孩子還是孫子，都要聽話。“只要是我的后代，就得聽我的話！”——這就是“后代選擇符”。
而“子選擇符”則不會(huì)那么霸道，它只管它的“兒子”，不會(huì)去管“孫子”、“重孫子”、“重重孫子”……
#p#
屬性選擇符
“屬性選擇符”可以根據(jù)某個(gè)屬性是否存在，或者屬性的值來(lái)尋找元素。巧妙地利用“屬性選擇符”,將可以輕松的實(shí)現(xiàn)很多實(shí)用而且強(qiáng)大的效果。
很多“以用戶為核心”的擁護(hù)者，一直強(qiáng)烈的去掉<a>標(biāo)簽的target屬性，其一個(gè)很重要的原因就是“沒有經(jīng)過(guò)用戶的同意，就打開了新的瀏覽器頁(yè)面，是一種不尊重用戶的表現(xiàn)。”其實(shí)，我個(gè)人感覺，大可不必如此興師動(dòng)眾。因?yàn)榫退闶侨サ袅诉@個(gè)屬性，還是無(wú)法尊重用戶，因?yàn)槿绻械挠脩?，就是想在新的?yè)面打開這個(gè)鏈接呢？（假使，他不知道使用shift點(diǎn)擊鏈接可以達(dá)到目的，而且他也沒有安裝類似于“拖拽打開新頁(yè)面”的瀏覽器或者插件）
其實(shí)，使用“屬性選擇符”，可以比較有效的解決上面的問(wèn)題。就是利用“屬性選擇符”，將會(huì)在新窗口打開的超鏈接，明確的標(biāo)識(shí)出來(lái)，由用戶決定是否去點(diǎn)擊超鏈接。（很多外國(guó)的網(wǎng)站已經(jīng)在使用這種方式，而且已經(jīng)形成了一種共識(shí)：在一個(gè)網(wǎng)站各頁(yè)面之間的跳轉(zhuǎn)鏈接，不在新窗口打開。而“會(huì)跳轉(zhuǎn)到外部網(wǎng)站的鏈接”將在新的頁(yè)面窗口打開。“會(huì)跳轉(zhuǎn)到外部網(wǎng)站的鏈接”的標(biāo)識(shí)圖片也已經(jīng)形成了共識(shí)，就是這個(gè)圖標(biāo)：“”）下面的示例中，便是一種供參考的解決方案：
<!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" />
<meta name="Keywords" content="YES!B/S!,web標(biāo)準(zhǔn),楊正祎,博客園,實(shí)例代碼" />
<meta name="Description" content="這是一個(gè)簡(jiǎn)單YES!B/S!文章示例頁(yè)面,來(lái)自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁(yè)面</title>
<style type="text/css">
a[target="_blank"]{
padding-right:16px;
background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/common
/outLink.gif') no-repeat right;
}
</style>
</head>
<body>
<p>
<a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" title="我不會(huì)跳轉(zhuǎn)到其他網(wǎng)站，不會(huì)再新窗口打開">我不會(huì)跳轉(zhuǎn)到其他網(wǎng)站，不會(huì)再新窗口打開</a>
</p>
<p>
<a href="http://www.163.com" title="我會(huì)跳轉(zhuǎn)到其他的網(wǎng)站，會(huì)在新窗口打開" target="_blank">我會(huì)跳轉(zhuǎn)到其他的網(wǎng)站，會(huì)在新窗口打開</a>
</p>
</body>
</html>
下面是IE7的顯示效果截圖：

圖：“屬性選擇符”效果示意圖，注意第二個(gè)超鏈接后的圖標(biāo)
更強(qiáng)大的是：“屬性選擇符”也可以判斷一些自己自定義的屬性，這對(duì)于一些第三方插件開發(fā)的程序員，將是一個(gè)極大的方便。例如，對(duì)于開發(fā)網(wǎng)頁(yè)“網(wǎng)頁(yè)翻譯”的朋友，可以將需要翻譯的關(guān)鍵字用<span>包起來(lái)，然后對(duì)這個(gè)span設(shè)置一個(gè)自己的屬性。例如中文到英文的翻譯，就加個(gè)"lang='c2e'"，如果是中文翻譯到日文，就加個(gè)"lang='c2j'"。然后通過(guò)“屬性選擇符”，將兩種情況設(shè)置不同的樣式，從而區(qū)分開來(lái)。
#p#
擴(kuò)展資料：“屬性選擇符”高級(jí)使用技巧
“屬性選擇符”有著令人驚訝的強(qiáng)大，它不僅能夠識(shí)別簡(jiǎn)單的屬性，判斷屬性的值。甚至可以根據(jù)簡(jiǎn)單的正則表達(dá)式，來(lái)匹配屬性的值?？粗旅娴氖纠?，將會(huì)令你感到驚訝。
<!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" />
<meta name="Keywords" content="YES!B/S!,web標(biāo)準(zhǔn),楊正祎,博客園,實(shí)例代碼" />
<meta name="Description" content="這是一個(gè)簡(jiǎn)單YES!B/S!文章示例頁(yè)面,來(lái)自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁(yè)面</title>
<style type="text/css">
/*以條件字符串結(jié)尾*/
a[href$='.zip'] {
padding: 5px 20px 5px 0;
background: url(http://images.cnblogs.com/cnblogs_com/justinyoung/
common/icon_zip.gif) no-repeat center right;
}

/*以條件字符串開頭*/
a[href^='mailto:'] {
padding: 5px 20px 5px 0;
background: url(http://images.cnblogs.com/cnblogs_com/justinyoung/
common/icon_mailto.gif) no-repeat center right;
}

/*任意位置包含*/
a[href *="cnblogs"]{
padding: 5px 20px 5px 0;
background: url(http://images.cnblogs.com/cnblogs_com/justinyoung/
common/icon_cnblog.gif) no-repeat center right;
}
</style>
</head>
<body>
<p>點(diǎn)擊下載zip文件——<a href="download.zip" _fcksavedurl=""download.zip"" _fcksavedurl=""download.zip"" title="zip文件">zip文件</a></p>
<p>給我發(fā)郵件——<a href="mailto'>mailto:123456@163.com">mailto開頭</a></p>
<p>來(lái)自——<a href="http://www.cnblogs.com" title="包含博客園網(wǎng)址">包含cnblogs</a></p>
</body>
</html>
下面是IE7的顯示效果截圖：

圖：“屬性選擇符”高級(jí)使用技巧示例效果圖
如果開動(dòng)你的腦袋和手指，你將得到更多令自己驚訝的效果：

圖：使用“屬性選擇符”的更多示例效果
#p#
偽類選擇符和偽對(duì)象選擇符
這又是令人頭疼的“名詞”，到底什么是“偽類”、“偽對(duì)象”呢？到底“偽”在哪里呢？我們依然從一個(gè)大家都用過(guò)，很熟悉的示例說(shuō)起：
<!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" />
<meta name="Keywords" content="簡(jiǎn)單的XHTML頁(yè)面" />
<meta name="Description" content="這是一個(gè)簡(jiǎn)單的XHTML頁(yè)面" />
<title>簡(jiǎn)單的XHTML頁(yè)面</title>
<style type="text/css">
a:link,a:visited,a:active{
color:red;
}
a:hover{
color:blue;
}
</style>
</head>
<body>
<a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" title="測(cè)試">鼠標(biāo)附上去字會(huì)變成藍(lán)色</a>
</body>
</html>
很簡(jiǎn)單且常見的情況，給超鏈接設(shè)置“鼠標(biāo)移上不同字體顏色發(fā)生變化”的樣式。這里的“:link”、“:visited”、“:active”和“:hover”就是“偽類”。之所以說(shuō)是“偽”，是因?yàn)?，這些東西一定要依附在某種標(biāo)簽上（示例中是<a>標(biāo)簽），它們并不能單獨(dú)的存在，當(dāng)它們單獨(dú)存在的時(shí)候?qū)]有任何意義。
在IE6中，只支持超鏈接<a>標(biāo)簽的偽類，而在IE7中，則支持幾乎所有“可見標(biāo)簽元素”的偽類。也就是說(shuō)，就算是一個(gè)div，你也可以設(shè)置div:hover的樣式?？梢灶A(yù)測(cè)的未來(lái)是：一些簡(jiǎn)單的樣式方面的變化，將不再需要js去控制，用css就可以實(shí)現(xiàn)簡(jiǎn)單的“動(dòng)態(tài)”效果。看下面的例子，將更有助于你的理解。
<!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" />
<meta name="Keywords" content="簡(jiǎn)單的XHTML頁(yè)面" />
<meta name="Description" content="這是一個(gè)簡(jiǎn)單的XHTML頁(yè)面" />
<title>簡(jiǎn)單的XHTML頁(yè)面</title>
<style type="text/css">
#txtName{
border:1px solid #eee;
}
#txtName:hover{
border:1px solid black;
}
</style>
</head>
<body>
<input type="text" id="txtName" />
</body>
</html>
上面的示例很簡(jiǎn)單，也很常用：一個(gè)輸入名字的文本框，平時(shí)狀態(tài)下，是“灰色”邊框，而當(dāng)用戶將鼠標(biāo)以上去的時(shí)候，邊框“變成”黑色，從而達(dá)到提醒的目的。
下面是IE7和FireFox的顯示效果截圖。

圖：對(duì)<input>設(shè)置偽類樣式
#p#
講完了“偽類”，下面來(lái)講講“偽對(duì)象”。首先“偽對(duì)象”也是“偽”，自然也必須依附其他元素，而不能單獨(dú)存在。而“對(duì)象”則意味著“有實(shí)體”的東西。最常用的“偽對(duì)象”就是“:first-letter”（子對(duì)象的第一個(gè)字）和“:first-line”（子對(duì)象的第一行）。下面的示例將有助你理解“:first-letter”和“:first-line”偽對(duì)象。
<!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" />
<meta name="Keywords" content="簡(jiǎn)單的XHTML頁(yè)面" />
<meta name="Description" content="這是一個(gè)簡(jiǎn)單的XHTML頁(yè)面" />
<title>簡(jiǎn)單的XHTML頁(yè)面</title>
<style type="text/css">
#div1:first-letter{
font-size:200%;
}
#div1:first-line{
color:red;
}
</style>
</head>
<body>
<div id="div1">
第一行內(nèi)容，注意這一行的第一個(gè)字。<br/>
第二行內(nèi)容
</div>
</body>
</html>
下面是IE6和IE7的顯示效果截圖：

圖：IE6不支持“偽對(duì)象”，而IE7已經(jīng)支持
關(guān)于“:first-line”對(duì)特別注意
偽對(duì)象“:first-line”指定是第一行，而不是第一段。行的劃分是利用<br/>標(biāo)簽，而“段”的劃分是利用<p>標(biāo)簽。“:first-line”并不會(huì)對(duì)<p>標(biāo)簽劃分的段落使用樣式。
這個(gè)比較變態(tài)——因?yàn)槿萜鞯膶挾冗^(guò)小，而使得第一行“放”不下，而“擠”到第二行的內(nèi)容，將失去偽對(duì)象“:first-line”設(shè)置的樣式 -_-b... 看下面的截圖，將更有助于你的理解。依然是上面的那個(gè)示例，但是當(dāng)將瀏覽器的寬度縮小一定程度時(shí)，第一行的文字被“擠”到了第二行，同時(shí)失去了偽對(duì)象“:first-line”指定的樣式（紅色字體顏色）。

圖：被“擠”下來(lái)的文字，將失去偽對(duì)象“:first-line”設(shè)置的樣式
后記
這些IE6不支持，IE7才支持的高級(jí)選擇符，也是搞定IE6和IE7網(wǎng)頁(yè)兼容性的有效手段之一。甚至一些朋友直接誤以為這些高級(jí)選擇符，就是CSS hack的一種。其實(shí)，這些不是CSS hack，而是一種改進(jìn)，一種升級(jí)。所以，使用“高級(jí)選擇符”手段達(dá)到IE6和IE7的兼容性的方法，可以放心的使用，不會(huì)有css hack的后顧之憂，在微軟后續(xù)的瀏覽器中一定會(huì)支持的。
開動(dòng)自己的腦袋，利用這些豐富的選擇符，將能夠?qū)崿F(xiàn)更多，更強(qiáng)大的效果。IE7只是將舞臺(tái)幫我們搭好了，如何唱一出好戲，則是靠大家一起的努力了。
IE7改進(jìn)了很多的東西，“更豐富的選擇符支持”只是其中比較耀眼的一顆而已。對(duì)于其他的，我將在后續(xù)的《IE7的web標(biāo)準(zhǔn)之道》系列文章中繼續(xù)和大家一起探討，還請(qǐng)各位朋友以后多多指教。

相關(guān)文章

最新評(píng)論