(Cascading Style Sheet)
參考：
CSS語法使用的方法
CSS語法包含 selector、property、value 三個部分。實際的用法如下：
如果要指定多個 selector 和 property ，格式如下：
{
property1: value1;
property2: value2;
property3: value3
}
即 selector中間以逗號隔開，而property以分號隔開。
也可以用下列的方式表示：
Note! value中的數值與單位不可以有空格。所以應該寫成 20px ，而不是 20 px 。
CSS語法使用的位置
外部
如果一份CSS需要套用到多個頁面，則外部CSS是最適合的。此時需使用 標籤，使用方法如下：
<head> <link rel="stylesheet" type="text/css" href="CSSLINK.css" /> </head>
內部
如果這份CSS是這份文件獨有的，那麼可以使用 <style> 標籤。
<head> <style type="text/css"> CSS RIGHT HERE </style> </head>
行間
<p style="margin-left: 20px"> This is a paragraph </p>
CSS selector
你想要定義樣式的HTML元素或標籤。
基本selector
將樣式套用到一般的HTML元素上。
Class Selector
將樣式套用到類別上。使用方式：.CLASSNAME {...};（也就是在CLASSNAME前加上 . ）
會使用類別，是因為想對於相同的HTML元素有不同的樣式，於是給予相同的元素不同的類別。例如，在HTML語法中，我們想要給予不同的段落不同的對齊方式，於是，先定義不同的段落：
<p class="right"> 向右對齊的段落 </p> <p class="center"> 置中的段落 </p>
而後，在CSS中如此宣告：
p.center {text-align: center}
即可達成我們想要的效果。
當然，我們也可以直接定義一個叫做 center的 class：
則不管是標題或段落皆可使用。
Pseudo-Class Selector
<a> 標籤（連結標籤）的變化。
| a:link | 未使用過的連結 |
| a:visited | 使用過的連結 |
| a:hover | 當游標移動到連結上方 |
| a:active | 點下連結的時候 |
active放在最後，優先權高於前三項
Contextural Selector
依據關聯選擇標籤。而關聯，則表示包含於這個標籤的其他標籤。參考前面的 Class Selector部分有範例。
ID selector
類似於class，但是是一個特定的標籤，也就是這個ID只能使用在一個元素上。使用方式：#IDNAME { };
CSS property
指定樣式的效果。
文字樣式
使用 font-size 來改變文字大小。
最好能讓使用者切換文字大小。如果使用絕對單位決定字體大小，最好具有樣式表切換工具。
- 字體大小的單位：
| 單位符號 | 對應單位 | 附註 |
| pt | points | 1 point = 1/72 inch 所以是列印的單位，應避免使用這些單位來設計網站。 |
| pc | Pica | 同pt，為列印單位。 |
| px | Pixel | 雖然容易達到一致的效果，但會影響文件親和力。 |
| em | Em | 1 em = M在預設字體大小中的高度 |
| ex | ex | 1 ex = x在預設字體大小中的高度 |
| % | 百分比 | 以使用者的字體大小做基準 |
- 關鍵字：
- 絕對關鍵字
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- 相對關鍵字
- larger
- smaller
文字字形
使用 font-family 。常見的（英文）字形：
- serif
- sans-serif
- monospace
- cursive
- fantasy
連結文字顯示
使用 text-decoration。
可以設定的屬性包括：
| underline | （預設值）底線 |
| none | 沒有連結底線 |
| overline | 頂線 |
| line-through | 刪除線 |
| blink | 閃爍（不推薦使用） |
Note! 底線是連結的慣例格式，所以一般情況下不建議移除。
Tips! 如果想要做出虛線的連結方式，可以使用下列的語法：
...
text-decoration:none; /*去除原先底線*/
margin-bottom: 1px dotted #COLOR; /*用margin方式產生底線*/
會隨游標變色的連結
使用 :hover 與 :active 這些 pseudo-class 。可以改變 color 或 background-color 的顏色，甚至其他屬性。
Note! pseudo-class的宣告順序： link, visited, hover, active. 一個簡易的口訣： LoVeHAte 。
CSS與圖片
圖片邊框
img {
border-swidth: 1px;
border-style: solid;
border-color: #000000;
}
img { border: 1px solid #000000;}
而 border:none; 可以將HTML中的連結藍框去除。
背景圖片
body {
background-image: url(背景圖片網址); /*背景圖片*/
background-repeat: no-repeat; /*背景圖片重複設定*/
background-position: top right; /* 背景圖片位置 */
}
background-repeat可用值：
| no-repeat | 不重複排列 |
| repeat | 圖片重複填滿頁面 |
| repeat-x | 圖片水平重複排列 |
| repeat-y | 圖片垂直重複排列 |
background-position可用值：
- 關鍵字（先垂直、後水平），如果只宣告一個值，另一個會使用 center（預設值）。
- 垂直： top / center / bottom
- 水平： left / center / right
- 百分比（先水平、後垂直）
- 從左上角開始計算。
- 0% 0% 會將圖片左上角與視窗左上角切齊
- 100% 100% 會將圖片右下角與視窗右下角切齊。
- 指定一個值，則另一個預設值為 50% 。
- 長度單位（先水平、後垂直）
- 從左上角開始計算。
顏色
有16個合法的預定義顏色名字。它們是：aqua（水綠）、black（黑）、blue（藍）、fuchsia（紫紅）、gray（灰）、green（綠）、lime（淺綠）、maroon（褐）、navy（深藍）、olive（橄欖）、purple（紫）、red（紅）、silver（銀）、teal（深青）、white（白）和yellow（黃）。透明transparent也是一個合法值。
邊框和補白
盒狀模型
無聊人的無聊小站 - 完全W3C手冊 - HTMLDog指南 - CSS初級指南 - 邊界和補白：
位置 (position)
控制元素的位置。
參考：Learn CSS Positioning in Ten Steps: position static relative absolute float
參數：
- static:最基本的樣式。元素在原本該在的位置。（html順序）
- relative:移動元素到與前者相對的位置。top/bottom/left/right: 移動元素多少？
- absolute: 在網頁上的絕對位置。top/bottom/left/right。IE bug。
- float: 浮動。類似文繞圖效果。
list
if want to change the second layer of the list, use css as:
.div ul ul {
...
}
notice: when setting the second layer, it is padding not margin change the space of list, because it's the element "inside" the second layer.
| 回到最上面 |
Page Information
|
Wiki Information |
Recent PBwiki Blog Posts |
Create your own free wiki!