優先等級的行內CSS能駕御嗎?
下面代碼中,包含了引入CSS檔樣式表(藍字)、在<head></head>裡的嵌入式 CSS(綠字)、和行內CSS(橘字):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:⁄⁄www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http:⁄⁄www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>各式CSS</title>
<link rel="stylesheet" type="text/css" media="all" href="external-style.css" />
<style type="text/css">
/*<![CDATA[*/
p{color:red;}
/*]]>*/
</style>
</head>
<body>
<p style="color:orange">顏色</p>
</body>
</html>
在此三種中,分別各為 p 標籤文字定義不同顏色,假設在引入的樣式表中定義為 p { color:blue } 、 內嵌式定義為 p { color:red },行內定義為 style="color:orange",按優先使用等級順序為: 1)行內(橘) => 2)嵌入(紅) => 3)引入(藍),最終顯示結果會以橘色字來呈現。
從維護角度看,較高優先級的行內樣式,反而不及較低優先級的引入樣式表來得較便利。
既然行內樣式是較高優先級,嵌入式和引入式是否就註定只能做阿二和阿三?不能超越它、駕御行內CSS?如果真的這樣想,那麼現在便要改變思維方式了。
為了便於測試,下面的實例演示以嵌入式跟行內式對陣。
先觀看只有行內定義的結果:
現在就出動優先級較次的嵌入式,能否在不動行內式一根汗毛下駕御它,使它乖乖的跑往左邊呢?
從上面的代碼中,相信閣下可以看的到嵌入式用了什麼武器了。