█ 語法說明 -- 文字控制：
/* 語法開始 */
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樣式表裡面的設定決定囉！不要小看這一個符號喔！設定錯，可是沒有用的喔！
(未完)
留言列表
