Ertyu

中
第05章華
民
國
CSS 介紹與使用老一
一
二
師年
十
：月
十
潘八
Web 伺服器架設與網頁設計東日
星
期
名三
Last Update: 112/08/10

Outlines
2023/10/18
CSS 定義與功能
語法結構
使用方法
各式選擇(取)器
區塊與圖層
2
CSS 介紹與使用
何謂 CSS
2023/10/18
CSS 全名為 Cascading Style Sheets ，中文稱之樣式表。

W3C 組織於 1996 年制訂了 CSS 的標準，由於是第一個
版本，所以稱為 CSS1(CSS Level 1)；後來又於 1998 年
5 月公布 CSS2 (CSS Level 2) 標準。
CSS1 只有 50 個屬性，但CSS2 大幅增加到 120 個屬性。
3
CSS 介紹與使用
CSS用途
2023/10/18
CSS 是建立在HTML 的基礎上，用來美化網頁、進行版

面設計的語言。
HTML 就像一個建築的結構與主體，而CSS就等於是建築外
型的設計與內部的裝潢。
4
CSS 介紹與使用
為何需要 CSS
2023/10/18
沒有 CSS
排版與各架構變化皆放置在 HTML 標籤屬性中，造成網站要
修改排版時會更動到原 HTML標籤，不易修改。
有CSS 後
HTML 只是單純負責網頁的架構；例如：哪裡擺圖、哪裡是
大標題、哪裡是一個段落等。
排版與架構的變化交由CSS 語法來處理，讓網頁的架構內容
與版面設計分開處理。
5
CSS 介紹與使用
CSS 3
2023/10/18
CSS3 (CSS level 3)早於1999 年已開始制訂，直到2011

年6 月7 日，終於發布為W3C 的推薦標準
(Recommendation)。
CSS3 的制定版本以CSS2.1 為核心，除了修訂錯誤並追
加功能外，CSS3 使用了模組(modules) 的概念將規格再
細分割不同的功能，使其能各自獨立進行開發及修訂，
加速開發的效率。
6
CSS 介紹與使用
CSS3 模組
2023/10/18
因為採模組化修定，CSS3發展至今有些模組尚未正式宣佈
完全定稿。
目前CSS3發展狀態可至
https://www.w3.org/Style/CSS/current-work.en.html 查看
REC：定稿
CR：候選推薦如果你看到有 Level 4 的表示
PR：建議推薦有些模組已到下一代 CSS4
WD：草案
FPWD：第一次提出的草案
SPSD：建議被取代(目前沒有此項)
7
CSS 介紹與使用
CSS3 current work
2023/10/18
8
CSS 介紹與使用
CSS 3 特色
2023/10/18
配合HTML5，CSS3在多媒體變化呈現上比CSS2 多了許
多。
為了讓CSS3更靈活，部份新的模組加上了類似程式變
數的概念進入。
各版本 CSS 的比較表 http://meiert.com/en/indices/css-
properties/
9
CSS 介紹與使用
CSS3 可以做到什麼樣的結果
2023/10/18
Doraemon
Pon De Lion
Mozilla Demo
CSS 畫家(Diana Smith)
10
CSS 介紹與使用
CSS3 支援的差異(哆啦A夢)
2023/10/18
11
CSS 介紹與使用
CSS3 支援的差異(波堤獅)
2023/10/18
12
CSS 介紹與使用
CSS 的特色
2023/10/18
改善網頁的結構 CSS3更具有
縮短製作與維護的時間更強大的選擇器
提升頁面讀取速度視覺特效
變形、轉換和動畫
改善搜尋引擎排名
自訂顯示字型
跨平台開發與無障礙設計
媒體查詢
CSS 介紹與使用 13
CSS 的優點
2023/10/18
優點 1－讓網頁的內容與格式脫鉤
優點 2－避免重複撰寫變化格式程式碼
優點 3－縮小網頁的體積，簡化網頁的維護。
14
CSS 介紹與使用
讓網頁的內容與格式脫鉤
2023/10/18
內容包括文字、圖片、超連結等等各種供人觀賞、選取、
下載的目標。
格式攸關網頁的外觀，例如：文字顏色、字型、圖片是
否加外框、背景圖片與背景顏色等等。
近年來，W3C 極力鼓吹在撰寫 HTML 檔時，只使用與
內容結構相關的 HTML 標籤，例如：<p>、
<h1>…<h6> 等等，不要使用與格式 (外觀) 相關的標籤，
例如：<font>、<small>、<big> 等等。
凡是涉及變更格式的工作，一律改由 CSS 來做，這也
正是誕生 CSS 的主要目的。
15
CSS 介紹與使用
避免重複撰寫程式碼
2023/10/18
在 HTML 中，假設要對所有的 <h3> 標籤設定『紅色文

字』屬性，就必須對每個 <h3>標籤都加上『color =
red』。若 <h3>標籤出現 10 次，就必須重複 10 次！如
今藉由 CSS 來做，只需在網頁的開頭定義一次，後續
用到的 <h3> 標籤毋須再定義便能有相同的效果。
16
CSS 介紹與使用
縮小網頁體積簡化網頁維護
2023/10/18
在大的網站裡，可能有多達數百頁以上的網頁，若在每
一頁都加上相同的語法描述，不但浪費儲存空間，將來
逐頁修改時更是浪費時間。
而 CSS 的特色便是可以將定義寫在一個單獨的 CSS 檔，
網頁再利用匯入或連結等方式，為 HTML 檔與 CSS 檔
搭起聯繫的橋樑。
使用附加(外掛)
樣式表的優點
17
CSS 介紹與使用
CSS 的語法結構
2023/10/18
CSS 程式碼由一條一條的規則（Rule）所組成
CSS 規則由選擇器組成
選擇(取)器 (Selector)
用來指定CSS 的樣式要套用到HTML 的哪些標籤上
宣告 (Declaration)
設定選擇器所指定的元素該套用何種樣式
而宣告又區分為屬性 (Property)和值 (Value)
每一個宣告結
束都使用分號
做結尾
18
CSS 介紹與使用
瀏覽器的前綴詞
2023/10/18
因為部份模組還沒定稿，所以在少數語法前會加上前綴
詞辨識不同瀏覽器。
19
CSS 介紹與使用
選擇(取)器(Selector)
2023/10/18
標籤選擇器（Tag Selector，又稱為 Element Selector）

以 HTML 標籤作為選擇對象
類別選擇器（Class Selector）
這種選擇器的格式為『.XXX』，其中 XXX 為自訂的名稱，例如：
『.red』
識別碼選擇器（ID Selector）
這種選擇器的格式為『#XXX』，其中 XXX 為自訂的名稱，例如：
『#blue』
萬用選擇器
用 * 為選擇器名稱，表示全體套用
例： * {padding:0; margin:0;}
20
CSS 介紹與使用
CSS的使用方法
2023/10/18
語法結構有四種使用方法：
常用型
利用 HTML 位於 <head>標籤內的 <style> 標籤安排 CSS 樣式標籤
外掛檔案
將 CSS 樣式語法定義在一個外部 .css 檔案，再利用 <link> 標籤連結 CSS定義
檔。
將 CSS 樣式語法定義在一個外部 .css 檔案，再以 @import 指令匯入該檔。
僅量不要用型
將 CSS 樣式語法嵌入 HTML 標籤當中
21
CSS 介紹與使用
CSS的使用方法範例
2023/10/18
單獨宣告
使用link 標籤
使用@import
EW 中如何使用CSS
2023/10/18
於 EW 中可由[格式]的選單中選擇[新樣式]、[CSS 樣式]
與[CSS 屬性]使用樣式相關功能。
由編輯器右
下方的樣式
套用或管理
亦可使用樣
式功能
23
CSS 介紹與使用
新增樣式
2023/10/18
24
CSS 介紹與使用
管理樣式
2023/10/18
25
CSS 介紹與使用
修改樣式
2023/10/18
在[套用樣式]分頁上選擇
要修改的選取器右方往下
箭頭或是在[管理樣式]分
頁上，在要修改的選取器
上按下滑鼠右鍵，會出現
選單，選擇[修改樣式]即
可。
26
CSS 介紹與使用
使用 style 標籤
2023/10/18
在 head 段落中使用 <style> 標籤來定義樣式表，可說是

最常見的方式，其格式如下：
緊跟在 style 之後的 type=text/css 是告訴瀏覽器：「從

下一列開始，是用來定義 CSS樣式，直到 </style> 為
止」。
雖然沒定義這個 type 屬性，在某些瀏覽器還是能正確
解讀，但是寫出來更能確保相容性。
27
CSS 介紹與使用
<style>標籤放置位置
2023/10/18
在輸入時, 要特別注意 <style> 標籤必須在 <head> 段落

中（亦即在 <head> 到</head> 之間），若是誤植到
<body> 段落就無效了。
28
CSS 介紹與使用
選擇器的使用
2023/10/18
29
CSS 介紹與使用
標籤選擇器
2023/10/18
將原來HTML標籤的屬性做修改，定義成新的樣式。
30
CSS 介紹與使用
標籤選擇器的設定
2023/10/18
31
CSS 介紹與使用
標籤選取器範例
2023/10/18
32
CSS 介紹與使用
類別選擇器
2023/10/18
使用時機：在HTML指令後增加許多類別，以利依選擇
使用。若指定給某個HTML語法的則只能該語法使用；
若沒指定則任何語法皆可使用。
使用方法：
將樣式定義寫在<head><style>標籤當中
欲援用該樣式的段落，指明該樣式名稱。
利用 class 屬性，縮小適用範圍。
33
CSS 介紹與使用
類別選擇器範例
2023/10/18
指定標籤類別選擇器
2023/10/18
如果需特地將某個類別指
定給某個標籤使用的話，指定 H1 標籤有兩個
我們只需在類別前加上標類別 .blue 與 .pink
籤名稱即可。
這種指定標籤的類別拿去
給不是這標籤使用是沒作
用的
h2 標籤套用無效
指定標籤類別選擇器(Cont.)
2023/10/18
h2 標籤即使套用
blue 類別也沒作用
36
CSS 介紹與使用
多選取器共用同一屬性設定
2023/10/18
若允許 red 類別內的 h1、h2 和 h3 等元素都能套用，則

寫為：
各元素名稱之間以逗號『,』分開，而最後一個元素名
稱以點號『.』與類別名稱區隔。
37
CSS 介紹與使用
多選取器共用同一屬性設定(Cont.)
2023/10/18
相同的類別名稱用在不同的標籤上
38
CSS 介紹與使用
套用多類別
2023/10/18
在設計網頁時不需要為了一個效果再去設定一個類別選
擇器，我們可以使用像吃火鍋調醬料的方式組合既有的
類別選擇器一同使用即可。
本範例輔仁大學同時
具有紅字(.red)與黃色
背景(.bg)兩種類別的
效果。
2不同類別用空格隔開
39
CSS 介紹與使用
使用識別碼選擇器
2023/10/18
所謂的『識別碼選擇器』，就是在定義時，選定某個識
別碼（ID，Identifier）作為套用對象。
它與類別選擇器的最大差異，在於此 ID 應該只對應到
一個元素，不像類別中可以包含許多個元素。
使用識別碼選擇器時的語法如下：
40
CSS 介紹與使用
使用識別碼選擇器 (Cont.)
2023/10/18
識別碼選擇器的唯一性
2023/10/18
由於 ID 在整個網頁中必須唯一，為了避免在定義之後
被別的元素誤用，搞得該用的元素反而不能用，我們可
以在定義時就指定只給某個元素使用。
也就是在井字符號『＃』之前加上元素名稱即可
一旦定義之後，即使其它元素將自己的 ID 誤設為相同
的識別碼，仍不會有作用。
42
CSS 介紹與使用
識別碼選擇器的唯一性(Cont.)
2023/10/18
#fat 被 h1 與 p 都
用到，#pink 被 h2
與 p 都用到。因此，
系統會出現底下視
窗提醒你 id 重覆了
43
CSS 介紹與使用
class 選擇器與 id 選擇器差異
2023/10/18
基本上這兩種選擇器都可以用在 CSS 中做為多樣化設

定使用，唯
id 選擇器做為識別，在一份 HTML 或 CSS 文件中只能被使
用一次，而 class 選擇器是可以被多次重覆呼叫使用。
未來若使用 javascript 寫程式用函數呼叫 CSS 時，只有 id 選
擇器可以被呼叫使用指定唯一性。(用 getElementByID 函數)
由於 class 選擇器可被多次呼叫使用，一般說來使用
class 選擇器彈性較大。
44
CSS 介紹與使用
使用中的類別或識別碼
2023/10/18
你的選取器有沒有被使用，由編輯器下下方的套用樣式
可看出。有使用的選取器前會有一個圈。
45
CSS 介紹與使用
使用<link>連結其它的CSS檔
2023/10/18
使用時機：多個檔案共用相同的文件格式時
使用方法：
將樣式定義檔寫在另一個以 CSS為副檔名的檔案(*.css)當中
欲援用該樣式的檔案中，加上<link>標籤。
46
CSS 介紹與使用
編寫 CSS 檔
2023/10/18
在EW中由功能表的[檔案]→[CSS]即可編寫 .css 檔
47
CSS 介紹與使用
編寫 CSS 檔(Cont.)
2023/10/18
css 檔的內容其實就是一條條的選取器的規則，遵照先
前提過的新增樣式方式撰寫即可。
CSS 檔內只有 CSS 的選擇器，不應有是 HTML 語法，
不可加上 <style> 標籤和任何 HTML 標籤在檔案內。
本頁注意
48
CSS 介紹與使用
如何使用<link>外掛樣式表
2023/10/18
由[格式]→[CSS 樣式]→[附加樣式表]
或由右下方的附加樣式表
49
CSS 介紹與使用
如何使用<link>外掛樣式表(Cont.)
2023/10/18
若是網站內所有網頁都要使用，則選所有HTML網頁
50
CSS 介紹與使用
如何使用<link>外掛樣式表(Cont.)
2023/10/18
使用<link> CSS 檔的注意事項
2023/10/18
所有的選取器宣告還是都得包括在 {} 之間，而且都要
以『；』結束。
註解文字則必須用 /* 和 */ 圍起來
至於在網頁使用時，必須在 head 段落以 <link> 標籤呼
叫 CSS 檔。
52
CSS 介紹與使用
使用@import匯入其它的CSS
2023/10/18
在網頁中呼叫外部 css 檔的另一種方式是使用 @import

指令，其語法如下：
@import url(css 檔的 URL);
或是
@import "css 檔的 URL";
css 檔的內容同樣是遵照先前提過的語法即可，毋須加

上 <style> 和 </style>。
但是網頁中的 @import 則必須在 head 段落的 <style> 到
</style> 之間，而且該列的結尾務必要加上分號。
53
CSS 介紹與使用
使用@import匯入其它的CSS (Cont.)
2023/10/18
在 <style>
標籤內
54
CSS 介紹與使用
在CSS檔中使用@import匯入其它的CSS
2023/10/18
當chap5-1.css 要以 @import 指令匯入 opacity.css 時，可

用
55
CSS 介紹與使用
<link> 與 @import 的差異
2023/10/18
雖然 <link> 與 @import 都是用來載入外部 css 檔，但是

兩者有以下的差異：
56
CSS 介紹與使用
模組化 CSS
2023/10/18
因為一個 HTML 檔可以載入多個 CSS 樣式檔，又

@import 的方法也可以在CSS 檔中匯入其它的CSS 檔，
因此在現代的網頁設計中會將CSS 檔分成好幾塊，使用
組合的方式完成網頁變化。
例：image.css 專門處理圖形變化；table.css 專門處理表
格變化；font.css 專門處理文字變化。若 ex1.html 需要
圖形與文字變化便可載入 image.css & font.css 即可。
57
CSS 介紹與使用
嵌入法--直接用 style 屬性插在HTML標籤
語法中 2023/10/18
這種定義方式通常都屬臨時性要改變該標籤的樣式而使
用。這種使用方式不但無法加入註解，閱讀起來也容易
讓人覺得雜亂，所以當宣告的數量較多時，最好避免使
用這種寫法。
由微軟 office 文件轉成 HTML 檔時，經常使用這方式。
<h2 style = “color:blue; FONT-FAMILY:標楷體”>

Doraemon
</h2>
58
CSS 介紹與使用
Word 產生冗長崁入式樣式
2023/10/18
59
CSS 介紹與使用
EW 設定不使用崁入式CSS
2023/10/18
[工具]→[網頁編輯器選項]→[CSS]
60
CSS 介紹與使用
不同定義方式的優先順序
2023/10/18
用標籤內嵌入式 style 屬性來定義的方式，優先權最高。

其它三種定義方式(<style> 標籤、<link>與@import)，則
是以出現的順序來決定，原則上是『後出現的宣告
設定覆蓋先前的設定』。換言之，愈晚出現的宣
告設定，優先權愈高。
61
CSS 介紹與使用
相同名稱選擇器的優先權
2023/10/18
如果同時存在 #h1，.h1 與 h1 這三種選擇器宣告時，其

順序為#h1>.h1>h1，也就是 id>class>element。
62
CSS 介紹與使用
!important 關鍵字
2023/10/18
使用者可以透過 !important關鍵字，提高樣式表的串接
順序，例如：
body {color:white; background:black !important}
一旦加上 !important關鍵字，順序將變成任何
style(!important)>id>class>element
63
CSS 介紹與使用
!important 範例
2023/10/18
Doraemon h1套用c1類別，應該是紅色。
但h1有!important, 所以 h1 顏色保留為藍色
沒有!important, 所以 h2 顏色
被c2類別選擇器取代變粉紅色
64
CSS 介紹與使用
註解符號大不同
2023/10/18
在 HTML，註解文字必須被包圍在  之間。

在 CSS，註解文字必須被包圍在 /* 和 */ 之間。
65
CSS 介紹與使用
繼承父元素的屬性值
2023/10/18
有些CSS屬性會被子元素繼承(inherit)，另外有些CSS屬
性則不會被子元素繼承，例如：
66
CSS 介紹與使用
虛擬類別選擇器
2023/10/18
CSS 提供了數個虛擬類別選擇器，用來選擇符合特定條
件的資訊或是其它簡單選擇器無法表達的資訊。
連結虛擬類別 (link pseudo-classes)
:link 和 :visited
使用者動作虛擬類別 (user action pseudo-classes)
:hover、:focus 和 :active
語言虛擬類別 (language pseudo-class)
:lang
67
CSS 介紹與使用
a 標籤後的變化
2023/10/18
超連結標籤 a 有幾個特別的CSS屬性，分別是
a:link→尚未拜訪過的連結
a:visited→拜訪過的連結
a:active→連結被滑鼠按下的當下
a:hover→連結被滑鼠經過的時侯
透過這些變化可產生與一般超連結不同的特效
68
CSS 介紹與使用
a 標籤後的變化 (範例)
2023/10/18
69
CSS 介紹與使用
:hover 用在其它選取器上
2023/10/18
:hover 可被解讀為當滑鼠移過時，它不一定用在 a 標籤
上，其它標籤都可套用。
70
CSS 介紹與使用
:lang 範例
2023/10/18
同樣是h1標籤，但語言虛擬類別
不同，其效果也不同。
適合未來寫多國語系網頁使用
71
CSS 介紹與使用
區塊(Division)
2023/10/18
一般我們編輯文件都是在一個畫面中由上往下，由左往
右的編輯。
若我們想將編輯的文件範圍有所區分時，可以使用區塊
的特色並給予一個區塊名稱。(就像新北市由29個行政
區所組成)
每一個區塊都可視為一獨立的編輯區域，可以有自已的
樣式(像背景或大小) 這標籤非常常用，幾乎
區塊使用的標籤為 <div></div> 是現代網頁必有的標籤，
代表結構化網頁的到來。
72
CSS 介紹與使用
區塊加入的方式
2023/10/18
選擇[<div>] 拖曳進入編輯區即可
通常區塊都會用 id 給個名稱(也代表它的唯一性)
73
CSS 介紹與使用
圖層(layer)
2023/10/18
圖層是區塊的一種特例，圖層使用與區塊相同的 <div>
標籤，不同的是：
配合了 CSS 的絕對座標系統，可以在網頁中任何區域出現。
(position=absolute)
可定義範圍大小(width, height)
可放在任意位置，可能會有上下層次之間的關係。(z-
index=??)
利用上述的特色，我們可以讓兩個物件使用不同的圖層
而重疊在一起。
圖層是現在網頁技術中一項常用的技術
74
CSS 介紹與使用
圖層在EW中使用方式
2023/10/18
拖曳進入編輯區
後，再依自已要
放置的位置拖移
或
放置。
75
CSS 介紹與使用
圖層範例
2023/10/18
76
CSS 介紹與使用
圖層管理
2023/10/18
由功能表區[面板] →[圖
層]打開圖層管理工具
會出現在右下方與 CSS
管理相同處的視窗內
圖層管理(Cont.)
2023/10/18
眼睛的符號表示圖層的可見
度，我們在第10章再談)。
Z 表示圖層的上下關係，數
字愈高表示愈上層。
識別碼表示圖層的識別名稱
表示可自由的在編輯內
繪製圖層
多圖層應用
2023/10/18
79
CSS 介紹與使用
圖層注意事項
2023/10/18
第一次用圖層會覺得非常好用，但在大量使用並排版
後常常會發現有跑版的問題產生；其原因為圖層事實上
是由<div> 標籤加上CSS的『絕對座標』屬性完成，而
絕對座標有其參考點(parent tag)，若參考點更改位置，
則圖層會跟著移動。
想要圖層發揮功效，CSS part 2 章節中的座標系統要好
好學。
80
CSS 介紹與使用
群組選擇器
2023/10/18
S1, S2 ,…, Sn
兩個或多個選擇器使用同
一種樣式宣告設定
本範例 h1 與 p 這2標籤使
用同一屬性
改了樣式的定義，為何沒改變？
2023/10/18
在設計網頁的過程中，若我們採用外部樣式表的作
法，可能會遇到一個問題：明明已經修改了樣式表
的內容，為何在網頁卻還是顯示舊的內容？
檢查一下是否有更靠近變化項目的樣式設定(愈靠近或愈後宣
告的會優先被使用)
『快取』（Cache）的問題
解決 cache 有以下兩種方式
強迫瀏覽器不使用快取中的檔案，重新載入所有檔案。
關閉瀏覽器的快取功能
82
CSS 介紹與使用
2023/10/18
DREAMWEAVER CSS 使用
CSS 語法增加
2023/10/18
這裏可以插入外部 CSS
及增加新的 CSS 宣告
84
CSS 介紹與使用
編輯規則
2023/10/18
85
CSS 介紹與使用
選擇屬性
2023/10/18
86
CSS 介紹與使用
套用樣式
2023/10/18
選擇要套用的區域
選擇設計好的樣
式
87
CSS 介紹與使用

Ertyu

Uploaded by

Copyright:

Available Formats

You might also like

Ertyu

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ertyu

Uploaded by

Copyright:

Available Formats

中

Last Update: 112/08/10

CSS 全名為 Cascading Style Sheets ，中文稱之樣式表。

CSS 是建立在HTML 的基礎上，用來美化網頁、進行版

CSS3 (CSS level 3)早於1999 年已開始制訂，直到2011

在 HTML 中，假設要對所有的 <h3> 標籤設定『紅色文

標籤選擇器（Tag Selector，又稱為 Element Selector）

在 head 段落中使用 <style> 標籤來定義樣式表，可說是

緊跟在 style 之後的 type=text/css 是告訴瀏覽器：「從

在輸入時, 要特別注意 <style> 標籤必須在 <head> 段落

若允許 red 類別內的 h1、h2 和 h3 等元素都能套用，則

基本上這兩種選擇器都可以用在 CSS 中做為多樣化設

在網頁中呼叫外部 css 檔的另一種方式是使用 @import

css 檔的內容同樣是遵照先前提過的語法即可， 毋須加

當chap5-1.css 要以 @import 指令匯入 opacity.css 時，可

雖然 <link> 與 @import 都是用來載入外部 css 檔，但是

因為一個 HTML 檔可以載入多個 CSS 樣式檔，又

<h2 style = “color:blue; FONT-FAMILY:標楷體”>

用標籤內嵌入式 style 屬性來定義的方式，優先權最高。

如果同時存在 #h1，.h1 與 h1 這三種選擇器宣告時，其

在 HTML，註解文字必須被包圍在  之間。

You might also like

css 檔的內容同樣是遵照先前提過的語法即可，毋須加