CSS 為 Cascading Style Sheet 的簡稱，中文名為『階層式樣式表』
提供網頁設計者更大的網頁空間應用彈性，讓網頁的文字內容與版面設計分開處理。
下一張(熱鍵:c)
 應用說明
複製程式碼到網頁裡的</HEAD>之前即可！ 
下一張(熱鍵:c)
基本語法屬性一覽：
<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>

下一張(熱鍵:c)
語法屬性說明如下：

說明指令
設定字體色彩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")

下一張(熱鍵:c)
表格樣式設定：
請在<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>

下一張(熱鍵:c)
此篇文章引用處：http://blog.pixnet.net/neomi/post/4303586
下一張(熱鍵:c)
下一張(熱鍵:c) 分享主題之作者： [ N ]eomi
下一張(熱鍵:c) 此篇文章編輯者： 潘朵拉

下一張(熱鍵:c)

下一張(熱鍵:c)
        歡迎參觀潘潘的家，任何問題歡迎尋問；引用文章清楚註明，請勿截圖盜用文章；請尊重作者的撰寫，請多使用文章引用；有索取東西的朋友，麻煩回應讓我知道；喜歡潘朵拉的朋友，歡迎把小貼紙帶走。

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 瑪嘉蕾特 的頭像
    瑪嘉蕾特

    夢想の出所，許願草〃Ti amo╭°

    瑪嘉蕾特 發表在 痞客邦 留言(0) 人氣()