CSS初級入門教程

蔡逸竹

孤獨者 - 心在黑暗裡旅行 ...... ...

至尊會員

Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7

遊蕩的過客 - 枉入紅塵若許年 .. ...

UID: 18273
帖子: 12122
精華: 1273
積分: 240737
金幣: 492641
威望: 5001
推廣: 0
閱讀權限: 99
來自: 尋覓中
註冊時間: 2006-6-24
最後登錄: 2015-5-27

總版主典獄長榮譽勳章陽光會員宣傳大使榮退獎章糾察隊長鍾愛一生勳章大學博士勳章守護天使勳章忠誠勳章高級糾察社區建設獎章社區巡守獎章社界宗師勳章資源專家勳章傳學大師勳章文壇大家勳章點評專家勳章終身成就獎章熱心助人獎章最佳分享獎章

發短消息
加為好友
當前離線

1樓大中小發表於 2007-1-20 23:40

CSS初級入門教程

第一章　ＣＳＳ的基本認識
關　於　Ｃ　Ｓ　Ｓ　的　概　論

　　CSS是『Cascading Style Sheets』的簡稱，中文翻為「串接樣式表」，也有人只翻為「樣式表」。ＣＳＳ用以作為網頁的排版與風格設計，在所謂的「新式網頁」裡，ＣＳＳ不容置疑是相當重要的一環。ＣＳＳ是以既有的基礎，用以彌補既存ＨＴＭＬ規格裡的不足，也讓網頁的設計更為靈活。

　　這份教學檔案就要來為您介紹ＣＳＳ的應用羅！在這邊並不介紹ＣＳＳ的所有規格，僅就您在網頁寫作上較常用到，較可能用到的語法部份及應用的方法來為您作介紹。也由於現在兩瀏覽器的相容是漸行漸遠，將貼心地為您註明支援該語法的瀏覽器。而ＩＥ從 3.0開始便支援部份語法了，這點也會為為您註明的。

各　章　節　的　概　略　介　紹

　　為了您參考與學習上的方便，在這裡先為您大略地說明一下這份教學檔案各章節所包含的內容吧！讓您在參考時有個方向與概念。基本上，前兩章著重於概念與基本認知的建立，也就是一些為您做一些札根的工作；第三章則為您補充在應用與設定上的一些其它方式或特性的說明與介紹。而第四章到第六章則著重於語法、參數與性質的介紹，也就是真正建立在樣式表裡面的東東。

第一章　ＣＳＳ的基本認識：
就是本章啦！就介紹您一些ＣＳＳ基本概念與認識。
第二章　ＣＳＳ的應用方式：
為您介紹ＣＳＳ的基本宣告、應用方法與特性介紹。
第三章　ＣＳＳ的應用補充：
為您介紹ＣＳＳ的其它宣告方式、應用與特性介紹。
第四章　頁面性質的ＣＳＳ：
為您介紹頁面性質的ＣＳＳ相關語法、參數與性質。
第五章　文字性質的ＣＳＳ：
為您介紹文字性質的ＣＳＳ相關語法、參數與性質。
第六章　區塊性質的ＣＳＳ：
為您介紹區塊性質的ＣＳＳ相關語法、參數與性質。

應　用　上　的　基　本　認　識

　　應用ＣＳＳ並不困難，但是請您先參考這裡的基本認識，對一些用語有了一點基本概念後，對於您在看後面的教學會有助益，看起來也才不會太吃力！

一、基本用語的認識：

元件(element)：亦即HTML基本語法中的標籤(tag)。
屬性(attribute)：用以描述標籤特性的屬性。
例如：
<HR WIDTH="90%">中，HR為標籤，WIDTH為屬性，而80%即為WIDTH屬性的值。
性質(property)：用以描述元件的特性。相當於HTML基本語法中的屬性。
樣式(style)：擁有一組或數組的性質，用以描述元件特性。
挑選者(selector)：套用樣式的元件。
例如：
H3{ COLOR : BLUE }中，H3為挑選者，COLOR為性質，BLUE為COLOR性質的值。

二、基本單位的認識：

有相對單位與絕對單位兩種單位表達方式。
相對單位：

『em』：相對於字母高度的比例因子。
『en』：相對於字型大小的比例因子。
『%』：相對於長度單位（通常是目前字型的大小）的百分比例。
絕對單位：
『in』：英吋。
『cm』：公分。
『mm』：公厘。
『px』：像素（系統預設單位）。
『pc』：pica，印刷活字單位。
『pt』：像點。
相對關係：1in= 6pc= 72pt= 2.54cm= 25.4mm

三、顏色使用的認識：

顏色的表示共有五種方式。
『#RRGGBB』：
以三個00到FF的十六進位值分別表示0到255十進位值的紅、綠、藍三原色數值。
『#RGB』：
簡略表示法，只用三個0到F的十六進位值分別表示紅、綠、藍三原色數值。而事實上，瀏覽器會自動擴展為六個十六進位的值，如『#ABC』將變為『#AABBCC』。但是，顯見這樣的表示法並不精確。
『rgb(R,G,B)』：
以0到255十進位值的紅、綠、藍三原色數值來表示顏色。
『rgb(R%,G%,B%)』：
以紅、綠、藍彼此相對的數值比例來表示顏色，如『rgb(60%,100%,75%)』。
『Color_Name』：
直接以顏色名稱來表示顏色，共有141種標準的顏色名稱。

四、ＵＲＬ表示法的認識：

ＣＳＳ的ＵＲＬ表示共有五種方式，且都為合法宣告，您可以自行選用。

引用:

