|
技術文章 > 萬維網發展 > 語言 > 網頁製作概論(二) 認識CSS
|
網頁製作概論(二) 認識CSS
|
|
撰/JHKChan
網頁製作概論- 認識HTML
- 認識CSS
- 認識JavaScript
- 認識PHP(一)
- 認識PHP(二)
- 認識PHP(三)
本篇文章的目錄- CSS簡介
- CSS語法
- 解構CSS
- 層疊次序
- 字型屬性
- 文字屬性
- 顏色屬性
- 顏色宣告
- 屬性概要
- 分類屬性
- 區塊屬性
- 參考資料
2 認識CSS2.1 CSS簡介DHTML的全寫為Dynamic HTML，也就是動態HTML，其實就是HTML、CSS和JavaScript的統稱。加入了CSS和JavaScript此兩項技術，HTML便能互動地顯示動態資訊。 首
先，我們要知道甚麼是Style
Sheet(樣式表)，這是用於管理及制訂文件於顯示、列印甚至由電腦「朗讀」文字時的正確表達方式的文件。而CSS的全寫為Cascading
Style
Sheets，中文譯作「串接樣式表」或「層疊樣式表單」，亦是由W3C®負責將其標準化。由於可與HTML配合使用，CSS為廣泛使用。CSS有
Level 1(CSS 1)及Level 2(CSS 2)之分，CSS 1早於1996年12月推出，主要是用來描述簡單的網頁顯示格式，而CSS
2則於1998年5月推出，以支援多媒體、下載字型、元素位置精確編排等新功能來加強CSS 1。CSS
2.1於2004年2月推出並成為最新參選建議，另外CSS 3亦籌備當中，可望於不久將來面世。  圖2.1
當然，CSS亦不是電腦編程語言，而是樣式語言(style language)。至於「層疊」的意思，是根據優先次序、標記等來判斷使用的樣式。CSS可以內嵌於HTML文件或儲存成副檔名為.css的純文字檔，編輯的方法與HTML相同，現時最新的瀏覽器均支援。 2.2 CSS語法首先讓我們看看HTML配合上CSS的例子： 1 <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
2 <HTML>
3 <HEAD>
4 <TITLE>Using CSS</TITLE>
5 <STYLE type="text/css">
6 <!--
7 BODY {
8 color: yellow;
9 font-size: 14pt;
10 font-family: "Arial";
11 background-color: gray;
12 }
13 -->
14 </STYLE>
15 </HEAD>
16 <BODY>
17 This is the first example we use CSS.
18 </BODY>
19 </HTML> 例2.1
顯示結果為：  圖2.2
大
家大可發現，我們並沒有用<FONT>標記，或者在<BODY>內加上bgcolor屬性，但顯示出來的模樣卻是不同。這便是
CSS威力之強大，使用CSS時，編寫網頁時間和網頁下載時間可以縮短(因為少了很多標記)，而且整個網頁的格式都可以維持統一。試想一想，假如我們不用
CSS，而HTML文件內有一百多個<FONT>標記來轉變文字顏色，現在要全部改過另一款顏色，編輯工作要做多久？現在有了CSS，只要改
一下就行了。 2.2.1 解構CSS就剛才例2.1所見，我們多了一個新的標記──<STYLE>標記，這便是將CSS內嵌於HTML文件的其中一種方法。以下為此標記概要： - <STYLE>標記：存放於<HEAD>之中。此標記有以下屬性(除type外，其他可省略)：
- type屬性：設定樣式表的類型，暫時只會使用text/css；
- media屬性：設定應用樣式表的媒體，有screen、tty、tv、projection、handheld、print、braille、aural和/或all；
之後於<STYLE>標記內使用<!-- ... -->標記，是因為由於一些舊的瀏覽器並不支援<STYLE>標記，於是便將CSS全部顯示出來。我們便用<!-- ... -->來堵塞這兼容問題。 現在便是談談最主要的CSS語句了，它的語法跟HTML完全不同，但卻簡單很多，因為只有一種句式，就是： 選擇符 { 屬性1: 值1; 屬性2: 值2 ... } 重要的選擇符(selector)有幾種：元素選擇符、類選擇符、ID選擇符和關聯選擇符。元素選擇符便是以標記作選擇，如例2.1中的BODY： BODY { ... } 類選擇符是自行建立一個類(class)，並以「.」(period)開頭加上自訂的唯一名稱，如.header、.code等等，之後只要在需要該樣式的標記加上class屬性，值為類名稱(不要一點)，例如： .header { ... } ... <P class="header">...</P> ID選擇符則是對應ID來格式化，ID亦是自行建立，並以「#」(sharp)開頭加上自訂的唯一名稱，如#name、#gender等等，之後於適當的標記加上ID屬性，值為ID名稱(不要井號)，例如： #name { ... } ... <P id="name">...</P> 類選擇符與ID選擇符看來並無分別，實際上類是可以重複使用，但ID只能於某一標記上使用一次，但ID的優先次序卻較高。最後就是關聯選擇符，由於過於複雜，再此不贅。 至於屬性(property)大致可分為五種：字型(font)、顏色(color)、文字(text)、區塊(box)和分類(classification)，於2.3及之後會探討部分。 除了CSS最為主要的語句外，我們亦需要於CSS加入註解，語法為： /* 這裏是註解
可以多於一行 */ 「/*」作為註解的開始符號，結束符號便是「*/」。 最
後我們要說說一個特別的例子，便是偽類(pseudo-class)和偽元素(pseudo-element)，這些類和元素為支援CSS的瀏覽器所識
別，但之前卻又無需宣告。例如<A>標記的偽類有link、active、hover和visited，<P>標記有first
-letter、first-line等等。其句式主要如下： 選擇符:偽類 { 屬性1: 值1; 屬性2: 值2 ... } 如果加上類，則句式為： 選擇符.類:偽類 { 屬性1: 值1; 屬性2: 值2 ... } 2.2.2 層疊次序由於一份HTML文件可以從外與CSS文件連結或將CSS內嵌，當中便有可能引起衝突，要解決問題，便是設立優先次序，讓瀏覽器選擇最適當的樣式表使用。CSS大致可分為四種優先次序： - !important
這是最為不擇手段的語法，一般不建議使用，因為有多於一個!important用於同一屬性時優先次序仍然被破壞； BODY {font-family: "Arial" !important;} - 外部連結CSS文件
<LINK rel="stylesheet" href="stylesheet.css" type="text/css"> - 直接內嵌於標記
<P style="font-family: 'Arial';"> ... </P> - 內嵌於<STYLE>標記
如果於同一優先次序仍有沖突，則分別按ID、類和標記等精確度來挑選。
2.3 字型屬性字型屬性其實不多，而最常用的為以下幾種，概要如下： - font-family屬性：設定字型，可以直接輸入字型名稱和/或關鍵字，關鍵字有serif、sans-serif、cursive、fantasy或monospace選擇，如需輸入多於一種字型，則用逗號分隔；
 圖2.3 font_family.html
