階層式樣式表參照

網頁撰寫者可使用階層式樣式表有效地控制文件的外觀。

概觀與教學課程

下列主題提供如何建立階層式樣式表規則,以及如何將規則套用至 HTML 網頁中個別元素的概觀資訊:

  • 瞭解選取器   階層式樣式表的基本建置組塊為樣式規則。選取器能用來「選取」HTML 網頁中的元素,以便設定元素的樣式。沒有選取器便無法判定套用規則的方式。本主題介紹階層式樣式表宣告語法的基本概念,以描述選取器的使用方式。

  • 長度單位參照   本節定義階層式樣式表支援的長度單位。

  • 關於元素置放   大部分的當代瀏覽器都能以 X 與 Y 座標來定位 HTML 元素,並可在沿著 Z 軸 (在網頁文件中以正對及背對檢閱者的方向延伸) 的平面中重疊元素。您可以透過這些功能在網頁中精確地放置元素、影像、控制項或文字。透過使用指令碼來操作定位座標與其他動態樣式,您可以在網頁各處移動元素,建立動畫的效果。動態樣式、定位及透明影像的結合為您提供了豐富多樣的動畫選擇。

  • 色彩   HTML 網頁中的色彩可透過兩種方式來指定:名稱或 RGB 值。

  • 快速模式中的度量單位和位置屬性   動態 HTML (DHTML) 會顯示度量單位與位置屬性,讓您變更網頁中 HTML 元素的大小與位置。當您瞭解這些屬性的本質與對網頁中元素的影響後,便能得心應手地控制網頁的外觀。例如,您可以使用這些屬性來設計類似其他應用程式之文件的網頁,例如 Microsoft Office PowerPoint 或 Microsoft Office Word。

屬性

本節包含支援之階層式樣式表屬性的參照主題。如需階層式樣式表屬性的分類清單,請參閱屬性 (依類別)

  • background   最多可設定五個不同的物件背景屬性。

  • background-attachment   設定將背景影像附加至文件內物件的方式。

  • background-color   設定物件內容後方的色彩。

  • background-image   設定物件的背景影像。

  • background-position   設定物件背景的位置。

  • background-repeat   設定物件背景影像屬性的並排方式。

  • border   設定繪製在物件周圍的屬性。

  • border-collapse   設定值以指出表格的列與儲存格框線是否要結合為單一框線或卸離 (如同在標準 HTML 中)。

  • border-color   設定物件的框線色彩。

  • border-style   設定物件上、下、左、右框線的樣式。

  • border-left   設定物件的上框線屬性。

  • border-bottom-color   設定物件的下框線色彩。

  • border-left-color   設定物件的左框線色彩。

  • border-right-color   設定物件的右框線色彩。

  • border-top-color   設定物件的上框線色彩。

  • border-bottom-style   設定物件的下框線樣式。

  • border-left-style   設定物件的左框線樣式。

  • border-right-style   設定物件的右框線樣式。

  • border-top-style   設定物件的上框線樣式。

  • border-bottom-width   設定物件的下框線寬度。

  • border-left-width   設定物件的左框線寬度。

  • border-right-width   設定物件的右框線寬度。

  • border-top-width   設定物件的上框線寬度。

  • border-width   設定物件上、下、左、右框線的寬度。

  • bottom   以文件階層中下一個定位物件的底部為基準,設定物件底部的相對位置。

  • clear   設定物件是否允許在其左側、右側或兩側使用浮動物件,使下一個物件顯示在浮動物件後面。

  • clip   設定要顯示定位物件的哪個部分。

  • color   設定物件的文字色彩。

  • cursor   設定當指標移到物件上方時顯示的指標類型。

  • direction   設定物件的讀取順序。

  • display   設定是否要呈現物件。

  • font   設定物件的個別字型屬性組合。亦或是從使用者喜好設定中的六個字型當中,設定或擷取一或多個字型。

  • font-family   設定用於物件中文字的字型名稱。

  • font-size   設定值以指出用於物件中文字的字型大小。

  • font-style   將物件的字型樣式設為斜體、標準或傾斜。

  • font-variant   設定是否使物件的文字成為小型大寫字母。

  • font-weight   設定物件字型的粗細。

  • height   設定物件的高度。

  • left   以文件階層中下一個定位物件的左邊緣為基準,設定物件的相對位置。

  • letter-spacing   設定物件中字母間的額外間距。

  • line-height   設定物件中各行的間距。

  • list-style   最多可設定物件的三個不同 list-style 屬性。

  • list-style-image   設定值以指出要使用哪個影像當作物件的 list-item 標記。

  • list-style-position   設定變數以指出如何依照物件內容繪製相對的 list-item 標記。

  • list-style-type   設定物件之 line-item 標記的預先定義類型。

  • margin   設定物件上、下、左、右邊界的寬度。

  • margin-bottom   設定物件的下邊界大小。

  • margin-left   設定物件的左邊界大小。

  • margin-right   設定物件的右邊界大小。

  • margin-top   設定物件的上邊界大小。

  • max-height   設定元素的高度上限。

  • max-width   設定元素的寬度上限。

  • min-height   設定元素的高度下限。

  • min-width   設定元素的寬度下限。

  • overflow   設定值以指出當內容超出物件的高度或寬度時,要如何管理物件的內容。

  • padding   設定插入物件與其邊界間 (若有框線的話,則為物件與其框線間) 的間距。

  • padding-bottom   設定插入物件之下框線與內容間的間距。

  • padding-left   設定插入物件之左框線與內容間的間距。

  • padding-right   設定插入物件之右框線與內容間的間距。

  • padding-top   設定插入物件之上框線與內容間的間距。

  • page-break-after   設定值以指出是否在物件後面分頁。

  • page-break-before   設定值以指出是否在物件前面分頁。

  • position   設定用於物件的定位類型。

  • right   以文件階層中下一個定位物件的右邊緣為基準,設定物件的相對位置。

  • table-layout   設定指出表格版面配置是否要固定的字串。

  • text-align   設定物件中的文字要靠左對齊、靠右對齊、置中或左右對齊。

  • text-decoration   設定值以指出是否使物件中的文字閃爍、加上刪除線、頂線或底線裝飾。

  • text-indent   設定物件中第一行文字的縮排。

  • text-transform   設定物件中文字的呈現。

  • top   以文件階層中下一個定位物件的頂端為基準,設定物件的相對位置。

  • unicode-bidi   設定與雙向 (右至左) 演算法相關的內嵌層級。

  • vertical-align   設定物件的垂直對齊方式。

  • visibility   設定是否要顯示物件的內容。

  • white-space   設定值以指出是否要在物件內自動斷行。

  • width   設定物件的寬度。

  • word-spacing   設定物件中單字間的額外間距。

  • z-index   設定定位物件的堆疊順序。