DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> CSS使用技巧總結
CSS使用技巧總結
編輯:前端技巧     
最近,我開始升級網志了。
在修改模板的過程中,需要重寫CSS樣式表。正好看到instantshift.com有一篇CSS常用技巧的總結文章,我就把它整理出來,供自己參考,也希望對大家有用。
未來,本文將持續更新。

1. 文字的水平居中
將一段文字置於容器的水平中點,只要設置text-align屬性即可:

復制代碼代碼如下:
  text-align:center;

2. 容器的水平居中
先為該容器設置一個明確寬度,然後將margin的水平值設為auto即可。

復制代碼代碼如下:
  div#container {
    width:760px;
    margin:0 auto;
  }

3. 文字的垂直居中
單行文字的垂直居中,只要將行高與容器高設為相等即可。
比如,容器中有一行數字。

復制代碼代碼如下:
  <div id="container">1234567890</div>

然後CSS這樣寫:

復制代碼代碼如下:
  div#container {height: 35px; line-height: 35px;}

如果有n行文字,那麼將行高設為容器高度的n分之一即可。

4. 容器的垂直居中
比如,有一大一小兩個容器,請問如何將小容器垂直居中?

復制代碼代碼如下:
  <div id="big">
    <div id="small">
    </div>
  </div>

首先,將大容器的定位為relative。

復制代碼代碼如下:
  div#big{
    position:relative;
    height:480px;
  }

然後,將小容器定位為absolute,再將它的左上角沿y軸下移50%,最後將它margin-top上移本身高度的50%即可。

復制代碼代碼如下:
  div#small {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px;
  }

使用同樣的思路,也可以做出水平居中的效果。

5. 圖片寬度的自適應
如何使得較大的圖片,能夠自動適應小容器的寬度?CSS可以這樣寫:

復制代碼代碼如下:
  img {max-width: 100%}

但是IE6不支持max-width,所以遇到IE6時,使用IE條件注釋,將語句改寫為:

復制代碼代碼如下:
  img {width: 100%}

6. 3D按鈕
要使按鈕具有3D效果,只要將它的左上部邊框設為淺色,右下部邊框設為深色即可。

復制代碼代碼如下:
  div#button {
    background: #888;
    border: 1px solid;
    border-color: #999 #777 #777 #999;
  }

7. font屬性的快捷寫法
font快捷寫法的格式為:

復制代碼代碼如下:
  body {
    font: font-style font-variant font-weight font-size line-height font-family;
  }

所以,

復制代碼代碼如下:
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    font-variant: small-caps;
    font-style: italic;
    line-height: 150%;
  }

可以被寫成:

復制代碼代碼如下:
  body {
    font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
  }

8. link狀態的設置順序
link的四種狀態,需要按照下面的前後順序進行設置:

復制代碼代碼如下:
  a:link
  a:visited
  a:hover
  a:active

9. IE條件注釋
你可以利用條件注釋,設置只對IE產生作用的語句:

復制代碼代碼如下:
  <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
  < ![endif]-->

還可以區分各種不同的IE版本:

復制代碼代碼如下:
  <!--[if IE 6]> - targets IE6 only -->
  <!--[if gt IE 6]> - targets IE7 and above -->
  <!--[if lt IE 6]> - targets IE5.5 and below -->
  <!--[if gte IE 6]> - targets IE6 and above -->
  <!--[if lte IE 6]> - targets IE6 and below -->

10. IE6專用語句:方法一
由於IE6不把html視為文檔的根元素,所以利用這一點,可以寫出只有IE6才能讀到的語句:

復制代碼代碼如下:
  /* the following rules apply only to IE6 */
  * html{
  }
  * html body{
  }
  * html .foo{
  }

IE7專用語句則要寫成

復制代碼代碼如下:
  /* the following rules apply only to IE7 */
  *+html .foo{
  }

11. IE專用語句:方法二
除了IE6以外,所有浏覽器都不能識別屬性前的下劃線。而除了IE7之外,所有浏覽器都不能識別屬性前的*號,因此可以寫出只有這兩個浏覽器才能讀到的語句:

復制代碼代碼如下:
  .element {
    background: red; /* modern browsers */
    *background: green; /* IE 7 and below */
    _background: blue; /* IE6 exclusively */
  }