URL(訪客無法瀏覽此圖片或連結，請先註冊或登入會員。
URL('http://yourweb/path/file_name')
URL("http://yourweb/path/file_name")
URL( 'http://yourweb/path/file_name' )
URL( "http://yourweb/path/file_name" )

　　有了這些基本認識與概念後，接下來就要來為您介紹ＣＳＳ的應用方法羅！

[ 本帖最後由蔡逸竹於 2007-1-20 23:43 編輯 ]

TOP

蔡逸竹

孤獨者 - 心在黑暗裡旅行 ...... ...

至尊會員

Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7

遊蕩的過客 - 枉入紅塵若許年 .. ...

UID: 18273
帖子: 12122
精華: 1273
積分: 240737
金幣: 492641
威望: 5001
推廣: 0
閱讀權限: 99
來自: 尋覓中
註冊時間: 2006-6-24
最後登錄: 2015-5-27

總版主典獄長榮譽勳章陽光會員宣傳大使榮退獎章糾察隊長鍾愛一生勳章大學博士勳章守護天使勳章忠誠勳章高級糾察社區建設獎章社區巡守獎章社界宗師勳章資源專家勳章傳學大師勳章文壇大家勳章點評專家勳章終身成就獎章熱心助人獎章最佳分享獎章

發短消息
加為好友
當前離線

2樓大中小發表於 2007-1-20 23:42

第二章　ＣＳＳ的應用方式
Ｃ　Ｓ　Ｓ　的　聲　明　方　式

　　這章節將開始為您介紹CSS的應用。當然一開始要介紹的是如何去建立個樣式表（Style Sheets），包括了聲明的方式和應用在網頁上的方法，最後還會為您概述一下ＣＳＳ的一些特性。概略來說，ＣＳＳ的聲明有三種方式：

一、基本聲明：最典型的ＣＳＳ聲明方式。
element {property: value}　用中文來表示的話，也就是
元件(標籤) {性質(屬性)名稱: 設定值}
例如：
H3 {COLOR: BLUE}　即為一組聲明。

二、集體聲明：同時聲明某個或數個元件(標籤)（各元件(標簽)間以逗號分隔）的一組或數組樣式規則(性質)（各組規則間以分號分隔）。
元件(標籤) {
性質(屬性)名稱1: 設定值1;
性質(屬性)名稱2: 設定值2;
... }
或是
元件A(標籤A)、元件B(標籤B)、元件C(標籤C)、... {
性質(屬性)名稱1: 設定值1;
性質(屬性)名稱2: 設定值2;
...}
例如：

引用:

TD {
COLOR: BLUE;
font-size: 9pt;
}
或是
TD,P,DIV {
COLOR: BLUE;
font-size: 9pt;
}

三、分項聲明：將許多樣式規則分組再分別聲明。
元件A(標籤A) {性質(屬性)名稱1: 設定值1; 性質(屬性)名稱2: 設定值2; }
元件A(標籤A) {性質(屬性)名稱3: 設定值3; 性質(屬性)名稱4: 設定值4; }
例如：

引用:

TD { COLOR: BLUE; font-size: 9pt}
TD { font-family: "標楷體"; line-height: 150%}

這樣子的聲明方式並不會互相牴觸，因為所聲明的性質是不同的。如果不小心對同樣一個性質作了重複的聲明，則只有後來聲明的設定值才會發生作用。

　　要附帶提一下的是，在您的聲明中，只要您的格式正確就會被接受，而不論是大小寫、空白或換行都不會對顯示的結果有影響的，您可依自己習慣來編寫。

Ｃ　Ｓ　Ｓ　的　應　用　方　法

　　接下來要為您介紹的是將所建立的樣式表應用在網頁上的四種基本方法。

一、使用STYLE屬性：將STYLE屬性直接加在個別的元件標籤裡。
<元件(標籤) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...}
例如：

引用:

<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"標楷體"; line-height:150%>

這種用法的優點是可靈巧應用樣式於各標籤中，但是缺點則是沒有整篇檔案的『統一性』。

二、使用STYLE標籤：將樣式規則寫在<STYLE>...</STYLE>標籤之中。

引用:

<STYLE TYPE="text/css">

<!--
樣式規則表

引用:

-->
</STYLE>
例如：
<STYLE TYPE="text/css">

</STYLE>

通常是將整個的 <STYLE>...</STYLE>結構寫在網頁的<HEAD> </HEAD>部份之中。這種用法的優點就是在於整篇檔案的統一性，只要是有聲明的的元件即會套用該樣式規則。缺點就是在個別元件的靈活度不足。

三、使用 LINK標籤：將樣式規則寫在.css的樣式檔案中，再以<LINK>標籤引入。
假設我們把樣式規則存成一個example.css的檔案，我們只要在網頁中加入

引用:

<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">

即可套用該樣式檔案中所制定好的樣式了。通常是將LINK標籤寫在網頁的<HEAD> </HEAD>部份之中。這種用法的優點就是在於可以把要套用相同樣式規則的數篇檔案都指定到同一個樣式檔案即可。缺點也是在個別檔案或元件的靈活度不足。

四、使用@import引入：跟LINK用法很像，但必　放在<STYLE>...</STYLE> 中。

引用:

<STYLE TYPE="text/css">

</STYLE>

例如：

引用:

<STYLE TYPE="text/css">

</STYLE>

要注意的是，行末的分號是絕對不可少的！切記切記！

　　很明顯的，不管是LINK還是@import的用法都可能可以直接套用他人現有的樣式表。不過，基於網路的禮儀，這種事別做的好，至少也應該知會對方一聲，要先取得人家的同意才行！

