CSS


(Cascading Style Sheet)

參考：

 

  1. CSS語法使用的方法
  2. CSS語法使用的位置
    1. 外部
    2. 內部
    3. 行間
  3. CSS selector
    1. 基本selector
    2. Class Selector
    3. Pseudo-Class Selector
  4. CSS property
    1. 文字樣式
    2. 文字字形
    3. 會隨游標變色的連結
    4. CSS與圖片
    5. 顏色
    6. 邊框和補白
    7. 位置 (position)
    8. list

CSS語法使用的方法

CSS語法包含 selector、property、value 三個部分。實際的用法如下：

selector {property: value}

如果要指定多個 selector 和 property ，格式如下：

selector1, selector2, selector3

{

property1: value1;

property2: value2;

property3: value3

}

即 selector中間以逗號隔開，而property以分號隔開。

也可以用下列的方式表示：

selector1, selector2, selector3 { property1: value1; property2: value2; property3: value3 }

 

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.right {text-align: right}

p.center {text-align: center}

即可達成我們想要的效果。

 

當然，我們也可以直接定義一個叫做 center的 class：

.center {text-align: center}

則不管是標題或段落皆可使用。

 

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 來改變文字大小。

最好能讓使用者切換文字大小。如果使用絕對單位決定字體大小，最好具有樣式表切換工具。

單位符號對應單位附註
ptpoints1 point = 1/72 inch 所以是列印的單位，應避免使用這些單位來設計網站。
pcPica同pt，為列印單位。
pxPixel雖然容易達到一致的效果，但會影響文件親和力。
emEm1 em = M在預設字體大小中的高度
exex1 ex = x在預設字體大小中的高度
%百分比以使用者的字體大小做基準

Note! 使用相對大小單位會從母元素繼承初始大小。

 

文字字形

使用 font-family 。常見的（英文）字形：

 

連結文字顯示

使用 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可用值：

 

顏色

有16個合法的預定義顏色名字。它們是：aqua（水綠）、black（黑）、blue（藍）、fuchsia（紫紅）、gray（灰）、green（綠）、lime（淺綠）、maroon（褐）、navy（深藍）、olive（橄欖）、purple（紫）、red（紅）、silver（銀）、teal（深青）、white（白）和yellow（黃）。透明transparent也是一個合法值。

 

邊框和補白

盒狀模型

無聊人的無聊小站 - 完全W3C手冊 - HTMLDog指南 - CSS初級指南 - 邊界和補白：

Margin box（邊界盒）

Border box（邊框盒）

Padding box（補白盒）

Element box（元素盒）

 

位置 (position)

控制元素的位置。

參考：Learn CSS Positioning in Ten Steps: position static relative absolute float

參數：

clear:both ：回到原來位置。

 

 

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.

回到最上面