CSS 語法教學 - 1Keydata

CSS 語法教學

﻿

CSS 的全名為 Cascading Style Sheets，是一種樣式表 (Stylesheet) 語言。它的目的是為了對像 XHTML 及 HTML 之類的標記語言 (markup language) 提供一個顯示層。有了 CSS，我們就可以將資料層及顯示層分開：HTML 文件就只包括資料，而 CSS 則是告訴瀏覽器這些資料應該要如何顯現出來。

在不久前，只有站長需要懂得 CSS。可是，現在由於個人部落格的興起，CSS 已成為了一個眾人須知的電腦語言。無論您是自己設站寫部落格，或是您是利用 BSP (如無名、天空、Pixnet、Xuite、Blogger、及 Wordpress 等)，甚至您已經從網路上CSS無名樣式分享的網站找到了您想要的 CSS 樣式，您都很有可能需要修改一下 CSS ，這樣子才能夠讓您的部落格有自己的特色。這個 CSS 語法教學，正是學習基礎 CSS 最佳的地方。

這個 CSS 語法教學分為以下三個部分：

  • 基礎概念: 討論 CSS 的基礎概念，包括 語法、套用方式、串連的概念、繼承、Class 與 ID 選擇器、以及div 與 span 選擇器。
  • 屬性: 討論常用到的 CSS 屬性。
  • CSS 樣式: 列出所有在這個教學中有提到的 CSS 屬性。

在您完成這個教學後，您將會了解 CSS 的基本概念，同時可以利用常見的 CSS 屬性來改變您網站的外觀。不論您是個經驗豐富的站長，或是才剛開始寫您第一個部落格，本站將會對您有很大的幫助。

請您現在將這個網站 加入『我的最愛』，以便以後隨時可以回來查詢。也請您 由這裡 來開始學習 CSS！

下一頁： CSS 語法

Copyright © 2014 1keydata.com 版權所有

CSS 語法教學
CSS 語法
CSS 套用方式
CSS 媒體類別
CSS 串接
CSS 繼承
CSS Class 與 ID
CSS Div 與 Span
CSS 長度單位

CSS 盒子模式
CSS 邊界 (Margin)
CSS 邊框 (Border)
CSS 留白 (Padding)
CSS 背景 (Background)
CSS 顏色
CSS 字體
CSS 連接
CSS 清單 (List)
CSS 表格 (Table)
CSS 位置 (Position)
CSS 文字 (Text)
CSS 浮動 (Float)
CSS 清除 (Clear)
CSS 滑鼠游標圖案

CSS 樣式


CSS 套用方式 - 1Keydata CSS 語法教學

CSS 套用方式

﻿
CSS 教學 > CSS 套用方式

我們可以用以下四種方式，將 CSS 套用入 HTML 文件中：

  • 行內套用 (Inline)
  • 嵌入套用 (Embed)
  • 外部連接套用 (External Link)
  • 匯入套用 (Import)

    行內套用

    我們可以在 HTML 文件內直接宣告樣式。舉例來說，

    <p style='font-family:verdana; font-size:16;'>This is font size 16.</p>

    以上的 HTML 文件在瀏覽器上會顯現為：

    This is font size 16.

    嵌入套用

    樣式可以嵌入於 HTML 文件中 (通常是在 <head> 內)。舉例來說，

    <head>
    <style type="text/css">
    div {
    background-color:#FF0000;
    }
    </style>
    </head>

    <body>
    <div>
    背景顏色是紅色
    </div>
    </body>

    以上的 HTML 會顯現出：

    背景顏色是紅色

    外部連接套用

    在這種方式下，所有的 CSS 樣式宣告都是存在另外一個檔案中。該檔案通常名稱為 .css。在 HTML 文件的 <header> .. </header> 之中，我們將用以下的程式碼將這個 .css 檔案連接進入：

    <link rel=stylesheet type="text/css" href="external-stylesheet.css">

    以上這一行會將在 external-stylesheet.css 這個檔案內所宣告的樣式加入 HTML 文件內。

    匯入套用

    外部的 CSS 樣式也可以被匯入進 HTML 文件。匯入的做法為利用 @import 這個指令。@import 的語法為：

    <STYLE TYPE="text/css">
    <!--
    @import url(http://www.mysite.com/style.css);
    -->
    </STYLE>

    @import 指令最初的用意，是為了能夠針對不同的瀏覽器而運用不同的樣式。不過，現在已經沒有這個必要。現在用 @import 的目的，最常是要加入多個 CSS 樣式。當多個 CSS 樣式被 @import 的方式加入，而不同 CSS 樣式互相有衝突時，後被加入的 CSS 樣式有優先的順位 (詳情請見 CSS 串接)。

    下一頁： CSS 媒體類別

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)
    CSS 表格 (Table)
    CSS 位置 (Position)


CSS 背景屬性 (Background) - 1Keydata CSS 語法教學

CSS 背景屬性

﻿
CSS 教學 > 背景屬性

在 CSS 中常見的背景 (background) 屬性有以下幾種：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

    每一個屬性在以下會有詳細地介紹：

    background-color

    background-color 屬性是用來指定背景的顏色。

    CSS 樣式 顯現結果

    p {background-color: 00FF00;}

    綠色背景

    p {background-color: red;}

    紅色背景

    background-image

    background-image 屬性是用來指定用什麼圖案來當做背景。

    CSS 樣式 顯現結果

    p {background-image:url(yp.jpg);}

    有背景圖案

    background-repeat

    background-repeat 屬性是用來指定背景圖案重不重複。預設值是 "repeat"，代表此背景圖案將在 x- 及 y-方向都會重覆。其他的值為 x-repeat (x-方向重複)、y-repeat (y-方向重複)、以及 no-repeat (不重複)。

    舉例如下：

    CSS 樣式 顯現結果

    p {
    background-image:url(yp.jpg);
    background-repeat: no-repeat;
    }

    背景圖案不重複。

    p {
    background-image:url(yp.jpg);
    background-repeat: repeat-x;
    }

    背景圖案在 x-方向重複。

    p {
    background-image:url(yp.jpg);
    background-repeat: repeat-y;
    }

    背景圖案在 y-方向重複。

    p {
    background-image:url(yp.jpg);
    background-repeat: repeat;
    }

    背景圖案在 x- 及 y-方向重複。

    background-attachment

    background-attachment 屬性是用來指定背景圖案是否在螢幕上固定。這個屬性可能的值為 "fixed" (當網頁捲動時，背景圖案固定不動) 以及 "scroll" (當網頁捲動時，背景圖案會跟著移動)。

    以下是兩個例子：
    body {background-attachment: fixed;
    background-image: url("yp.jpg");
    background-repeat: no-repeat;
    }     		body {background-attachment: scroll;
    background-image: url("yp.jpg");
    background-repeat: no-repeat;
    }

    background-position

    background-position 屬性是用來指定背景圖案的位置。它的值可以是：

    • 兩個字：第一個字為 [top,center,bottom] 中三選一，而第二個字由 [left,center,right] 中三選一。
    • 兩個百分比：第一個百分比為 x-軸的百分比，第二個為 y-軸的百分比。
    • 兩個數目：第一個數目為 x-軸的位置，第二個數目為 y-軸的位置。

    舉例如下：
    body { background-image: url("yp.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    }     		body { background-image: url("yp.jpg");
    background-repeat: no-repeat;
    background-position: 20% 20%;
    }

    下一頁： CSS 顏色

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)
    CSS 表格 (Table)


