|
|
CSS教學
CASCADING
STYLE SHEET
|
|
樣式性質分類
■CSS語法的樣式性質分類：
主要有長度、百分比、顏色表示法、字型性質、文字性質、表單性質、顏色及背景性質、分類性質、位置性質、顯示或隱藏的分類，列表如下：
|
長度
|
| 一個後面接著單位的數值，數值本身可以是小數，同時也允許使用(+)(-)符號。 |
| 1.相對單位 |
| em |
以元素本身的字型高度(通常就是大寫字母M的高度)為參考標準。 |
| ex |
以元素本身的字型高度的一半(通常是小寫字母x的高度)為參考標準。 |
| px |
像素點(pixel)。像素點被視為相對單位才是合理的作法，瀏覽器應該在不同的解析度顯示裝置自動做出不同的調整。 |
| 2.絕對單位 |
| cm |
公分。 |
| mm |
millimeters。 |
| in |
英吋。 |
| pt |
points(1
point =1/72 inches)。 |
| pc |
picas
(1 pica = 12points)。 |
|
百分比
|
| 一個後面接著%符號的數值，數值本身可以是小數，同時也允許使用(+)(-)符號。 |
|
顏色表示法
|
|
格式一：
|
以#號帶頭，後接三組(由00至FF)十六進位數值，第一組表示紅色數量、第二組表示綠色、第三組表示藍色。 |
|
格式二：
|
以rgb(red,green,blue)函式表示顏色，每一個數值可以是由0至255之間的數值，也可以是百分比數值。 |
|
格式二：
|
直接以色彩的英文名標示，如：Blue、Skyblue、Yellow.... |
| 1. |
性質：
|
font-family |
|
功能：
|
設定字型種類 |
|
說明：
|
指定字型名稱，你可以指定多個字型名稱，並以逗號隔開，瀏覽器會依照字型名稱出現的順序去尋找去找使用者系統上的字型來使用，若所有指定的字型都無法找到，瀏覽器會使用內定的字型。除了指定的字型名稱，你也可以指定下列的通用字型名稱，它們代表的是字型的特色而不是字型的名稱，當你指定它們時，瀏覽器會自動採用符合該字型特色的實際字型：
- serif
- sans-serif
- cursive
- monospace
- fantasy
|
|
應用範圍：
|
所有元素 |
|
繼承性：
|
會向下繼承 |
|
例子：
|
P
{font-family: 細明體, 標楷體, Time new roman, arial, serif,
san-serif} |
| 2. |
性質：
|
font-style |
|
功能：
|
設定字型樣式 |
|
說明：
|
指定字型樣式，它可以是normal或italic。normal表示正常體，italic表示斜體。 |
|
應用範圍：
|
所有元素 |
|
繼承性：
|
會向下繼承 |
|
例子：
|
P
EM {font-style:italic;} |
| 3. |
性質：
|
font-weight |
|
功能：
|
設定字型份量 |
|
說明：
|
指定字型的份量，它可以是normal或bold。normal表示正常體，bold表示粗體。 |
|
應用範圍：
|
所有元素 |
|
繼承性：
|
會向下繼承 |
|
例子：
|
BLOCKQUOTE
{font-weight:bold;} |
| 4. |
性質：
|
font-size |
|
功能：
|
設定字型大小 |
|
說明：
|
指定字型的大小，以下是它可以接受的設定值：xx-small、x-small、small、medium、large、x-large、xx-large、larger、smaller、長度值或是百分比值。 |
|
應用範圍：
|
所有元素 |
|
繼承性：
|
會向下繼承 |
|
例子：
|
P
{font-size:larger;} |
| 1. |
性質：
|
text-decoration |
|
功能：
|
設定文字裝飾形態 |
|
說明：
|
指定文字元素的裝飾形態，它可以是none、underline、line-through。none表示不裝飾，underline會在文字元素下方加上底線，而line-through則會以直線穿過文字元素。若應用到非文字元素上，它並不會產生任何作用。 |
|
應用範圍：
|
所有元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
H1
{text-decoration:underline;} |
| 2. |
性質：
|
text-transform |
|
功能：
|
設定文字的轉換方式 |
|
說明：
|
指定文字元素的大小寫轉換方式，它可以是none、capitalize、uppercase、lowercase。none表示不做任何轉換，capitalize表示將每一個字的第一個字母轉換成大寫，uppercase表示將所有的字母轉換成大寫，lowercase表示將所有的字母轉換成小寫。 |
|
應用範圍：
|
所有元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
H1
{text-transform:uppercase;} |
| 3. |
性質：
|
text-align |
|
功能：
|
設定文字對齊方式 |
|
說明：
|
指定區塊中文字元素的對齊方式，它可以是left、right、center、justify。left表示靠左對齊，right表示靠右對齊，justify表示左右對齊。 |
|
應用範圍：
|
block-level元素 |
|
繼承性：
|
會向下繼承 |
|
例子：
|
H1
{text-align:left;} |
| 4. |
性質：
|
text-indent |
|
功能：
|
設定文字的縮排方式 |
|
說明：
|
指定文字首行的縮排距離，它的設定值是一個長度值或百分比值。 |
|
應用範圍：
|
block-level元素 |
|
繼承性：
|
會向下繼承 |
|
例子：
|
P
{text-indent:5%;} |
| 5. |
性質：
|
line-height |
|
功能：
|
設定行距 |
|
說明：
|
指定區塊中文字元素的行距，它的設定值是一個長度值或百分比值。 |
|
應用範圍：
|
block-level元素 |
|
繼承性：
|
會向下繼承 |
|
例子：
|
P
{line-height:120%;} |
| 1. |
性質：
|
border-width,
border-top-width, border-right-width, border-bottom-width,
border-left-width |
|
功能：
|
設定邊框寬度 |
|
說明：
|
指定邊框的四個邊的寬度。你可以利用border-top-width，border-right-width，border-bottom-width，border-left-width來分別設定上、右、下、左四個邊框的寬度，它們的設定必須為一個數值。另外，你也可以值接利用border-width一設定好四個邊框的寬度，它的設定是以空格分開的四個長度數，依序來設定上、右、下、左四個邊框的寬度。當你只給定一個長度數值時，它會視邊框具有相同的寬度。 |
|
應用範圍：
|
block-level元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
P
{border-top-width: 20pt;}
P {border-width:10pt 15pt 20pt 5pt;}
P {border-width: 10pt;} |
| 2. |
性質：
|
border-style |
|
功能：
|
設定邊框樣式 |
|
說明：
|
指定邊框的顯示樣式，它可以是none、solid、double、groove、ridge、inset、outset，各自代表著各種不同的顯示樣式。 |
|
應用範圍：
|
block-level元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
H1
{border-style: groove;} |
| 3. |
性質：
|
border-color |
|
功能：
|
設定邊框顏色 |
|
說明：
|
指定邊框的顏色，它的設定值是一個顏色值，其表示方式請參見顏色表示法。 |
|
應用範圍：
|
block-level元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
H1
{border-color: blue;}
H1 {border-color: #0000FF;} |
| 4. |
性質：
|
padding,
padding-top, padding-right, padding-bottom, padding-left |
|
功能：
|
設定填補空間 |
|
說明：
|
指定元素內容與邊框之間的填埔空間距離。你可以利用padding-top、padding-right、padding-bottom、padding-left來分別設定上、右、下、左四個空間的距離，它們的設定值必須是一個長度數值。另外，你也可以直接利用padding一次就設好四個填補空間，它的設定格式是以空格分開的四個長度數值，依序代表上、右、下、左四空間距離，當你只給定一個長度數值時，它會視同四個空間具有相同的距離。 |
|
應用範圍：
|
block-level元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
P
{padding-top: 20pt;}
P {padding: 20pt 30pt 10pt 50pt;}
P {padding: 10pt;} |
| 5. |
性質：
|
Margin,margin-top,margin-right,margin-bottom,margin-left |
|
功能：
|
設定邊界距離 |
|
說明：
|
指定區塊元素與其相鄰元素彼此邊界之間的空間距離。你可以利用margin-top、margin-right、margin-bottom、margin-left來分別設定上、右、下、左四個空間的距離，它們的設定值必須是一個長度數值。另外，你也可以直接利用padding一次就設好四個空間距離，它的設定格式是以空格分開的四個長度數值，依序代表上、右、下、左四空間距離，當你只給定一個長度數值時，它會視同四個空間具有相同的距離。 |
|
應用範圍：
|
block-level元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
P
{margin-top: 20pt;}
P {margin: 20pt 30pt 10pt 50pt;}
P {margin: 10pt;} |
| 6. |
性質：
|
float |
|
功能：
|
設定區塊元素的對齊方式 |
|
說明：
|
指定區塊元素與其父元素之間的對齊關係，它的設定值可以是none、left、right。none表示不做任何對齊，left表示靠左對齊，right表示靠右對齊，同一階層的元素則圍繞在它的另外一側。請注意，在設定float性質時，不要做margin-left或margin-right的設定，否則會有意想不到的效果。 |
|
應用範圍：
|
block-level元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
H1
{float: right;} |
| 7. |
性質：
|
clear |
|
功能：
|
設定元素左右兩側可否放置float元素 |
|
說明：
|
指定元素的那一側不能float的元素，它的設定值可以是none、left、right、both。none表示元素的兩側都可以float元素，left表示元素的左側不能float元素，right表示元素的右側不能有float元素，both表示元素的左右兩側不能有float元素。 |
|
應用範圍：
|
所有元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
P
{clear: right;} |
| 1. |
性質：
|
color |
|
功能：
|
設定前景顏色 |
|
說明：
|
指定文件元素的顏色，它的設定值是一個顏色值，其表示方式請參照顏色表示法。 |
|
應用範圍：
|
所有元素 |
|
繼承性：
|
會向下繼承 |
|
例子：
|
P
{color: #FF0000; }
P {color: red; } |
| 2. |
性質：
|
background-color |
|
功能：
|
設定背景顏色 |
|
說明：
|
指定元素的背景顏色，它的設定值是一個顏色值，其表示方式請參照顏色表示法。 |
|
應用範圍：
|
所有元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
P
{background-color: #FF0000; }
P {background-color: red; } |
| 3. |
性質：
|
background-image |
|
功能：
|
設定背景圖案 |
|
說明：
|
指定元素的背景圖案
，它的設定值是參照到該圖案的url。 |
|
應用範圍：
|
所有元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
P
{background-image: url(.../image.gif); } |
| 1. |
性質：
|
display |
|
功能：
|
設定顯示模式 |
|
說明：
|
指定元素的顯示模式，它的設定值包括none、block、inline、list-item。none表示不顯示元素(包括所有的子元素)，block表示將顯示模式設定為block模式，inline表示將顥示模式設定為inline模式，list-item表示將顯示模式設定為list-item模式。 |
|
應用範圍：
|
所有元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
H2
{display:inline; } |
| 2. |
性質：
|
list-style-type |
|
功能：
|
設定list-item元素的項目符號 |
|
說明：
|
指定list-item元素的項目符號，它的設定值包括disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha，它們分別代表一種不同的項目符號，例如disc是實心圓形符號，circle是空心圓形符號，square是方形符號、decimal是數字、lower-roman是小羅數字(如i,ii,iii)、upper-roman是大羅馬數字(如I,II,III)、lower-alpha是小寫英文字母(如a,b,c)、upper-alpha是大寫英文字母(如A,B,C)。 |
|
應用範圍：
|
顯示模式為<li>元素 |
|
繼承性：
|
會向下繼承 |
|
例子：
|
ul
li {list-style-type:disc; } |
| 1. |
性質：
|
position |
|
功能：
|
設定定位特性 |
|
說明：
|
指定元素的定位特性，它的設定值可以是static、absolute及relative，當它為absolute或relative時，表示此元素為可定位的元素，其中absolute是具有可定位的父元素，若無父元素則為document本身，relative則是目前的流動位置，static表示此元素是不可定位的，且所有與位置相關的性質都是無效的。 |
|
應用範圍：
|
所有元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
<H1
style="postition:absolute">內容</H1> |
| 2. |
性質： |
left,
top |
| 功能： |
設定左上角的位置 |
| 說明： |
指定元素的水平及垂直位置，left代表的是水平位置，top代表的是重直位置，它們的設定值必須是長度數值。 |
| 應用範圍： |
position為absolute或relative的元素 |
| 繼承性： |
不會向下繼承 |
| 例子： |
<DIV
style="postition:absolute; left:10pt; top:5pt;">內容</DIV> |
| 3. |
性質：
|
z-index |
|
功能：
|
設定z軸數值 |
|
說明：
|
指定元素的z軸數值，它必須是一個整數值，數值愈大的元素會疊在數值小的元素之上。 |
|
應用範圍：
|
position為absolute或relative的元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
<DIV
style="z-index:8">內容</DIV> |
| 1. |
性質：
|
visibility |
|
功能：
|
利用chip設定元素顯示或隱藏 |
|
說明：
|
指定元素的顯示或隱藏，IE的設定值可以是visible、hidden及inherit，NS的設定值可以是show、hide及inherit。Visible或show表示元素會被顯示出來，hidden或hide表示元素會被隱藏，inherit表示設定值會依據父元素設定而設定。 |
|
應用範圍：
|
利用chip及position為absolute或relative的元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
document.all.chip.visibility="hidden";
(for IE)
document.layer1.chip.visibliity="hide"; (for NS) |
| 2. |
性質：
|
weight,height |
|
功能：
|
利用chip設定元素區間的大小 |
|
說明：
|
利用chip設定元素的大小，weight代表的是寬度，height代表的是高度，它們的設定值必須是長度數值。 |
|
應用範圍：
|
利用chip及position為absolute或relative的元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
.chip.weight=100pt; |
| 3. |
性質：
|
rect |
|
功能：
|
利用chip設定元素區間的大小 |
|
說明：
|
利用chip設定元素的大小，IE設定為rect(top
right bottom left)，而NS為rect(left,top,bottom,right)，四邊的設定值必須是長度數值。 |
|
應用範圍：
|
利用chip及position為absolute或relative的元素 |
|
繼承性：
|
不會向下繼承 |
|
例子：
|
.chip="rect(0
10 20 10)"; (IE與NS不同) |
|
|
|
|
本站內容屬私人所有 請勿任易轉載 如須轉載 請通知本站
本站所鏈結標題及鍊結內容 皆歸原權利人所有
網站內容如有任何侵權 亦請通知本站刪除 謝謝！
Power by 9 Walker Studio
|
|
