[Back To Basic] css - 語法(Syntax)和選擇器(Selectors)

css組成的語法

Selector { property1 : value1; property2 : value2; }

• 選擇器(Selector) － 選定想要設計樣式的HTML元素(element)
• 宣告區塊(Declaration block) － {}括號內是宣告區塊，區塊間可以有一個或多個的宣告(declarations)
• 宣告(Declaration) － 一個宣告會有一個屬性名稱(property name)和一個屬性值(property value)

選擇器(Selector)

用來尋找特定的HTML元素(element)，藉由名稱(name)、id、類別(class)、屬性(attribute)

• 同一頁面所有相同HTML元素，e.g. p { color:red; }
• 藉由id指定唯一的HTML元素，e.g. #par { color:red; }
• 藉由class指定一整群的HTML元素，e.g. .error { color:red; }

附註

*.上面三個套用方式，可以混合使用，e.g. p.error { color:red; }

*.一個HTML元素可套用多個類別(class)，e.g. 

<p class="error large">This paragraph refers to two classes.</p>

*.多個HTML元素，若擁有共同的樣式，可簡化成這樣：

h1, h2, p {

  color: red;

}

註解(comments)

1. /* 註解內容 */

2. 多行

/* 註解內容1

註解內容2

註解內容3 */