CSS 邊框 (Border) - 1Keydata CSS 語法教學

CSS 邊框

﻿
CSS 教學 > 邊框

在 CSS 中常見的邊框 (border) 屬性有以下幾種：

  • border-style
  • border-width
  • border-color
  • border-top-, border-left-, border-bottom-, border-right-
  • border

    border-style

    border-style 屬性指定邊框的樣式。以下的表格列出這個屬性可能有的值，以及每一個值顯現出來的結果。

    CSS 樣式 顯現結果

    p {border-style:solid;}

    實線

    p {border-style:dashed;}

    虛線

    p {border-style:double;}

    雙線

    p {border-style:dotted;}

    點線

    p {border-style:groove;}

    凹線

    p {border-style:ridge;}

    凸線

    p {border-style:inset;}

    嵌入線

    p {border-style:outset;}

    浮出線

    border-width

    border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或是一個數字。

    CSS 樣式 顯現結果

    p {border-width:9px; border-style:solid;}

    邊框寬度為 9px

    p {border-width:medium; border-style:dashed;}

    邊框寬度為中等

    border-color

    border-color 屬性是用來設定邊寬的顏色。

    舉例如下：

    CSS 樣式 顯現結果

    p {border-color:#0000FF; border-style:solid;}

    藍色邊框

    p {border-color:red; border-style:dotted;}

    紅色邊框

    border-top-, border-left-, border-bottom-, border-right-

    我們可以將方向 (top - 上、bottom - 下、left - 左、right - 右) 和樣式、寬度、及顏色合起來而成為一個屬性。舉例來說， border-top-style 屬性就是用來設定上邊框的樣式。 以下舉幾個例子：

    CSS 樣式 顯現結果

    p {border-top-style:solid; border-bottom-style:dotted;}

    例1：上邊框為實線，下邊框為點線

    p {border-top-style:solid; border-top-width:medium;}

    例 2：上邊框為實線，且寬度中等

    p {border-left-style:solid; border-bottom-style:dashed;
    border-bottom-color:#00FF00;}

    例3：左邊框為實線，下邊框為虛線，且顏色為綠色

    border

    若四邊的邊框屬性都一樣，那我們可以用一個 border 屬性來描述，而不必四個邊都描述一次。另外，我們可以在同一行一次宣告邊框樣式、邊框寬度、以及邊框顏色。

    舉例來說，若我們有以下的 CSS 碼，

    p {
    border:#0000FF 5px solid;
    }

    那以下的 HTML，

    <p>用一行來宣佈所有邊框的屬性</p>

    會顯現出

    用一行來宣佈所有邊框的屬性

    下一頁： CSS 留白

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)


CSS 盒子模式 - 1Keydata CSS 語法教學

CSS 盒子模式

﻿
CSS 教學 > 盒子模式

盒子模式 (box model) 是在 CSS 中一個很重要的觀念。它是用來描述一個元素是如何組成的。以下是盒子模式的式樣：

在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。

相關的 CSS 指令為 margin、border、以及 padding。在下面的三頁我們會一一介紹。

下一頁： CSS 邊界

Copyright © 2014 1keydata.com 版權所有

CSS 語法教學
CSS 語法
CSS 套用方式
CSS 媒體類別
CSS 串接
CSS 繼承
CSS Class 與 ID
CSS Div 與 Span
CSS 長度單位

CSS 盒子模式
CSS 邊界 (Margin)
CSS 邊框 (Border)
CSS 留白 (Padding)
CSS 背景 (Background)
CSS 顏色
CSS 字體
CSS 連接
CSS 清單 (List)


CSS 串接 - 1Keydata CSS 語法教學

CSS 串接

﻿
CSS 教學 > 串接

CSS 的全名為 Cascading Style Sheets。如果只有一個樣式表，那『串接』(cascade) 這個部分就不重要。若一個 HTML 文件中包含有多個樣式表，那串接這個概念就非常重要了。

串接是指當不同樣式表中對相同屬性有不同定義時，應該要用哪一個樣式表中的定義的規則。

最基本的規則是，越接近 HTML 本身的樣式越有優先權。因此，內行套用的樣式通常會有最高的優先權，因為它最接近 HTML 的元素。接下來的是嵌入套用的樣式表；這一類的樣式表是在 <head> 內宣告的。再下來是匯入套用的樣式表。若有多個樣式表被匯入，越後被匯入的越有優先權。優先權最低的是外部連接套用的樣式表。若有多個外部樣式表被連接，越後被匯入的越有優先權。

另外，每一個瀏覽器也都有自己的樣式表 (這就是為什麼超連接文字通常會是藍色，而且下面有一條線)。這一類的樣式表優先權比以上的幾種都低。

所以，從最高優先權到最低優先權的排名如下：

  • 內行套用的樣式表 (Inline stylesheet)
  • 嵌入套用的樣式表 (Embedded stylesheet)
  • 匯入套用的樣式表 (Imported stylesheet)
  • 外部連接套用的樣式表 (Linked stylesheet)
  • 瀏覽器本身的樣式表 (Browser's own stylesheet)

下一頁： CSS 繼承

Copyright © 2014 1keydata.com 版權所有

CSS 語法教學
CSS 語法
CSS 套用方式
CSS 媒體類別
CSS 串接
CSS 繼承
CSS Class 與 ID
CSS Div 與 Span
CSS 長度單位

CSS 盒子模式
CSS 邊界 (Margin)
CSS 邊框 (Border)
CSS 留白 (Padding)
CSS 背景 (Background)
CSS 顏色
CSS 字體
CSS 連接
CSS 清單 (List)


CSS Class 與 CSS ID - 1Keydata CSS 語法教學

CSS Class 與 CSS ID

﻿
CSS 教學 > CSS Class 與 CSS ID

在 CSS 語法那一頁中, 我們有提到，Class 及 ID 都是使用者設定的選擇器 (selector)。以下分別介紹：

Class

Class 的宣告法，是先放一個句點 (.)，之後再列出選擇器名稱。設定一個 Class 選擇器的語法如下：

.【Class 名稱】{
屬性：設定值；
...
}

舉例來說，

.navbar {
color:#0000FF;
}

要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼：

<p class="navbar">這是用 Class 選擇器的例子。</p>

以上的 HTML 碼會顯現出：

這是用 Class 選擇器的例子。

一個 Class 選擇器可以同時有好幾個不同的物件 (instance)。這是靠以下的語法：

【型類選擇器】.【選擇器名稱】{
屬性：設定值；
...
}

舉例來說，若有以下的 CSS 宣告，

b.special {
color:#0000FF;
}

i.special {
color:#FF0000;
}

以下的 HTML 碼，

這個例子顯示出 <b class="special">同一個選擇器</b>可以<i class="special">有不同的 instance。</i>.

就位顯現出，

這個例子顯示出同一個選擇器可以有不同的 instance。.

多重 Class

我們也可以同時套用數個 class。舉例來說，若我們有以下的 CSS 宣告，

.applylarge {
font-size:20px;
}

.applyred {
color:#FF0000;
}

那以下的 HTML 碼，

<p class="applylarge applyred">這是多重 Class 的例子。</p>

就會顯現出，

這是多重 Class 的例子。

ID

ID 的宣告法，是先放一個井字號 (#)，之後再列出選擇器名稱。設定一個 ID 選擇器的語法如下：

#【ID 名稱】{
屬性：設定值；
...
}

舉例來說，

#footer {
color:#FF00FF;
}

要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼：

<p id="footer">這是用 ID 選擇器的例子。</p>

顯現出的結果為，

這是用 ID 選擇器的例子。

Class 跟 ID 的比較

這兩者最大的不同，是在於 ID 選擇器在一個 HTML 文件中只能被使用一次，而 Class 選擇器在一個 HTML 文件中可以被使用多次。第二個不同的地方，是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用，而 Class 選擇器無法被 Javascript 運用到。

並沒有什麼固定的規則，來決定什麼時候要用 ID 及什麼時候要用 Class。我們的建議是盡量用 Class，因為這樣子最靈活 (同一個 HTML 文件可以利用這類的選擇器多次)。唯一的例外，是當你要用 Javascript 的 GetElementByID 函數時。在這個情況下，你就應該要用 ID。

Class 名稱及 ID 名稱都是對大小寫敏感的。舉例來說，.classone 及 .ClassOne 是代表兩個不同的 Class 選擇器。

下一頁： CSS Div 與 CSS Span

Copyright © 2014 1keydata.com 版權所有

CSS 語法教學
CSS 語法
CSS 套用方式
CSS 媒體類別
CSS 串接
CSS 繼承
CSS Class 與 ID
CSS Div 與 Span
CSS 長度單位

CSS 盒子模式
CSS 邊界 (Margin)
CSS 邊框 (Border)
CSS 留白 (Padding)
CSS 背景 (Background)
CSS 顏色
CSS 字體
CSS 連接
CSS 清單 (List)


CSS 清除 (Clear) - 1Keydata CSS 語法教學

CSS 清除

﻿
CSS 教學 > Clear

clear (清除) 屬性是用來抵銷 float 屬性的作用。可能的值為：

  • left：消除左邊的浮動。
  • right：消除右邊的浮動。
  • both：消除左邊及右邊的浮動。
  • none：不消除任何一邊的浮動。

    來看一下從 float 那一頁稍作修改的例子：

    CSS 宣告：

    #leftfloat {
    float:left;
    }

    #clearleft {
    clear:left;
    }

    以下的 HTML 碼，

    <span id="leftfloat"><img src="yp.jpg"></span>這個例子<span id="clearleft">展現出 clear:left 能夠抵銷 float 屬性的值。</span>

    就會顯現出，

    這個例子展現出 clear:left 能夠抵銷 float 屬性的值。

    在上面的例子中，一但 clear:left 的樣式被用上，float:left 就不再有作用。也就因為這樣，在 clear:left 樣式後的所有文字都是在圖案之下。

    下一頁： CSS 滑鼠游標圖案

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)


