◆基本語法屬性一覽◆－新店好屋網詹長易 0989586373

◆基本語法屬性一覽◆

_____________________________________

/*文字屬性*/

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;/*文字不繞行(遇到
才換行)*/
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%;/*高度百分比*/}

◎ 附註：

每個標籤的樣式需要包在一對大括號『 { } 』中。
同一個標籤內的樣式請用分號『 ; 』隔開。
4. 集體聲明：同時聲明某個或數個標籤(以逗號『 , 』分隔)的樣式規則。
例如：BODY, TD {FONT: 9pt "Arial"; COLOR: #1f3f3f}

分項聲明：將許多的樣式規則分組再分別聲明。
例如：TD {FONT-SIZE: 9pt; COLOR: #1f3f3f}
　　　TD {FONT-FAMILY: Arial; LETTER-SPACING: 1px}

外部連結：

../ 表示 style.css 的路徑。

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 百分比(自動劃分)。

DIV與SPAN的比較：
DIV和SPAN這兩個元素在應用的屬性與事件處理上很類似，使用時都必須加上結尾標籤。因為彼此是相互獨立的，
也因此都可以配合挑選者特性來編寫。不同之處在於：DIV元素定義為區塊(block)，在

...

之間是一個
很完整的段落區塊。而SPAN元素則是定義為同軸(in-line)，所以...是應用於小範圍內的設定。

◆CLASS、ID 屬性應用：
定義 CLASS 以 . 為開頭。例如：.名稱 {屬性名稱: 屬性設定值}
定義 ID 以 # 為開頭。例如：#名稱 {屬性名稱: 屬性設定值}

範例如下：

CLASS 屬性應用
ID 屬性應用

◆超連結樣式控制語法◆

◆語法屬性說明如下◆
指令說明
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") 連結背景圖案

◆表格樣式設定◆
請在

的標籤內加入即可！
style="BORDER-COLLAPSE: collapse;/*使表格框線變細*/"
style="TABLE-LAYOUT: fixed;/*限制表格的大小*/"

◆文字直書語法◆

※修改程式碼：
請在要顯示文字直書的儲存格

標籤內加入 class="FT" 即可！
單獨宣告語法：
輸入要顯示的文字