div+css屬性各個屬性詳解6

來源:互聯網
上載者:User

分類屬性

顯示
文法: display: <值>

允許值: block | inline | list-item | none

初始值: block

適用於: 所有對象

向下相容: 否

顯示內容允許使用四個值中的一個來定義一個元素:

block (在元素的前和後都會有換行)
inline (在元素的前和後都不會有換行)
list-item (與block相同, 但增加了目錄項標記)
none (沒有顯示)
每個元素都典型地由瀏覽器基於HTML規格建議的展示形式給出一個預設的顯示值。

顯示內容可能並不安全,因為它使用另外的不合適的格式顯示元素。使用值none將關閉指定元素及其子項目的顯示!

空白
文法: white-space: <值>

允許值: normal | pre | nowrap

初始值: normal

適用於: 區塊層級元素

向下相容: 是

空白屬性將決定如何處理元素內的空格. 該屬性的值取以下三個中的一個:

normal (將多個空格摺疊成一個)
pre (不摺疊空格)
nowrap (不允許換行,除非遇到<BR>標記)

目錄樣式類型
文法: list-style-type: <值>

允許值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

初始值: disc

適用於: 帶有顯示值的目錄項元素

向下相容: 是

目錄樣式項屬性指定目錄項標記的類型,當目錄樣式圖象值為none或當圖象載入選項被關閉時使用。

例如:

LI.square { list-style-type: square }
UL.plain { list-style-type: none }
OL { list-style-type: upper-alpha } /* A B C D E etc. */
OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */

目錄樣式圖象
文法: list-style-image: <值>

允許值: <url> | none

初始值: none

適用於: 帶有顯示值的目錄項元素

向下相容: 是

當圖象載入選項開啟時,目錄樣式圖象屬性在指定目錄項標記使用哪個圖象代替由目錄樣式類型屬性指定的標記。

例如:

UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x { list-style-image: url(x.png) }

目錄樣式位置
文法: list-style-position: <值>

允許值: inside | outside

初始值: outside

適用於: 帶有顯示值的目錄項元素

向下相容: 是

目錄樣式位置屬性可以取值inside(內部) or outside(外部),其中outside是預設值。整個屬性決定關於目錄項的標記應放在那裡。如果使用inside值,換行會移到標記下,而不是縮排。應用的例子如下:

Outside rendering:
* List item 1
second line of list item

Inside rendering:
* List item 1
second line of list item

目錄樣式
文法: list-style: <值>

允許值: <目錄樣式類型> || <目錄樣式位置> || <url>

初始值: 未定義

適用於: 帶有顯示值的目錄項元素
向下相容: 是

目錄樣式屬性是目錄樣式類型、目錄樣式位置,和目錄樣式圖象屬性的略寫。

例如:

LI.square { list-style: square inside }
UL.plain { list-style: none }
UL.check { list-style: url(/LI-markers/checkmark.gif) circle }
OL { list-style: upper-alpha }
OL OL { list-style: lower-roman inside
}

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.