CSS 樣式 - 1Keydata CSS 語法教學

CSS 樣式

﻿
CSS 教學 > CSS 樣式

這一頁將依照字母順序，來列出所有在這個 CSS 教學中出現的 CSS 屬性。若您有興趣對某一個屬性有更深入的了解，請點選該屬性的連接。

  • a:active
  • a:hover
  • a:link
  • a:visited
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
  • border
  • border-bottom-
  • border-collapse
  • border-color
  • border-left-
  • border-right-
  • border-style
  • border-top-
  • border-width
  • bottom
  • clear
  • color
  • cursor
  • direction
  • float
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • overflow
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • position
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-transform
  • top
  • word-spacing
  • z-index

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)
    CSS 表格 (Table)
    CSS 位置 (Position)
    CSS 文字 (Text)
    CSS 浮動 (Float)
    CSS 清除 (Clear)
    CSS 滑鼠游標圖案

    CSS 樣式


CSS 顏色 - 1Keydata CSS 語法教學

CSS 顏色

﻿
CSS 教學 > 顏色

color (顏色) 屬性能讓我們在 CSS 中設定一個元素的顏色。

這個屬性可以有以下三類的設定值：

  • 十六進位值
  • RGB 碼
  • 顏色名稱

    color 屬性的語法如下：

    十六進位值:

    {color:#XXXXXX;}

    X 為十六進位碼 (從 0 到 9，以及 A 到 F)。

    RGB:

    {color:rgb(X,Y,Z); } X、Y、和 Z 都是介於 0 和 255 之間的數字。
    或是
    {color:rgb(X%,Y%,Z%); } X、Y、和 Z 都是介於 0 和 100 之間的數字。

    顏色名稱:

    {color:[顏色名稱];}

    十六進位值是一個以六碼 (如果前兩碼、中間兩碼、以及最後兩碼都一樣的話，那也可以以三碼的形式表現。舉例來說，#FFF 及 #FFFFFF 都是代表白色) 來設定顏色。這一個 十六進位碼顏色表 可以讓我們知道什麼碼會對應到什麼顏色。

    在這裡，我們就以上三種方式各舉一個例子：

    CSS 樣式 顯現結果

    p {color:#FF0000;}

    FF0000 代表紅色。

    p {color:rgb(255,0,255);}

    rgb(255,0,255) 是粉紅色。

    p {color:green;}

    這是綠色。

    下一頁：CSS 字體

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)


CSS 滑鼠游標圖案 - 1Keydata CSS 語法教學

CSS 滑鼠游標圖案

﻿
CSS 教學 > 滑鼠游標圖案

在某些網站上，我們會看到不同的滑鼠游標圖案。這是由 cursor 屬性來設定的。

以下列出一些常見的滑鼠游標圖案，以及它們設定的方式 (請將滑鼠置於顯現結果的欄位，您將可以看到該滑鼠游標的圖案)：

CSS 樣式 | 顯現結果
{ cursor: crosshair; } | 滑鼠游標圖案是 crosshair
{ cursor: pointer; } | 滑鼠游標圖案是 pointer
{ cursor: text; } | 滑鼠游標圖案是 text
{ cursor: move; } | 滑鼠游標圖案是 move
{ cursor: wait; } | 滑鼠游標圖案是 wait
{ cursor: help; } | 滑鼠游標圖案是 help
{ cursor: progress; } | 滑鼠游標圖案是 progress
{ cursor: not-allowed; } | 滑鼠游標圖案是 not-allowed
{ cursor: no-drop; } | 滑鼠游標圖案是 no-drop
{ cursor: no-vertical-text; } | 滑鼠游標圖案是 no-vertical-text
{ cursor: all-scroll; } | 滑鼠游標圖案是 all-scroll
{ cursor: col-resize; } | 滑鼠游標圖案是 col-resize
{ cursor: row-resize; } | 滑鼠游標圖案是 row-resize
{ cursor: e-resize; } | 滑鼠游標圖案是 e-resize
{ cursor: ne-resize; } | 滑鼠游標圖案是 ne-resize
{ cursor: n-resize; } | 滑鼠游標圖案是 n-resize
{ cursor: nw-resize; } | 滑鼠游標圖案是 nw-resize
{ cursor: w-resize; } | 滑鼠游標圖案是 w-resize
{ cursor: sw-resize; } | 滑鼠游標圖案是 sw-resize
{ cursor: s-resize; } | 滑鼠游標圖案是 s-resize
{ cursor: se-resize; } | 滑鼠游標圖案是 se-resize

我們也可以自定游標圖案。自定圖案的語法是：

{ cursor: url(圖案網址); }

下一頁：CSS 樣式

Copyright © 2014 1keydata.com 版權所有

CSS 語法教學
CSS 語法
CSS 套用方式
CSS 媒體類別
CSS 串接
CSS 繼承
CSS Class 與 ID
CSS Div 與 Span
CSS 長度單位

CSS 盒子模式
CSS 邊界 (Margin)
CSS 邊框 (Border)
CSS 留白 (Padding)
CSS 背景 (Background)
CSS 顏色
CSS 字體
CSS 連接
CSS 清單 (List)
CSS 表格 (Table)
CSS 位置 (Position)
CSS 文字 (Text)
CSS 浮動 (Float)
CSS 清除 (Clear)
CSS 滑鼠游標圖案

CSS 樣式


CSS DIV 與 CSS Span - 1Keydata CSS 語法教學

CSS Div 與 CSS Span

﻿
CSS 教學 > CSS Div 與 CSS Span

Div

Div 這個標籤目的是將內容分為不同的區域，而每一個區域可以根據 CSS 中的宣告而有自己的樣式。Div 是一個區塊級容器 (block-level container)，這代表在 </div> 標籤後會換行。

舉例來說，如果我們有以下的 CSS 樣式：

.large {
color: #00FF00;
font-family:arial;
font-size: 4pt;
}

以下的 HTML 碼，

<div class="large">
這是 DIV 範例。
</div>

就會顯現為，

這是 DIV 範例。

Span

Span 跟 Div 類似的地方是，這兩個標籤的目的都是將內容分為不同的區域。不同的是，Span 可以涵蓋更細層的元素。所以，我們甚至可以用 <span> 來調整單一文字的樣式。另外，在 </span> 之後並不會換行。

舉例來說，如果我們有以下的 CSS 樣式：

.largefont {
color: #0066FF;
font-family:arial;
font-size: 6px;
}

以下的 HTML 碼，

Span 不是<span class="largefont">區塊級的</span>.

就會顯現為，

Span 不是區塊級的.

下一頁： CSS 長度單位

Copyright © 2014 1keydata.com 版權所有

CSS 語法教學
CSS 語法
CSS 套用方式
CSS 媒體類別
CSS 串接
CSS 繼承
CSS Class 與 ID
CSS Div 與 Span
CSS 長度單位

CSS 盒子模式
CSS 邊界 (Margin)
CSS 邊框 (Border)
CSS 留白 (Padding)
CSS 背景 (Background)
CSS 顏色
CSS 字體
CSS 連接
CSS 清單 (List)


CSS 浮動 (Float) - 1Keydata CSS 語法教學

CSS 浮動

﻿
CSS 教學 > 浮動

一個在大型網站常見的格式，就是將文字繞著一個圖案顯現。這是用 float (浮動) 這個屬性來達成的。

float 屬性有三個可能的值：left、right、和 none。來看看以下的例子：

例 1：若有以下的 CSS 宣告，

#leftfloat {
float:left;
}

那以下的 HTML 碼，

<span id="leftfloat"><img src="yp.jpg"></span>這個例子是用來顯示 float:left 會如何影響整個頁面的呈現。在這裡，圖案浮動於左邊。

就會顯現為，

這個例子是用來顯示 float:left 會如何影響整個頁面的呈現。在這裡，圖案浮動於左邊。

例 2：若有以下的 CSS 宣告，

#rightfloat {
float:right;
}

那以下的 HTML 碼，

<span id="rightfloat"><img src="yp.jpg"></span>這個例子是用來顯示 float:right 會如何影響整個頁面的呈現。在這裡，圖案浮動於右邊。

就會顯現為，

這個例子是用來顯示 float:right 會如何影響整個頁面的呈現。在這裡，圖案浮動於右邊。

下一頁： CSS 清除

Copyright © 2014 1keydata.com 版權所有

CSS 語法教學
CSS 語法
CSS 套用方式
CSS 媒體類別
CSS 串接
CSS 繼承
CSS Class 與 ID
CSS Div 與 Span
CSS 長度單位

CSS 盒子模式
CSS 邊界 (Margin)
CSS 邊框 (Border)
CSS 留白 (Padding)
CSS 背景 (Background)
CSS 顏色
CSS 字體
CSS 連接
CSS 清單 (List)


CSS 字體 - 1Keydata CSS 語法教學

CSS 字體

﻿
CSS 教學 > 字體

在 CSS 中常見的字體 (font) 屬性有以下幾種：

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant

    每一個屬性在以下會有詳細地介紹：

    font-family

    font-family 屬性是用來設定字體的類別。

    CSS 樣式 顯現結果

    p {font-family: verdana;}

    Font Family Verdana.

    p {font-family: arial;}

    Font Family Arial.

    p {font-family: impact;}

    Font Family Impact.

    font-size

    font-size 屬性是用來設定字體的大小。大小可以是以數字顯現 (絕對的或是相較的均可)，或是以下其中之一的值："xx-large"、 "x-large"、 "large"、 "medium"、 "small"、 "x-small"、和 "xx-small"。

    CSS 樣式 顯現結果

    p {font-size:9px;}

    字體大小為 9px。

    p {font-size:150%;}

    字體大小為 150%。

    p {font-size:0.8cm;}

    字體大小為 0.8 cm。

    p {font-size:small;}

    字體大小為 small。

    p {font-size:large;}

    字體大小為 large。

    font-weight

    font-weight 屬性是用來設定字體的厚度。厚度的設定值可以從 100 到 900 (900 是最厚的)。另外，我們也可以將厚度設定為 bold (厚)、bolder (更厚)、及 normal (正常)。

    以下舉幾個例子：

    CSS 樣式 顯現結果

    p {font-weight: 100;}

    這是厚度 100。

    p {font-weight: 900;}

    這是厚度 900。

    p {font-weight: bold;}

    這是 bold 厚度。

    font-style

    font-style 屬性是用來設定字體是否為斜體字 (italic 或 oblique)。

    CSS 樣式 顯現結果

    p {font-style: italic;}

    這是斜體字。

    font-variant

    font-variant 屬性是用來設定文字是不是要以小型大寫 (small caps) 字體顯現。在小型大寫字體中，所有的字母都是大寫，可是字體是比一般大寫來得小。可能的值為 "small-caps" 和 "normal"。來看下面的例子：

    CSS 宣告，

    span {
    font-variant:small-caps;
    }

    以下的 HTML 碼，

    <span>initial in small caps</span> AND LATER IN LARGE CAPS.

    就會顯現出，

    initial in small caps AND LATER IN LARGE CAPS.

    下一頁： CSS 連接

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)


CSS 繼承 - 1Keydata CSS 語法教學

CSS 繼承

﻿
CSS 教學 > 繼承

在一個 HTML 文件中，標籤之間有所謂的親子關係。舉例來說，<title> 這個標籤一定都是在 <head> 這個標籤之內，所以我們就說 <title> 是 <head> 的子標籤。繼承 (inheritance) 的意思就是說子標籤的樣式會跟父標籤一樣，除非子標籤本身另有自訂的樣式。

舉例來說，如果我們有以下的樣式：

p { color: #00FF00; }
strong { font-size:20px; }

下面這行 HTML 碼，

<p>這是一個 <strong>繼承的例子。</strong></p>

就會顯現出為，

這是一個繼承的例子。

在以上的例子中，雖然我們並沒有對 <strong> 設定顏色，可是我們可以看到，整個句子的顏色都是綠色的。這是因為， <strong> 是 <p> 的子標籤，所以 <strong> 繼承了 <p> 的樣式，而在 <p> 的樣式中，文字顏色是設定為綠色的。

下一頁： CSS Class 與 CSS ID

Copyright © 2014 1keydata.com 版權所有

CSS 語法教學
CSS 語法
CSS 套用方式
CSS 媒體類別
CSS 串接
CSS 繼承
CSS Class 與 ID
CSS Div 與 Span
CSS 長度單位

CSS 盒子模式
CSS 邊界 (Margin)
CSS 邊框 (Border)
CSS 留白 (Padding)
CSS 背景 (Background)
CSS 顏色
CSS 字體
CSS 連接
CSS 清單 (List)


CSS 長度單位 - 1Keydata CSS 語法教學

CSS 長度單位

﻿
CSS 教學 > 長度單位

在 CSS ，長度單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位。

相對單位包括：

  • px: pixels
  • em: em
  • ex: x 字母的高度

    絕對單位包括：

  • in: 吋
  • cm: 公分
  • mm: 公厘
  • pt: points, 1 pt = 1/72 吋
  • pc: picas, 1 pc = 12 pt

    如果沒有註明單位，那預設的單位是 px。

    以下是每一種單位的例子：

    CSS 樣式 顯現結果

    p {font-size:9px;}

    文字大小為 9px。

    p {font-size:3em;}

    文字大小為 3em。

    p {font-size:3ex;}

    文字大小為 3ex。

    p {font-size:0.2in;}

    文字大小為 0.2 inch。

    p {font-size:0.5cm;}

    文字大小為 0.5 cm。

    p {font-size:12mm;}

    文字大小為 12 mm。

    p {font-size:24pt;}

    文字大小為 24 pt。

    p {font-size:2pc;}

    文字大小為 2 pc。

    在大部分的情況下，用相對長度單位會比較適合。這是因為，這樣子您能讓使用者依自己的喜好來加大或減小字體。如果您用絕對長度單位的話，使用者就無法改變字體的大小了。

    下一頁： CSS 盒子模式

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)


CSS 連接 - 1Keydata CSS 語法教學

CSS 連接

﻿
CSS 教學 > 連接

連接的預設樣式是藍色，且有下劃線。可是，有的時候，我們會想要改變一下這個預設的樣式。這可以透過以下幾個選擇器來達成：

a:link: 設定當連接過去的網頁尚未被看過時，該連接的樣式。

a:visited: 設定當連接過去的網頁已經看過時，該連接的樣式。

a:hover: 設定當滑鼠蓋在連接上面時，該連接的樣式。

a:active: 設定當連接被點擊時，該連接的樣式。

讓我們來看看以下的樣式：

a:link {color:#FF0000; text-decoration:none;}
a:visited {color:#0000FF; text-decoration:none;}
a:hover {font-size:20; color:#00FF00; text-decoration:underline;}
a:active {color:#FF00FF; text-decoration:underline;}

以上樣式的意思為：
1) 一開始時，連接文字的顏色是紅色。
2) 一但被連接的頁面有被看過，連接文字顏色就變為藍色。
3) 當滑鼠蓋在連接上面時，文字大小變為 20，文字顏色變為綠色，而且下劃線會出現。
4) 當連接被點擊時，文字顏色變為粉紅色，而且下劃線不會消失。

請將您的滑鼠滑到以下的 『測試連接』上，您就可以看到以上樣是出現。

測試連接

下一頁： CSS 清單

Copyright © 2014 1keydata.com 版權所有

CSS 語法教學
CSS 語法
CSS 套用方式
CSS 媒體類別
CSS 串接
CSS 繼承
CSS Class 與 ID
CSS Div 與 Span
CSS 長度單位

CSS 盒子模式
CSS 邊界 (Margin)
CSS 邊框 (Border)
CSS 留白 (Padding)
CSS 背景 (Background)
CSS 顏色
CSS 字體
CSS 連接
CSS 清單 (List)


CSS 清單 (List) - 1Keydata CSS 語法教學

CSS 清單

﻿
CSS 教學 > 清單

