CSS高級教程顯示屬性_CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

CSS高級教程意在發揮CSS的極限，然而這些醒目的方法對中級用戶的效果并不是馬上就顯現出來的。
現在，可能顯得有些煩瑣，我們來學習替換樣式表，設置打印樣式等等。

處理HTML元素最要害的一個竅門，沒有任何非凡的，就是理解他們是如何工作的。大部分頁面都可以使用一點點的標簽組合起來，你可以為每一個你選定的標簽樣式化。瀏覽器默認的可視化樣式元素由變化的字體樣式、邊界、補白和，和重要的，顯示類型。
最基本的顯示類型是內聯inline、塊block和清除none，他們分別可以用inline、block和none的值賦予display屬性來操作。
inline就如本身語義所明示的，顯示隨著行流動的元素。錨和強調元素都是傳統的內聯元素。
block使元素前后都有斷行。標題和段落元素都是傳統的塊元素的例子。
none，嗯，不顯示這個元素，聽起來毫無用處，但于易用性考慮（請看親和連接），改變樣式表，或者高級的翻轉效果都有很好的用途。
比如這個站點的默認原始版本，通過操縱一些傳統的內聯和塊元素來適應設計。

示例代碼 [www.wf0088.com]

h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}

這使得“htmldog.com”的標題和標簽行可以并排，而不是一上一下，維護最優的易用性。

示例代碼 [www.wf0088.com]

#navigation, #seeAlso, #comments, #standards {
display: none;
}

上述代碼使用在打印樣式中，用于“關閉”這些元素，比如，對于一個單一的頁面導航通常是不必須的。

注重

示例代碼 [www.wf0088.com]

display: none和visibility: hidden不同之處在于display: none使元素完全是個死球，然而visibility: hidden雖不出現在內容中但保留著這個元素的流位置。比如，假如三段中的第二端設為display: none，第一段會直接到達第三段，而設為visibility: hidden的話，這個段落會有一個間隔。

表格

也許理解表格相關的顯示屬性值的最好方法是關心HTML表格。table是初始化的顯示，你可以用tr和td分別摹擬table-row和table-cell值。
display屬性走得更遠，提供table-column、table-row-group、table-column-group、table-header-group、table-footer-group和table-caption的值，都是自描述的。這些值顯而易見的好處是，你可以用列來構造表格，代替有偏見的row。
最后，inline-table設置前后不斷行的表格。

注重

對CSS表格失去控制的話，可能嚴重的損害你網頁的親和力（易用性）。HTML應該用來傳達內容的，所以你有表格式數據的話，你應該用HTML表格來安排它們。使用CSS表格僅僅能給數據調調味，假如沒有CSS的話完全不可讀。十分不好。別走Michael Jackson的路。

其他顯示類型

list-item也是自描述的，一般以列表的形式顯示，使用在除li的HTML元素上。為了顯示正確，使用這個顯示類型的應該嵌套在ul或者ol元素內。
run-in使元素內聯或塊顯示，取決于其父元素的的顯示屬性。在IE和基于Mozilla的瀏覽器中都不能工作。
campact也使元素內聯或者塊顯示，同樣取決于上下文。它也不能很好工作。
marker僅僅是與:before和:after偽元素一起來定義content屬性的值。content屬性的自動值已經是marker，所以這只對覆蓋掉前面的content的顯示屬性有用。