13 ，CSS 入門基礎
1.認識 CSS
2.傳統 HTML 設計網頁版面的缺點
3.CSS 的特點
4.CSS 的排版樣式
13.1 認識CSS
CSS的英文全名是 Cascading Style Sheets,中文可翻譯為串接式排版樣式,並且 CSS2規範
也於 1998 年 02 月通過 W3C 的審核與推薦,所以 CSS 並不是專為 XHTML 所設計的,CSS 還
可以被其他標記語言拿來制作排版樣本,如 HTML,XML 文件都可以應用 CSS,來美化網頁的
設計,大家如果學會 CSS,在 HTML,XHTML,XML 文件中都可以使用.
13.2 傳統 HTML 設計網頁版面的缺點
使用傳統
並非完全著眼在網頁排版的功能上,而這對 XHTML 而言更是如此,因為 XHTML 有意將原先
HTML 中有關網頁版面的標記或屬性遺棄不用,如<font>,<center>,color,background,bgcolor 等
等,所以對 XHTML 文件而言,其排版與顯示的功能比 HTML 文件更弱,所以使用 XHTML 來
設計網頁更需要搭配 CSS 排版樣本.
13.3 CSS 的特點
HTML 排版時的缺點:
設置麻煩,修改麻煩,功能嚴重不足.
CSS 樣式排版的優點:
排版屬性功能完整,排版文件可以獨立存在,可以共用排版文件
CSS 樣式排版的分類:
內行排版樣式,,內嵌式排版樣式,,鏈接式排版
13.4 CSS 的排版樣式
行內排版樣式:
格式:<標記名稱 style=”屬性 1:屬性值 1;屬性 2:屬性值 2”>…</標記名稱>
例 :<p style= ”font-size:20pt;color:red;text-align:center”>排版樣式</p>
排版專用標記:<div>與<span>
這兩個標簽都是用來設置涵蓋一個區塊為主
沒有一樣,則<span> 與</span>該數據顯示前後都不會跳行.
內嵌式排版樣本:
內嵌式排版中所有的樣式定義都必須在<style>..</style>之間,而<style>..</style>又
必須在<head>..</head>之間.
與其功能,又可以分為三種,
1. 標記定義型
2. class 定義型
3. id 定義型
標記定義型格式:
<head>
<style type=”text/css”>
標記名稱{屬性 1:屬性值 1;屬性 2:屬性值 2;}
標記名稱{屬性 1:屬性值 2;屬性 2:屬性值 2;}
</style>
</head>
<body>
<標記名稱>…</標記名稱>
</body>
class 定義型格式:
<head>
<style type=”text/css”>
.定義名稱{屬性 1:屬性值 1;屬性 2:屬性值 2;}
.定義名稱 1,.定義名稱 2{屬性 1:屬性值 1;屬性 2:屬性值 2;}
</style>
</head>
<body>
<標記名稱 class=”定義名稱”>…</標記名稱>
</body>
id 定義型格式:
<head>
<style>
#定義名稱{屬性 1:屬性值 1;屬性 2:屬性值 2;}
#定義名稱 1,#定義名稱 2{屬性 1:屬性值 1;屬性 2:屬性值 2;}
</style>
</head>
<body>
<標記名稱 id=”定義名稱”>…</標記名稱>
</body>
“行內”和”內嵌式”排版定義的優先級:
CSS 規定,範圍越小,優先級越高.
由小到大排列:
1. 行內
2. class 和 id 定義型
3. 標記定義行
id 的優先級高於 class 級.
外部排版樣式定義:
獨立的樣式排版:
標記名稱{屬性 1:屬性值 1;屬性 2:屬性值 2;}
.定義名稱{屬性 1:屬性值 1;屬性 2:屬性值 2;}
在<head>…</head>之間使用<link>
格式:
<head>
<link rel=”stylesheet” type=”text/css” href=URL />
</head>
在<head>…</head>之間使用 import
格式：
<head>
<style type="text/css">
@import "style.css"
</style>
</head>
CSS 行內排版內嵌式排版和外部排版樣式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style type="text/css"> p{ color:red; font-size: 40px; } .abc{color: green;} #def{color: orange;} </style> </head> <body> <p style="text-align: center;color: red;font-weight: bold;background-color: yellow;">我是行內排版樣式：格式:<標記名稱 style=”屬性 1:屬性值 1;屬性 2:屬性值 2”>…</標記名稱></p> <div style="background: red">我DIV是一個區塊,我要站一行</div><br/> <span style="text-align: center;color: red;font-weight: bold;background-color: yellow;">我SPAN是內聯，我不占一行</span> <!--排版專用標記:<div>與<span> 這兩個標簽都是用來設置涵蓋一個區塊為主.區塊就是表示一行 以上的數據 .如果 沒有一樣,則<span> 與</span>該數據顯示前後都不會跳行. 內嵌式排版樣本: 內嵌式排版中所有的樣式定義都必須在<style>..</style>之間,而<style>..</style>又 必須在<head>..</head>之間. 與其功能,又可以分為三種, 1. 標記定義型 2. class 定義型 3. id 定義型 --> <p id="def">我是id 定義型,我是使用一次的，我對應的是 #號定義的內容</p> <p class="abc">我是class 定義型，我可以多次使用，我對應的是.號定義的內容</p> <p class="abc">我是class 定義型，我可以多次使用，我對應的是.號定義的內容2</p> <p class="abc">我是class 定義型，我可以多次使用，我對應的是.號定義的內容3</p> <Pre>“行內”和”內嵌式”排版定義的優先級: CSS 規定,範圍越小,優先級越高. 由小到大排列: 1. 行內 2. class 和 id 定義型 3. 標記定義行 id 的優先級高於 class 級.</Pre> <!-- 外部排版樣式定義: 獨立的樣式排版: 標記名稱{屬性 1:屬性值 1;屬性 2:屬性值 2;} .定義名稱{屬性 1:屬性值 1;屬性 2:屬性值 2;} 在<head>…</head>之間使用<link> 格式: <head> <link rel=”stylesheet” type=”text/css” href=URL /> </head> 在<head>…</head>之間使用 import 格式： <head> <style type="text/css"> @import "style.css" </style> </head> --> </body> </html>
13 ，CSS 入門基礎