　　而四種應用方法各有其優缺點，您可以綜合地使用，並不會相互牴觸。但是如果相同的性質屬性遇上重複的聲明的話，就要考量套用優先權的問題了！一般來講，優先權的順序有以下的幾點原則：
網頁設計者的樣式設定＞使用者的樣式設定＞瀏覽器的樣式設定
STYLE屬性的樣式設定＞ STYLE標籤樣式設定＞鏈結進來的樣式設定
後面聲明的樣式設定＞前面的樣式設定
所謂『鏈結進來的樣式設定』指的就是用上面提到過的LINK標籤與@import引入這兩種應用方式所鏈結進來的的樣式設定。

　　以上就是ＣＳＳ最基本的聲明與應用的方法介紹，有了這些基本的認識與方法，您已經可以開始建立您的樣式表！除了上面提到的基本的聲明與應用的方法之外，還有其它的聲明與應用的方法，將為您在下一章中再作介紹。

[ 本帖最後由蔡逸竹於 2007-1-20 23:45 編輯 ]

TOP

蔡逸竹

孤獨者 - 心在黑暗裡旅行 ...... ...

至尊會員

Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7

遊蕩的過客 - 枉入紅塵若許年 .. ...

UID: 18273
帖子: 12122
精華: 1273
積分: 240737
金幣: 492641
威望: 5001
推廣: 0
閱讀權限: 99
來自: 尋覓中
註冊時間: 2006-6-24
最後登錄: 2015-5-27

總版主典獄長榮譽勳章陽光會員宣傳大使榮退獎章糾察隊長鍾愛一生勳章大學博士勳章守護天使勳章忠誠勳章高級糾察社區建設獎章社區巡守獎章社界宗師勳章資源專家勳章傳學大師勳章文壇大家勳章點評專家勳章終身成就獎章熱心助人獎章最佳分享獎章

發短消息
加為好友
當前離線

3樓大中小發表於 2007-1-20 23:45

第三章　ＣＳＳ的應用補充
挑　選　者　特　性　的　應　用

　　在講挑選者的特性之前，要提一下的是CSS繼承的特性。所謂的繼承的特性是指被包在內部的標籤將擁有外部標籤的樣式性質。繼承的特性最典型的應用通常發揮在預設整份網頁的樣式，而要指定為其它樣式的部份再依要設定在個別元素裡即可。這項特性可以提供網頁設計者更理想的發揮空間。

　　接下來就要講挑選者特性的應用！其實這部份應該算是聲明的一種方式，但是在您看過第二章的基本的聲明與應用後，到這邊再講挑選者您會比較有概念點。在ＣＳＳ應用或設計的時候，有幾種依據元素的關係或性質來設定顯示特定性質的方法，就是挑選者特性的應用，能讓您在控制與應用上更加靈活。

一、前後文挑選者：依聲明標籤前後文關係顯示特定性質的方法。
前後文挑選者便是當瀏覽器在顯示HTML原始碼所指定的內容時，會考慮元素標籤的前後關係，而去顯示指定的樣式聲明。也就是說只要HTML原始碼內的標籤排列前後順序符合時，該項聲明便會發生作用了！

元素A(標籤A) 元素B(標籤B) 元素C(標籤C) ... {樣式規則}
要注意的是，前後文挑選者的聲明跟集體聲明很像，但是集體聲明的元素標籤間要用逗號隔開，而用前後文挑選者聲明時元素標籤間要用空格隔開；而這兩種聲明方式您可以混合使用。
元素A 元素B、元素C 元素D 元素E、... {樣式規則}
這樣您就可以用集體聲明的方式，聲明數組前後文挑選者的樣式規則。

二、類別挑選者：讓單一或數個標籤使用同組樣式規則的方法。
類別(class)可以讓不同的元素標籤共同套用同一組樣式性質或相同的元素標籤套用不同組的樣式性質。首先介紹的是如何讓不同的元素套用同一組樣式性質，如下面範例所寫即可。

引用:

<HTML>
<HEAD>
<STYLE>
<--
　　.blue { color : BLUE }
-->
</STYLE>
</HEAD>
<BODY>
　　　...
　<H1 class="blue">...</H1>
　　　...
　<P class="blue">... </P>
　　　...
</BODY>

要注意在聲明時前面的小點，CLASS名稱可任取。而要讓相同的元素標籤套用不同組的樣式性質時，也可以應用類別特性來設定。

引用:

<HTML>
<HEAD>
<STYLE>
<--
　　P.blue { color : BLUE }
　　P.red { color : RED }
-->
</STYLE>
</HEAD>
<BODY>
　　　...
　<P class="blue">...</P>
　　　...
　<P class="red">...</P>
　　　...
</BODY>

要注意同樣是在聲明時的小點，CLASS名稱可任取。靈活運用類別特性，可以讓您的樣式設定更具機動性唷！

三、ＩＤ挑選者：與類別挑選者類似，不同的是在『唯一性』。
ＩＤ特性的使用與類別特性十分雷同，但是，檔案裡的各個ＩＤ都是唯一的。換句話說，類別特性可以重複套用在單一或數個元素標籤之上，但是ＩＤ屬性在一份檔案裡只能出現一次。如下面範例所寫即可。

引用:

<HTML>
<HEAD>
<STYLE>
<--
　　#blue { color : BLUE }
-->
</STYLE>
</HEAD>
<BODY>
　　　...
　<P ID="blue">...</P>
　　　...
</BODY>

可以看到，聲明的方式是利用井字號『#』。而ＩＤ的這種『唯一性』正是讓javascript或 VBScript能夠對元素進行控制的關鍵。

　　透過以上的介紹的挑選者特性的聲明與使用，可以讓您的樣式設定更具機動與變化。其實您可以先熟悉上一章為您介紹的基本的聲明與應用方法，再應用本章所講的挑選者特性，一步步地去熟悉樣式表的使用。

連　結　擬　似　特　性　的　應　用

