10個實用的CSS屬性小結

2022-09-24 20:21:10 字數 3156 閱讀 2355

1. outline

在除錯css問題的時候,我常常在指定元素上新增border來精確的檢視該元素會發生什麼並幫助確定問題的**。這常常是有效的,因為它可以在布 局上給我更加具體的可視性。但是如果是塊級元素,這可能會發生某些錯誤——在任何塊級元素上新增1px的邊框很可能會影響到布局,它會讓這個元素的寬度額 外增加2px。

outline 屬性是完美的替代者,因為它可以在不影響文件流的情況下呈現該物件。但是ie6 和ie7 不支援 outline 屬性,所以,它不能在這兩個瀏覽器中用於除錯。

2. inherit (值)

在css開發中有很多這樣的例子:通過在特定元素上設定某些樣式來告訴該元素來「繼承」它父級元素的所有已新增的屬性,這樣你就可以避免相當多的鍵盤輸入。

這可以通過設定 inherit 來很容易的實現。這可能很有用。比如,當重寫 background 屬性的時候,常常會有很多的文字在該屬性中(色彩、的url位址、位置等)。所以,與其重新寫這些值,你可能僅僅想要考慮中的元素和其父級元素有相同 的背景屬性,乙個 inherit 值就可以搞定一切——這顯然大大的節省了鍵盤輸入。

不幸的是, inherit 值在ie6和ie7不被支援(除了用於 direction (文字方向) 和 visibility 屬性)。

某人說,**就像女人的裙子——越短越好,看來ie會阻礙我們這個願望的實現。

3. empty-cells

該屬性只用於table或者」display」屬性被設定為」table-cell」的元素。如果你動態的為乙個table新增內容,就可能會遇到某個單元格的內容為空的情況,然後你又不希望這個空的單元格的邊框、背景色、背景等隱藏掉。

使用」empty-cells: hide」就能解決這個問題,它會將可能出現這種情況的單元格完全隱藏掉。

internet explorer 不支援empty-cells屬性。

4. c程式設計客棧aption-side

說到table 的屬性,這個屬性用於宣告顯示在**的側欄的**標題。它接受 top 、 bottom 、 left 和 right 四個值。internet exporer 不支援這個屬性,table的標題在ie6和ie7中將總是出現在**的頂部。

5. counter-increment / counter-reset

有序列表(

)非常方便,因為它可以省去你手工新增遞增數字的麻煩,而且它允許你不用更改數字就能改變列表的序列。

css 擁有 counter-increment 和 counter-reset 屬性,它允許你用來自動生成遞增數字到幾乎所有的html元素上,就像有序列表的效果一樣。

這裡有個示例:

css code複製內容到剪貼簿

上面的樣式將在所有的

但是ie6, ie7 甚至safari(直到3.x版本)還不支援這些屬性。當然,ie6也不支援:before 偽元素。

6. min-height

有時,乙個**的設計或布局結構需要乙個有固定高度的內容區域,否則特定的視覺效果就會丟掉。這可能會因為乙個漸變背景、乙個獨特的下拉列表、 或者可能是因為ps出來的很酷的發光效果。但是有的時候,頁面中的內容會比較多,而頁面卻不能像預期那樣展開。

這個時候就需要用到 min-height 屬性了,因為它可以告訴瀏覽器在乙個特定的塊級元素上渲染最小的高度,不管內容的實際高度是否達到了這個最小高度。然後呢,如果內容超出了最小高度,該元素就會適度的擴充套件開。

使用min-height 唯一需要注意到的是它在ie6中不被支援。我們都知道ie6在(緩慢的)退出歷史舞台,但是有的客戶可能仍然要求他們的**支援這個該死的瀏覽器。

不過令人高興的是,ie6 渲染 height 的值的方法正好和其它瀏覽器渲染「min-height」的方式一樣,所以你只需要乙個針對ie6的hack或獨立的樣式表來為該元素新增特定的 height ,這個問題就解決了。

ie6 同樣無視 min-width 、 max-height 和 max-width , 但是上述方法在這些屬性上也是可行的。

7. :hover

從技術上來說,:hover只是乙個偽類,但是它在ie6中不被支援(ie7和ie8支援)。:hover偽類允許你在元素上新增任何的滑鼠經過樣式。這非常有用,可以避免(至少在某種程度上)使用j**ascript。

但是如果你的**,需要完全支援ie6,特別是在中國這種ie6一手遮天的情況下,那麼你就必須考慮取消使用這個偽類,除非相關的標籤有個」href」屬性,比如標籤。而且如果要實現這種效果,可能必須借助於j**ascript和額外的樣式。

8. display

display 通常被設定為這三個值中的乙個: block、inline和 none。「得益於」ie,display的其它值很少被用到。這些值包括 inline-block、table、inline-table和table-cell等,這些屬性對於解決一些特殊的布局問題時,是很有用的。

所以,儘管ie 確實支援display的這三個基本屬性,但是它基本上不支援其它屬性。

其實,ie8對display的屬性支援已經相當完整了。不過,對於inline-block屬性,ie6/7只支援本身為inline的元素。

9. clip

這是乙個在特殊情況下能派上用場的很有趣的css屬性。它可能和不可預知的、動態生成的內容結合起來。簡單來說,這個屬性允許你在乙個特定的元素上 指定隱藏區域——也可以理解為,在乙個絕對定位的元素中,按照一定的設定來裁剪該元素的顯示區域,超出該區域的內容會被隱藏掉。語法看起來像這樣的:

css code複製內容到剪貼簿

修剪只能用於乙個絕對定位的元素,而且只用使用矩形區域。括號內的數字劃出的區域(200px*180px大小)為可見區域,該區域以外的內容不可見或者被剪下掉。

技術上來講, clip 屬性被ie支援,但是只支援無逗號的語法,比如

css code複製內容到剪貼簿

上面的樣式(rect後面括號裡的屬性沒有用逗號隔開)在大多數瀏覽器下都可執行,但是可能不會通過css驗證,因為語句沒有用逗號隔開。

10. :focus

這是另外乙個偽類需要在這裡被提及的,因為所有的非ie瀏覽器,都支援這個屬性。:focus偽類允許你宣告乙個特別的樣式,當乙個頁面元素成為鍵 盤(滑鼠)焦點程式設計客棧的時候,將該樣式動態的應用到該元素上。這在表單元素上非常有用,因為你可以在乙個輸入框被選中的時候給它新增乙個邊框。

下面的樣式將在輸入框成為鍵盤焦點的時候新增乙個紅色的邊框:

css code複製內容到剪貼簿

本文標題: 10個實用的css屬性小結

本文位址:

css屬性簡介 小結

原文章 it技術擎 裡面有更豐富的資料 1 background 背景顏色 background color 基本語法 background color transparent color 背景影象 background image 基本語法 background image none url ur...

css屬性標籤小結

css樣式的寫法格式 四種基礎選擇器 復合選擇器 偽類選擇器 文字樣式 屬性名稱 值font family 字型中文字型需要巢狀在引號內,多字型使用英文逗號 font size 字型大小number font weight 字型粗細 normal bold 100 900 font variant ...

CSS 字型屬性小結

font size 1 可使用css所有尺寸單位 px,em,rem,2 瀏覽器預設大小為16px font family 1 在行內設定樣式使用 單引號 引住 2 用選擇器設定樣式使用 雙引號 引住 3 預設字型為微軟雅黑 根據系統不同可能會出現偏差 4 當設定的字型沒有生效,則顯示預設字型,也可...