Download presentation
Presentation is loading. Please wait.
1
CSS基礎 靜宜大學 資管系 楊子青
2
大綱 CSS概念 CSS基本格式 在HTML網頁套用CSS的方法 CSS的選擇器
3
Cascading Style Sheets (串接樣式表)
1. CSS概念 Cascading Style Sheets (串接樣式表) 能夠重新定義HTML標籤的顯示樣式，以便符合網頁設計者的需求 CSS優點：讓網頁的內容與格式分開處理 內容由寫作人員撰寫；版面由美工人員設計 修改內容時，不應更動到版面；更換版面時，也沒理由影響內容 增加網頁設計彈性，讓網頁更容易維護 統一網站風格 加快網頁載入的速度 語法簡單、撰寫容易
4
CSS的應用 量身訂做HTML標記樣式 移動網頁上的元件 利用濾鏡功能，製作各式絢麗文字或圖片特效
5
CSS實例
6
Selector {property1: value1; property2: value2; … } CSS語法分成兩大部分
在括號之中的是重新定義顯示樣式的樣式規則 實例： h1{color: red;} 選擇器 樣式規則
7
方法一：行內宣告(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，定義物件以絕對位置顯示，即指定標籤的顯示位置，因此能在網頁上進行定位和重疊顯示。
8
方法二：內嵌宣告(Embedding)：內建網頁的CSS
在HTML網頁套用CSS的方法 方法二：內嵌宣告(Embedding)：內建網頁的CSS 在網頁<head>…<head>標籤內，使用<style>標籤定義CSS樣式，其影響範圍是整頁網頁內容 可以重新定義HTML標籤，或自訂Classes樣式類別，例如： <style type="text/css"> p { font-size: 10pt; color: red; } </style>
9
方法三：連結外部樣式檔(Linking)
在HTML網頁套用CSS的方法 方法三：連結外部樣式檔(Linking) 樣式並不是放在HTML網頁之中，而是自成獨立檔案，其副檔名為【.css】。 在建立外部樣式表檔案後，在<head>區塊使用<link>標籤來連接外部樣式表檔案，其基本語法如下所示： <link rel="stylesheet" type="text/css" href="樣式檔的路徑/檔名“>
10
(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;}
11
(2) 通用選擇器(Universal selector)
CSS的選擇器 (2) 通用選擇器(Universal selector) 選擇所有標記 (*) 例如： * { font-size: 16px; color: #ff0000;}
12
(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，只需使用空白分隔，就可以指明元素之間的父子階層關係
13
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樣式。 實例：
14
(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> 實例： 適用情況：此樣式屬性會重複套用於許多地方
15
(6) ID選擇器 (ID Selectors)
CSS的選擇器 (6) ID選擇器 (ID Selectors) 在HTML標籤使用id屬性指定標籤物件的名稱，例如要指定名為bodycolor的標籤物件： <div id="bodycolor">動態樣式的字型與色彩</div> 接著可以使用「#」開頭的樣式名稱來定義物件套用的CSS樣式： #bodycolor { font-size: 12pt; color: red; } 實例： id名稱為自己命名，用來辨識元件之用，因此通常在同一份HTML文件裡是唯一的
16
(7) 屬性選擇器 (Attribute Selectors)
CSS的選擇器 (7) 屬性選擇器 (Attribute Selectors) 篩選具有特定屬性的標記，例如： E[att] //套用於含att屬性的E標籤（簡易） E[att=val] //套用於att屬性值為val的E標籤（精確） E[att~=val] //套用於att屬性值包含val的E標籤（部份） 實例：
17
CSS的選擇器 補充：超連結常用的相關選擇器 CSS選擇器 範例 範例說明 :link a:link 尚未拜訪過的超連結 :visited
a:visited 已經拜訪過的超連結 :active a:active 執行中的的超連結 :hover a:hover 滑鼠移動到其上的超連結 實例：
18
蔡文龍，CSS3樣式語法與設定，教學ppt。 網路資源
參考資料 教科書 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。 Chap 12: 認識CSS樣式表 Chap 14: CSS排版技巧 蔡文龍，CSS3樣式語法與設定，教學ppt。 網路資源
Similar presentations
