鮮為人知的CSS用法技巧

來源:互聯網
上載者:User
1. 關於background的寫法DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}1)您可以看到background的第一個定義是一個顏色值這表示在背景圖片失效的時候顏色將起作用。
2)url括弧中的引號是沒有必要的,我們可以不寫引號 2. 關於Border的寫法,如果您想定義div的四個邊的顏色不同,而粗度和樣式都一樣,您可以這樣寫:DIV.special{border:1px solid; border-color:color1 color2 color3 color4}四種顏色一次是上,右,下,左的顏色 3. 為了相容所有的瀏覽器都可以顯示半透明效果的寫法.tranparent{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity: 50%; position:absolute;/*注意必須是absolute的*/ top:100px; left:100px;} 4. _height,_width的作用使用_height解決float的div不閉合的問題,您可以將_height屬性去掉就可以開到效果了。#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;} .column_left{ float:left; width:20%; padding:10px;} .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;} <div id="wrap"> <div class="column_left"> <h1>Float left</h1> </div> <div class="column_right"> <h1>Float right</h1> </div> </div> 5. 使用min-height min-width解決div,或者span的固定高度問題有時候我們需要設定某個元素固定高度,但是在firefox或者opera下面只設定高度,在內容不夠多的時候,達不到預想的效果,這時候我們可以使用min-height 6. 使用!important改變樣式的優先順序所謂的樣式優先順序是指,瀏覽器在應用樣式時總是根據就近原則來應用樣式,假定我們在一個頁面中有三處都有對某個元素的定義,一處是在外部的css檔案中,一處是在檔案的head標籤中定義內聯css,另一處是在這個元素的標籤內,那麼根據就近原則此元素最終使用的樣式是在標籤內定義的樣式,如果我們需要打破這種規則我們就可以使用!important指令a.test{color:red!important}這樣即使在A元素內定義了color也不會應用,而是應用上面的定義 7. 使用media指令引入兩種css:列印版本的css和螢幕顯示的css<link type="text/css" rel="stylesheet" href="url " media="screen" charset="utf-8" /><link type="text/css" rel="stylesheet" href="url" media="print" charset="utf-8" />8. > 符號(目前ie不支援)我們可以使用DIV A的方式來定義所有在div裡面的所有A標籤的樣式,包括div下面的span中的div;如果我們只想定義DIV下面一級子節點的A標籤我們可以使用“>”符號,例如:DIV>A{color:red}現在只有是DIV的直接子節點A標籤的顏色是紅色9.:first-child :last-child 在非ie的瀏覽器下面可以通過這兩個指示符,取到父元素的第一個元素或者最後一個元素
20070412 21:05增加
10. :hover等偽類可以這樣使用
<h1>Buy widgets</h1>
16. 為了避免不同瀏覽器對不同標籤的padding,margin不同的解釋可以在樣式表的前面定義
*{}{margin:0px;padding:0px;}20070422 12:00添加
17. 關閉IME狀態,使使用者只能輸入英文狀態下的字元,類似輸入密碼input {}{ime-mode: disabled ; }
20070423 09:08
18. 死都不換行,摘錄(作者)
1) white-space:nowrap; overflow: hidden; width: 17em !important ; width: 18em;
注意: white-space不支援td,th等。
2) 用.fixTable{ table-layout: fixed; overflow:hidden; }加上nobr標籤實現隱藏
nobr標籤非標準。
20070426 0848
19. 同比改變圖片大小
img.style.zoom = 0.5; <style type="text/css">
.menu{}{}
.menu ul{}{display:none}
.menu:hover{}{}
.menu:hover ul{}{display:block}
</style> <ul>
<li class="menu">
menu title
<ul>
<li>first</li>
<li>last</li>
</ul>
</li>
</ul>這樣我們就可以做只用css控制的菜單,在ie6,ie7,firefox1.5,opera9.0下面測試通過
11.我們可以使用 page-break-after,page-break-before控制列印時的分頁 20070413 12:1312. * html{}的作用是為了相容6.0以下的IE版本,對html節點的選取,其他的瀏覽器都認為html標籤是文檔的根節點,而ie6以下的ie版本卻認為在html標籤的上面還有一個根節點
---感謝calmzeal的解釋

13. css 的class可以有多個值,我們只需要將多個值用空格隔開就可以了

14. 顏色的縮寫 我們可以將#ff0033縮寫成#f03

15. 使用text-indent顯示圖片,而隱藏文字(這種做法據說有助於SEO)h1 {}{ background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
相關文章

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.