abstract：1.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, img, ins, kbd, q, s, samp, small, strike, s
1.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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }基本的CSS重置是網(wǎng)絡(luò)上最常見的代碼片段. 這是我自己定制的重置代碼，它基于 Eric Meyer’s reset codes。里面有一些圖片的設(shè)定以及為所有的核心元素定義邊框, 保持適當(dāng)?shù)膍arings 和 padding.2.經(jīng)典的 CSS Clearfix.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }2011年更新.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }3.跨瀏覽器的透明度.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}一些新的CSS3屬性我們可能認(rèn)為它適用于任何地方. 實(shí)際上不行,我們還得稍微調(diào)整下,透明度就是個(gè)例子. 加上這個(gè)filter屬性來保證它能在IE游覽器里正常運(yùn)行.4.CSS 塊引用模版blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
}
blockquote p {
display: inline;
}不是所有的人都必須在他們的網(wǎng)站上使用blockquotes. 但是我認(rèn)為這是一個(gè)很好的元素用于分離引用或是優(yōu)化博客和網(wǎng)頁上的重復(fù)內(nèi)容. 上面的代碼為你的blockquotes提供一個(gè)默認(rèn)樣式,這樣你的內(nèi)容就不會(huì)看起來單調(diào)乏味.5.個(gè)性的圓角#container {
-webkit-border-radius: 4px 3px 6px 10px;
-moz-border-radius: 4px 3px 6px 10px;
-o-border-radius: 4px 3px 6px 10px;
border-radius: 4px 3px 6px 10px;
}
/* alternative syntax broken into each line */
#container {
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 10px;
}大多數(shù)開發(fā)者都熟悉CSS3的圓角屬性. 但是你知道如何為每個(gè)角設(shè)定不同的值嗎? 上面的代碼幫你搞定這個(gè)問題! 上面的兩個(gè)版本都為你實(shí)現(xiàn)了這個(gè)效果,仔細(xì)研究下吧.6.一般媒體查詢/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
}這是一個(gè)很棒的模版，你能在CSS-Tricks找到其它零碎的媒體查詢。不管怎樣我已經(jīng)把他們的例子全拷下來了，那里面包括了成噸的實(shí)際的移動(dòng)設(shè)備。這些代碼甚至能針對(duì)視網(wǎng)膜屏設(shè)備，使用最小設(shè)備像素比例7.現(xiàn)代字體棧/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/*A more traditional Garamond-based serif */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/*The Helvetica/Arial-based sans serif */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
/*The Verdana-based sans serif */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
/*The Trebuchet-based sans serif */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
/*The heavier "Impact" sans serif */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
/*The monospace */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;你很難為設(shè)計(jì)一個(gè)新的頁面頭腦風(fēng)暴式的想出自己的CSS字體棧。我希望這一小片代碼能減輕一些折磨，并給你一些可以著手開始的模版。如果你想找更多的例子，查看一下CSS 字體棧，這是我最喜歡的資源之一。8.自定義文本選擇::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }一些新式的瀏覽器會(huì)允許你定義頁面中的高亮顏色。默認(rèn)這是設(shè)為淡藍(lán)色的，但你可以設(shè)置任何投你所好的顏色值，這小片代碼包括了典型的::selection目標(biāo)以及專為Webkit和Mozilla的特定前綴。9.隱藏H1文本為L(zhǎng)ogo標(biāo)志h1 {
text-indent: -9999px;
margin: 0 auto;
width: 320px;
height: 85px;
background: transparent url("images/logo.png") no-repeat scroll;
}我第一次注意到這個(gè)技術(shù)實(shí)現(xiàn)是在古老的Digg 布局 。為了SEO的目的，你也可以設(shè)置一個(gè)包含有你的站點(diǎn)名稱的H1標(biāo)簽。但使用CSS我們能移走這個(gè)文本使它不可見，并用一個(gè)客制化的logo圖片替換它10.polaroid圖像邊界img.polaroid {
background:#000; /*Change this to a background image or remove*/
border:solid #fff;
border-width:6px 6px 20px 6px;
box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
height:200px; /*Set to height of your image or desired div*/
width:200px; /*Set to width of your image or desired div*/
}應(yīng)用這個(gè)基礎(chǔ)的片段將使你能在你的圖像上實(shí)現(xiàn).polaroid 類。這將會(huì)創(chuàng)建老照片風(fēng)格效果，帶一個(gè)很寬的白邊和一些淡淡的陰影。你要更新寬/高數(shù)值，以便和你的圖片尺寸和網(wǎng)站布局相匹配。11.花式CSS3 Pull-引文.has-pullquote:before {
/* Reset metrics. */
padding: 0;
border: none;
/* Content */
content: attr(data-pullquote);
/* Pull out to the right, modular scale based margins. */
float: right;
width: 320px;
margin: 12px -140px 24px 36px;
/* Baseline correction */
position: relative;
top: 5px;
/* Typography (30px line-height equals 25% incremental leading) */
font-size: 23px;
line-height: 30px;
}
.pullquote-adelle:before {
font-family: "adelle-1", "adelle-2";
font-weight: 100;
top: 10px !important;
}
.pullquote-helvetica:before {
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
top: 7px !important;
}
.pullquote-facit:before {
font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
font-weight: bold;
top: 7px !important;
}Pull-引文(Pull-quotes)與塊引用(blockquotes)不同，它們出現(xiàn)在你的博客或者新聞文章的一邊。這些引文經(jīng)常從文章中引用文本，所以它們和塊引用顯示的稍許不一樣。這些默認(rèn)類具有一些基礎(chǔ)的屬性，帶有3個(gè)可供選擇的獨(dú)特的字體類型。12..全屏背景和CSS3html {
background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}我應(yīng)該標(biāo)注一下這個(gè)代碼在不支持CSS3語法的老式瀏覽器中不會(huì)正確的工作。然而如果你是在尋找一個(gè)不需要關(guān)心遺留系統(tǒng)支持的快速的解決方案，這是你能找到的最好的代碼段！給你網(wǎng)站背景增加很大的照片同時(shí)又能使它們能在你滾動(dòng)的時(shí)候保持可變尺寸和固定不動(dòng)。13.垂直居中內(nèi)容.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}使用 margin: 0 auto 技術(shù)，很容易就能使內(nèi)嵌的內(nèi)容位于你頁面的水平正中。然而對(duì)垂直的文本要困難的多，尤其是考慮到滾動(dòng)條和其它的方式。但這個(gè)是無需JavaScript就能完美無瑕工作的純CSS解決方案。