將樣式表加入到HTML中

來源:互聯網
上載者:User
樣式表   有很多方法將樣式表加入到HTML中,每個都帶有自己的優點和缺點。新的HTML元素和屬性已被加入以允許樣式表與HTML文檔更簡易地組合起來。
  串連到一個外部的樣式表
  嵌入一個樣式表也就是輸入一個樣式表
  內聯樣式
  CLASS屬性
  ID屬性
  SPAN元素
  DIV元素
  關於認證的備忘
  -------------------------------------------
  串連到一個外部的樣式表
  一個外部的樣式表可以通過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屬性。
------------------------------------------------------------------
CLASS屬性
CLASS屬性用於指定元素屬於何種樣式的類。例如,樣式表可以加入punk和warning類:
.punk { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }
這些類可以使用CLASS屬性在HTML中引用:
<H1 CLASS=punk>屬性擴充</H1>
<P CLASS=warning>一些屬性擴充會有負值的邊效果,產生於支援和不支援的瀏覽器上...
在這個例子中,punk類可以用於任何BODY元素因為它在樣式表中沒有HTML元素關聯。而在這個例子的樣式表,warning類只能用於P元素。
一個良好的習慣是在命名類的時候,根據它們的功能而不是根據它們的外觀。上述例子中的warning類也可以命名為red,但如果網頁製作者決定改變這個類的樣式為別的顏色,或希望為那些使用PC喇叭的人定義為aural(聽覺)樣式的話,那麼這個名字就變得毫無意義了。
類會是應用樣式到HTML文檔中在結構上一樣的部分的有效辦法。例如,本頁使用類給CSS原始碼和HTML原始碼使用不同的樣式。
-------------------------------------------------------------------
ID屬性
ID屬性用於定義一個元素的獨特的樣式。一個CSS規則如
#wdg97 { font-size: larger }
可以通過ID屬性應用到HTML中:
<P ID=wdg97>歡迎訪問Web Design Group及TV water 168!</P>
整個文檔當中的每個ID屬性的值都必須是唯一的。其值必須是一個以字母開頭緊接字母、識字或連字號。字母限於A-Z和a-z。
注意HTML 4.0允許在ID屬性中有句號,但CSS1不允許在ID選擇符中有句號。也要注意CSS1允許Unicode字元161-255而且忽略Unicode字元為一個數字代碼,但HTML 4.0不允許這些字元在一個ID屬性值當中。
當一個樣式只需要在任何文檔中應用一次時,使用ID是很適合的。 ID與STYLE屬性相比,在於ID允許指定媒體的樣式,而且也可以被應用於多個文檔(雖然每個文檔只用一次)。
----------------------------------------------------------------
SPAN元素
SPAN元素被加入到HTML中以允許網頁製作者給出樣式但無須附加在一個HTML的結構元素上。SPAN在樣式表中作為一個選擇符使用,而且它也能接受STYLE、CLASS和ID屬性。
SPAN是一個內嵌元素,所以它可以作為HTML中的元素如EM和STRONG使用。最重要的差別在於雖然EM和STRONG帶有結構的意義,但SPAN就沒有這樣的意義。它的存在純粹是應用樣式,所以當樣式表失效時它就沒有任何的作用。
一些SPAN例子如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>SPAN的例子</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
.firstwords { font-variant: small-caps }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=firstwords>The first few words</SPAN>前面是
段落中少數的文字,會是小型大寫字母。樣式也可以內聯,如改變文
字的樣式為<SPAN STYLE="font-family: Arial">Arial</SPAN>.</P>
-----------------------------------------------------------------
DIV元素
DIV元素在功能上與SPAN元素相似,最主要的差別在於DIV ("division","部分"的簡稱)是一個區塊層級元素。DIV可以包含段落、標題、表格甚至其它部分。這使DIV便於建立不同整合的類,如章節、摘要或備忘。例如:
<DIV CLASS=note>
<H1>Divisions/部分</H1>
<P>DIV元素在HTML 3.2中有定義,但HTML 3.2中只有ALIGN屬效能相容。HTML 4.0在屬性中加入CLASS、STYLE、和ID屬性。</P>
<P>因為DIV可以包含其他塊級整合,在用於建立文檔的大型章節例如本備忘是很有用的。</P>
<P>要求關閉標記。</P>
  </DIV>
  關於認證的備忘
  少數使用了CSS樣式的文檔能在HTML3.2 (Wilbur)層(在WDG網站,譯者注)得到認證。HTML3.2不會解釋SPAN元素,也不解釋CLASS、STYLE或ID屬性,而且在LINK和STYLE元素中也很少支援TYPE和MEDIA屬性。

  這些有關的樣式元素和屬性對不支援的瀏覽器不會有害,因為它們能安全地忽略。文檔使用這些元素和屬性可以被認證防禦於HTML 4.0。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。