學JSF,不懂樣式表不行.
連接到一個外部的樣式表
一個外部的樣式表可以通過HTML的LINK元素連接到HTML文檔中:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">
<LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>
<LINK>標記是放置在文檔的HEAD部分。可選的TYPE屬性用于指定媒體類型--text/css是一個層疊樣式表--允許瀏覽器忽略它們不支持的樣式表類型。為CSS文件配置服務器而將text/css當作Content-type內容發送出去也是一個好注意。
外部樣式表不能含有任何像<HEAD>或<STYLE>這樣的HTML的標記。樣式表僅僅由樣式規則或聲明組成。一個單獨由
P { margin: 2em }
組成的文件就可以用作外部樣式表了。
<LINK>標記也有一個可選的MEDIA屬性，用于指定樣式表被接受的介質或媒體。允許的值有
screen (缺省值)，提交到計算機屏幕；
print， 輸出到打印機；
projection，提交到投影機；
aural，揚聲器；
braille，提交到凸字觸覺感知設備；
tty，電傳打字機 (使用固定的字體)；
tv，電視機；
all，所有輸出設備。
多樣的媒體通過用逗號隔開的列表或值all指定。
Netscape Navigator 4.x 錯誤地忽略除了screen值外的任何使用MEDIA值聲明的連接或嵌入樣式表。例如，MEDIA="screen,projection"會令到樣式表被Navigator 4.x忽略，盡管展示的設備是計算機的屏幕。Navigator 4.x 也忽略使用MEDIA=all聲明的樣式表。
REL屬性用于定義連接的文件和HTML文檔之間的關系。REL=StyleSheet指定一個固定或首選的樣式而REL="Alternate StyleSheet"定義一個交互樣式。固定樣式在樣式表激活時總被應用。缺少的TITLE屬性，就像例子中的第一個<LINK>標記，定義一個固定樣式。
一個首選樣式會自動被應用，就像例子中的第二個<LINK>標記。REL=StyleSheet和一個TITLE屬性的組合指定一個首選的樣式。網頁制作者不能指定多于一個的首選樣式。
交互樣式通過REL="Alternate StyleSheet"指出。例子中的第三個<LINK>標記定義一個交互樣式，用戶可以選擇用來代替首選樣式表。
注意現在的瀏覽器一般都缺乏選擇交互樣式的能力。
單一的樣式也可以通過多個樣式表給出
<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">
在這個例子中，三個樣式表組合成一個"Contemporary"樣式，作為一個首選樣式表被應用。要組合多個樣式表成一個單一樣式，必須在每個樣式表中使用相同TITLE。
當樣式被應用到很多的網頁時，一個外部樣式表是理想的。網頁制作者使用外部樣式表可以改變整個網站的外觀而僅僅通過改變一個文件。同樣的，大多數瀏覽器會保存外部樣式表在緩沖區，從而如果樣式表在緩沖區就避免了在展示網頁時的延遲。
Microsoft Internet Explorer 3 for Windows 95/NT4并不支持來自連接的樣式表中的BODY 背景圖象或顏色。如果考慮到這個錯誤，網頁制作者不妨提供另外的包括一個背景圖象或顏色的結構，例如嵌入或內聯樣式，或使用BODY元素的BACKGROUND屬性。
--------------------------------------------------------------------------------
嵌入一個樣式表
一個樣式表可以使用STYLE元素在文檔中嵌入:
<STYLE TYPE="text/css" MEDIA=screen>
<!--
BODY { background: url(foo.gif) red; color: black }
P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>
STYLE元素放在文檔的HEAD部分。必須的TYPE屬性用于指定媒體類型，LINK元素也一樣。同樣地，TITLE和MEDIA屬性也可以用STYLE指定。
舊版本的瀏覽器，并不能識別STYLE元素，會將其當作BODY的一部分照常展示其內容，從而使這些樣式表對用戶是可見的。要防止這樣做，STYLE元素的內容要包含一個SGML注解(<!-- comment -->)在里面，像上述例子那樣。
嵌入的樣式表可用于當一個文檔具有獨一無二的樣式的時候。如果多個文檔都使用同一樣式表，那么外部樣式表會更適用。
--------------------------------------------------------------------------------
輸入一個樣式表
一個樣式表可以使用CSS的@import 聲明被輸入。這個聲明用于一個CSS文件或內部的STYLE元素:
<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
@import url(http://www.htmlhelp.com/style.css);
@import url(/stylesheets/punk.css);
DT { background: yellow; color: black }
-->
</STYLE>
注意其它的CSS規則應該仍然包括在STYLE元素中，但所有的@import 聲明必須放在樣式表的開始部分。任意在樣式表中指定了的規則，其自身超越在輸入樣式表中對立的規則。例如上例，即使一個輸入的樣式表包含DT { background: aqua }，定義項(definition terms)依然會是黃色的背景。
被輸入的樣式表的順序對于它們怎樣層疊是很重要的。在上述的例子中，如果style.css輸入的樣式表指定了STRONG元素會顯示為紅色而punk.css樣式表指定了STRONG元素顯示為黃色的話，那么后面的規則會獲勝，而STRONG元素會顯示為黃色。
輸入的樣式表對于模塊性效果很有用處。例如，一個網站可以通過使用了的選擇符分類樣式表。一個simple.css樣式表給出公共的元素像BODY、P、H1和H2。此外，一個extra.css樣式表給出較少共通的元素像CODE、BLOCKQUOTE和DFN。一個tables.css樣式表可以用于定義變革元素的規則。這三個樣式表在需要的時候可以使用@import 聲明包括在HTML中。三個樣式表也可以通過LINK元素組合。
--------------------------------------------------------------------------------
內聯樣式
樣式可以使用STYLE屬性內聯。STYLE屬性可以應用于任意BODY元素(包括BODY本身)，除了BASEFONT、PARAM和SCRIPT。這個屬性將任何數量的CSS聲明當作自己的值，而每個聲明用分號隔開。以下是一個例子:
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> 這段的樣式是紅色的New Century Schoolbook字，如果字體可用的話。</P>
注意在STYLE中New Century Schoolbook包含在單引號中，因為雙引號被用作包含樣式聲明。
內聯的樣式比其他方法更加靈活。要使用內聯樣式，必須使用Content-Style-Type HTTP頁眉擴展對整個文檔進行單獨的樣式表語言聲明。使用內聯CSS的網頁制作者必須將text/css作為Content-Style-Type HTTP頁眉，或在HEAD部分包括以下標記:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
因為和需要展示的內容混合在一起，內聯樣式會失去一些樣式表的優點。同樣地，內聯樣式默認地接受所有媒體，因為沒有任何的為內聯樣式指定明確的媒體的語句。這種方法應該盡量少用，如當一個樣式會應用在所有媒體到一個元素的個別情況。如果樣式會被應用到單一元素的場合，但只能使用確認的媒體的話，使用ID屬性代替STYLE屬性。
posted on 2008-04-28 16:48
紫蝶∏飛揚↗ 閱讀(435)
評論(0) 編輯 收藏 所屬分類:
CSS