12. CSS的優先性
如果同一個容器被多條CSS語句定義,那麼哪一個定義優先呢?
基本規則是:
  行內樣式 > id樣式 > class樣式 > 標簽名樣式
比如,有一個元素:

復制代碼代碼如下:
  <div id="ID" class="CLASS" style="color:black;"></div>

行內樣式是最優先的,然後其他設置的優先性,從低到高依次為:

復制代碼代碼如下:
  div < .class < div.class < #id < div#id < #id.class < div#id.class

13. IE6的min-height
IE6不支持min-height,有兩種方法可以解決這個問題:
方法一:

復制代碼代碼如下:
  .element {
    min-height: 500px;
    height: auto !important;
    height: 500px;
  }

共有三條CSS語句,第一句是針對其他浏覽器設置最小高度,第三句是針對IE設置最小高度,第二句則是讓其他浏覽器覆蓋第三句的設置。
方法二:

復制代碼代碼如下:
  .element {
    min-height: 500px
    _height: 500px
  }

_height只有IE6能讀取。

14. font-size基准
浏覽器的缺省字體大小是16px,你可以先將基准字體大小設為10px:

復制代碼代碼如下:
  body {font-size:62.5%;}

後面統一采用em作為字體單位,2.4em就表示24px。

復制代碼代碼如下:
  h1 {font-size: 2.4 em}

15. Text-transform和Font Variant
Text-transform用於將所有字母變成小寫字母、大寫字母或首字母大寫:

復制代碼代碼如下:
  p {text-transform: uppercase}
  p {text-transform: lowercase}
  p {text-transform: capitalize}

Font Variant用於將字體變成小型的大寫字母(即與小寫字母等高的大寫字母)。

復制代碼代碼如下:
  p {font-variant: small-caps}

16. CSS重置
CSS重置用於取消浏覽器的內置樣式,請參考YUI和Eric Meyer的樣式表。

17. 用圖片充當列表標志
默認情況下,浏覽器使用一個黑圓圈作為列表標志,可以用圖片取代它:

復制代碼代碼如下:
  ul {list-style: none}
  ul li {
    background-image: url("path-to-your-image");
    background-repeat: none;
    background-position: 0 0.5em;
  }

18. 透明
將一個容器設為透明,可以使用下面的代碼:

復制代碼代碼如下:
  .element {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
  }

在這四行CSS語句中,第一行是IE專用的,第二行用於Firefox,第三行用於webkit核心的浏覽器,第四行用於Opera。

19. CSS三角形
如何使用CSS生成一個三角形?
先編寫一個空元素
  <div class="triangle"></div>
然後,將它四個邊框中的三個邊框設為透明,剩下一個設為可見,就可以生成三角形效果:

復制代碼代碼如下:
  .triangle {
    border-color: transparent transparent green transparent;
    border-style: solid;
    border-width: 0px 300px 300px 300px;
    height: 0px;
    width: 0px;
  }

20. 禁止自動換行
如果你希望文字在一行中顯示完成,不要自動換行,CSS命令如下:

復制代碼代碼如下:
h1 { white-space:nowrap; }

21. 用圖片替換文字
有時我們需要在標題欄中使用圖片,但是又必須保證搜索引擎能夠讀到標題,CSS語句可以這樣寫:

復制代碼代碼如下:
  h1 {
    text-indent:-9999px;
    background:url("h1-image.jpg") no-repeat;
    width:200px;
    height:50px;
  }

22. 獲得焦點的表單元素
當一個表單元素獲得焦點時,可以將其突出顯示:

復制代碼代碼如下:
  input:focus { border: 2px solid green; }

23. !important規則
多條CSS語句互相沖突時,具有!important的語句將覆蓋其他語句。由於IE不支持!important,所以也可以利用它區分不同的浏覽器。

復制代碼代碼如下:
  h1 {
    color: red !important;
    color: blue;
  }

上面這段語句的結果是,其他浏覽器都顯示紅色標題,只有IE顯示藍色標題。

24. CSS提示框
當鼠標移動到鏈接上方,會自動出現一個提示框。

復制代碼代碼如下:
  <a class="tooltip" href="#">鏈接文字 <span>提示文字</span></a>

CSS這樣寫:

復制代碼代碼如下:
  a.tooltip {position: relative}
  a.tooltip span {display:none; padding:5px; width:200px;}
  a:hover {background:#fff;} /*background-color is a must for IE6*/
  a.tooltip:hover span{display:inline; position:absolute;}

25. 固定位置的頁首
當頁面滾動時,有時需要頁首在位置固定不變,CSS語句可以這樣寫

復制代碼代碼如下:
  body{ margin:0;padding:100px 0 0 0;}
  div#header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:<length>;
  }
  @media screen{
    body>div#header{position: fixed;}
  }
  * html body{overflow:hidden;}
  * html div#content{height:100%;overflow:auto;}

IE6的另一種寫法(用於固定位置的頁腳):

復制代碼代碼如下:
  * html #footer {
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

26. 在IE6中設置PNG圖片的透明效果

復制代碼代碼如下:
  .classname {
    background: url(image.png);
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
        (src='image.png', sizingMethod='crop');
  }

27. 各類浏覽器的專用語句

復制代碼代碼如下:
  /* IE6 and below */
  * html #uno { color: red }
  /* IE7 */
  *:first-child+html #dos { color: red }
  /* IE7, FF, Saf, Opera */
  html>body #tres { color: red }
  /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
  html>/**/body #cuatro { color: red }
  /* Opera 9.27 and below, safari 2 */
  html:first-child #cinco { color: red }
  /* Safari 2-3 */
  html[xmlns*=""] body:last-child #seis { color: red }
  /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  body:nth-of-type(1) #siete { color: red }
  /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  body:first-of-type #ocho { color: red }
  /* saf3+, chrome1+ */
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    #diez { color: red }
  }
  /* iPhone / mobile webkit */
  @media screen and (max-device-width: 480px) {
    #veintiseis { color: red }
  }
  /* Safari 2 - 3.1 */
  html[xmlns*=""]:root #trece { color: red }
  /* Safari 2 - 3.1, Opera 9.25 */
  *|html[xmlns*=""] #catorce { color: red }
  /* Everything but IE6-8 */
  :root *> #quince { color: red }
  /* IE7 */
  *+html #dieciocho { color: red }
  /* Firefox only. 1+ */
  #veinticuatro, x:-moz-any-link { color: red }
  /* Firefox 3.0+ */
  #veinticinco, x:-moz-any-link, x:default { color: red }
  /***** Attribute Hacks ******/
  /* IE6 */
  #once { _color: blue }
  /* IE6, IE7 */
  #doce { *color: blue; /* or #color: blue */ }
  /* Everything but IE6 */
  #diecisiete { color/**/: blue }
  /* IE6, IE7, IE8 */
  #diecinueve { color: blue\9; }
  /* IE7, IE8 */
  #veinte { color/*\**/: blue\9; }
  /* IE6, IE7 -- acts as an !important */
  #veintesiete { color: blue !ie; } /* string after ! can be anything */

28. 容器的水平和垂直居中
HTML代碼如下:

復制代碼代碼如下:
  <figure class='logo'>
    <span></span>
    <img class='photo'/>
  </figure>

CSS代碼如下:

復制代碼代碼如下:
  .logo {
    display: block;
    text-align: center;
    display: block;
    text-align: center;
    vertical-align: middle;
    border: 4px solid #dddddd;
    padding: 4px;
    height: 74px;
    width: 74px; }
  .logo * {
    display: inline-block;
    height: 100%;
    vertical-align: middle; }
  .logo .photo {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%; }

29. CSS陰影
外陰影:

復制代碼代碼如下:
  .shadow {
    -moz-box-shadow: 5px 5px 5px #ccc;
    -webkit-box-shadow: 5px 5px 5px #ccc;
    box-shadow: 5px 5px 5px #ccc;
  }

內陰影:

復制代碼代碼如下:
  .shadow {
    -moz-box-shadow:inset 0 0 10px #000000;
    -webkit-box-shadow:inset 0 0 10px #000000;
    box-shadow:inset 0 0 10px #000000;
  }

30. 取消IE文本框的滾動條

復制代碼代碼如下:
  textarea { overflow: auto; }

31. 圖片預加載
請參考
http://www.jb51.net/article/32761.htm
http://www.jb51.net/css/68340.html
32. CSS重置
請參考http://www.jb51.net/css/68582.html
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved