CSS基礎 靜宜大學 資管系 楊子青
大綱 CSS概念 CSS基本格式 在HTML網頁套用CSS的方法 CSS的選擇器
Cascading Style Sheets (串接樣式表) 1. CSS概念 Cascading Style Sheets (串接樣式表) 能夠重新定義HTML標籤的顯示樣式，以便符合網頁設計者的需求 CSS優點：讓網頁的內容與格式分開處理 內容由寫作人員撰寫；版面由美工人員設計 修改內容時，不應更動到版面；更換版面時，也沒理由影響內容 增加網頁設計彈性，讓網頁更容易維護 統一網站風格 加快網頁載入的速度 語法簡單、撰寫容易
CSS的應用 量身訂做HTML標記樣式 移動網頁上的元件 利用濾鏡功能，製作各式絢麗文字或圖片特效
CSS實例 http://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles
Selector {property1: value1; property2: value2; … } CSS語法分成兩大部分 在括號之中的是重新定義顯示樣式的樣式規則 實例： h1{color: red;} 選擇器 樣式規則
方法一：行內宣告(Inline )：局部套用的CSS 3. 在HTML網頁套用CSS的方法 方法一：行內宣告(Inline )：局部套用的CSS 直接寫在HTML標籤裡，使用style屬性定義顯示樣式 其影響範圍僅限於該標籤所套用的文字或圖片，通常是使用在<div>和<span>物件標籤，例如： <div style="position: absolute; top: 50px; width: 130px; height: 130px"> …. </div> 附註：style屬性position: absolute，定義物件以絕對位置顯示，即指定標籤的顯示位置，因此能在網頁上進行定位和重疊顯示。
方法二：內嵌宣告(Embedding)：內建網頁的CSS 在HTML網頁套用CSS的方法 方法二：內嵌宣告(Embedding)：內建網頁的CSS 在網頁<head>…<head>標籤內，使用<style>標籤定義CSS樣式，其影響範圍是整頁網頁內容 可以重新定義HTML標籤，或自訂Classes樣式類別，例如： <style type="text/css"> p { font-size: 10pt; color: red; } </style>
方法三：連結外部樣式檔(Linking) 在HTML網頁套用CSS的方法 方法三：連結外部樣式檔(Linking) 樣式並不是放在HTML網頁之中，而是自成獨立檔案，其副檔名為【.css】。 在建立外部樣式表檔案後，在<head>區塊使用<link>標籤來連接外部樣式表檔案，其基本語法如下所示： <link rel="stylesheet" type="text/css" href="樣式檔的路徑/檔名">
(1) 標記名稱 (型態選擇器，Type Selectors) 4. CSS的選擇器 (1) 標記名稱 (型態選擇器，Type Selectors) 只需單純選擇HTML的標籤，就可以定義大括號括起的樣式組，此樣式組可以重新定義標籤樣式 例1：<p>標籤的新樣式： p { font-size: 14pt; color: yellow; background-color: blue; } 上述樣式選擇器選擇<p>標籤，表示在HTML網頁中的所有<p>標籤都套用後面的樣式組。 例2：div { font-size: 16px; color: #FFFFFF;}
(2) 通用選擇器(Universal selector) CSS的選擇器 (2) 通用選擇器(Universal selector) 選擇所有標記 (*) 例如： * { font-size: 16px; color: #ff0000;}
(3) 巢狀選擇器（Descendant Selectors） CSS的選擇器 (3) 巢狀選擇器（Descendant Selectors） 當HTML元素擁有子孫元素時，為了避免與其他元素同名的子孫元素產生衝突，可以使用巢狀選擇器指明樣式套用的元素。 例如：在<div>和<span>標籤都有p子元素： <div><p>內容介紹</p></div> <span><p>本書特色</p></span> 若要指明元素父子關係，讓<p>顯示不同的樣式： div p { font-size: 12pt; color: blue;} span p { font-size: 14pt; color: yellow;} CSS選擇器選擇div的子元素p和span的子元素p，只需使用空白分隔，就可以指明元素之間的父子階層關係
CSS的選擇器 (4) 群組選擇器(Grouping Selectors) 如果有很多不同HTML元素是使用相同的CSS樣式，可使用群組選擇器，來指定這些元素的樣式。 例如：div和p元素要使用相同的樣式，CSS語法為： div, p { text-align: center; color: green; margin-left: 20pt; font-size: 12pt; } 選擇器使用「,」分隔各標籤名稱，表示選擇<div>和<p>標籤的群組，可以套用同一組CSS樣式。 實例：http://www.w3schools.com/css/tryit.asp?filename=trycss_grouping
(5) 樣式類別選擇器 (Class Selectors) CSS的選擇器 (5) 樣式類別選擇器 (Class Selectors) 可在網頁定義個人風格的樣式類別（Class，一組樣式屬性) 在<style>標籤使用「.」句點開始的名稱，例如： .littlered {color: red; font-size: 9pt} .littlegreen {color: green; font-size: 9pt} 欲使用全新的樣式類別，只需在HTML標籤的class屬性指定類別名稱，例如欲使用小一號的紅色字型來顯示段落文字： <p class="littlered">自訂樣式名稱Class</p> 實例：http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_class 適用情況：此樣式屬性會重複套用於許多地方
(6) ID選擇器 (ID Selectors) CSS的選擇器 (6) ID選擇器 (ID Selectors) 在HTML標籤使用id屬性指定標籤物件的名稱，例如要指定名為bodycolor的標籤物件： <div id="bodycolor">動態樣式的字型與色彩</div> 接著可以使用「#」開頭的樣式名稱來定義物件套用的CSS樣式： #bodycolor { font-size: 12pt; color: red; } 實例：http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_id id名稱為自己命名，用來辨識元件之用，因此通常在同一份HTML文件裡是唯一的
(7) 屬性選擇器 (Attribute Selectors) CSS的選擇器 (7) 屬性選擇器 (Attribute Selectors) 篩選具有特定屬性的標記，例如： E[att] //套用於含att屬性的E標籤（簡易） E[att=val] //套用於att屬性值為val的E標籤（精確） E[att~=val] //套用於att屬性值包含val的E標籤（部份） 實例：http://www.w3schools.com/css/tryit.asp?filename=trycss_sel_attribute_value
CSS的選擇器 補充：超連結常用的相關選擇器 CSS選擇器 範例 範例說明 :link a:link 尚未拜訪過的超連結 :visited a:visited 已經拜訪過的超連結 :active a:active 執行中的的超連結 :hover a:hover 滑鼠移動到其上的超連結 實例： http://www.w3schools.com/css/tryit.asp?filename=trycss_link
蔡文龍，CSS3樣式語法與設定，教學ppt。 網路資源 參考資料 教科書 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。 Chap 12: 認識CSS樣式表 Chap 14: CSS排版技巧 蔡文龍，CSS3樣式語法與設定，教學ppt。 網路資源 http://www.w3schools.com/css/