CSS(Cascading Style Sheet)是一種串接樣式表(Stylesheet), 用來描述 HTML 資料要如何顯現的語言
== 樣式使用分類:
1. 行內式 : 直接定義在原有 HTML 的標籤內
2. 內崁式 : 定義在 HEAD 標籤內, 並設定於 <style type="text/css">..</style> 宣告內
3. 連結式 : 定義在外部檔案內, 使用 <link> 標籤連結外部檔案
== 宣告 CSS 樣式的語法
選擇器 {
屬性：設定值；
...
}
其中選擇器主要有三種：
1. 型別(Type)選擇器 : 型別選擇器是直接針對(X)HTML標籤設定樣式的選擇器
2. Class 選擇器 : 以.號帶領選擇器名稱者為 Class 選擇器, 可 HTML 標籤內使用 class= 的方式引用
另可針對特定標籤設定 Class 選擇器, 如 b.special = {..}, 只針對<b class='special'> 才有效
若未指定標籤(直接以.號開頭), 則提供所有標籤引用
同一個標籤也可套用多個不同的 Class 選擇器, 如 <b class='style_1 style_2'> 表於 <b> 標籤內套用 style_1 及 style_2 兩種樣式(以空白區分)
3. ID 選擇器 : 以#號帶領選擇器名稱者為 ID 選擇器, 是提供 HTML 內特定 ID 的物件所引用之樣式
註:Class 名稱及 ID 名稱都是有大小寫區分的。所以 .classone 及 .ClassOne 是代表兩個不同的 Class 選擇器。
== 樣式的繼承性:
在 HTML 文件中, 當標籤間有親子關係時(在外的為父標籤, 在內的為子標籤), 其子標籤未明確定義的樣式會直接繼承父標籤所設定的樣式
EX:
body { color: #FF0000; font-size:20px;}
p { color: #00FF00; }
strong { font-size:50px; }
<body>
<p> P標籤為父 <strong>strong標籤為子時</strong> 的樣式</p>
<strong> strong標籤為父<p> P標籤為子時</p> 的樣式</strong>
</body>
其中 [P標籤為父] 時定義了顏色為綠色未定義字體大小, 所以是以<body>所定義的字體(20px)及綠色來顯示
而 [strong標籤為子時] 只修改了字體大小, 未修改顏色, 所以是以繼承父標籤的綠色來顯示
相反的 [strong標籤為父] 時只定義字體大小, 未定義顏色, 所以是以<body>所定義的紅色及自定義的字體(50px)來顯示
而 [P標籤為子時] 只修改顏色未修改字體大小, 所以是以繼承父標籤的字體大小(50px)來顯示
== CSS 樣式模型
盒子模式(box model)是 CSS 描述元素組成的重要觀念。
其盒子模式的式樣有四層：
1. 邊界(margin) : 最外層的界限, 可用來設定各個元素間之距離。
2. 邊框(border) : 設定邊框樣式
3. 留白(padding) : 內容到邊框的距離
4. 內容(content) : 是最內層的物件項目
== HTML 中 <Div> 與 <Span> 之差異
<Div> 與 <Span> 標籤均可於文件內標示出獨立的區域, 以利針對特定區域引用不同的 CSS 樣式
唯兩者所定義出的獨立的區域略有差別
<Div> 所定義的獨立區域區為塊級的範圍, 而 <Span> 所定義的區域則為元素級(如一行文字中的部份字串)
沒有留言:
張貼留言