- font-style屬性：設定字型的樣式，可輸入normal、italic或oblique；
- font-weight屬性：設定字型的粗幼，可輸入normal、bold、bolder、lighter、100、200……至900；
- font-size屬性：設定字型的大小，可輸入xx-small、x-small、small、medium、large、x-large、xx-large、larger、smaller，或者直接輸入大小，如12pt；
- font屬性：一次過設定以上的屬性，次序為font-style、font-weight、font-size和/或font-family，中間以空格相隔；
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <HTML>
3 <HEAD>
4 <TITLE>Font Attributes</TITLE>
5 <STYLE TYPE="text/css">
6 <!--
7 BODY {
8 font: italic bold 14pt cursive;
9 }
10 -->
11 </STYLE>
12 </HEAD>
13 <BODY>
14 Let's see what style this text has.
15 </BODY>
16 </HTML> 例2.2
顯示結果為：  圖2.4
大家可能會覺得奇怪，剛才的例子我們也可以使用<B>、<I>等標記，結果亦應該一樣，但為何要用CSS呢？其實除了一開始提及的好處之外，CSS能夠提供更精確的控制，如字型的粗幼度便有九級選擇，這是<B>所不能。 2.4 文字屬性文字屬性與字型屬性的主要分別在於字型屬性負責處理字的顯示樣式，而文字屬性則主要負責段落的顯示樣式，其概要如下： - word-spacing屬性：設定每一個字的相隔距離，可輸入normal或直接輸入大小，如12pt；
- letter-spacing屬性：設定每一個字母的相隔距離，如果為中文字，則與word-spacing無異，輸入值與word-spacing一樣；
- text-decoration屬性：設定字為underline、overline、line-through、blink(非IE不支援)和/或none；
- vertical-align屬性：設定字的垂直對齊方式，可輸入baseline、sub、super、top、middle、bottom、text-top或text-bottom；
- text-align屬性：設定字的水平對齊方式，可輸入left、center、right或justify；
- text-transform屬性：設定字的大小寫轉換，可輸入none、capitalize、uppercase或lowercase；
- text-indent屬性：設定段落首行縮排，可直接輸入大小或百分比；
- line-height屬性：設定段落行距，可輸入normal、數字(會設定為行距，如2為兩倍行距)、直接輸入大小或百分比；
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <HTML> 3 <HEAD> 4 <TITLE>Text Properties</TITLE> 5 <STYLE type="text/css"> 6 <!-- 7 P { 8 font: 12pt sans-serif; 9 text-indent: 10%; 10 text-align: justify; 11 line-height: 2; 12 } 13 14 H3 { text-transform: uppercase; } 15 --> 16 </STYLE> 17 </HEAD> 18 <BODY> 19 <H3>Style Sheet</H3> 20 <P>A style sheet is made up of style rules that tell a browser how to present a document. There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML's STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page.</P> 21 </BODY> 22 </HTML> 例2.3
顯示結果為：  圖2.5
2.5 顏色屬性2.5.1 顏色宣告使用CSS來處理顏色及背景是絕對有優勢的，就以輸入顏色為例，便有多達五種方法，分別為： - 關鍵字
如aqua、blue、gray等等十六種VGA顏色，以下為詳細列表： | 顏色 | 16進制碼 | 顏色 | 16進制碼 | | Black | #000000 | Green | #008000 | | Silver | #C0C0C0 | Lime | #00FF00 | | Gray | #808080 | Olive | #808000 | | White | #FFFFFF | Yellow | #FFFF00 | | Maroon | #800000 | Navy | #000080 | | Red | #FF0000 | Blue | #0000FF | | Purple | #800080 | Teal | #008080 | | Fuchsia | #FF00FF | Aqua | #00FFFF |
表2.1 - #rrggbb
也就是十六進制的輸入方式； - #rgb
#rgb跟#rrggbb是一樣的，只是輸入比較簡單，如#0c0就等於#00cc00； - rgb(r,g,b)
r、g和b的值介乎0至255之間的整數； - rgb(r%,g%,b%)
r、g和b的值介乎0 至100之間的整數；
2.5.2 屬性概要以下為顏色屬性的概要，主要控制文字及背景顏色： 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <HTML> 3 <HEAD> 4 <TITLE>Color Properties</TITLE> 5 <STYLE type="text/css"> 6 <!-- 7 BODY { 8 background-color: #abcdef; 9 background-image: url("bg.gif"); 10 background-repeat: repeat-y; 11 } 12 13 P { 14 font: 12pt sans-serif; 15 text-indent: 10%; 16 text-align: justify; 17 line-height: 2; 18 color: #ff0000; 19 } 20 --> 21 </STYLE> 22 </HEAD> 23 <BODY> 24 <P>A style sheet is made up of style rules that tell a browser how to present a document. There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML's STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page.</P> 25 </BODY> 26 </HTML> 例2.4
顯示結果為：  圖2.6
2.6 分類屬性分類屬性比較雜亂，但用途卻非常之廣泛，以下為屬性概要： - white-space屬性：設定空白格顯示的方式，可輸入normal、pre或nowrap；
- list-style-type屬性：設
定項目符號的類型，IE可輸入的有disc、circle、square、decimal、lower-roman、upper-roman、lower
-alpha、upper-alpha或者none，標準則再加上decimal-leading-zero、lower-greek、lower-
latin、upper-latin、armenian和georgian(不包括lower-alpha和upper-alpha)；
- list-style-position屬性：設定項目符號是否嵌入每一點內，可輸入outside或inside；
- list-style-image屬性：設定項目符號的圖像，如果只用HTML並不能實踐；
- list-style屬性：一次過設定list-style-*屬性，次序為list-style-type、list-style-position和/或list-style-image；
- cursor屬性：設
定鼠標的形狀，雖然並不屬於分類屬性，但用途亦非常廣泛，可以輸入URI或者auto、crosshair、default、pointer、move、
e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-
resize、text、wait或help；
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <HTML> 3 <HEAD> 4 <TITLE>Classification Properties</TITLE> 5 <STYLE type="text/css"> 6 <!-- 7 OL { 8 list-style-type: decimal; 9 list-style-position: inside; 10 } 11 --> 12 </STYLE> 13 </HEAD> 14 <BODY> 15 <OL> 16 <LI>First</LI> 17 <LI style="list-style-type: armenian">Second</LI> 18 <LI style="list-style-image: url('pointer.gif')">Third</LI> 19 <LI style="cursor: wait">Fourth<BR>All the list items are inside.</LI> 20 <LI style="white-space: pre"> Fifth</LI> 21 </OL> 22 </BODY> 23 </HTML> 例2.5
顯示結果為：  圖2.7
2.7 區塊屬性區塊屬性為CSS中最複雜而用途又最廣泛的屬性之一，可謂CSS的進階技巧。此屬性的基本概念是將任何元素都當作區塊來處理，因此每種元素都有其邊界(margin)、邊框(border)和補白(padding)。以下為眾多屬性之概要： - margin-top屬性：設定上邊界，可直接輸入大小、百分比或auto；
- margin-right屬性：設定右邊界；
- margin-bottom屬性：設定下邊界；
- margin-left屬性：設定左邊界；
- margin屬性：設定以上的邊界，邊界大小可輸入一至四個；
- padding-top屬性：設定上補白，可直接輸入大小或百分比；
- padding-right屬性：設定右補白；
- padding-bottom屬性：設定下補白；
- padding-left屬性：設定左補白；
- padding屬性：設定以上的補白，補白大小可輸入一至四個；
- border-top-width屬性：設定上邊框的寬度，可輸入thin、medium、thick或直接輸入大小；
- border-right-width屬性：設定右邊框的寬度；
- border-bottom-width屬性：設定下邊框的寬度；
- border-left-width屬性：設定左邊框的寬度；
- border-width屬性：設定以上的邊框，邊框大小可輸入一至四個；
- border-top-color屬性：設定上邊框的顏色；
- border-right-color屬性：設定右邊框的顏色；
- border-bottom-color屬性：設定下邊框的顏色；
- border-left-color屬性：設定左邊框的顏色；
- border-color屬性：設定邊框的顏色，顏色可輸入一至四個，預設值根據color屬性；
- border-top-style屬性：設定上邊框的樣式，可輸入none、dotted、dashed、solid、double、groove、ridge、inset或outset；
- border-right-style屬性：設定右邊框的樣式；
- border-bottom-style屬性：設定下邊框的樣式；
- border-left-style屬性：設定左邊框的樣式；
- border-style屬性：設定邊框的樣式，可輸入一至四個；
- border-top屬性：設定上邊框的寬度、顏色和樣式，依次為border-top-width、border-top-color和/或border-top-style；
- border-right屬性：設定右邊框的寬度、顏色和樣式；
- border-bottom屬性：設定下邊框的寬度、顏色和樣式；
- border-left屬性：設定左邊框的寬度、顏色和樣式；
- border屬性：設定邊框的寬度、顏色和樣式，依次為border-width、border-style和/或border-color，只能同時設定四邊；
- width屬性：設定元素的寬度，可輸入大小、百分比或auto；
- height屬性：設定元素的高度，可輸入大小、百分比或auto；
- display屬性：設定元素的顯示模式，可輸入block、inline、list-item或none。與JavaScript配合時極為有用；
- position屬性：設定元素的位置，可輸入static、relative、absolute或fixed(固定)，於重疊多件元素時甚為有用；
- z-index屬性：設定元素的深度，可輸入整數(越大越高)或auto；
- top屬性：當position並非static時，設定區塊上方向下偏移量，可輸入大小、百分比或auto；
- right屬性：當position並非static時，設定區塊右方向左偏移量，可直接輸入大小、百分比或auto；
- bottom屬性：當position並非static時，設定區塊下方向上偏移量，可輸入大小、百分比或auto；
- left屬性：當position並非static時，設定區塊左方向右偏移量，可直接輸入大小、百分比或auto；
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <HTML> 3 <HEAD> 4 <TITLE>Box Properties</TITLE> 5 <STYLE type="text/css"> 6 <!-- 7 P { 8 font: 12pt sans-serif; 9 text-indent: 10%; 10 text-align: justify; 11 line-height: 2; 12 color: #f00; 13 border-style: dashed; 14 padding: 10px; 15 } 16 17 .fly { 18 background-color: #000; 19 color: #fff; 20 position: absolute; 21 z-index: 1; 22 top: 52px; 23 left: 40px; 24 } 25 --> 26 </STYLE> 27 </HEAD> 28 <BODY> 29 <P>A style sheet is made up of style rules that tell a browser how to present a document. There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML's STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page.</P> 30 <DIV class="fly">This text will be above the paragraph.</DIV> 31 </BODY> 32 </HTML> 例2.6
顯示結果為：  圖2.8
大家見到<P>和<DIV>元素互相重疊起來，這強大功能使網頁設計變得天馬行空。 在這裏，大家會發現一個新標記，<DIV>是通用的容器，可以說是專門配合CSS使用，沒有任何特別功能，另一標記則是<SPAN>。 2.8 參考資料- Chuck Musciano and Bill Kennedy. "HTML & XHTML: The Definitive Guide", Fifth Edition, O'Reilly & Associates, 2002.
- Frank Boumphrey, "Professional Style Sheets for HTML and XML", Wrox Press, 1998.
- Dave Raggett. (1999, Dec.). "HTML 4.01 Specification". [Online]. Available: http://www.w3.org/TR/html4/
- Hakon Wium Lie and Bert Bos. (1999, Jan.). "Cascading Style Sheets, level 1 Specification". [Online]. Available: http://www.w3.org/TR/CSS1/
- Bert
Bos, Hakon Wium Lie, Chris Lilley and Ian Jacobs. (1998, May.).
"Cascading Style Sheets, level 2 Specification". [Online]. Available: http://www.w3.org/TR/CSS2/
- John Pozadzides and Liam Quinn. (1997). "Cascading Style Sheets Guide". [Online]. Available: http://www.htmlhelp.com/distribution/css.zip
- Microsoft
Corporation. (2004). "MSDN Library, Web Development, HTML and DHTML,
SDK Documentation, Reference". [Online]. Available: http://msdn.microsoft.com/library/default.asp?url=/workshop/
author/dhtml/reference/dhtml_reference_entry.asp - Douglas R. Jacobson. (1998). "RGB Hexadecimal Color Chart". [Online]. Available: http://www.hypersolutions.org/pages/rgbhex.html
相關連結：
- HTML & XHTML: The Definitive Guide, Fifth Edition, O'Reilly & Associates
- Professional Style Sheets for HTML and XML, Wrox Press
- HTML 4.01 Specification
- Cascading Style Sheets, level 1 Specification
- Cascading Style Sheets, level 2 Specification
- Cascading Style Sheets Guide
- MSDN Library, Web Development, HTML and DHTML, SDK Documentation, Reference
- RGB Hexadecimal Color Chart
相關文件：
- 圖2.1
- 圖2.2
- 圖2.3 font_family.html
- 圖2.4
- 圖2.5
- 圖2.6
- 圖2.7
- 圖2.8
- 本章一切的原始碼及練習
- 本章的PDF版
發表日期：2005-02-13
|
|
|
< 回到分類選單
> 回應此文章
|
|
隨 機 文 章 
