10個非常有用的CSS技巧

1. 將網頁或元素居中

HTML：

<div class="wrap">
</div><!-- end wrap -->

 CSS：

.wrap { width:960px; margin:0 auto;}

 2. Sticky Footer (讓頁腳永遠停靠在頁面底部，而不是根據絕對位置)

HTML：<>

<div id="wrap">
 <div id="main" class="clearfix">
 </div>
</div>
<div id="footer">
</div>

CSS：

* { margin:0; padding:0; }

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 150px; }  /* must be same height as the footer */

#footer {
 position: relative;
 margin-top: -150px; /* negative value of footer height */
 height: 150px;
 clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

3. 跨瀏覽器最小高度設置

HTML：

<div class="element">

</div>

CSS：

.element { min-height:600px; height:auto !important; height:600px; }

 4. Box陰影(CSS3)

HTML：

<div>
 <div class="box"></div>
</div>

CSS：

.box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }

5. 文字陰影（CSS3）

HTML：

<div class="text">The Word</div>

CSS：

.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }

6. 跨瀏覽器的CSS透明度

HTML：

<div class="transparent"></div>

CSS：

.transparent {

  /* Modern Browsers */ opacity: 0.7;

  /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

  /* IE 5-7 */ filter: alpha(opacity=70);

  /* Netscape */ -moz-opacity: 0.7;

  /* Safari 1 */ -khtml-opacity: 0.7;

}

7. 著名的 Meyer Reset（樣式重置）

CSS：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: inherit;
 vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
 outline: 0;
}
body {
 line-height: 1;
 color: black;
 background: white;
}
ol, ul {
 list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: separate;
 border-spacing: 0;
}
caption, th, td {
 text-align: left;
 font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: "";
}
blockquote, q {
 quotes: "" "";
}

8. 刪除虛線輪廓 

HTML：

<a href="#">aa</a>

CSS：

a, a:active {outline: none;}

9.圓角

HTML：

<div class="element">
 <div class="element-top-left-corner"></div>
</div>

CSS：

.element {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px; /* future proofing */
}
.element-top-left-corner {
 -moz-border-radius-topleft: 5px;
 -webkit-border-top-left-radius: 5px;
}

10. 覆蓋內聯的樣式

HTML：

<div>
 <div class="override">The Word</div>
</div>

CSS：

.override {
 font-size: 14px !important;
}