CSS分類屬性

來源:互聯網
上載者:User
css

顯示

文法:  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 }



聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

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.