熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

技巧:如何定義CSS元素的顯示屬性

2013-11-15 12:04:01  來源: JSP教程 
     處理HTML元素最關鍵的一個竅門沒有任何特別的就是理解他們是如何工作的大部分頁面都可以使用一點點的標簽組合起來你可以為每一個你選定的標簽樣式化浏覽器默認的可視化樣式元素由變化的字體樣式邊界補白和和重要的顯示類型
  最基本的顯示類型是內聯inline塊block和清除none他們分別可以用inlineblock和none的值賦予display屬性來操作
  inline就如本身語義所明示的顯示隨著行流動的元素錨和強調元素都是傳統的內聯元素
  block使元素前後都有斷行標題和段落元素都是傳統的塊元素的例子
  none不顯示這個元素聽起來毫無用處但於易用性考慮(請看親和連接)改變樣式表或者高級的翻轉效果都有很好的用途
  比如這個站點的默認原始版本通過操縱一些傳統的內聯和塊元素來適應設計
h {
display: inline;
fontsize: em;
}
#header p {
display: inline;
fontsize: em;
paddingleft: em;
}
這使得“htmldogcom”的標題和標簽行可以並排而不是一上一下維護最優的易用性
#navigation #seeAlso #comments #standards {
display: none;
}
上述代碼使用在打印樣式中用於“關閉”這些元素比如對於一個單一的頁面導航通常是不必須的
注意
display: none和visibility: hidden不同之處在於display: none使元素完全是個死球然而visibility:
hidden雖不出現在內容中但保留著這個元素的流位置比如如果三段中的第二端設為display: none第一段會直接到達第三段而設為visibility: hidden的話這個段落會有一個間隔
表格
也許理解表格相關的顯示屬性值的最好方法是關心HTML表格table是初始化的顯示你可以用tr和td分別摹擬tablerow和tablecell值
display屬性走得更遠提供tablecolumntablerowgrouptablecolumngrouptableheadergrouptablefootergroup和tablecaption的值 都是自描述的這些值顯而易見的好處是你可以用列來構造表格代替有偏見的row
最後inlinetable設置前後不斷行的表格
注意
對CSS表格失去控制的話可能嚴重的損害你網頁的親和力(易用性)HTML應該用來傳達內容的所以你有表格式數據的話你應該用HTML表格來安排它們使用CSS表格僅僅能給數據調調味如果沒有CSS的話完全不可讀十分不好別走Michael Jackson的路
其他顯示類型
listitem也是自描述的一般以列表的形式顯示使用在除li的HTML元素上為了顯示正確使用這個顯示類型的應該嵌套在ul或者ol元素內
runin使元素內聯或塊顯示取決於其父元素的的顯示屬性在IE和基於Mozilla的浏覽器中都不能工作
campact也使元素內聯或者塊顯示同樣取決於上下文它也不能很好工作
marker僅僅是與:before和:after偽元素一起來定義content屬性的值content屬性的自動值已經是marker所以這只對覆蓋掉前面的content的顯示屬性有用
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20205.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.