　　還記得在HTML的基本語法，在BODY標籤中可以用link、alink、vlink屬性去控制可連結或已連結的字體顏色嗎？現在亦可用ＣＳＳ去控制這些性質，稱為『擬似類別』（pseudo class）。您可以將其當作一般類別，聲明其樣式規則，而實際上，這些擬似類別並不用像上面講的類別挑選者，在HTML原始碼中再行設定指向的類別（CLASS）。下面介紹擬似類別的聲明與應用。

一般的聲明方式：擬似類別是以冒號來聲明。
只要在<STYLE>...</STYLE>架構中加入下面的聲明後，則頁面中的連結文字就會依您設定的樣式顯式了！
A:link { 樣式規則 }
A:active { 樣式規則 }
A:visited { 樣式規則 }
A:hover { 樣式規則 }
A:link用以設定未參觀連結的樣式規則。A:active用以設定作用中連結的樣式規則。A:visited用以設定已參觀連結的樣式規則。A:hover用以設定滑鼠移到連結之上時的樣式規則。而其中hover並不被NC4所支援，其它三個特性兩大瀏覽器都有支援。

　　如果您用的是IE4以上的瀏覽器，從本站鏈接您就可以知道 hover作用的妙處，以簡單的樣式設定就可以達成以往要寫好長一串設定的相同效果。這個連結擬似類別也可以與上面說過的類別挑選者特性合併使用。

Ｄ　Ｉ　Ｖ　與　Ｓ　Ｐ　Ａ　Ｎ　的　比　較

　　雖然樣式表可以套用在任何標籤之上，但是ＤＩＶ和ＳＰＡＮ元素的使用更是大大地擴展了HTML的應用層面。ＤＩＶ和ＳＰＡＮ這兩個元素在應用上十分類似，使用時都必加上結尾標籤，也就是< DIV>...</DIV>和<SPAN>...</SPAN> 。兩個可以應用的屬性與事件處理也很類似，都可以配合前面提過的挑選者特性來編寫。兩者也都不強加顯示功能於頁面內容之上，可以說是使用上十分廣泛的元素標籤。

　　而ＤＩＶ和ＳＰＡＮ的不同之處在於：ＤＩＶ元素定義為區塊（block），在 <DIV>...</DIV>之間是一個很完整的段落區塊。而ＳＰＡＮ元素則是定義為同軸（in-line），<SPAN>...< /SPAN>應用于于小範圍內的設定。兩者可以彼此混合，夾雜使用，因為彼此是相互獨立的。也因此，您可以利用這兩個元素，配合其它性質，靈活地調整您的網頁顯示的內容。

TOP

蔡逸竹

孤獨者 - 心在黑暗裡旅行 ...... ...

至尊會員

Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7

遊蕩的過客 - 枉入紅塵若許年 .. ...

UID: 18273
帖子: 12122
精華: 1273
積分: 240737
金幣: 492641
威望: 5001
推廣: 0
閱讀權限: 99
來自: 尋覓中
註冊時間: 2006-6-24
最後登錄: 2015-5-27

總版主典獄長榮譽勳章陽光會員宣傳大使榮退獎章糾察隊長鍾愛一生勳章大學博士勳章守護天使勳章忠誠勳章高級糾察社區建設獎章社區巡守獎章社界宗師勳章資源專家勳章傳學大師勳章文壇大家勳章點評專家勳章終身成就獎章熱心助人獎章最佳分享獎章

發短消息
加為好友
當前離線

4樓大中小發表於 2007-1-20 23:47

第四章　顏色背景的ＣＳＳ

本　章　Ｃ　Ｓ　Ｓ　的　主　要　作　用

　　在前面的章節介紹完了聲明與應用的方法及一些特性之後，從這章開始，便要正式進入訪客無法瀏覽此圖片或連結，請先註冊或登入會員。的指令介紹了！本章有兩個介紹的主題，第一個部份介紹的是顏色與背景性質的ＣＳＳ，其主要的作用在於設定元素的前景顏色、背景顏色與背景圖形等樣式設定的性質；而第二部份為您介紹的是用於控制擺放元素位置的ＣＳＳ的指令。

顏　色　背　景　的　Ｃ　Ｓ　Ｓ　指　令

color　設定前景顏色支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

<color>

設定顏色，請參考第一章顏色使用的相關說明

預設值：視瀏覽器而定
繼承性：有
一般範例：SPAN { color : BLUE }
同軸範例：<SPAN style="color:BLUE">

background-color　設定背景顏色支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

<color>	設定顏色，請參考第一章顏色使用的相關說明
transparent	將父元素（顏色或圖案）的背景透明化

預設值：transparent
繼承性：無
一般範例：BODY { background-color : BLUE }
同軸範例：<BODY style="background-color:BLUE">

background-image　設定背景圖形支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

<url>	設定圖檔URL，請參考第一章URL表示的相關說明
none	不使用背景圖案

預設值：transparent
繼承性：無
一般範例：
BODY { background-image : URL("http://yourweb/path/file_name") }
同軸範例：
<BODY style="background-image:URL('http://yourweb/path/file_name')">

background-repeat　設定背景重複支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

repeat	重複背景圖形填滿頁面
repeat-x	水平方向重複背景圖形
repeat-y	垂直方向重複背景圖形
no-repeat	不重複顯示背景圖形

預設值：repeat
繼承性：無
一般範例：BODY { background-repeat : repeat-x }
同軸範例：<BODY style="background-repeat: repeat-x">

background-attachment　設定背景附著支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

scroll	背景圖形隨著卷軸捲動
fixed	背景圖形隨著卷軸捲動（浮水印）

預設值：scrool
繼承性：無
一般範例：BODY { background-attachment : fixed }
同軸範例：<BODY style="background-attachment:fixed">

