木笛雅設

這一篇文章將介紹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的屬性與選擇器一覽