木笛雅設

這一篇文章將介紹CSS的基礎語法結構
認識基本結構寫起來也就不會錯得太離譜
建議將寫的CSS都獨立存成CSS檔
這樣以後要修改還是套用都非常方便

1. CSS基礎語法結構
一個CSS語法是由選擇器(selector)，屬性(property)和屬性值(value)所組成
基本格式為:selector{property:value}
那選擇器是指什麼呢?
基本上網頁中可以用來定義的標籤都可當作selector
像是body,p,table,h1...等等
body{background-color:#666666}
這段語法表示網頁的背景是灰色
p{font-size:12px}
這段語法表式段落的大小為12px
如果想針對一個選擇器裡賦予多樣屬性，我門會用分號;將不同屬性分開
p{text-align:center;font-size:12px;color:#666666}
這段語法表式段落居中對齊，字體大小12px顏色為灰色
不過為了方便檢查樣式，一般會把不同屬性分行顯示
P{
text-align:center;
font-size:12px;
color:#666666;
}

2. 類選擇器
如果我們單純使用html標籤作為選擇器
你會發現他會取代在網頁中每一種格式
以上文為例，在段落中＜p＞都只會有一種格式
但其實我們會常常需要不同的格式變化
也就是同樣是段落我們有些希望置中對齊
但大部分的內文又希望向右對齊
此時我們就會用到類選擇器的表現方式
定義類選擇器時只要在自己命名的名稱前加一個點號
.right{
text-align:right
font-size:12px;
color:#666666;
}
.center{
text-align:right
font-size:12px;
color:#A67C00;
}
然後在HTML裡加入你定義的class參數
＜p class="right"＞向右對齊內文段落＜/p＞
＜p class="center"＞置中對齊內文段落＜/p＞
這種方法將是最常用的CSS寫法
至於類選擇器的命名到沒有特別的限制
一般當然是針對功能或是你會用到的網頁元素來命名比較容易記得

3. ID選擇器
在HTML中ID參數指定某一種類的網頁元素
而ID選擇器則是針對該元素定義獨特的樣式
定義ID選擇器要在ID名稱前加一個#號
#special {
border-top-width: 1px;
border-bottom-width: 1px;
border-width: 1px;
border-top-style: dotted;
border-bottom-style: dotted;
border-style:dotted;
border-top-color: #99CC99;
border-right-color: #99CC99;
border-bottom-color: #99CC99;
border-left-color: #99CC99;
height: 150px;
width: 360px;
}
這是一個會產生寬360px，高150px的虛線淡綠色的方框樣式
你可以把他設在＜table id="special"＞或是＜div id="special"＞中
一個網頁中並沒有限制不能設定同名的id
所以看起來他的作法和使用類選擇器的結果很像
至於是否有更細微的差異等我有發現在補上

4. 包含選擇器
可以單獨對某元素包含的關係定義樣式表，
像是元素1裡包含元素2，用這種方式定義元素1裡的元素2
但是若不在元素1裡的元素2則不受影響
table a{color:#663333}
table a:hover{color:#BC7878}
在表格內的連結為深紫色，當滑鼠移過時呈淡紫色
但表格外的連結樣式仍是預設樣式


<延伸閱讀>
各種CSS的屬性與選擇器一覽