CSS技巧讓你的網站更上一層樓

CSS是網站的外衣，所謂人靠衣裝，佛靠金裝，CSS決定了你給使用者的第一感覺。雖然一直在做網站的架構和後端開發，但是還是需要多揣點CSS技巧，以防萬一。 

01.DIV水準居中 

DIV 水準居中很簡單，隻需要設定DIV的寬帶以及讓左右margins設定成auto： 

div#container {width: 960px; margin: 0 auto } 

02.文字垂直居中 

單行文字居中，隻需要将行高和容器高度設定成一樣即可。比如下面的HTML代碼： 

<div id="container">我是一行字</div> 

然後通過下面的樣式就可以居中： 

div#container {height: 35px; line-height: 35px;} 

如何你有很多行字，隻要将行高設定成容器的高度的1/N就好。 

03.DIV垂直居中 

比如有以下兩個div，如何讓包在中間的div垂直居中，這裡有一篇詳細的介紹文章。 

<div id="f"> 

　<div id="s">Some Things!</div> 

</div> 

首先，将外層容器的定位為relative。 

div#f{ position:relative; height:500px; } 

然後，将裡面的容器定位設定成absolute，再将它的左上角沿y軸下移50%，最後将它margin-top上移本身高度的50%即可。 

div#s { position: absolute; top: 50%; height: 250px; margin-top: -125px; } 

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

04.自适應寬帶的圖檔 

可以通過以下樣式實作隻适用外層容器大小的圖檔: 

img {max-width: 100%} 

/* IE 6 hack */ 

<!--[if IE 6]> 

img {width: 100%} 

<![endif]--> 

05.3D按鈕 

要想讓按鈕具有3D效果，可以将它的左上部邊框設為淺色，右下部邊框設為深色即可。 

div#button { 

   background: #888; 

   border: 1px solid; 

   border-color: #999 #777 #777 #999; 

  } 

06. CSS Font 縮寫 

body { 

   font-family: Arial, Helvetica, sans-serif; 

   font-size: 13px; 

   font-weight: normal; 

   font-variant: small-caps; 

   font-style: italic; 

   line-height: 150%; 

} 

/* 可以縮寫成以下這種方式 */ 

   font: font-style font-variant font-weight font-size/line-height font-family; 

詳細介紹參見：A Primer on the CSS Font Shorthand Property 

06.可以在DIV上設定多個class 

<div class="class-1 class-2 class-3">content</div> 

  class-2 {color: blue}  

  class-3 {color: green}  

  class-1 {color: red} 

08.圓角 

CSS3中很容易實作圓角： 

.element {border-radius: 5px} 

但是在CSS3還沒全民普及之前我在 Safari, Chrome, 之類 webkit 核心的浏覽器中使用 -webkit-border-radius 以及在 Firefox 這些基于 Mozilla 的浏覽器使用 -moz-border-radius 來實作圓角。 

/* Safari, Chrome */ 

