Web开发者不容错过的20段CSS代码之一

来源：互联网发布：使人变老的软件编辑：程序博客网时间：2024/05/09 15:50

共享已成为互联网的一种主流，尤其是分享一些非常实用的技术，本文收集了20段非常专业的CSS 2/CSS3代码片段给大家，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。

Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。

本文将分享20段非常专业的CSS2/CSS3代码供大家使用，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。

1. CSS Resets

网络上关于CSS重置的代码非常多。本段代码是根据EricMeyer’s resetcodes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。

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

2.经典的CSS Clearfix

这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。

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

3.升级版的Clearfix

在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE6-8。

.clearfix:before,.container:after { content: ""; display: table;}

.clearfix:after{ clear: both;}

.clearfix {zoom: 1;}

4. Cross-Browser Transparency

CSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。

.transparent {

filter:alpha(opacity=50);

-khtml-opacity: 0.5;

-moz-opacity: 0.5;

opacity: 0.5;

}

源码地址：

http://perishablepress.com/cross-browser-transparency-via-css/

5. CSS Blockquote模板

这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。

blockquote{

background: #f9f9f9;<</code>

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;

}

查看源码： http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

6. 个性化的圆角代码

许多CSS开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！

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

}

#container{

-webkit-border-top-left-radius: 4px;

-webkit-border-top-rightright-radius: 3px;

-webkit-border-bottom-rightright-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;

}

7. 一般媒体查询

这是一段非常好的模板，用于各种零零碎碎的媒体查询，在移动设备上也可以使用，这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。

@mediaonly screen

and(min-device-width : 320px) and(max-device-width : 480px){

}

@mediaonly screen and (min-width: 321px){

}

@mediaonly screen and (max-width: 320px){

}

@mediaonly screen and(min-device-width : 768px) and(max-device-width : 1024px){

}

@mediaonly screen and(min-device-width : 768px) and(max-device-width : 1024px) and(orientation : landscape){

}

@mediaonly screen and(min-device-width : 768px) and(max-device-width : 1024px) and(orientation : portrait){

}

@mediaonly screen and (min-width: 1224px){

}

@mediaonly screen and (min-width: 1824px){

}

@mediaonly screen and(-webkit-min-device-pixel-ratio:1.5),only screen and(min-device-pixel-ratio:1.5){

}

源码地址： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

8. 现代字体栈

在新网页上设计属于自己的字体栈还是件比较困难的事情，希望下面这段代码能给你带来启发和开发模板，关于更多字体栈源码，你可以访问CSSFont Stacks。

font-family:Cambria, "HoeflerText",Utopia, "LiberationSerif", "NimbusRoman No9 L Regular",Times, "TimesNew Roman", serif;

font-family:Constantia, "LucidaBright",Lucidabright, "LucidaSerif",Lucida, "DejaVuSerif," "BitstreamVera Serif", "LiberationSerif",Georgia, serif;

font-family: "PalatinoLinotype", Palatino,Palladio, "URWPalladio L", "BookAntiqua",Baskerville, "BookmanOld Style", "BitstreamCharter", "NimbusRoman No9 L",Garamond, "AppleGaramond", "ITCGaramond Narrow", "NewCentury Schoolbook", "CenturySchoolbook", "CenturySchoolbook L",Georgia, serif;

font-family:Frutiger, "FrutigerLinotype", Univers,Calibri, "GillSans", "GillSans MT", "MyriadPro",Myriad, "DejaVuSans Condensed", "LiberationSans", "NimbusSans L", Tahoma,Geneva, "HelveticaNeue", Helvetica, Arial, sans-serif;

font-family:Corbel, "LucidaGrande", "LucidaSans Unicode", "LucidaSans", "DejaVuSans", "BitstreamVera Sans", "LiberationSans", Verdana, "VerdanaRef", sans-serif;

font-family: "SegoeUI",Candara, "BitstreamVera Sans", "DejaVuSans", "BitstreamVera Sans", "TrebuchetMS", Verdana, "VerdanaRef", sans-serif;

font-family: Impact,Haettenschweiler, "FranklinGothic Bold",Charcoal, "HelveticaInserat", "BitstreamVera Sans Bold", "ArialBlack", sans-serif;

font-family:Consolas, "AndaleMono WT", "AndaleMono", "LucidaConsole", "LucidaSans Typewriter", "DejaVuSans Mono", "BitstreamVera Sans Mono", "LiberationMono", "NimbusMono L",Monaco, "CourierNew", Courier, monospace;

源码地址： http://www.sitepoint.com/eight-definitive-font-stacks/

9. 自定义文本选择

一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色，下面代码的默认颜色是浅蓝色，当然，你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection。

::selection{ background: #e2eae2;}

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

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

10.隐藏Logo上的H1文本

h1 {

text-indent: -9999px;

margin: 0 auto;

width: 320px;

height: 85px;

background: transparent url("images/logo.png") no-repeat scroll;

}