標題標題  顯示論壇會員列表名單  搜索論壇搜索  HelpHelp
  注冊注冊  登入登入
ASP教學區
 DoReMe : ASP教學區
主題 話題: 第七章 高級HTML 回復發表新主題
作者
貼子內容 << Prev Topic下一個主題 >>
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:14下午 | IP記錄 引用 friend

Cascading Style Sheets

Cascading Style Sheets(CSS)具有引人注目地改變環球網外觀的潛力。使用Cascading Style Sheets,你可以獲取對你網頁上每個元素類型的精確控制。Style Sheets允許你將HTML看作為傳統的頁描述語言來改變HTML的基本特性。

使用Style Sheets,你可以控制傳統網頁上的元素,諸如精確的空白、段落縮進和字體。Style Sheets不僅允許你指定單個網頁的外觀,還可以被用來為網站提供一致的界面。

更好的是,你可以安全地使用Style Sheets而不用擔心它們在早期的瀏覽器上的效果。Style Sheets具有完美退化的重要特性,不支持它們的瀏覽器會忽略它們。

Cascading Style Sheets的標準已經由World Wide Web Consortium制定了。雖然如此,Style Sheets在HTML中還是很新的一部分。第一個支持它的主流瀏覽器是Internet Explorer 3.0,它們現在也被Netscape Navigator 4.0支持了。

你應當知道兩種瀏覽器現在都支持CCS標準。要想有效地使用Style Sheets,你必須花費大量的時間來不停地實驗。在很多情況下,CSS在兩種瀏覽器上的執行結果是非常離奇的。

注意

World Wide Web Consortium批准了Cascading Style Sheets Level 1的建議。要獲得更多信息,可參觀http://w3.org

Back to Top 查看 friend's 資料 搜索其他貼子 friend 訪問 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:15下午 | IP記錄 引用 friend

在網頁中加入Style

Style Sheet是一個規則列表來決定網頁上每個元素的外觀。例如,假設你想強調網頁上所有的黑體文字,你想讓所有的黑體字都以紅色顯 示出來。使用Style Sheet,你可以為瀏覽器提供一個規則,即所有的黑體字都應該用紅色顯示出來,就像下面的例子:

<HTML>

<HEAD>

<TITLE> Simple Style </TITLE>

<STYLE>

B {color: red}

</STYLE>

</HEAD>

<BODY>

<B> I am bold and red </B>

</BODY>

</HTML>

當這個HTML文件被一個支持Style Sheets的瀏覽器解釋時,處於<B>標識符之間的文字將以紅色顯示出來。注意這個新的HTML標識符<S TYLE>,它包含了網頁規則的列表。在此例中,只有一條簡單的規則:

B {color: red}

這個規則具有兩個部分,規則的第一個部分B被稱作selector,selector被用來選擇網頁中規則所起作用的元素。在此 例中,B選擇了所有在這個HTML文件中出現的<B>標識符,這個規則決定了每個<B>標識符的行為。

這個規則的第二部分被稱為declaration,它包含了一個屬性和值。在此例中,屬性是color,而值是red。根據這條 規則,每一個<B>標識符的color屬性都將被設為紅色。

所有的規則都具有這種格式,一個或更多的selector被使用來選擇網頁中的元素。selector後緊接著是一個空格,再接 下來,那個元素的屬性被賦予一個值,即一個屬性──值對。屬性和值由一個冒號分隔,並由一對花括號包含({})。

注意此例中沒有別的HTML標識符被添加進文件的主體部分,Style Sheet完全是在<HEAD>標識符中定義的,雖然如此,Style Sheet決定了在文件主體部分出現的所有<B>標識符的行為。

就如前面所提到的那樣,你可以使用Style Sheets而不用擔心它們在早期瀏覽器上的效果,早期的瀏覽器僅僅忽略<STYLE>標識符。然而,早期的瀏覽器 可能會顯示出位於<STYLE>標識符之間的規則列表,要防止這種事的發生,你應當總是把HTML註釋符放在規則列 表的周圍,如下所示:

<HTML>

<HEAD>

<TITLE> Simple Style </TITLE>

<STYLE>

<!--

B {color: red}

-- >

</STYLE>

</HEAD>

<BODY>

<B> I am bold and red </B>

</BODY>

</HTML>

可以解釋Style Sheets的瀏覽器會很聰明地進入到註釋標識符內部來獲取規則,而在早期的瀏覽器上,則會忽略註釋標識符之間的東西,不會把有 關規則的文字顯示在屏幕上。

Back to Top 查看 friend's 資料 搜索其他貼子 friend 訪問 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:15下午 | IP記錄 引用 friend

在HTML標識符中加入Styles

你可以為幾乎所有的HTML標識符提供規則。例如,假設你想讓處於一個列表中的所有文字以紅色顯示出來,你就可以用下面的規則來 實現這一點:

<HTML>

<HEAD>

<TITLE> Simple Style </TITLE>

<STYLE>

<!--

B {color: red}

OL {color: red}

-- >

</STYLE>

</HEAD>

<BODY>

<B> I am bold and red </B>

<OL>

<LI> I am red.

<LI> So am I.

</OL>

</BODY>

</HTML>

在此例中,規則OL {color : red}作用於所有列出的表項顏色。如果你有多個列表,其餘列表中表項的顏色也會是紅色。

在此Style Sheets中的所有規則對它們所作用的元素都有相同的效果,第一個規則讓所有包含在<B>標識符中的文字以紅色顯 示出來,而第二個規則讓所有位於每個有序列表中的東西都以紅色顯示。要想節省代碼長度,你可以將這兩句合併為一句:

B,OL {color : red}

規則不僅僅能決定顏色這一屬性的行為,還對許多屬性起作用。例如,你可以建立一個規則來指定所有的頂部標題都應當以24個點大小 的Arial字體顯示出來,並且具有黃色背景(見圖7.19),如下所示:

<HTML>

<HEAD>

<TITLE> Simple Style </TITLE>

<STYLE>

<!--

H1 {font-style: italic; font-size: 24pt;

font-family: Arial; background: yellow}

-->

</STYLE>

</HEAD>

<BODY>

<H1> Important Information </H1>

This document contains very important information

</BODY>

</HTML>

 

圖7.19 具有多重屬性的規則

此例中的這個簡單規則對所有位於標題中的文字都起作用,這個規則的聲明中包含了許多屬性及其值,它們由分號分隔。通過這種方法, 你可以根據需要在一個聲明中加入許多屬性及其值。

你也可以為<P>和<BODY>標識符指定規則。當你想要控制大量文本的格式時,這是非常有用的,當你 為<BODY>標識符指定一個規則時,這條規則將會作用於所有包含在文件主體部分中的東西;當為<P> 指定一條規則時,它僅僅作用於包含在此標識符中的東西,如下所示:

<HTML>

<HEAD>

<TITLE> Simple Style </TITLE>

<STYLE>

<!--

BODY {font-size: 24pt}

P {font-style: italic}

-->

</STYLE>

</HEAD>

<BODY>

This text is above the paragraph.

<P> This text is inside the paragraph. </P>

</BODY>

</HTML>

當這個HTML文件在瀏覽器上顯示時,所有的文字將以24點大小的字體顯示出來(見圖7.20)。甚至位於<P>標 識符內部的文字也以24點大小的字體顯示,這是因為<P>標識符位於<BODY>標識符內部。然而,僅 僅位於<P>標識符內部的文字以斜體顯示出來。

 

圖7.20 為<BODY>和<P>使用的規則

當兩條規則衝突時會發生什麼呢?例如,假設在上例中為<P>標識符設定的規則指定文字以10點大小的字體顯示,在這 種情況下,在<P>標識符中指定的類型將會起作用。通常,為子元素設定的規則將會覆蓋為包含這個元素的父標識符所設 定的規則。

Back to Top 查看 friend's 資料 搜索其他貼子 friend 訪問 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:15下午 | IP記錄 引用 friend

在HTML標識符的Class中加入Styles

假設你想為網頁上特定的段落設定規則,而不是全部的內容。例如,你可能想讓網頁上的第一段以24點大小的字體顯示,而第二段則以 14點的大小顯示,要利用Style Sheets實現這一點,你必須找到一種方法來區別不同的<P>標識符。

一個特殊的屬性專門為這一目的而被引入,每一個HTML標識符都有一CLASS屬性,它是用來將標識符分隔成不同的部分,下面的 例子說明了如何使用這個屬性:

<HTML>
<HEAD>

<TITLE> Style </TITLE>

<STYLE>

<!--

P.TheFirstClass {font-size: 24pt}

P.TheSecondClass {font-size: 14pt}

-->

</STYLE>

</HEAD>

<BODY>

<P CLASS=「TheFirstClass」>

I am the first paragraph and I am formatted with a 24 point font.

</P>

<P CLASS=「TheSecondClass」>

I am the second paragraph and I am formatted with a 14 point font.

</P>

</BODY>

</HTML>

位於兩個<P>標識符之間的文字將以不同大小的字體顯示出來(見圖7.21)。這兩個段落分別由它們的CLASS屬 性區別開來,例如,第一個段落與名為TheFirstClass的class相關聯,而第二個段落則與名為TheSecondC lass的class相關聯。

 

圖7.21 使用CLASS標識符

當指定了這些規則後,它們就和特定的class相關聯。例如,第一個規則通過使用class選擇符P.TheFirstClas s與第一個class:TheFirstClass相關聯。class選擇符可用來區別一個標識符中不同的class,第一個段 落的格式由第一個規則決定,因為這條規則選擇了與class:TheFirstClass相關聯的所有<P>標識符 。

不只一個<P>標識符可成為同一個class的成員。例如,假設有第三個<P>標識符被添加進上述HT ML文件中,並指定屬性CLASS=「TheFirstClass」,則處於這個新的<P>標識符中的文字也受第一 條規則的控制,第一條規則將作用於所有具備屬性CLASS=「TheFirstClass」的段落中。

Back to Top 查看 friend's 資料 搜索其他貼子 friend 訪問 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:15下午 | IP記錄 引用 friend

在class中加入styles

本章到此為止,Style Sheets規則只與一些特定類型的HTML標識符相關聯,然而你也可以讓規則與一個class相關聯而並不與任何一個特定的標 識符關聯。來看下面的例子:

<HTML>

<HEAD>

<TITLE> Style </TITLE>

<STYLE>

<!--

.FreeClass {font-size: 24pt}

-->

</STYLE>

</HEAD>

<BODY>

<B CLASS=「FreeClass」>

I am bold and I am formatted with a 24 point font.

</B>

<P CLASS=「FreeClass」>

I am the second paragraph and I am formatted with a 24 point font.

</P>

</BODY>

</HTML>

在此例中,<B>和<P>標識符都與同一個class關聯,位於<B>和<P> ;標識符內的文本都將以24點大小的字體顯示。規則沒有與任何一個HTML標識符關聯,相反它只與class:FreeClas s關聯。

注意

在規則中指定class選擇符時不要忘記在前面加上點號。如果你忘記了這個點號,瀏覽器就會認為你正試圖為規則選定一個HTML 標識符而不是一個class。

Back to Top 查看 friend's 資料 搜索其他貼子 friend 訪問 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:16下午 | IP記錄 引用 friend

根據上下文為HTML標識符加上styles

假設你想讓一個列表中的黑體字以Courier字體顯示出來,然而你不想讓列表之外的文字或非黑體的文字以Courier字體顯 示(見圖7.22),有許多辦法可以實現這一功能。使用Style Sheets,你可以專門建立一個class,將它與列表中出現的<B>標識符關聯。然而,還有第二種有趣得多的方 法來實現這一效果,你可以將一個規則僅僅與特定的內容相關聯,例如,你可以定義一個規則,它僅僅當文字是處於列表中並是黑體時才 起作用,而對其它內容不起作用。下面例子所示的規則使用了上下文選擇符:

<HTML>

<HEAD>

<TITLE> Style </TITLE>

<STYLE>

<!--

UL B {font-family: Courier}

-->

</STYLE>

</HEAD>

<BODY>

<B> I am bold but not in the Courier typeface </B>

<UL>

<LI> I am plain, but I am <B> bold and use Courier! </B>

<LI> Yes, but I am <B> bold and use Courier </B> as well!

</UL>

</BODY>

</HTML>

 

圖7.22 使用上下文選擇符

注意這個規則中的選擇符,它包含了兩個HTML標識符,而這兩個標識符沒有用逗號隔開,這個選擇符只有當<B>位於 <UL>標識符中時才提供,位於<B>中而不屬於列表的文字將不會受此規則的影響。

Back to Top 查看 friend's 資料 搜索其他貼子 friend 訪問 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:16下午 | IP記錄 引用 friend

為單一的HTML標識符加上styles

每個HTML標識符的CLASS屬性允許你將同一個規則與一組標識符相關聯,然而,你可能想讓一條規則只作用於單個元素而對其它 無影響。每個HTML標識符都有一個屬性來讓你實現這一點,ID屬性可以用來唯一地指定一個標識符。來看下面的例子:

<HTML>

<HEAD>

<TITLE> Style </TITLE>

<STYLE>

<!--

#bigfont {font-size: 24pt}

-->

</STYLE>

</HEAD>

<BODY>

<B ID=「bigfont」> I am bold and I am formatted with a 24 point font. </B>

<B> I am bold but I use the default font. </B>

</BODY>

</HTML>

考慮用於這條規則的選擇符,它前面沒有點號,因此它並不是選擇一個class,而且它也不是任何一個HTML標識符,這個選擇符 指定了HTML文件中的一個個別元素。

ID屬性用起來很像<A>標識符的NAME屬性,要引用一個HTML標識符的ID屬性,你需要在ID前面加上一個# 號,你切記不要為多個HTML標識符指定同一個ID,當然ID屬性的全部目的只是作為個別元素的確認符。

Back to Top 查看 friend's 資料 搜索其他貼子 friend 訪問 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:16下午 | IP記錄 引用 friend

使用SPAN和DIV來加入styles

假設你想讓某一段落的前一半以Courier字體顯示,而後一半則以Arial字體顯示,使用前面所述的Style sheet的標識符及其屬性,沒有一個直接的辦法來實現這一目的。問題在於你不想將一個style與一整段文字關聯,你只想將s tyle與段落中不同的部分相關聯。

很幸運,存在一個特殊的標識符,你可以用它來將規則與HTML文件中特定的部分相關聯,使用<SPAN>標識符,你 可以將一個style與一大段文本中的某一部分相關聯。如下所示:

<HTML>

<HEAD>

<TITLE> Style </TITLE>

<STYLE>

<!--

.CourierPart {font-family: Courier}

.ArialPart {font-family: Arial}

-->

</STYLE>

</HEAD>

<BODY>

<P>

<SPAN CLASS=CourierPart> I am the first part of this paragraph. </SPAN>

<SPAN CLASS=ArialPart> I am the second part of this paragraph. </SPAN>

</P>

</BODY>

</HTML>

<SPAN>標識符有一個「重要和絕妙」的特性,即它什麼事也不會做。將<SPAN>標識符看作是為C LASS和ID屬性設立的一個方便的鉤子,它的唯一目的就是圍繞你的HTML代碼中的其它元素,這樣你就可以為它們指定styl e了。在此例中,<SPAN>標識符允許你將一個段落分成不同的部分。

還有一個標識符具有類似的功能,<DIV>標識符也被用來在HTML文件中建立邏輯部分。但與<SPAN&g t;標識符不同,<DIV>工作於文本塊一級,它在它所包含的HTML元素的前面及後面都引入了行分隔。

Back to Top 查看 friend's 資料 搜索其他貼子 friend 訪問 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:16下午 | IP記錄 引用 friend

控制文本的字體

我們已經向你介紹了font-family屬性,這個屬性決定了文字的字體(見圖7.23)。下面的例子說明了怎樣使用這個屬性 :

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.Courier {font-family: Courier}

.Arial {font-family: Arial}

.Times {font-family: 「Times New Roman」}

.Comic {font-family: 「Comic Sans MS」}

-->

</STYLE>

</HEAD>

<BODY>

<P CLASS=Courier> I am Courier. </P>

<P CLASS=Arial> I am Arial. </P>

<P CLASS=Times> I am Times New Roman. </P>

<P CLASS=Comic> I am Comic Sans MS. </P>

</BODY>

</HTML>

 

圖7.23 不同字體的例子

你不能保證每個字體在所有顯示你網頁的計算機上都能找到,不同的計算機對安裝的字體有不同的設置,甚至在計算機上安裝了同一個字 體,它也可能具有不同的名字。下面有兩個方法你可以用來解決這一問題。

首先,當某個特定的字體不存在時,你可以指定一個備用字體來以防萬一。在一個規則的聲明中,你可以用逗號分隔的方式建立一個備用 字體的列表。例如,你可以使用下面的規則來指定當Arial字體不存在時就使用Helvetica字體:

.MyTypeFace {font-family: Arlal,Helvetica}

根據Cascading Style Sheet規範,你也可以在這個列表中指定一個備用的generic font family。一個generic font family中並不指定某種特定的字體,它只是指定要使用的字體應該具有什麼特徵。你可以使用下面五種generic font family中的任何一個:serif、sans、cursive、fantasy及monospace。

 

注意

當你在internet Explorer中提供一個備用字體的列表時,要用引號將它們括起來。

然而,你要記住不同的計算機對這些generic font family具有不同的代表,換句話說,如果你沒有安裝正確的字體,generic font family將不會正常工作。你應當使用一個generic font family的名字來作為一個備用字體列表中的最終備用物。

Back to Top 查看 friend's 資料 搜索其他貼子 friend 訪問 friend's
 
friend
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:17下午 | IP記錄 引用 friend

控制字體的大小

你可以提供使用font-size屬性來控制你的文字的大小,你可以為此屬性指定絕對值或相對值。下面的例子說明了如何使用這個 屬性(見圖7.24):

 

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.MySmallFont {font-size: small}

.MyMediumFont {font-size: 12pt}

.MyLargeFont {font-size: 150%}

.MyLargerFont {font-size: Larger}

-->

</STYLE>

</HEAD>

<BODY>

<P CLASS=MySmallFont> I am the small font. </P>

<P CLASS=MyMediumFont> I am the medium font. </P>

<P CLASS=MyLargeFont> I am the large font. </P>

<P CLASS= MyLargerFont > I am the larger font. </P>

</BODY>

</HTML>

根據第一條規則,字體的大小是small。當你指定字體大小時,你可以使用下面的七個關鍵字:xx-small、x-small 、small、medium、large、x-large及xx-large,這是一個為font-size屬性提供絕對值的方 法。

 

 

圖7.24 字體大小的例子

 

根據第二個屬性,字體大小應該為12個點。當你指定字體大小時,你可以使用許多不同的度量單位。可以使用的度量單位有:英吋(i n)、點(pt)、象素(px)、厘米(cm)、picas(pc)、毫米(mm)和ems(em),當你指定這些單位時,應該 使用它們的縮寫。

注意

Internet Explorer 3.0僅僅能識別厘米(cm)、英吋(in)、毫米(mm)、picas(pc)、點(pt)以及象素(px)。

 

第三個規則為字體大小指定了一個相對尺寸,根據這條規則,字體大小被設為缺省字體大小的一點五倍。相對大小是根據當前字體的大小 進行計算的。

最後,第四條規則使得字體大小比當前的字體大一號,這是第二種指定相對尺寸的方法。你可以使用關鍵字larger和smalle r來改變字體的大小。在圖7.24中,最後兩行文字的大小一樣,這是因為關鍵字larger將字體大小設為原始字體大小的1.5 倍。

 

注意

Internet Explorer 3.0不能識別larger和smaller關鍵字。

Back to Top 查看 friend's 資料 搜索其他貼子 friend 訪問 friend's
 

<< 上一頁 頁 of 4 下一頁 >>
  回復發表新主題
顯示可打印的頁面 顯示可打印的頁面

論壇跳轉
不能 張貼新論題在這個討論版
不能 回應論題在這個討論版
不能 刪除你的發言在這個討論版
不能 編輯你的發言在這個討論版
不能 新增投票標題在這個討論版
不能 在這個討論版投票

Edit by doreme Forums version 2004
Welcome ©2001-2004 doreme Guide

This page was generated in 0.2031 seconds.

 
保養品
保養品, Skin Care
www.elady.tw
美材批發
美材, Cosmetic
www.elady.tw/beauty_org
保養品批發
名牌保養品、保養品批發
gb.perfume.com.tw/skincare
飾品批發
飾品、飾品批發
gb.perfume.com.tw/ornament