| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

View
 

CSS

Page history last edited by Reder 12 years ago

(Cascading Style Sheet)

參考:

 



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在預設字體大小中的高度
%百分比以使用者的字體大小做基準
  • 關鍵字:
    • 絕對關鍵字
      • xx-small
      • x-small
      • small
      • medium
      • large
      • x-large
      • xx-large
    • 相對關鍵字
      • larger
      • smaller

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

 

文字字形

使用 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初級指南 - 邊界和補白

Margin box(邊界盒)

Border box(邊框盒)

Padding box(補白盒)

Element box(元素盒)

 

位置 (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: 浮動。類似文繞圖效果。

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.

回到最上面

 


Comments (0)

You don't have permission to comment on this page.