CSS 參數的應用

◆基本語法屬性一覽：
<STYLE type="text/css">
<!--
BODY {
/*文字屬性*/
FONT-SIZE: 9pt;/*字體大小*/
FONT-FAMILY: Arial;/*字型設定*/
FONT-WEIGHT: normal;/*正常樣式*/
FONT-WEIGHT: bold;/*字體加粗*/
FONT-WEIGHT: bolder;/*正常稍粗*/
FONT-WEIGHT: lighter;/*字體稍細*/
FONT-STYLE: normal;/*正常樣式*/
FONT-STYLE: italic;/*文字斜體*/
FONT-STYLE: oblique;/*文字斜體*/
FONT-VARIANT: normal;/*正常樣式*/
FONT-VARIANT: small-caps;/*將小寫轉換為小字體的大寫字母*/
COLOR: #1f3f3f;/*字體色彩*/
VERTICAL-ALIGN: top;/*設定垂直對齊位置(對齊同列 top | middle | bottom | baseline)*/
VERTICAL-ALIGN: super;/*上標文字*/
VERTICAL-ALIGN: sub;/*下標文字*/
VERTICAL-ALIGN: text-top;/*文字頂端*/
VERTICAL-ALIGN: text-bottom;/*文字底部*/
TEXT-DECORATION: none;/*可設無*/
TEXT-DECORATION: line-through;/*加刪除線*/
TEXT-DECORATION: overline;/*加上劃線*/
TEXT-DECORATION: underline;/*加下劃線*/
TEXT-TRANSFORM: none;/*可設無*/
TEXT-TRANSFORM: capitalize;/*首字以英文大寫顯示*/
TEXT-TRANSFORM: uppercase;/*以英文大寫顯示*/
TEXT-TRANSFORM: lowercase;/*以英文小寫顯示*/


TEXT-ALIGN: center;/*文字居中*/
TEXT-ALIGN: left;/*文字靠左對齊*/
TEXT-ALIGN: right;/*文字靠右對齊*/
TEXT-ALIGN: justify;/*文字整齊(左右邊界對齊)*/
TEXT-INDENT: 10px;/*文字縮排*/
MARGIN-LEFT: 20%;/*向左縮排*/
MARGIN-RIGHT: 20%;/*向右縮排*/
WORD-SPACING: 1px;/*單詞間距*/
WORD-BREAK: normal;/*允許斷字*/
WORD-BREAK: break-all;/*允許斷字(適用於中文字)*/
WORD-BREAK: keep-all;/*只允許於英文斷字*/
WORD-WRAP: break-word;/*只允許於英文斷字*/
WHITE-SPACE: normal;/*以預設方式處理區塊*/
WHITE-SPACE: pre;/*令文件按照原始碼的排列方式顯示*/
WHITE-SPACE: nowrap;/*文字不繞行(遇到<BR>才換行)*/
LETTER-SPACING: normal;/*不改變間隔(使用瀏覽器預設值)*/
LETTER-SPACING: 1px;/*文字間距*/
LINE-HEIGHT: 140%;/*行列高度(normal | number | length | percentage)*/
BACKGROUND: #f9f9f9;/*加入背景色彩*/
/*邊緣設定(區塊)*/
MARGIN-TOP: 12px;/*設定上邊緣寬度*/
MARGIN-RIGHT: 12px;/*設定右邊緣寬度*/
MARGIN-BOTTOM: 12px;/*設定下邊緣寬度*/
MARGIN-LEFT: 12px;/*設定左邊緣寬度*/
PADDING-TOP: 5px;/*設定上方空白寬度*/
PADDING-RIGHT: 5px;/*設定右方空白寬度*/
PADDING-BOTTOM: 5px;/*設定下方空白白寬度*/
PADDING-LEFT: 5px;/*設定左方空白寬度*/
/*一般屬性(定位)*/
MARGIN: auto;/*自動偵測*/
MARGIN: 12px;/*頁邊橫向空白(邊界寬度)*/
PADDING: 12px;/*頁邊縱向空白(頁邊留白)*/
POSITION: absolute;/*絕對位置(限制視窗邊界)*/
POSITION: relative;/*相對位置(不限制視窗邊界)*/
POSITION: static;/*靜態位置(以預設位置而定)*/
LEFT: 155px;/*頁邊橫向位置(從視窗左邊算來的位置 length | percentage | auto)*/
TOP: 5px;/*頁邊縱向位置(從視窗頂端算來的位置 length | percentage | auto)*/
Z-INDEX: number;/*層數(設定Z軸參數，正數為上方，負數為下方 number | auto)*/
DISPLAY: yes;/*設定為顯示*/
DISPLAY: none;/*設定為隱藏*/
VISIBILITY: visible;/*設定為顯示*/
VISIBILITY: hidden;/*設定為隱藏*/
VISIBILITY: inherit;/*設定為繼承*/
VERTICAL-ALIGN: baseline;/*元件垂直調整(middle | sub | super | top | bottom)*/
FLOAT: left;/*設定浮動元件接續位置(none | left | right | both)*/
CLEAR: right;/*設定浮動元件是否清除(none | left | right | both)*/
CLIP: rect(0px 267px 346px 0px);/*設定一個矩形的顯示區域(依序設定的顯示數值為 top, right, bottom, left)*/
/*條列項目符號(適用於LI、OL、UL)*/
LIST-STYLE: url("../list.gif");/*設定條列項目符號(keyword | position | url)*/
LIST-STYLE-IMAGE: url("../list.gif");/*設定圖片為條列項目符號(none | url)*/
LIST-STYLE-POSITION: inside;/*設定條列項目符號位置(可設內部、外部 inside | outside )*/
LIST-STYLE-TYPE: disk;/*設定條列項目符號形狀(可設無、圓形、圓圈、正方形、小數點、羅馬符號、希臘符號 none | disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha)*/
/*邊框樣式*/
BORDER: none;/*不顯示邊框*/
BORDER: red 1px solid;/*實心線*/
BORDER: green 1px double;/*雙重線*/
BORDER: blue 1px dashed;/*短直線*/
BORDER: blue 2px dotted;/*虛點線*/
BORDER: groove;/*溝線*/
BORDER: ridge;/*脊線*/
BORDER: inset;/*嵌入線*/
BORDER: outset;/*浮出線*/
BORDER-COLOR: #000000;/*設定邊框色彩*/
BORDER-TOP-COLOR: black;/*設定上邊框色彩*/
BORDER-RIGHT-COLOR: black;/*設定右邊框色彩*/
BORDER-BOTTOM-COLOR: black;/*設定下邊框色彩*/
BORDER-LEFT-COLOR: black;/*設定左邊框色彩*/
BORDER-WIDTH: 4pt 3pt 2pt 1pt;/*設定邊框寬度(依序設定的邊框寬度為 top, right, bottom, left)*/
BORDER-TOP: 1px solid;/*設定上邊框線*/
BORDER-RIGHT: 1px solid;/*設定右邊框線*/
BORDER-BOTTOM: 1px solid;/*設定下邊框線*/
BORDER-LEFT: 1px solid;/*設定左邊框線*/
BORDER-STYLE: solid;/*設定邊框樣式*/
BORDER-TOP-STYLE: solid;/*設定上邊框樣式*/
BORDER-RIGHT-STYLE: solid;/*設定右邊框樣式*/
BORDER-BOTTOM-STYLE: solid;/*設定下邊框樣式*/
BORDER-LEFT-STYLE: solid;/*設定左邊框樣式*/
/*背景屬性*/
BACKGROUND-COLOR: #f9f9f9;/*指定背景色彩(背景透明化 transparent)*/
BACKGROUND-IMAGE: url("圖檔連結位置.gif");/*背景圖案(不使用背景 none)*/
BACKGROUND-POSITION: 50% 50%;/*背景圖案X與Y軸的座標值(center | left | right | top | bottom)*/
BACKGROUND-REPEAT: repeat;/*重複排列(網頁預設值)*/
BACKGROUND-REPEAT: no-repeat;/*不重複排列*/
BACKGROUND-REPEAT: repeat-x;/*在X軸重複排列*/
BACKGROUND-REPEAT: repeat-y;/*在Y軸重複排列*/
BACKGROUND-ATTACHMENT: fixed;/*固定背景*/
BACKGROUND-ATTACHMENT: scroll; /*捲動背景*/
/*滑鼠指標樣式*/
CURSOR: auto;/*自動改變樣式*/
CURSOR: default;/*標準選擇*/
CURSOR: help;/*選擇說明*/
CURSOR: wait;/*忙碌中*/
CURSOR: crosshair;/*選擇精確度*/
CURSOR: text;/*選擇文字*/
CURSOR: hand;/*選擇連 線*/
CURSOR: pointer;/*選擇指示*/
CURSOR: move;/*移動*/
CURSOR: n-resize;/*箭頭朝上方*/
CURSOR: s-resize;/*箭頭朝下方*/
CURSOR: w-resize;/*箭頭朝左方*/
CURSOR: nw-resize;/*箭頭朝左上方*/
CURSOR: sw-resize;/*箭頭朝左下方*/
CURSOR: e-resize;/*箭頭朝右方*/
CURSOR: ne-resize;/*箭頭朝右上方*/
CURSOR: se-resize;/*箭頭朝右下方*/
CURSOR: url("游標連結位置.cur");/*自訂滑鼠指標連結*/
/* 捲動軸控制項*/
OVERFLOW: visible;/*設定為可見*/
OVERFLOW-Y: auto;/*自動隱藏捲動軸*/
OVERFLOW: hidden;/*去除捲動軸*/
OVERFLOW: scroll;/*顯示捲動軸*/
OVERFLOW-X: hidden;/*去除水平捲動軸*/
OVERFLOW-Y: hidden;/*去除垂直捲動軸*/
/*自定捲動軸色彩*/
SCROLLBAR-3DLIGHT-COLOR: #ffffff;/*左槓線條*/
SCROLLBAR-ARROW-COLOR: #000000;/*拉頁框箭頭色*/
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;/*右槓線條*/
SCROLLBAR-FACE-COLOR: #ffffff;/*槓條色彩*/
SCROLLBAR-HIGHLIGHT-COLOR: #000000;/*拉頁內框亮面*/
SCROLLBAR-SHADOW-COLOR: #000000;/*拉頁內框暗面*/
SCROLLBAR-TRACK-COLOR: #f9f9f9;/*拉頁框背景色*/
SCROLLBAR-BASE-COLOR: #ffffff;/*拉頁框基底色彩*/
/*寬度與高度控制*/
WIDTH: 370px;/*寬度參數*/
HEIGHT: 200px;/*高度參數*/
WIDTH: 50%;/*寬度百分比*/
HEIGHT: 50%;/*高度百分比*/}
-->
</STYLE>

◎	附 註：
1.	被『 /* 』及『 */ 』所包圍的文字為說明文字，無礙於樣式的運作。
2.	每 個標籤的樣式需要包在一對大括號『 { } 』中。
3.	同一個標籤內的樣式請用分號『 ; 』隔開。
4.	集體聲明：同時聲明某個或數個標籤(以逗號『 , 』分隔)的樣式規則。 例如：BODY, TD {FONT: 9pt "Arial"; COLOR: #1f3f3f}
5.	分項聲明：將許多的樣式規則分組再分別聲明。 例如：TD {FONT-SIZE: 9pt; COLOR: #1f3f3f} TD {FONT-FAMILY: Arial; LETTER-SPACING: 1px}
6.	外部連結： <LINK rel=stylesheet type="text/css" href="../style.css"> ../ 表示 style.css 的路徑。
7.	外 部匯入： <STYLE> @import url("../style.css"); </STYLE>
8.	度量單位： px 表示 pixels 像素，是電腦影像中的最小組成單位。 pt 表示 points 點數(1 point=1/72 英吋)。 pc 表示 picas 倍卡(1 pica=12 點)。 em 表 示字型的主體大小(全方)。 en 表示 1/2 em(半方)。 ex 表 示 x-height 指小寫 "x" 字母的高度。 in 表示 inches 英吋。 cm 表 示 centimeters 公分。 mm 表示 millimeter 公釐。 % 表 示 percentage 百分比(自動劃分)。
9.	DIV與SPAN的比較： DIV和SPAN這兩個元素在應用的屬性與 事件處理上很類似，使用時都必須加上結尾標籤。因為彼此是相互獨立的， 也因此都可以配合挑選者特性來編寫。不同之處在於：DIV元素定義為區塊 (block)，在<DIV>...</DIV>之間是一個 很完整的段落區塊。而SPAN元素則是定義為同軸(in- line)，所以<SPAN>...</SPAN>是應用於小範圍內的設定。

◆CLASS、 ID 屬性應用：
定義 CLASS 以 . 為開頭。例如：.名稱 {屬性名稱: 屬性設定值}
定義 ID 以 # 為開頭。例如：#名稱 {屬性名稱: 屬性設定值}
範例如下：
<STYLE type="text/css">
.A {COLOR: #ff0000}
#B {COLOR: #3366ff}
</STYLE>


<SPAN class="A">CLASS 屬性應用</SPAN>
<SPAN id="B">ID 屬性應用</SPAN> ◆超連結樣式控制語法：
<STYLE type="text/css">
A:link {COLOR: #666666; TEXT-DECORATION: none;/*未瀏覽的色彩*/}
A:visited {COLOR: #666666; TEXT-DECORATION: none;/*已瀏覽顯示*/}
A:active {COLOR: #666666; TEXT-DECORATION: none;/*開啟後連結顯示*/}
A:hover {COLOR: #ff6666; TEXT-DECORATION: underline;/*游標接觸時顯示*/}
</STYLE>

語法屬性說明如下：
指令	說明
COLOR: #666666	設 定字體色彩
TEXT-DECORATION: none	無連結線
TEXT-DECORATION: overline	上劃線連結
TEXT-DECORATION: line-through	刪除線連結
TEXT-DECORATION: underline	單連結線
TEXT-DECORATION: underline overline	雙連結線
BORDER: 1px solid; TEXT-DECORATION: none	加單層邊框
BORDER: 3px double; TEXT-DECORATION: none	加雙層邊框
BORDER: 1px dashed; TEXT-DECORATION: none	加虛線邊框
POSITION: relative; LEFT: 2px; TOP: 2px	連結位移效果
FONT-SIZE: 1cm	接觸放大效果
BACKGROUND-COLOR: #ff6699	連結背景色彩
BACKGROUND-IMAGE: url("圖檔連結位置.gif")	連結背景圖案

◆表格樣式設定：
請 在<TABLE>的標籤內加入即可！
style="BORDER-COLLAPSE: collapse;/*使表格框線變細*/"
style="TABLE-LAYOUT: fixed;/*限制表格的大小*/"
◆文字直書語法：
<STYLE type="text/css">
.FT {WRITING-MODE: tb-rl}
</STYLE>


※修改程式碼：
請在要顯示文字直書 的儲存格<TD>標籤內加入 class="FT" 即可！ 單獨宣告語法：
<SPAN style="WRITING-MODE: tb-rl">輸入要顯示的文字</SPAN>


引用網址： http://cgi.blog.roodo.com/trackback/2143979