CSS 樣式

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

  • a:active  設定當連接被點擊時，該連接的樣式
  • a:hover  設定當滑鼠蓋在連接上面時，該連接的樣式。
  • a:link  設定當連接過去的網頁尚未被看過時，該連接的樣式。
  • a:visited  設定當連接過去的網頁已經看過時，該連接的樣式。
  • background-attachment  用來指定背景圖案是否在螢幕上固定。這個屬性可能的值為 "fixed" (當網頁捲動時，背景圖案固定不動) 以及 "scroll" (當網頁捲動時，背景圖案會跟著移動)。
  • background-color  是用來指定背景的顏色
  • background-image 是用來指定用什麼圖案來當做背景。
  • background-position 是用來指定背景圖案的位置。它的值可以是：
    • 兩個字：第一個字為 [top,center,bottom] 中三選一，而第二個字由 [left,center,right] 中三選一。
    • 兩個百分比：第一個百分比為 x-軸的百分比，第二個為 y-軸的百分比。
    • 兩個數目：第一個數目為 x-軸的位置，第二個數目為 y-軸的位置。
  • background-repeat 是用來指定背景圖案重不重複。預設值是 "repeat"，代表此背景圖案將在 x- 及 y-方向都會重覆。其他的值為 x-repeat (x-方向重複)、y-repeat (y-方向重複)、以及 no-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

    • connievoss 發表在 痞客邦 留言(1) 人氣()

    ▲top

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

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

    CSS 樣式 顯現結果
    { cursor: crosshair; }
    滑鼠游標圖案是 crosshair
    { cursor: pointer; }
    滑鼠游標圖案是 pointer
    { cursor: text; }
    滑鼠游標圖案是 text
    (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    ▲top
    • Feb 12 Tue 2008 21:34

    • Clear

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

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

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

    CSS 宣告：

    #leftfloat {
      float:left;
    • (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    ▲top
    • Feb 12 Tue 2008 21:34

    • 浮動

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

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

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

    #leftfloat {
      float:left;
    (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：css
    ▲top
    • Feb 12 Tue 2008 21:33

    • 文字

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

     

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

    direction

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

    舉例來說，若 CSS 宣告是，

    p {
    • (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：css
    ▲top
    • Feb 12 Tue 2008 21:30

    • 位置

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

     

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

    position

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

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

       

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

       

    • (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：css
    ▲top
    • Feb 12 Tue 2008 21:28

    • 表格

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

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

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

     

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

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

    • (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：css
    ▲top
    • Feb 12 Tue 2008 21:28

    • 清單

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

     

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

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

    list-style-type

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

     

    • (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    ▲top
    • Feb 12 Tue 2008 21:27

    • 清單

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

     

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

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

    list-style-type

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

     

    • (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：css
    ▲top
    • Feb 12 Tue 2008 21:25

    • 連接

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

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

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

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

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

    (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：css
    ▲top
    • Feb 12 Tue 2008 21:24

    • 字體

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

     

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

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

    font-family

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

    CSS 樣式 顯現結果

    p {font-family: verdana;}
    • (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：css
    ▲top
    • Feb 12 Tue 2008 21:23

    • 顏色

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

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

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

    color 屬性的語法如下：

    十六進位值:

    {color:#XXXXXX;}

    • (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：css
    ▲top

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

     

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

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

    background-color

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

      CSS 樣式   顯現結果

      p {background-color: 00FF00;}  
    • (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：css
    ▲top
    • Feb 12 Tue 2008 21:17

    • 留白

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

     

  • padding-top (上)
  • padding-right (右)
  • padding-bottom (下)
    • (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：css
    ▲top
    • Feb 12 Tue 2008 21:14

    • 邊框

    在 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;}

    實線
    • (繼續閱讀...)

    connievoss 發表在 痞客邦 留言(0) 人氣()

    • 個人分類：css
    ▲top
    1 2