background-position　設定背景位置支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<percent> X% Y%	圖形上X% Y%的點對準元素的X% Y%位置
<length> X Y	將圖形左上角置於元素左上角水平 X垂直 Y之處
center	背景圖形置於中央
left	背景圖形對　左邊
right	背景圖形對　右邊
top	背景圖形對　頂部
bottom	背景圖形對　底部

預設值：0% 0%
繼承性：無
一般範例：BODY { background- position : 100% 50% }
同軸範例：<BODY style="background- position:100% 50%">

background　綜合設定背景性質支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

background-color	設定背景顏色
background-image	設定背景圖形
background-repeat	設定背景重複
background-attachment	設定背景附著
background-position	設定背景位置

預設值：無
繼承性：無
一般範例：
BODY { BLUE url(image/gif) repeat-x fixed center }
同軸範例：
<BODY style="BLUE url(image/gif) repeat-x fixed center">

位　置　擺　放　的　Ｃ　Ｓ　Ｓ　指　令

float　設定浮動性質（多用於文繞圖的情形）支　持：ＩＥ４、ＮＣ４
適　用：區塊元素或圖形
可能值：

left	元素靠左，文字圍繞其右
right	元素靠右，文字圍繞其左
none	以預設的方法顯示

預設值：none
繼承性：無
一般範例：DIV { float : right }
同軸範例：<DIV style="float:right">

clear　設定清除性質（設定是否允許浮動元素之存在）支　持：ＩＥ４
適　用：區塊元素或圖形
可能值：

both	若兩邊有浮動元素，則該元素移至浮動元素下方
left	若左邊有浮動元素，則該元素移至浮動元素下方
right	若右邊有浮動元素，則該元素移至浮動元素下方
none	以預設的方法顯示

預設值：none
繼承性：無
一般範例：DIV { clear : right }
同軸範例：<DIV style="clear:right">

width　設定寬度支　持：ＩＥ４、ＮＣ４
適　用：區塊元素或圖形
可能值：

<length>	長度單位，請參考第一章基本單位的相關說明
<percentage>	百分比，以父元素寬度為基準
auto	以固定比例自動變化大小

預設值：auto
繼承性：無
一般範例：DIV { width : 300pt }
同軸範例：<DIV style="width:300pt">

height　設定高度支　持：ＩＥ４、ＮＣ４
適　用：區塊元素或圖形
可能值：

<length>	長度單位，請參考第一章基本單位的相關說明
<percentage>	百分比，以父元素寬度為基準
auto	以固定比例自動變化大小

預設值：auto
繼承性：無
一般範例：DIV { height : 300pt }
同軸範例：<DIV style="height:300pt">

position　設定位置支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

absolute	以父元素為基準，擺設在特定位置上
relative	以相鄰元素為基準，擺設在特定位置上
static	預設位置，以該元素於原始碼中位置而定

預設值：absolute
繼承性：無
一般範例：DIV { position : static }
同軸範例：<DIV style="position:static">

top　設定頂端位置支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<length>	長度單位，請參考第一章基本單位的相關說明
<percentage>	百分比，以父元素寬度為基準
auto	以正常方式顯示

預設值：auto
繼承性：無
一般範例：DIV { top : 30pt }
同軸範例：<DIV style="top:30pt">

left　設定左端位置支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<length>	長度單位，請參考第一章基本單位的相關說明
<percentage>	百分比，以父元素寬度為基準
auto	以正常方式顯示

預設值：auto
繼承性：無
一般範例：DIV { left : 30pt }
同軸範例：<DIV style="left:30pt">

clip　設定裁剪（設定某區域形狀及大小，區域外通透）支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

rect(top,right,bottom,left)	設定矩形之上右下左長度，會自動比對對邊長度一般寫法為rect(0,長度,長度,0) 不可以寫為rect(0,0,長度,長度) 四個數值皆可以"auto"代替
auto	以正常方式顯示

預設值：auto
繼承性：無
一般範例：DIV { clip : rect(0,100px,50px,0) }
同軸範例：<DIV style="clip:rect(0,100px,50px,0)">

overflow　設定溢位處理（控制當元素內容超過該元素大小時的顯示方式）支　持：ＩＥ４
適　用：區塊元素
可能值：

visible	元素將不會依所設訂大小顯示，而能看見所有內容
hidden	超過元素所設訂大小之部份將被隱藏不予顯示
scroll	如有必要出現卷軸可讓使用者看到全部的內容
auto	以預設的方式顯示

預設值：auto
繼承性：無
一般範例：DIV { overflow : scroll }
同軸範例：<DIV style="overflow:scroll">

visibility　設定可視度支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

visible	設定該元素顯示
hidden	設定該元素不顯示，但仍佔據空間
inherit	以父元素可視度決定

預設值：inherit
繼承性：無
一般範例：DIV { visibility : hidden }
同軸範例：<DIV style="visibility:hidden">

z-index　設定Ｚ軸參數（三度空間）支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<number>	十進位數值，數值大的元素會出現在數值小的元素的上方
auto	當元素位置重複時，原始碼中寫在後面元素會出現在寫在前面元素的上方

預設值：auto
繼承性：無
一般範例：DIV { z-index : 3 }
同軸範例：<DIV style="z-index:3">

TOP

蔡逸竹

孤獨者 - 心在黑暗裡旅行 ...... ...

至尊會員

Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7

遊蕩的過客 - 枉入紅塵若許年 .. ...

UID: 18273
帖子: 12122
精華: 1273
積分: 240737
金幣: 492641
威望: 5001
推廣: 0
閱讀權限: 99
來自: 尋覓中
註冊時間: 2006-6-24
最後登錄: 2015-5-27

