CSS 3 語法介紹
CSS 的語法由三個部份組成. 分別是 selector 選擇子, property 屬性,
及 value數值:其構成的語法就像底下的範例. 這個範例僅是說明CSS
語法的構成.並不是真實可用的CSS 語法指令
selector {property:value}
這個選擇子通常是您想要定義的HTML 標註語言的要素/元素 或標簽. 屬性這個用來定義您想要改變的屬性內容,每一個屬性可以給予一個含以上的數值., 在屬性與數值之間是用 : 冒號加以區隔最外層則是以 {} 大括弧包覆。
body {color:black}
注意事項:如果數值是多個字元的組成,您必需為這個數值以引號包覆,請參考下例:
p {font-family:"sans serif"}
注意事項: 如果您想要指定更多的屬性，您必需使用; 分號來區別多個屬性,請參考底下的範例
這個範例展示了如何將文字區段指定為文字居中,並指定文字顏色為紅色.
p {text-align:center;color:red}
另外為了使CSS 樣式定義更方便閱讀.您可以每一行描述一個屬性內容,請參考底下的範例
p
{
text-align:center;
color:black;
font-family:arial
}
CSS 3 語法介紹
CSS 的語法由三個部份組成. 分別是 selector 選擇子, property 屬性,
及 value數值:其構成的語法就像底下的範例. 這個範例僅是說明CSS
語法的構成.並不是真實可用的CSS 語法指令
selector {property:value}
這個選擇子通常是您想要定義的HTML 標註語言的要素/元素 或標簽. 屬性這個用來定義您想要改變的屬性內容,每一個屬性可以給予一個含以上的數值., 在屬性與數值之間是用 : 冒號加以區隔最外層則是以 {} 大括弧包覆。
body {color:black}
注意事項:如果數值是多個字元的組成,您必需為這個數值以引號包覆,請參考下例:
p {font-family:"sans serif"}
注意事項: 如果您想要指定更多的屬性，您必需使用; 分號來區別多個屬性,請參考底下的範例
這個範例展示了如何將文字區段指定為文字居中,並指定文字顏色為紅色.
p {text-align:center;color:red}
另外為了使CSS 樣式定義更方便閱讀.您可以每一行描述一個屬性內容,請參考底下的範例
p
{
text-align:center;
color:black;
font-family:arial
}
群組化 Grouping
您也可以將選擇子群組化,每一個選擇子間以逗號區別.底下的範例將展示如何將HTML 中標題元素/要素 相關的選擇子,群組起來並指定為綠色的文字.
h1,h2,h3,h4,h5,h6
{
color:green
}
類別選擇子 The class Selector
使用類別選擇子您可以為相同的HTML 元素/要素 定義不同的樣式,以字段來說 HTML 的要素/元素是<P> 假設您想為字段設定不同的排序分別,一個向右對齊 另一個向中對齊. 您可以參考底下的範例,底下的範例是寫在CSS 樣式表指令區.
<head>
<style type="text/css">
p.right {text-align:right}
p.center {text-align:center}
</style>
</haed>
您可以使用類別屬性在您的HTML 文件中:
<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>
注意事項:您也可以指定一個以上的類別屬性給HTML 元素/要素,請參考底下的範例
<p class="center bold">This is a paragraph.</p>
像是上面的範例裏就是同時指定了類別選擇子 center 及類別選擇子 bold 給這個字段
您也可以省略類別選擇子的標記名稱,來定義一個可以使用在所有HTML 要素/元素的樣式.
並且所有使用此一類別運算子的HTML 要素/元素皆為同一階層. 請參考以下範例:
.center {text-align:center}
在底下的範例裏,h1 及 p 這兩個html 元素/要素. 同時都使用了這個省略了標記名稱的類別選擇子.這兩個元素/要素都套用了 .center 這個省略了標記名稱的類別選擇子的樣式規則. 都是文字排序居中的效果, 使用這樣的類別選擇子可以大大簡化CSS樣式表,避免為同樣的樣式撰寫過多冗長的指令,在這個範例中您就可以不必為 P 字段 跟 H1 標題字段分別定義各別的文字居中樣式.
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>
注意事項: 您必需注意不能使用數值符號在定義類別選擇子的名字前面.
.1234center
