下面代碼中，包含了引入CSS檔樣式表(藍字)、在<head></head>裡的嵌入式 CSS(綠字)、和行內CSS(橘字)：
在此三種中，分別各為 p 標籤文字定義不同顏色，假設在引入的樣式表中定義為 p { color:blue } 、 內嵌式定義為 p { color:red }，行內定義為 style="color:orange"，按優先使用等級順序為： 1)行內(橘) => 2)嵌入(紅) => 3)引入(藍)，最終顯示結果會以橘色字來呈現。
從維護角度看，較高優先級的行內樣式，反而不及較低優先級的引入樣式表來得較便利。
既然行內樣式是較高優先級，嵌入式和引入式是否就註定只能做阿二和阿三？不能超越它、駕御行內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>
從維護角度看，較高優先級的行內樣式，反而不及較低優先級的引入樣式表來得較便利。
既然行內樣式是較高優先級，嵌入式和引入式是否就註定只能做阿二和阿三？不能超越它、駕御行內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>行內定義獨霸天下</title> </head> <body> <div style="width:200px; margin:50px; padding:50px; background:#555; color:orange; float:right"> <p>我是行內定義的，較高優先級。</p> <p>我高興就往右邊跑，級數不夠我高的，別妄想動的了我。</p> </div> </body> </html>
現在就出動優先級較次的嵌入式，能否在不動行內式一根汗毛下駕御它，使它乖乖的跑往左邊呢？
<!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>立分高下</title>
<style type="text/css">
/*<![CDATA[*/
div{float:left !important}
/*]]>*/
</style>
</head>
<body>
<div style="width:200px; margin:50px; padding:50px; background:#555; color:orange; float:right">
<p>我是行內定義的，較高優先級。</p>
<p>我高興就往右邊跑，級數不夠我高的，別妄想動的了我。</p>
</div>
</body>
</html>
