樣式重置

時間 2019-12-10

標籤樣式重置简体版

原文原文鏈接

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重置是網絡上最多見的代碼片斷. 這是我本身定製的重置代碼，它基於 Eric Meyer’s reset codes。裏面有一些圖片的設定以及爲全部的核心元素定義邊框, 保持適當的marings 和 padding. html

2.經典的 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年更新web

.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屬性咱們可能認爲它適用於任何地方. 實際上不行,咱們還得稍微調整下,透明度就是個例子. 加上這個filter屬性來保證它能在IE遊覽器里正常運行.canvas

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

不是全部的人都必須在他們的網站上使用blockquotes. 可是我認爲這是一個很好的元素用於分離引用或是優化博客和網頁上的重複內容. 上面的代碼爲你的blockquotes提供一個默認樣式,這樣你的內容就不會看起來單調乏味.瀏覽器

5.個性的圓角

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

大多數開發者都熟悉CSS3的圓角屬性. 可是你知道如何爲每一個角設定不一樣的值嗎? 上面的代碼幫你搞定這個問題! 上面的兩個版本都爲你實現了這個效果,仔細研究下吧.ruby

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 */ }

這是一個很棒的模版，你能在CSS-Tricks找到其它零碎的媒體查詢。無論怎樣我已經把他們的例子全拷下來了，那裏麪包括了成噸的實際的移動設備。這些代碼甚至能針對視網膜屏設備，使用最小設備像素比例網絡

7.現代字體棧

/* 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;

你很難爲設計一個新的頁面頭腦風暴式的想出本身的CSS字體棧。我但願這一小片代碼能減輕一些折磨，並給你一些能夠着手開始的模版。若是你想找更多的例子，查看一下CSS 字體棧，這是我最喜歡的資源之一。app

8.自定義文本選擇

::selection { background: #e2eae2; } ::-moz-selection { background: #e2eae2; } ::-webkit-selection { background: #e2eae2; }

一些新式的瀏覽器會容許你定義頁面中的高亮顏色。默認這是設爲淡藍色的，但你能夠設置任何投你所好的顏色值，這小片代碼包括了典型的::selection目標以及專爲Webkit和Mozilla的特定前綴。ide

9.隱藏H1文本爲Logo標誌

h1 { text-indent: -9999px; margin: 0 auto; width: 320px; height: 85px; background: transparent url("images/logo.png") no-repeat scroll; }

我第一次注意到這個技術實現是在古老的Digg 佈局。爲了SEO的目的，你也能夠設置一個包含有你的站點名稱的H1標籤。但使用CSS咱們能移走這個文本使它不可見，並用一個客製化的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*/ }

應用這個基礎的片斷將使你能在你的圖像上實現.polaroid 類。這將會建立老照片風格效果，帶一個很寬的白邊和一些淡淡的陰影。你要更新寬/高數值，以便和你的圖片尺寸和網站佈局相匹配。字體

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)不一樣，它們出如今你的博客或者新聞文章的一邊。這些引文常常從文章中引用文本，因此它們和塊引用顯示的稍許不同。這些默認類具備一些基礎的屬性，帶有3個可供選擇的獨特的字體類型。

12..全屏背景和CSS3

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

我應該標註一下這個代碼在不支持CSS3語法的老式瀏覽器中不會正確的工做。然而若是你是在尋找一個不須要關心遺留系統支持的快速的解決方案，這是你能找到的最好的代碼段！給你網站背景增長很大的照片同時又能使它們能在你滾動的時候保持可變尺寸和固定不動。