█ 事前準備：
文章用色說明：紅字：語法的指令 綠字：指令的參數 紫字：語法註解
昨天將CSS「邊框」的語法整理好之後（已經放在▍留言區域大動工（含表單設計） [ Version 2.0 ]這篇教學裡面 ），今天想一想，乾脆來將CSS的標準語法作一次的整理好囉！也方便大家以後查詢指令方便。（當然我也很需要^^）
整理的CSS語法包括下列幾種：
- 背景控制
- 邊框控制
- 文字控制
- 文字連結控制
- 滑鼠樣式控制
- 方框控制（邊界、欄位間距）
PS 如果你不清楚語法究竟要怎樣加入或設定？請見文章最下面的「實際操作」。
█ 語法說明 -- 背景控制：
/* 語法開始 */
body{ /* body 是可以依照需要作改變的，下面的內容才是重要的！ */
background-image:url(圖片位址); /* 圖片連結位置 */
background-attachment:fixed; /* 圖片位置是否要固定 */
background-repeat:no-repeat; /* 圖片是否要重複顯示 */
background-position:right; /* 圖片對齊格式 */
width:400px; /* 文字區塊的寬度 */
}
/* XXX */(註解)：註解幫助自己看懂，這部分程式不會執行！XXX可以自行填寫！
textarea(文字區塊)：這個部分稱作CSS樣式定義類別，一般來說可以自己定義名稱，但是由於這裡我們是要定義HTML語法的標籤，所以是不能更改的！必須使用textarea。當然如果要定義<h1>，就改為h1！(★注意： 不用"<>")
background-image(背景影像)：看你的圖片位址在何處就怎麼寫！只要填在url()的()裡面即可！
background-attachment（背景附著）：在這裡你可以決定背景圖片的位置。
屬性有：scroll：隨著捲軸捲動 inherit：繼承之前的設定 fixed：固定不動
background-repeat(背景重複)：看看背景圖片是不是要重複顯示。
屬性有：repeat：重複顯示 no-repeat：不重複顯示 repeat-x：只在X軸重複顯示 repeat-y：只在Y軸重複顯示
background-position(背景位置)：決定背景要置中、靠左、靠右的設定。
屬性有：left：靠左對齊 center：置中對齊 right：靠右對齊 top：向上對齊 bottom：向下對齊 inherit：傳統繼承(預設)
width(寬)：文字區塊的寬度 (可以不設定，系統會自動設定大小)
height(高)：文字區塊的高度 (可以不設定，系統會自動設定大小)
PS1 其餘在「textarea」裡面還能夠加上許多設定。例如邊線、文字顏色等等！因為部屬於這部分的討論範圍！暫時就不列出來！
PS2 如果你不使用背景影像的話，只想用純顏色當背景時，可以將background-image(背景影像)用background-color(背景顏色)取代！但是盡量避免兩個語法同時使用！
範例：background-color:#FF6600; 綠色的部分就是填上自己喜歡的顏色！
█ 語法說明 -- 邊框控制：
/* 語法開始：寫法一 -- 分門別類，無微不至 */
/* 分成上下左右(4部分) 寬度樣式顏色(3部分) 總計12(4x3)行 */
body { /* body 是可以依照需要作改變的，下面的內容才是重要的！ */
border-XXX-width: 1px; /* 邊框寬度 */
border-XXX-style: dotted; /* 邊框樣式 */
border-XXX-color: #0066FF; /* 邊框顏色 */
}
- XXX：請各位先注意XXX的部分，這裡XXX代表著是邊框的上下左右。
屬性有：top：上方 bottom：下方 left：左邊 right：右邊 - Width(寬)：邊框寬度。屬性有：N px：像素 N pt：點 N in：英吋 N %：百分比 (N為大小，必須為正整數)
- Style（樣式）：邊框樣式。屬性有：dotted：點狀線 dashed：虛線 solid：實線 double：雙實線 groove：溝道狀 ridge：山脊狀inset：凹陷狀 outset凸起狀
- Color(顏色)：邊框顏色。屬性為：#XXXXXX (XXXXXX為顏色代碼)
/* 語法開始：寫法二 -- 精簡寫法，功用一樣 */
/* 只分成上下左右(4部分) 寬度樣式顏色並列在同一行程式 */
body {
border-XXX: width style color; /* 邊框 寬度 樣式 顏色 */
}
★注意：相關的語法大致和第一種都像同，只是寫法不一樣！假設我要設定上方邊框為寬度一像素、虛線、紅色，就可以寫成：
border-top: 1px dashed #FF0000; /* 邊框 寬度 樣式 顏色 */
/* 語法開始：寫法三 -- 最為精簡、但有限制 */
/* 使用時機：當上下左右、寬度、樣式、顏色都要設定一樣的時候 */
body {
border: width style color; /* 邊框 寬度 樣式 顏色 */
}
★注意：相關的語法大致和第二種都像同，只是這部分 border-XXX 改為 border 。因為此時我們已經不用在設定上下左右了！
█ 語法說明 -- 文字控制：
/* 語法開始 */
body { /* body 是可以依照需要作改變的，下面的內容才是重要的！ */
color: #006699; /* 文字顏色 */
font-family:"Times New Roman"; /* 文字字型 */
font-size: 14pt; /* 文字大小 */
font-style: normal; /* 文字樣式 */
line-height: 1.5px; /* 文字行高 */
font-weight: bold; /* 文字粗細 */
font-variant: normal; /* 文字變形 */
text-transform: capitalize; /* 文字大小寫 */
text-decoration: underline overline line-through blink; /* 文字裝飾 */vertical-align: super ; /*文字上、下標字*/
text-align: center; /* 文字對齊方式（水平） */
vertical-align: top; /* 文字對齊方式（垂直） */letter-spacing: 120%; /* 單字間距 */
word-spacing: 120%; /* 字母間距 */
text-indent: 10px; /* 文字縮排 */
}
- color(顏色)：設定字體顏色。屬性為：color:#XXXXXX (XXXXXX 為顏色代碼)
- font-family(文字字型)：設定文字字型。屬性為：font-family:"XXX" （XXX為字體顏色）
例如要用新細明體就是：font-family:"新細明體"
★注意：你所設定的字型必須對方的電腦也有這樣的字型，當別人在瀏覽網頁時，才能正常顯示喔！
- font-size(文字大小)：設定文字大小。屬性有：N px：像素 N pt：點 (N必須為正整數)
- font-style(文字樣式)：設定文字樣式。屬性有：normal：正常 italic：斜體 oblique：偏斜體
- line-height(文字行高)：設定文字行高。屬性有：N %：百分比 (100為正常值 150 就是1.5倍 依此類推) N px：像素 N pt：點 (N必須為正整數)
- font-weight(文字粗細)：設定文字粗細。屬性有：normal：正常 bold：粗體 bolder：特粗 細體：lighter 另外你也可以直接設定為：font-weight: N; (N為正整數 起始值為100)
- font-variant(文字變形)：設定文字變形。屬性有：normal：正常 small-caps：小型大寫字.
- text-transform(文字大小寫)：設定文字大小寫。屬性有：capitalize：字首大寫 uppercase：全部大寫 lowercase：全部小寫
- text-decoration(文字裝飾)：設定文字裝飾。屬性有：underline：底線 overline：上端線 line-through：刪除線 blink：文字閃爍 none：無線(亦可刪除連結底線)
- vertical-align(上下標字型)：設定上下標字型。屬性有：super：上標字 sub：下標字
- text-align(文字對齊)：決定 文字水平對齊方式。屬性有：left：靠左對齊 center：置中對齊 right：靠右對齊
- vertical-align(垂直對齊)：決定 垂直對齊方式。屬性有：top：向上對齊 bottom：向下對齊 inherit：傳統繼承(預設)
- letter-spacing(單字間距 )：設定單字間距。屬性有：N %：百分比 (100為正常值 150 就是1.5倍 依此類推) N px：像素 N pt：點 (N必須為正整數)
- word-spacing(字母間距)：設定字母間距。屬性有：N %：百分比 (100為正常值 150 就是1.5倍 依此類推) N px：像素 N pt：點 (N必須為正整數)
- text-indent(文字縮排)：設定文字 縮排距離。屬性有：N px：像素 N pt：點 (N必須為正整數)
★注意：關於第9點中的「閃爍」效果和第10點的「上下標字型」，會依據瀏覽器、網頁語法編寫不同，而決定是否有支援！也就是不一定設定了就會顯示此類效果！
█ 語法說明 -- 文字連結控制：
/* 語法開始 */
a {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
a:link {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
a:visited {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
a:active {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}
a:hover {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}
/* 語法結束 */
★注意：這四行語法分別是獨立的語法，不用在在任何的 { ... }當中，注意看，這些語法本身就有 { ... }。
a：設定所有連結的樣式！
a:link：設定連結（正常情況之下）的樣式。
a:visited：設定拜訪過的連結樣式。（也就是點選過的連結）
a:active：設定正在作連結動作時候的樣式。（也就是當你滑鼠按下連結的那時刻）
a:hover：設定當滑鼠移到連結上面時候的連結樣式！
PS3 在大刮號中間 { ... }，就是我們填寫語法控制的部分，你可以依據你自己想要的樣式，參考前面的「背景、邊框、文字」控制語法來加以設定！
★重要觀念說明：
Question：以上說的連結樣式設定是針對全部的網誌頁面來說，如果我現在只要針對「行事曆」的部分作連結設定，又該如何設定呢？請繼續看下去喔！
Ans：以無名網誌為例：在無名網誌的CSS設定當中，可以找到「.calendar」這個部分，這就是「行事曆」樣式設定的部分。那我們是將語法寫在「.calendar」當中嗎？答案是否定的！很多人以為要修改這部分的連結樣式，只要將上面五行文字寫到「.calendar」當中就可以囉，這是錯誤的觀念。因為在CSS語法當中，在一個相對應的 { ... } 當中，不可以在包含有其他的 { ... }，而在「.calendar」語法當中，它自己本身就已經有一組{ ... }，所以不能將上面五行的連結語法加入到「.calendar」當中，因為這五行語法本身都包含著 { ... }。
★注意：在CSS語法當中，在一個相對應的 { ... } 當中，不可以在包含有其他的 { ... }。
我們採取解決的方式，在程式語法當中稱之為「繼承」。在原先的屬性下再加入一個新的屬性。這段文字看不懂，就直接跳到下面吧！（這個對初學者有點難懂！）
/* 語法開始 */
.calendar a {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
.calendar a:link {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
.calendar a:visited {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
.calendar a:active {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}
.calendar a:hover {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}
/* 語法結束 */
我們必須另外定義五行新的樣式，在連結前面加上我們要設定的「.calendar」部分，這樣就可以特定為這個部分「.calendar」設定連結樣式，而不會和網誌的其他部分有所衝突！
同理，如果要修改其他部分，就將「.calendar」改為你要修正部分的名稱即可。例如：要修改「標題Banner」就將「.calendar」改成「#banner」。至於前面是 "." 、 "#" 還是沒有 ""，就必須根據你CSS樣式表裡面的設定決定囉！不要小看這一個符號喔！設定錯，可是沒有用的喔！
█ 語法說明 -- 滑鼠樣式控制：
/* 語法開始 */
body { /* body 是可以依照需要作改變的，下面的內容才是重要的！ */
cursor: text;
}
cursor(游標)：設定滑鼠游標的樣式。
屬性有：
default：預設值
hand：連結的手形
crosshair：十字（無箭頭）
move：十字（有箭頭）
text：打字的 I 圖案
wait：漏斗形狀
help：預設值符號加上一個問號
n-resize：箭頭朝上
s-resize：箭頭朝下
w-resize：箭頭朝左
e-resize：箭頭朝右
nw-resize：箭頭朝左上
se-resize：箭頭朝右下
ne-resize：箭頭朝右上
sw-resize：箭頭朝左下
圖例說明：
另外有些人或許覺得使用這些預設的符號還是不夠特別，想要讓滑鼠符號更為特別，那還可以用下面的語法！
/* 語法開始 */
body { /* body 是可以依照需要作改變的，下面的內容才是重要的！ */
cursor: url("圖檔名.cur");
}
★注意：圖檔名後面的 ".cur" 為檔案的副檔名，你可以使用兩種格式：一、 ".cur" 靜態游標；二、 ".cur" 動態游標。(所謂動態游標就是，滑鼠游標本身是會動的！)
PS4 如果你需要自行繪製滑鼠游標的圖案，你可以到（凱哥）這邊，他有詳細的說明！
http://www.wretch.cc/blog/ppkeigo/519816
█ 語法說明 -- 方框控制（邊界、欄位間距）：
/* 語法開始 */
body { /* body 是可以依照需要作改變的，下面的內容才是重要的！ */
margin-XXX: 1px; /* 邊界設定縮排 */
padding-XXX: 1px; /* 欄位間距設定 */
}
XXX：請各位先注意XXX的部分，這裡XXX代表著是 邊界、欄位間距的上下左右。
屬性有：top：上方 bottom：下方 left：左邊 right：右邊
邊界屬性設定：屬性有：N px：像素 N pt：點 N in：英吋 N %：百分比 (N為大小，必須為正整數)
欄位間距設定：屬性有：N px：像素 N pt：點 N in：英吋 N %：百分比 (N為大小，必須為正整數)
PS5 如果你的邊界、欄位間距四個方向（上下左右）都要設定為一樣，語法可以寫成：
margin: N px;
padding:N px;
█ 實際操作：
為了提供更生動的教學方式，首次採用新的方式！將整個說明過程，製作成動態投影片，希望大家會覺得為方便喔！
|| 歡迎轉載 但請勿盜用|| http://www.andyliudesign.idv.tw
Copyright (C) 2004 Andyliu Design . All rights reserved .
沒有留言:
張貼留言