CSS 是我們使用的功能強大和最常用web 語言。他可以兼容新舊不同的瀏覽器，他的兼容跨度確實夠大的，從微軟的IE到火狐再到谷歌瀏覽器。在設計的時候我們總是想創建更有創意和風格的網站，無論創建怎么樣的網站，有些CSS代碼是必須要掌握的，可以說這是核心，掌握這樣的一些CSS代碼，前端布局方面基本上再不成問題，什么邊框圓角，工具提示，瀏覽器hacks等等都不是問題。
在今天的文章中分享我收藏的 30 個CSS 代碼段，無論您是經驗豐富的 web 設計師還是新手，他們都是非常值得借鑒的；

Css Reset by Eric Meyer


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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

根據文件格式顯示不同的鏈接樣式

/* external links */
a[href^=”http://”]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^=”mailto:”]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=”.pdf”]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}

在IE瀏覽器刪除textarea的滾動條

textarea{
overflow:auto;
}

瀏覽器特定的 hacks

/* IE 6 */
* html .yourclass { }
/* IE 7 */
*+html .yourclass{ }
/* IE 7 and modern browsers */
html>body .yourclass { }
/* Modern browsers (not IE 7) */
html>/**/body .yourclass { }
/* Opera 9.27 and below */
html:first-child .yourclass { }
/* Safari */
html[xmlns*=””] body:last-child .yourclass { }
/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */