Contenu connexe
Plus de Eric ShangKuan (16)
Intro. to CSS
- 3. 在開始之前...
網站架構主要區分為「前端」及「後端」:
前端: 主要是呈現內容、處理使用者操作介面等。
技術: HTML, CSS, JavaScript, Flash, ... etc.
執行者: 瀏覽器
後端: 處理前端或遠端送到伺服器上的請求、連結資料庫運算
或儲存資料。
技術: PHP, ASP, Java EE, Ruby, Python, ... etc.
執行者: 伺服器
- 7. <style> 標籤
在你的 HTML 檔案中,插入 <style> 標籤來定義樣式。
<style type=quot;text/cssquot;>
h1 {
font-size: 12px;
color: blue;
}
</style>
上述定義將所有的 <h1> 標籤樣式改為:
12px 的文字大小
前景顏色改為藍色。
- 8. 除了直接寫 <style> 之外...
除了在 HTML 中直接插入一段 <style> 來改變樣式之外,也可以
另外把這些樣式的定義寫在檔案中再引入 HTML 檔案:
用 <link> 標籤引入
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;xxx.cssquot;/>
在 <style> 標籤中以 @import 引入
<style type=quot;text/cssquot;>
@import url('xxx.css');
....
</style>
- 11. 什麼是 CSS 選擇器?
既然要定義樣式,重要的是指明要定義誰?所以利用 CSS 選
擇器來選擇要被定義的對象。
目前 CSS 標準已經到版本 3,不過各瀏覽器對於 CSS 選擇器
的支援性各有不同。
Safari 3、Firefox 3 對於 CSS 3 標準目前是最好。
最多人使用的 IE 6 則是連 CSS 2.1 都支援得不太好。
選擇器皆可以組合使用。
- 13. #id 選擇器
一個 HTML 中,理論上一個 id 只會出現在一個標籤內,定義
了 #id 的樣式,被設定為該 #id 的標籤就會被套用。
定義 id 的方式:
<span id=quot;titlequot;>Chapter 1</span>
如此一來,便可以在 CSS 的定義中,以定義 #title 的方式
來改變 id 為 title 的標籤樣式:
#title {
font-size: 22px;
}
也可以寫成 span#title
- 14. .class 選擇器
不同於 id,一個 class 可以在一 HTML 檔中多次出現 ,而且同
一個標籤還可以同時套用不同的 class 。
為標籤套用 class 的方式:
<span class=quot;msg reqquot;>必填欄位</span>
在樣式定義中,則以「 .class 名稱」的方式來定義:
.req { color: red; }
.msg { font-style: italic; }
當然也可以加入標籤限定選擇。
- 16. 後代 (descendant) 選擇器
HTML 的內容會視為樹狀結構的模型,所以也可以利用標籤間的
階層關係來作選擇。
語法: elem1 elem2 { ... }
<ul> ul li {
<li>abc</li>
color: #999999;
<li>def
}
<ol>
<li>123</li>
</ol>
abc, def, 123 的顏色,都會被改
</li>
成 #999999
</ul>
因為它們都在 ul 的階層之下。
- 17. 子 (child) 選擇器
語法:elem1 > elem2 則只會選擇往下一層的元素。所以上
個例子若是寫成
ul > li {
color: #999999;
}
則只有 abc, def 的顏色會被改成 #999999。
123 是在第二層,所以沒被選擇到。
IE 系列,IE 7 才開始支援。
- 18. 鄰族 (adjacent sibling) 選擇器
語法: elem1 + elem2 { ... }
用來選擇同一階層的緊鄰在後的元素
h3 + div { color: red; }
若套用至
<h3>hello</h3>
<div>Paragraph 1</div>
<div>Paragraph 2</div>
只有 Paragraph 1 的顏色會被改成紅色。
IE系列,IE 7才開始支援此語法。
- 19. 同族 (general sibling) 選擇器
語法: elem1 ~ elem2 { ... }
CSS 3 才有的語法,不同鄰族選擇器,此選擇器會選擇同階層
中符合條件的。
上個例子中,若是用了同族選擇器,則 Paragraph 1 及
Paragraph 2 都會被改成紅色。
目前瀏覽器支援度普遍不佳(Firefox, Opera 全系列支援, Safari
3 以後支援, IE 7 雖支援但有小 bug)
- 20. 屬性 (attribute) 選擇器
語法: elem[attr op quot;valuequot;] { ... }
用標籤的屬性來選擇
input[type=quot;textquot;] {
font-family: sans-serif;
}
屬性可以不設值,則會選擇所有含有該屬性的標籤
屬性值的運算子:
= : 完全相同
~= : 含有該值
|= : 以該值為開頭,並帶有 - 的值
- 21. 假類別 (pseudo-class) 選擇器
在 CSS 中預先定義了一些類別,在選擇器後以 : 指定。
範例:
a { text-decoration: none; }
a:hover { text-decoration: underline; }
CSS2 及 CSS3 定義的假類別列表:
http://reference.sitepoint.com/css/pseudoclasses
瀏覽器支援度要注意。
- 22. 假元素 (pseudo-element) 選擇器
類似假類別,只是針對選擇標籤的特定位置。
div:after {
content: 'end';
}
假元素列表:
http://reference.sitepoint.com/css/pseudoelements
瀏覽器的支援度最差,要小心使用。不過一些排版上的困難可
以以此解決。
- 25. CSS 支援的單位
文字
px: pixel
pt: point,根據螢幕解析度決定 point 大小
cm, mm, in
pc: 1pc == 12pt
em: 字型大小
%: 百分比
色彩
#RRGGBB: 16-bit 的 RGB 值 (hex)
#RGB: 8-bit RGB 值 (hex)
rgb(r, g, b): rgb 數值
色彩名稱
- 28. 字型大小
語法: font-size: 值;
絕對大小:10px, 16px, 12pt, 15mm, etc.
相對大小:50%, 120%, 1em, 1.5em
關鍵字:
CSS2 CSS1
xx-small 5px 9px
x-small 7px 11px
small 11px 13px
medium 16px 16px
large 24px 19px
x-larg 36px 23px
xx-larg 54px 28px
- 31. 文字段落對齊、間距
語法: text-align: left | right | center | justify;
向左、向右、置中、兩邊對齊。
行高: line-height: 大小;
用來指定每行文字的間距
字距:
word-spacing: 大小;
letter-spacing: 大小;
用來指定文字之間的間隔
- 35. 背景 (續)
背景位置:
background-position: (x) (y);
位置的值可以是:
top, bottom, center, letf, right
絕對大小或相對大小
背景黏著:
background-attachment: scroll | fixed;
背景是否會跟著捲動(預設是 scroll)
- 36. 設定背景的快捷屬性
語法:
background: (color) (img) (repeat) (attachment) (position);
這個屬性彈性很高,因為各個設定的順序可以自己決定。下列的
寫法是一樣的:
div { background: url(xxx.png) #fff repeat-y left top; }
div { background: #fff url(xxx.png) left top repeat-y; }
- 39. CSS 方塊模型 (Box Model)
div {
width: 300px;
height: 200px;
padding: 10px;
border-size: 1px;
margin: 15px;
}
整個方塊的大小為 352 * 252
在 IE5.5,width/height 包含 border 及 padding,上述的方
塊會變成 330 * 230
- 40. 方塊邊緣留白
語法: margin: 上 右 下 左
margin: 2px 3px 1px 4px;
可以分別指定:
margin-top: ...
margin-right: ...
margin-bottom: ...
margin-left: ...
指定順序的記憶法:T(op)R(ight)B(ottom)L(eft)
trbl --> trouble
- 41. 方塊邊緣留白 (續)
margin 指定的效果:
上右下左全部都 2px */
margin: 2px; /*
上下 2px, 左右 3px */
margin: 2px 3px; /*
上 2px, 下 4px, 左右 3px */
margin: 2px 3px 4px; /*
讓瀏覽器自行計算留白 */
margin: auto; /*
(註:水平置中的效果)
- 42. 方塊 內留白 (padding)
語法: padding: 上 右 下 左
padding: 2px 3px 1px 4px;
可以分別指定:
padding-top: 大小;
padding-right: 大小;
padding-bottom: 大小;
padding-left: 大小;
語法與 margin 完全相同,特性也是一樣。唯一需要注意的就是
在 IE5.5 的 box model 與其它瀏覽器不同。
- 44. 邊框 -- 寬度
邊框寬度:
border-width: size {trbl};
border-top-width, border-right-width,
border-bottom-width, border-left-width
除了 絕對或相對大小數值之外,也可以使用 thin, medium,
thick 三種關鍵字。
- 46. 設定邊框的快捷屬性
語法:
border: (size) (style) (color); /* 全方向 */
border-top, border-right, border-bottom, border-left
範例:
h1 {
border: 5px double #888;
border-top: none;
border-left: none;
}
- 47. 元素呈現模式 (display)
HTML 的元素呈現樣式大致可區分為 inline 及 block 兩種
inline: 不會換行(如:a, span, img, ...)
block: 會換行(如:p, div, form...)
利用定義 display 屬性的方式可以改變元素的呈現樣式。
可以定義 display: none; 讓某元素不要顯示(也不會佔空
間)
visiblity: hidden; 則是不會顯示,但會佔空間。
除了 inline, block 之外,也有其它的值可以設定(如:
inline-block, list-item, table, ... 等)但這些值在不同瀏
覽器間差異度高,要小心使用。
- 48. 浮動 (floating)
語法: float: left|right|none;
透過設定元素的 float 屬性,將元素擺到所在 block 的左側或
右側。
利用 text-align 只是元素內的文字、圖片對齊方式,並不
是整個元素在本身 block 中的對齊方式
浮動的位置會根據 HTML 的順序而定。
如果整個 block 都是 float 的元素,那 block 不會佔有空間,所
以會有下方 block 重疊的現象。
所以要注意 block 填滿及大小計算的問題。
利用 clear 屬性。
- 50. 浮動的效果 (續)
先是文字 , 後面才擺一個 float: left
先是文字 , 後面才擺一個 float: right
- 52. 元素位置
語法: position: static | absolute | relative | fixed
用來決定元素擺放在頁面或是所在 block 中的位置。
static
預設值,根據現有的 CSS 及文件模型決定位置。
absolute
絕對位置,根據 left 及 top 的值來決定位置。
relative
將 left 及 top 的值視為位移來決定位置。
fixed
類似 absolute,不同於 absolute 的是,fixed 是相對於瀏覽器的畫面,
而 absolute 則是相對於它所在的 block。
- 57. 範例2: Box Model 的陷阱
情境: 假設有個寬度為 500px 的 div,邊框上下左右皆為 1px,裡面會有一些文字,
希望有留有 10px 的 padding。
問題: 如果這樣寫,那麼這個 div 真實的寬度會是 522px (why?)
#box {
width: 500px;
border: 1px solid black;
padding: 10px;
}
如果就要固定這個 #box 一定要是 500px,如何做?
提示:
1. 想一下 Box Model
2. 再使用一個 div 來解決。
- 58. 範例3: 請丟掉 table 排版
情境: 在同一水平線上,希望擺上三個區塊 (div),大小分別是25%,
50%, 25%。
提示:
1. 使用 float
- 59. 範例4: 固定版位
情境: 在一個 760px 的區塊中,打算採用雙欄式設計,左側 #main
為 500px,而右側的 #sidebar 為 200px,其餘空間作為留白。
提示:
1. 利用 float
2. 利用 margin
- 60. 範例5: 用背景圖片作為項目圖像
情境: 選單上有幾個選項,想要為這些選項前面加上 icon,但不得直接使
用 <img>,而是利用 css 的 background-image 來作。
問題: 因為有時 css 可能是放在網路上的某個位址,不一定跟網頁在同
一位址,若換 theme 時,採用此法較為方便。
提示:
1. background-image 的 repeat 及 位置
2. 選項的 padding