總版主典獄長榮譽勳章陽光會員宣傳大使榮退獎章糾察隊長鍾愛一生勳章大學博士勳章守護天使勳章忠誠勳章高級糾察社區建設獎章社區巡守獎章社界宗師勳章資源專家勳章傳學大師勳章文壇大家勳章點評專家勳章終身成就獎章熱心助人獎章最佳分享獎章

發短消息
加為好友
當前離線

5樓大中小發表於 2007-1-20 23:48

第五章　文字性質的ＣＳＳ
本　章　Ｃ　Ｓ　Ｓ　的　主　要　作　用

　　本章要介紹的是文字相關的CSS指令。通常一個網站的內容最多的就是文字了，透過這些文字相關的ＣＳＳ指令，您可以將您的網頁內容排版得美美的。本章將分兩個部份為您介紹，第一部份是字型性質的ＣＳＳ指令，用以控制文字字型的各種樣式；第二部份介紹的是文字性質的ＣＳＳ指令，用以控制文字段落的外觀及擺設方式。

字　型　性　質　的　Ｃ　Ｓ　Ｓ　指　令

font-family　設定文字字型
支　持：ＩＥ３、ＩＥ４
適　用：所有元素

可能值：

normal	普通字
italic	斜體字
oblique	斜體字

預設值：normal
繼承性：有
一般範例：SPAN { font-style : italic }
同軸範例：<SPAN style="font-style:italic">

font-weight　設定字型份量支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

normal	普通字
bold	粗體字
bolder	相對於父元素稍粗
lighter	相對於父元素稍細
100,200,300, 400,500,600, 700,800,900.	數字由小到大代表筆畫由細到粗 normal=400　bold=700

預設值：normal
繼承性：有
一般範例：SPAN { font-weight : bolder }
同軸範例：<SPAN style="font-weight:bolder">

font-size　設定文字大小支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

<absolute-size>	絕對大小，可用的參數由小到大分別有七項 xx-small、x-small、small、medium、large、x-large、xx-large
<relative-size>	相對大小，可用的參數為larger、smaller兩項以父元素字型大小為基準
<lenght>	長度單位，請參考第一章基本單位的相關說明
<percentage>	百分比，以父元素字型大小為基準

預設值：medium
繼承性：有
一般範例：SPAN { font-size : 12pt }
同軸範例：<SPAN style="font-size:12pt">

font-variant　設定文字轉換支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

normal	普通字
small-caps	將小寫文字轉換為大寫

預設值：normal
繼承性：有
一般範例：SPAN { font-variant : small-caps }
同軸範例：<SPAN style="font-variant:small-caps">

font　綜合設定字型性質支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

<font-style>	設定字體樣式
<font-variant>	設定文字轉換
<font-weight>	設定字型份量
<font-size/line-height>	設定文字大小與列高（請參考設定文字列高部份）
<font-family>	設定文字字型

預設值：無
繼承性：有
一般範例： SPAN { font : bolder small-caps 12pt/120% Arial }
同軸範例：< SPAN style="font : bolder small-caps 12pt/120% Arial">

文　字　性　質　的　Ｃ　Ｓ　Ｓ　指　令

line-height　設定列高支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

normal	普通列高，根據字體變化合理高度，視瀏覽器而定
<number>	以元素字型大小乘以該數即為列高
<length>	設定長度，請參考第一章基本單位的相關說明
<percentage>	百分比，相對於元素字型大小為比例

預設值：normal
繼承性：有
一般範例：DIV { line-height : 120% }
同軸範例：<DIV style="line-height:120%">

text-align　設定文字對　支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

center	對　中央
right	對　右邊
left	對　左邊
justify	左右對

預設值：視瀏覽器而定
繼承性：有
一般範例：DIV { text-align : center }
同軸範例：<DIV style="text-align:center">

vertical-align　設定垂直對　支　持：ＩＥ４
適　用：同軸元素
可能值：

top	對　同列最高元素頂端
bottom	對　同列最低元素底端
baseline	對　底線
middle	對　中央
sub	將元素置於下標
super	將元素置於上標
text-top	對　文字頂端
text-bottom	對　文字底端
<percentage>	參照元素本身列高，以父元素底線為基準作位移

預設值：baseline
繼承性：有
一般範例：SPAN { vertical-align : sub }
同軸範例：<SPAN style="vertical-align:sub">

text-decoration　設定文字裝飾支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

none	普通字
underline	文字加底線
overline	文字加頂線
line-through	文字加刪除線
blink	設定文字閃爍

預設值：none
繼承性：有
一般範例：SPAN { text-decoration : blink }
同軸範例：<SPAN style="text-decoration:blink">

text-transform　設定文字轉換支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

none	普通字
capitalize	將英文單字地一個字母轉換為大寫
uppercase	將所有文字轉換為大寫
lowercase	將所有文字轉換為小寫

預設值：none
繼承性：有
一般範例：SPAN { text-transform : uppercase }
同軸範例：<SPAN style="text-transform:uppercase">

letter-spacing　設定字母間隔支　持：ＩＥ４
適　用：所有元素
可能值：

normal	不改變字母間隔，使用瀏覽器預設值
<length>	要額外增加的間隔長度，可為負值

預設值：normal
繼承性：有
一般範例：SPAN { letter-spacing : 0.5pt }
同軸範例：<SPAN style="letter-spacing : 0.5pt">

text-indent　設定文字縮排支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<length>	長度單位，請參考第一章基本單位的相關說明
<percentage>	以父元素寬度為基準的百分比值

預設值：0
繼承性：有
一般範例：DIV { text-indent : 3pt }
同軸範例：<DIV style="text-indent:3pt">

TOP

蔡逸竹

孤獨者 - 心在黑暗裡旅行 ...... ...

