Cat's World

應用說明：
複製程式碼到網頁裡的</HEAD>之前即可！ 基本語法屬性一覽：
<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>

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>

語法屬性說明如下：