.element { 

   border-radius: 5px 

   -webkit-border-radius: 5px 

   -moz-border-radius: 5px 

/* Firefox */ 

   border-top-left-radius: 5px 

   -webkit-border-top-left-radius: 5px 

   -moz-border-radius-top-left 

至于其他的浏覽器可以用JQuery 插件來實作圓角。 

$(".element").corner("5px"); 

09.link 狀态的設定順序 

a:link  

a:visited  

a:hover  

a:active 

簡單記憶法：love hate (LVHA) 

10.Clearing and Containing Floats 

使用 float 和 clear 設定容器的排序，具體的還是看這篇文章吧。 

11.條件注釋 

條件注釋隻适用于IE這個杯具的浏覽器。 

<!--[if IE]> 

<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" /> 

< ![endif]--> 

<!--[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 --> 

12.HTML Hack for IE 

IE這個杯具的浏覽器可以通過以下方式進行 hack 。被hack的css隻會運作在特定的浏覽器上。 

/* the following rules apply only to IE6 */ 

* html{ 

* html body{ 

* html .foo{ 

/* the following rules apply only to IE7 */ 

*+html .foo{ 

13.CSS的優先級 

基本規則是：行内樣式 > id樣式 > class樣式 > 标簽名樣式。 

14.IE中min-height修正 

由于IE6不支援min-height，我們可以通過以下這些方式修正： 

/* 方法一 */ 

　min-height: 500px; 

　height: auto !important; 

　height: 500px; 

/* 方法二 */ 

　min-height: 500px 

　_height: 500px /* _ 隻有IE6才能讀取 */ 

15.font-size 基準 

/* 假設浏覽器的預設的大小是 16px ， 首先将其設定為10px (font-size:10/16) */ 

body {font-size:10/16;} 

/* 然後就可以用em做統一字型機關了 2.4em = 24px */ 

h1 {font-size: 2.4 em} 

16.100% Height 

通過内部容器将頁面撐開，在IE中的min-height可以通過上面hack解決： 

  html, body {height: 100%} 

  #content {min-height: 100%} 

17. CSS Drop Caps 

首字母樣式定義： 

p:first-letter { 

  display: block; 

  float: left; 

  margin: 5px 5px 0 0; 

  color: red 

  font-size: 1.4em; 

  background: #ddd; 

  font-family: Helvetica; 

18.取消link外面的框框 

a {outline: none} or a {outline: 0} 

19.Text-transform 

p {text-transform: uppercase} /* 全部大寫 */ 

p {text-transform: lowercase} /* 全部小寫 */ 

p {text-transform: capitalize} /* 首字母大寫 */ 

20.Font Variant 

隻對英文有效，将字型整成等高的大寫字型。 

p {font-variant: small-caps} 

21.移除帶有連結的圖檔的外框 

  a image {border: none} or a image {border: 0} 

22.重置浏覽器的CSS 

參考 YUI 和 Eric Meyer 吧。 

23.設定背景圖的 Padding 

  /* background-position {top-value left-value} */ 

  {background-position: 5px 5px} 

24.用圖檔清單标志 

預設情況下，浏覽器是用一個黑圓圈作為清單标志，我們用圖檔取代它： 

  ul {list-style: none} 

  ul li { 

    background-image: url("dot.png"); 

    background-repeat: none; 

    background-position: 0 0.5em; 

25.透明容器 

如何将容器設定成透明： 

  filter:alpha(opacity=50); /* for ie */ 

  -moz-opacity:0.5; /* for ff */ 

  -khtml-opacity: 0.5; /* for webkit as chrome */ 

  opacity: 0.5; /* for opera */ 

26.三角形 

如何使用CSS生成一個三角形？簡單方案：将它四個邊框中的三個邊框設為透明，隻剩下一個，就可以生成三角形效果： 

  border-color: transparent transparent green transparent; 

  border-style: solid; 

  border-width: 0px 300px 300px 300px; 

  height: 0px; 

  width: 0px; 

27. 禁止自動換行 

h1 { white-space:nowrap; } 

28.用圖檔替換文字 

為了杯具的SEO，我需要在标題欄裡用圖檔展現，同時也要保證搜尋引擎能讀到标題。 

h1 { 

  text-indent:-9999px; 

  background:url("h1-image.jpg") no-repeat; 

  width:200px; 

  height:50px; 

29.突顯焦點元素 

input:focus { border: 2px solid green; } 

30.!important 

多條CSS語句沖突時，具有!important的語句将覆寫其他語句。由于IE不支援!important，是以也可以利用它區分不同的浏覽器。 

/* IE 顯示藍色标題，其他浏覽器顯示紅色标題 */ 

  color: red !important; 

  color: blue; 

31.CSS實作提示框 

當滑鼠移動到連結上方，會自動出現一個提示框: 

  <a class="tooltip" href="#">Link<span>Tooltips</span></a> 

  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;} 

32.固定頁頭 

當頁面滾動的時候，頁首固定在位置不變，适合導覽列: 

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;}

本文轉自寒意部落格園部落格，原文連結：http://www.cnblogs.com/hnyei/archive/2011/11/12/2246417.html，如需轉載請自行聯系原作者