在 CSS 中常見的清單 (list) 屬性有以下幾種：

  • list-style-type
  • list-style-position
  • list-style-image
  • list-style

    每一個屬性在以下會有詳細地介紹：

    list-style-type

    list-style-type 屬性是用來設定在清單中，每一條之前的記號要用什麼。最常見的 list-style-type 設定值為：

  • none (沒有)
  • disc (全黑圓圈)
  • circle (空心圓圈)
  • square (正方形)

    One may also wish to use ordered character sets. Common ones are:

  • upper-latin (大寫拉丁文)
  • lower-latin (小寫拉丁文)
  • upper-roman (大寫羅馬文)
  • lower-roman (小寫羅馬文)
  • upper-alpha (大寫希臘文 )
  • lower-alpha (小寫希臘文 )

    以下列舉幾個例子：

    例 1：
    <ul style='list-style-type:upper-roman;'>
    <li>項目 1</li>
    <li>項目 2</li>
    </ul>

    結果：

    • 項目 1
    • 項目 2

    例 2：
    <ul style='list-style-type:square;'>
    <li>正方形項目 1</li>
    <li>正方形項目 2</li>
    </ul>

    結果：

    • 正方形項目 1
    • 正方形項目 2

    list-style-position

    list-style-position 屬性讓我們可以決定記號是否應該被視為是文字的一部份，並且由此而決定記號的位置。這個屬性可能的設定值為 "inside" 及 "outside"。預定值為 "outside"。

    以下是兩個例子，由其中我們可以看出來 inside 及 outside 的不同：

    例 3:

    <ul style='list-style-position:inside;'>
    <li>第一個項目<br>第一項目的第二行
    <li>第二個項目
    </ul>

    結果：

    • 第一個項目
      第一項目的第二行
    • 第二個項目

    例 4：

    <ul style='list-style-position:outside;'>
    <li>第一個項目<br>第一項目的第二行
    <li>第二個項目
    </ul>

    結果：

    • 第一個項目
      第一項目的第二行
    • 第二個項目

    list-style-image

    list-style-image 屬性是用來將某個圖案設定為記號。這個屬性的用法為，

    list-style-image:url([image_url]);

    舉例來說，若 CSS 樣式為：

    ul {
    list-style-image:url("circle.gif");
    }

    那以下的 HTML 碼，

    <ul>
    <li>第一項利用自我設定的記號。
    <li>第二項利用自我設定的記號。
    </ul>

    就會顯現為，

    • 第一項利用自我設定的記號。
    • 第二項利用自我設定的記號。

    list-style

    以上提到的這三個 (list-style-style、list-style-position、及 list-style-image) 屬性可以被簡化為一個 list-style 屬性。這種做法稱為捷徑 (shortcut)。在這裡，屬性的順序並不重要。

    舉例來說，以下的 CSS 樣式，

    ul {
    list-style: url("circle.gif") none inside;
    }

    套用在以下的 HTML 碼中，

    <ul>
    <li>第一項以捷徑方式列出的清單。
    <li>第二項以捷徑方式列出的清單。
    </ul>

    就會顯現出，

    • 第一項以捷徑方式列出的清單。
    • 第二項以捷徑方式列出的清單。

    下一頁： CSS 表格

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)


CSS 邊界 (Margin) - 1Keydata CSS 語法教學

CSS 邊界

﻿
CSS 教學 > 邊界

如我們在盒子模式那一頁看到的，邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以我們可以對這四個邊逐一設定：

  • margin-top (上邊界)
  • margin-right (右邊界)
  • margin-bottom (下邊界)
  • margin-left (左邊界)

    第五個屬性，margin，是用來作為同時設定四個邊的捷徑屬性。

    有三種方式可以設定邊界，分別為長度、百分比、以及 'auto'。我們來看以下的例子：

    #container {
    margin-top:5px;
    margin-left:10%;
    margin-right:auto;
    margin-bottom:20px;
    border: 1px solid 000000;
    }

    以下的 HTML 碼，

    <div id="container">
    這是邊界的例子。
    </div>

    會顯示為，

    這是邊界的例子。

    在這裡，上邊界為 5px，左邊界為 10%，下邊界為 20px。

    邊界捷徑

    所有四個邊的邊界可以同時由 margin 屬性設定。它的語法如下：

    margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]

    在這裡，順序非常重要。第一個值一定是上邊界的值，第二個值一定是右邊界的值，第三個值一定是下邊界的值，而第四個值一定是左邊界的值。

    下一頁： CSS 邊框

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)


CSS 媒體類別 - 1Keydata CSS 語法教學

CSS 媒體類別

﻿
CSS 教學 > 媒體類別

不同的媒體類別可以用不同的 CSS 樣式表。舉例來說，在螢幕上的文件可能適用某一個 CSS 樣式表，而同一份文件在被列印時，可以用一個不同的 CSS 樣式表。標出一個 CSS 樣式表媒體類別的語法如下：

外部連接套用
<link rel="stylesheet" href="style.css" type="text/css" media="【媒體類別】">

嵌入套用
<style type="text/css" media="【媒體類別】">

匯入套用
@import url("style.css") 【媒體類別】;

【媒體類別】可以有以下的值：

值 | 適用於
all | 所有媒體類別
aural | 言語合成器
braille | 布拉耶點字法 (盲人用) 媒體
handheld | 掌上型媒體
print | 列印
projection | 投射媒體
screen | 電腦螢幕
tty | 固定字寬 (fixed-pitch) 的媒體
tv | 電視類的媒體

下一頁： CSS 串接

Copyright © 2014 1keydata.com 版權所有

CSS 語法教學
CSS 語法
CSS 套用方式
CSS 媒體類別
CSS 串接
CSS 繼承
CSS Class 與 ID
CSS Div 與 Span
CSS 長度單位

CSS 盒子模式
CSS 邊界 (Margin)
CSS 邊框 (Border)
CSS 留白 (Padding)
CSS 背景 (Background)
CSS 顏色
CSS 字體
CSS 連接
CSS 清單 (List)


CSS 留白 (Padding) - 1Keydata CSS 語法教學

CSS 留白

﻿
CSS 教學 > 留白

我們從盒子模式那一頁看到，留白 (padding) 是在內容外，邊框內的部分。一個盒子有四個邊，所以我們可以對這四個邊的留白逐一設定：

  • padding-top (上)
  • padding-right (右)
  • padding-bottom (下)
  • padding-left (左)

    第五個屬性，padding，是用來作為同時設定四個邊留白的捷徑屬性。

    有三種方式可以設定留白，分別為長度、百分比、以及 'auto'。我們來看以下的例子：

    #container {
    padding-top:15px;
    padding-left:10px;
    padding-right:30px;
    padding-bottom:40px;
    border: 1px solid 000000;
    }

    以下的 HTML碼，

    <div id="container">
    這是留白的例子。這裡對了上、下、左、右的留白空間都有設定。
    </div>

    會顯示出，

    這是留白的例子。這裡對了上、下、左、右的留白空間都有設定。

    在這裡，上面的留白為 15px，左邊的留白為 10px，右面的留白為 30px，而下面的留白為 40px。

    留白捷徑

    所有四個邊的留白可以同時由 padding 屬性設定。它的語法如下：

    padding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值]

    在這裡，順序非常重要。第一個值一定是上面留白的值，第二個值一定是右邊留白的值，第三個值一定是下面留白的值，而第四個值一定是左邊留白的值。

    下一頁： CSS 背景

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)


CSS Position 位置 - 1Keydata CSS 語法教學

CSS Position 位置
﻿
CSS 教學 > 位置

在 CSS 中常見的位置 (position) 屬性有以下幾種：

  • position
  • top
  • right
  • left
  • bottom
  • overflow
  • z-index

    position

    position 屬性制定出要用哪一類的位置。可能的值有：

    • static (預設值): 這代表元素會被放在預設的地方。如果 position 的值是被設定為 statics 的話，那 top、bottom、left、和 right 的值就都沒有意義了。

    • absolute: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素也會跟著改變位置。

    • relative: 這代表元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。

    • fixed: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素的位置不會改變。

    top, right, bottom, left

    每一個方向 (top, right, bottom, left) 的位置值可以是長度、百分比、或是 auto。

    讓我們來看個例子：

    CSS 碼：

    div {
    background-color:#FF00FF;
    width:500px;
    height:60px;
    }

    p {
    position:relative;
    top:10px;
    left:50px;
    }

    在這哩，以下的 HTML 碼，

    <div>
    <p>舉例文字。
    </div>

    會顯示出，

    舉例文字。

    請注意以上文字的位置：它是在離粉紅色方塊上面 10px，及左邊 50px 的地方。

    overflow

    overflow 屬性是用來設定當內容放不下時的處理方式。可能的值包括：

    • visible: 內容完全呈現，不管放得下放不下。
    • hidden: 放不下的內容就不顯示出來。
    • scroll: 無論內容放得下放不下，都加入上下捲軸及左右捲軸的功能。
    • auto: 當內容放不下時，加上捲軸的功能。

    以上這四個值的例子如下：
    auto
    我們用這一區來看不同的 overflow 值展現出來會有什麼不一樣。

    這裡展現的值是 auto。

    hidden
    我們用這一區來看不同的 overflow 值展現出來會有什麼不一樣。

    這裡展現的值是 hidden。

    visible
    我們用這一區來看不同的 overflow 值展現出來會有什麼不一樣。

    這裡展現的值是 visible。

    scroll
    我們用這一區來看不同的 overflow 值展現出來會有什麼不一樣。

    這裡展現的值是 scroll。

    z-index

    z-index 屬性是用來決定元素重疊的順序。換言之，當兩個元素有重疊的情況時，z-index 值將會決定哪一個元素在上面。z-index 值比較大個元素會被放在上面。

    舉例來說，假設我們有以下的 CSS 碼：

    #redblock {
    z-index: 1;
    position:
    absolute;
    width:80px;
    height:100px;
    top:20px;
    left:20px;
    border: 1px solid #FFF;
    background-color: #FF0000;
    }

    #pinkblock {
    z-index: 2;
    position: absolute;
    width:100px;
    height:80px;
    top:50px;
    left:50px;
    border: 1px solid #FFF;
    background-color: #FF00FF;
    }

    以下的 HTML 碼，

    <div id="redblock"></div>
    <div id="pinkblock"></div>

    會顯示出，

    從以上可見，粉紅色方塊 (pinkblock) 的 z-index 值 (2) 比紅色方塊 (redblock) 的 z-index 值 (1) 高，因此粉紅色方塊在上面。

    下一頁： CSS 文字

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)


CSS Tutorial Sample Page

This is the sample file to illustrate the CSS link properties.

Please click the Back button to return to the previous page and see how the color of the link has now changed from red to blue.

Alternatively, click here to return to the previous page.


CSS 語法

﻿
CSS 教學 > 語法

宣告 CSS 樣式的語法如下：

選擇器 {
屬性：設定值；
...
}

在一個選擇器 (Selector) 中，可以設定的屬性數目沒有限制。

選擇器主要有三種：型類 (Type) 選擇器、Class 選擇器、和 ID 選擇器。

型類選擇器是 (X)HTML 標籤，如 <body> 和 <h1>。Class 和 ID 選擇器是使用者自訂的選擇器。我們會在之後討論這兩類的選擇器。

樣式是以『屬性：設定值』的方式來制定。舉例來說，若我們要設定一個元素內的文字是黃色的，那就用以下的『屬性：設定值』：

color:yellow;

在以上的宣告內，color 是屬性，而 yellow 是設定值。

在某些時候，一個屬性可能會有好幾個設定值。這些通常都是因為屬性是一個捷徑。舉例來說，margin 屬性可能會有 4 個設定值，而每一個值代表每一邊的邊界長度。

Grouping

如果有數個選擇器享有同樣的樣式，它們可以同時被宣告。這叫做 "grouping"。舉例來說，如果 <h1>, <h2>, and <h3> 都會有相同的樣式，那它們就可以用以下的方式被宣告：

h1 h2 h3 {
屬性：設定值；
...
}

後代選擇器 (Descendant Selectors)

我們可以設定說，只有當甲元素在乙元素之內時，甲元素才會用某個樣式。若甲元素不在乙元素內的話，那甲元素就可以有其他的樣式。要達到這個目標，我們就要利用後代選擇器的方式。

後代選擇器宣告的語法是：

【父選擇器】【子選擇器】{
屬性：設定值；
...
}

在以上的宣告中，只有當子選擇器是在父選擇器之內時，樣式才會被用到。這一類的語法可以包括好幾代的選擇器，而不是只有兩代而已。

舉例來說，以下的宣告，

li b {
color:yellow;
}

代表在 <li> <b> 之內的文字是黃色的。不是在 <li> 之內的 <b> 中的文字，就不會套用黃色字體這個樣式。

下一頁： CSS 套用方式

Copyright © 2014 1keydata.com 版權所有

CSS 語法教學
CSS 語法
CSS 套用方式
CSS 媒體類別
CSS 串接
CSS 繼承
CSS Class 與 ID
CSS Div 與 Span
CSS 長度單位

CSS 盒子模式
CSS 邊界 (Margin)
CSS 邊框 (Border)
CSS 留白 (Padding)
CSS 背景 (Background)
CSS 顏色
CSS 字體
CSS 連接
CSS 清單 (List)


CSS 表格 (Table) - 1Keydata CSS 語法教學

CSS 表格

﻿
CSS 教學 > 表格

在 HTML 中，常看到 <table> 之內加了 border、cellpadding、及 cellspacing 的屬性。如果我們有透過 CSS 來制定表格的樣式，那就不需要在 HTML 之內用到這些屬性了。

table、th、tr、及 td 這幾個選擇器可以使用許多在這個教學中有提到的 CSS 屬性，例如 文字、字體、邊框、顏色、以及 背景。

來看個例子。假設我們想要把以下的樣式加入表格內：

  • 表格： 沒有邊框，字體是 arial，字的大小是 14px。
  • 標題： 背景是黃色。
  • 格子： 每個格子的下面有一條黑色實線。
  • 低於 60 的分數欄內，字體是紅色的。

    我們就會使用以下的樣式表：

    table {
    border: 0;
    font-family: arial;
    font-size:14px;
    }
    th {
    background-color:yellow;
    }
    td {
    border-bottom:1 solid #000000;
    }
    .fail {
    color:#FF0000;
    }

    以下的 HTML 碼，

    <table>
    <tr>
    <th>學生</th>
    <th>分數</th>
    </tr>
    <tr>
    <td>Stella</td>
    <td>85</td>
    </tr>
    <tr>
    <td>Sophie</td>
    <td>95</td>
    </tr>
    <tr>
    <td>Alice</td>
    <td class="fail">55</td>
    </tr>
    </table>

    就會顯現出，

    學生 | 分數
    Stella | 85
    Sophie | 95
    Alice | 55

    border-collapse

    在這裡我們要特別提到一個跟表格有關的 CSS 屬性，那就是 border-collapse。基本上，這個屬性可以直接代替 cellspacing=0 的宣告。我門來看看下面的例子：

    CSS 宣告如下，

    table {
    border:0;
    border-collpase:collpase;
    width:200px;
    }

    tr {
    border-bottom:1px solid #000;
    }

    以下的 HTML 碼，

    <table>
    <tr><td>年度</td><td>收入</td></tr>
    <tr><td>2006</td><td>35.2M</td></tr>
    <tr><td>2007</td><td>40.1M</td></tr>
    </table>

    就會顯現出，

    年度 | 收入
    2006 | 35.2M
    2007 | 40.1M

    請注意到，年度攔及收入欄的下劃線中間並沒有空隙。這就是 border-collapse:collapse 的作用。

    下一頁： CSS 位置

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)


CSS 文字 (Text) - 1Keydata CSS 語法教學

CSS 文字

﻿
CSS 教學 > 文字

以下是幾個最常被用到與文字樣式有關的 CSS 屬性。

  • direction
  • letter-spacing
  • line-height
  • text-align
  • text-decoration
  • text-indent
  • text-transform
  • word-spacing

    direction

    direction 屬性是用來設定文字的方向。可能的值為 'ltr' 及 'rtl'。

    舉例來說，若 CSS 宣告是，

    p {
    direction:ltr;
    }

    那以下的 HTML 碼，

    <p>LTR 方向</p>

    就會顯現

    LTR 方向

    若 CSS 宣告是，

    p {
    direction:rtl;
    }

    那以下的 HTML 碼，

    <p>RTL 方向</p>

    就會顯現

    RTL 方向

    letter-spacing

    letter-spacing 屬性是用來設定每一個字母之間的空間。舉例來說，若 CSS 宣告是，

    p {
    letter-spacing:8px;
    }

    那以下的 HTML 碼，

    <p>8px between letters</p>

    就會顯現

    8px between letters

    line-height

    line-height 屬性是用來設定每一行之間的空間。舉例來說，若 CSS 宣告是，

    p {
    line-height:40px;
    }

    那以下的 HTML 碼，

    <p>第一行和第二行之間<br>相隔 40px。</p>

    就會顯現

    第一行和第二行之間
    相隔 40px。

    text-align

    text-align 屬性是用來設定文字是如何對齊。可能的值包括：

  • left： 靠左對齊
  • right： 靠右對齊
  • center： 向中間對齊
  • justified： 左右對齊

    請看以下的例子：

    CSS 樣式 顯現結果

    p {
    text-align:left;
    }

    這一段句子，是靠左對齊的例子。

    p {
    text-align:right;
    }

    這一段句子，是靠右對齊的例子。

    p {
    text-align:center;
    }

    這一段句子，是向中間對齊的例子。

    p {
    text-align:justify;
    }

    這一段句子，是左右兩邊都對齊的例子。

    text-decoration

    text-decoration 屬性是用來設定文字上有什麼裝飾。可能的值包括：

  • underline: 文字下加上一條線。
  • overline: 文字上加上一條線。
  • line-through: 文字中間加上一條線劃過去。
  • blink: 讓文字閃爍。

    請看以下的例子：

    CSS 樣式 顯現結果

    p {
    text-decoration:underline;
    }

    文字下加一條線

    p {
    text-decoration:overline;
    }

    文字上加上一條線

    p {
    text-decoration:line-through;
    }

    文字中間加上一條線劃過去

    text-indent

    text-indent 屬性是用來設定每一段的第一行前面要留多少空間。可設定的值包括百分比以及長度。舉例來說，若有以下的 CSS 宣告，

    p {
    text-indent:15px;
    }

    那以下的 HTML 碼，

    <p>這一段第一行的最前面會留 15px 的空間。之後的行數就沒有留任和空間了。</p>

    就會顯現，

    這一段第一行的最前面會留 15px 的空間。之後的行數就沒有留任和空間了。

    text-transform

    text-transform 屬性是用來控制大小寫是如何展現的。可能的值包括：

  • capitalize： 每一個字的第一個字母都以大寫顯現，其他的字母則不改變。
  • uppercase： 所有的字母都以大寫顯現。
  • lowercase： 所有的字母都以小寫顯現。
  • none： 大小寫不做任何改變。

    舉例來說，用以上這幾個值用在 "this is a LAWYER" 這幾個字上，我們回得到以下的結果：

    CSS 樣式 顯現結果

    p {
    text-transform:capitalize;
    }

    this is a LAWYER

    p {
    text-transform:uppercase;
    }

    this is a LAWYER

    p {
    text-transform:lowercase;
    }

    this is a LAWYER

    word-spacing

    word-spacing 屬性是用來設定每個字與每個字之間的距離。舉例來說，若 CSS 宣告是，

    p {
    word-spacing:5px;
    }

    那以下的 HTML 碼，

    <p>Words here are separated by 5px.</p>

    就會顯現，

    Words here are separated by 5px.

    下一頁： CSS 浮動

    Copyright © 2014 1keydata.com 版權所有

    • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)