至尊會員

Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7 Rank: 7

遊蕩的過客 - 枉入紅塵若許年 .. ...

UID: 18273
帖子: 12122
精華: 1273
積分: 240737
金幣: 492641
威望: 5001
推廣: 0
閱讀權限: 99
來自: 尋覓中
註冊時間: 2006-6-24
最後登錄: 2015-5-27

總版主典獄長榮譽勳章陽光會員宣傳大使榮退獎章糾察隊長鍾愛一生勳章大學博士勳章守護天使勳章忠誠勳章高級糾察社區建設獎章社區巡守獎章社界宗師勳章資源專家勳章傳學大師勳章文壇大家勳章點評專家勳章終身成就獎章熱心助人獎章最佳分享獎章

發短消息
加為好友
當前離線

6樓大中小發表於 2007-1-20 23:50

第六章　區塊性質的ＣＳＳ

本　章　Ｃ　Ｓ　Ｓ　的　主　要　作　用

　　本章介紹的是區塊性質的訪客無法瀏覽此圖片或連結，請先註冊或登入會員。指令以及它們的應用與特性，可以設定與控制區塊的位置，大小及邊緣寬度等性質。本章也將分成兩個部份為您介紹，第一部份要講的是區塊各部份名稱與概念的介紹，對於區塊有一點概念後，第二部份才再進入區塊性質的ＣＳＳ指令的介紹。

區　塊　各　部　份　名　稱　與　概　念

　　其實我們還可以把所謂的「區塊」細分成如下面圖形所表示的幾個部份。

由外而內為您作介紹：
MARGIN： 邊緣，雖然是通透的部份，但是可以藉由邊緣寬度的調整來達到內容元素位置調整的目的。

BORDER： 邊框，就是外框的部份，經由ＣＳＳ指令您可以控制邊框的寬度、顏色和樣式，不再死板！

PADDING： 補白，也就是內容元素與框架之間的這段距離與空間，也可以利用ＣＳＳ指令去控制大小。

元素：內容元素，也就是您放置於該區塊內的內容，或為文字，或為圖形，或為所有其它元素。

　　附帶一提的是，所謂的區塊寬度是指整個包含邊緣在內的寬度，而元素寬度指的只是內容元素的寬度。有了這些對區塊各部份的基本概念與認識之後，接下來就要來介紹控制區塊各部份分別的的ＣＳＳ指令了！

區　塊　性　質　的　Ｃ　Ｓ　Ｓ　指　令

margin-top　　　設定上邊緣寬度	margin-right　設定右邊緣寬度
margin-bottom　設定下邊緣寬度	margin-left　　設定左邊緣寬度

支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<length>	長度單位，請參考第一章基本單位的相關說明
<percentage>	百分比，相對於元素寬度大小
auto	使用瀏覽器預設值

預設值：0
繼承性：無
一般範例：DIV { margin-top : 20pt }
同軸範例：<DIV style="margin-top:20pt">

margin　綜合設定邊緣寬度支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：依序設定top,right,bottom,left的邊緣寬度

<length> {1,4}	長度單位，請參考第一章基本單位的相關說明
<percentage> {1,4}	百分比，相對於元素寬度大小
auto {1,4}	使用瀏覽器預設值

預設值：無
繼承性：無
一般範例：DIV { margin : 20pt 15pt 10pt 5pt }
同軸範例：<DIV style="margin:20pt 15pt 10pt 5pt">
　　要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個邊緣；如果只有指定一個合法設訂值，則會統一套用於四個邊持；若只有指定二或三個合法設定值，則未指定的邊緣會套用對邊的寬度設定值。

DIV { margin: 20pt }	→top=20pt;right=20pt;bottom=20pt;left=20pt
DIV { margin: 20pt 15pt }	→top=20pt;right=15pt;bottom=20pt;left=15pt
DIV { margin: 20pt 15pt 10pt }	→top=20pt;right=15pt;bottom=10pt;left=15pt

border-top-width　　設定上邊框寬度	border-right-width　設定右邊框寬度
border-bottom-width設定下邊框寬度	border-left-width　　設定左邊框寬度

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：thin < medium < thick

thin	統一的絕對單位，因瀏覽器而異
medium	統一的絕對單位，因瀏覽器而異
thick	統一的絕對單位，因瀏覽器而異
<length>	長度單位，請參考第一章基本單位的相關說明

預設值：medium
繼承性：無
一般範例：DIV { border-top-width : 2pt }
同軸範例：<DIV style="border-top-width:2pt">

border-width　綜合設定邊框寬度支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：依序設定top,right,bottom,left的邊框寬度

thin {1,4}	統一的絕對單位，因瀏覽器而異
medium {1,4}	統一的絕對單位，因瀏覽器而異
thick {1,4}	統一的絕對單位，因瀏覽器而異
<length> {1,4}	長度單位，請參考第一章基本單位的相關說明

預設值：無
繼承性：無
一般範例：DIV { border-width : 4pt 3pt 2pt 1pt }
同軸範例：<DIV style="border-width:4pt 3pt 2pt 1pt">
　　要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個邊框；如果只有指定一個合法設訂值，則會統一套用於四個邊框；若只有指定二或三個合法設定值，則未指定的邊框會套用對邊的寬度設定值。

DIV { border-width: 2pt }	→top=2pt;right=2pt;bottom=2pt;left=2pt
DIV { border-width: 2pt 3pt }	→top=2pt;right=3pt;bottom=2pt;left=3pt
DIV { border-width: 2pt 3pt 4pt }	→top=2pt;right=3pt;bottom=4pt;left=3pt

border-top-color　　設定上邊框顏色	border-right-color　設定右邊框顏色
border-bottom-color 設定下邊框顏色	border-left-color　設定左邊框顏色

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<color>

設定顏色，請參考第一章顏色使用的相關說明

預設值：color性質之值
繼承性：無
一般範例：DIV { border-top-color : BLUE }
同軸範例：<DIV style="border-top-color:BLUE">

border-color　綜合設定邊框顏色支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：依序設定top,right,bottom,left的邊框顏色

<color> {1,4}

設定顏色，請參考第一章顏色使用的相關說明

預設值：無
繼承性：無
一般範例：DIV { border-color : RED GREEN BLUE YELLOW }
同軸範例：<DIV style="border-color:RED GREEN BLUE YELLOW">
　　要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個邊框；如果只有指定一個合法設訂值，則會統一套用於四個邊框；若只有指定二或三個合法設定值，則未指定的邊框會套用對邊的顏色設定值；若無指定此一性質，則套用color性質之設定值。

DIV{border-color:RED }	→top=RED;right=RED;bottom=RED;left=RED
DIV{border-color:RED GREEN }	→top=RED;right=GREEN;bottom=RED;left=GREEN
DIV{border-color: RED GREEN BLUE}	→top=RED;right=GREEN;bottom=BLUE;left=GREEN

border-top-style　　設定上邊框樣式	border-right-style　設定右邊框樣式
border-bottom-style　設定下邊框樣式	border-left-style　　設定左邊框樣式

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

none	不顯示邊框
dotted	虛線（ＩＥ４、ＮＣ４瀏覽器當作實線）
dashed	短直線（ＩＥ４、ＮＣ４瀏覽器當作實線）
solid	實線
double	雙直線
ridge	３Ｄ凸線
groove	３Ｄ凹線
outset	３Ｄ隆起（ＩＥ４不顯示）
inset	３Ｄ嵌入（ＩＥ４不顯示）

預設值：none
繼承性：無
一般範例：DIV { border-top-style : inset }
同軸範例：<DIV style="border-top-style:inset">

border-style　綜合設定邊框樣式支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：依序設定top,right,bottom,left的邊框樣式

none {1,4}	不顯示邊框
dotted {1,4}	虛線（ＩＥ４、ＮＣ４瀏覽器當作實線）
dashed {1,4}	短直線（ＩＥ４、ＮＣ４瀏覽器當作實線）
solid {1,4}	實線
double {1,4}	雙直線
ridge {1,4}	３Ｄ凸線
groove {1,4}	３Ｄ凹線
outset {1,4}	３Ｄ隆起（ＩＥ４不顯示）
inset {1,4}	３Ｄ嵌入（ＩＥ４不顯示）

預設值：無
繼承性：無
一般範例：DIV { border-style : ridge groove outset inset }
同軸範例：<DIV style="border-style:ridge groove outset inset">
　　要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個邊框；如果只有指定一個合法設訂值，則會統一套用於四個邊框；若只有指定二或三個合法設定值，則未指定的邊框會套用對邊的樣式設定值。

DIV{border-widthutset}	→top=outset;right=outset;bottom=outset;left=outset
DIV{border-widthutset inset}	→top=outset;right=inset;bottom=outset;left=inset
DIV{border-widthutset inset ridge}	→top=outset;right=inset;bottom=ridge;left=inset

border-top　　綜合設定上邊框性質	border-right　綜合設定右邊框性質
border-bottom　綜合設定下邊框性質	border-left　　綜合設定左邊框性質

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<border-width>	設定該邊框寬度，請參考上面的介紹與說明
<border-style>	設定該邊框樣式，請參考上面的介紹與說明
<border-color>	設定該邊框顏色，請參考上面的介紹與說明

預設值：無
繼承性：無
一般範例：DIV { border-top : 2pt solid BLUE }
同軸範例：<DIV style="border-top:2pt solid BLUE">

border　綜合設定邊框性質支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<border-width>	設定邊框寬度，請參考上面的介紹與說明
<border-style>	設定邊框樣式，請參考上面的介紹與說明
<border-color>	設定邊框顏色，請參考上面的介紹與說明

預設值：無
繼承性：無
一般範例：DIV { border : 2pt solid BLUE }
同軸範例：<DIV style="border:2pt solid BLUE">
　　要附帶說明的是，這個指令只能指定一組設定值，也就是說，上右下左四個邊框都將套用同一組的設定值，而不能作個別邊框的設定值變化。

padding-top　　　設定上方補白寬度	padding-right　設定右方補白寬度
padding-bottom　設定下方補白寬度	padding-left　　設定左方補白寬度

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<length>	長度單位，請參考第一章基本單位的相關說明
<percentage>	百分比，相對於元素寬度大小

預設值：0
繼承性：無
一般範例：DIV { padding-top : 5pt }
同軸範例：<DIV style="padding-top:5pt">

padding　綜合設定補白寬度支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：依序設定top,right,bottom,left的補白寬度

<length> {1,4}	長度單位，請參考第一章基本單位的相關說明
<percentage> {1,4}	百分比，相對於元素寬度大小

預設值：無
繼承性：無
一般範例：DIV { padding : 2pt 5pt 2pt 5pt }
同軸範例：<DIV style="padding:2pt 5pt 2pt 5pt">
　　要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個補白；如果只有指定一個合法設訂值，則會統一套用於四個補白；若只有指定二或三個合法設定值，則未指定的補白會套用對邊的寬度設定值。

DIV { padding: 1pt }	→top=1pt;right=1pt;bottom=1pt;left=1pt
DIV { padding: 1pt 2pt }	→top=1pt;right=2pt;bottom=1pt;left=2pt
DIV { padding: 1pt 2pt 3pt }	→top=1pt;right=2pt;bottom=3pt;left=2pt

TOP