程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> 您未必知道的Css技巧

您未必知道的Css技巧

編輯:.NET實例教程
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. 關閉輸入法狀態,使用戶只能輸入英文狀態下的字符,類似輸入密碼
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:13
12. * 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 }
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved