实用的CSS代码片断有哪些，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
CSS是大家在web开发中常用的语言，但是有时候使用非常不爽。某一个CSS可能应用在不同的浏览器中行为不全一样。所以大家得花很多时间来进行调试。
幸运的是，网络上大家可以找到很多不错的CSS代码片断，能够有效地帮助大家解决一般性的或者设计问题。这里我们收集了30个CSS的代码片断帮助大家调试。
代码
1. Chris Poteet’s CSS浏览器重置代码
这个代码能够有效地帮助大家解决跨浏览器问题。虽然不支持IE6，但是对于这种美国占有率低于1%的浏览器，大家大可以放弃。
/* Reset Default Browser Styles - Place first in the listing of external style sheets for cascading. - Be sure to explicitly set margin/padding styles. - Styles are not reset that have to do with display (block, inline) are not reset. By: Chris Poteet & various influences */ * { vertical-align: baseline; font-family: inherit; font-style: inherit; font-size: 100%; border: none; padding: 0; margin: 0; } body { padding: 5px; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { margin: 20px 0; } li, dd, blockquote { margin-left: 40px; } dt { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; }2. Eric Meyer’s CSS Reset
Eric的CSS代码片断可能是最受欢迎的代码之一。甚至支持Blueprint CSS Framework.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }3. How to Create Multiple Borders in CSS3
非常酷的方式创建box阴影，允许你创建多个边框
box-shadow: 0 0 0 2px #000, 0 0 0 3px #999, 0 0 0 9px #fa0, 0 0 0 10px #666, 0 0 0 16px #fd0, 0 0 0 18px #000;
4. Tucked Corners
CSS代码允许你创建类似非常酷的Gravatar首页效果
div.tucked-corners { background: #f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } span.tucked-corners { background: #c4453c; display: block; height: 380px; position: relative; width: 580px; -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25); -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25); box-shadow: inset 0 0 10px hsla(0,0%,0%,.25); } /* Top Corner Effect */ .top-corners:after, .top-corners:before { background: #e6e6e6; content: ''; height: 50px; position: absolute; top: -25px; width: 100px; z-index: 10; -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); } .top-corners:after { left: -50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .top-corners:before { right: -50px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /* Bottom Corner Effect */ .bottom-corners:after, .bottom-corners:before { background: #e6e6e6; content: ''; height: 50px; position: absolute; bottom: -25px; width: 100px; -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); } .bottom-corners:after { left: -50px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .bottom-corners:before { right: -50px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }5. iPad-Specific CSS
修改一般的ipad屏幕布局
@media only screen and (device-width: 768px) { /* For general iPad layouts */ } @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { /* For portrait layouts only */ } @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { /* For landscape layouts only */ }6. Style links depending on file format
修改外部链接，email链接，pdf链接的样式
/* 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;7. Drop Caps
非常棒的跨浏览器代码帮助你使得每段文字的第一个字母更加
.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }明显CSS3也可以，但是不支持IE9
p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }8. CSS Sticky Footer
CSS实现的置顶sticky页脚效果，支持所有的主流浏览器包括chrome和IE8
CSS：
/* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */ html, body {height: 100%;} #wrap {min-height: 100%;} #main {overflow:auto; 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;} /*Opera Fix*/ body:before {/* thanks to Maleika (Kohoutec)*/ content:""; height:100%; float:left; width:0; margin-top:-32767px;/* thank you Erik J - negate effect of float*/ } /* IMPORTANT You also need to include this conditional style in the of your HTML file to feed this style to IE 6 and lower and 8 and higher. <!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style> < ![endif]--> */HTML：
<div id="wrap"> <div id="main"> </div> </div> <div id="footer"> </div>
9. Image Replacement Technique
实用的图片替换文字页面元素效果。
a.replacement { background: url(dotted-border.png) no-repeat; height: 44px; width: 316px; display: block; text-indent: -9999px; overflow: hidden; /*Add this line to the image replacement method*/ }10. Set body font-size to 62.5% for Easier em Conversion
如果你想拥有更加灵活的布局，你应该使用em而不是pixel或者points。通过设置你的字体62.5%，你可以很容易的通过设置em为pixel的1/10来设置文字。
body { font-size: 62.5%; /* font-size 1em = 10px */ } p { font-size: 1.2em; /* 1.2em = 12px */ }11. Vertically Align Text
如果你设置line-height和父元素高度相同，则很容易让文字垂直居中
div { width:100px; height:100px; } div p { line-height:100px; }12. How to Create 3D Text With CSS3
使用text-shadow属性，你可以只使用CSS3创建3D文字
p.threeD { text-shadow: -1px 1px 0 #ddd, -2px 2px 0 #c8c8c8, -3px 3px 0 #ccc, -4px 4px 0 #b8b8b8, -4px 4px 0 #bbb, 0px 1px 1px rgba(0,0,0,.4), 0px 2px 2px rgba(0,0,0,.3), -1px 3px 3px rgba(0,0,0,.2), -1px 5px 5px rgba(0,0,0,.1), -2px 8px 8px rgba(0,0,0,.1), -2px 13px 13px rgba(0,0,0,.1) ; }13. Wrapping Long URLs and Text Content with CSS
这段代码将会帮助你使得一行文字不至于太长，会自动根据内容宽度来折行
pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */ }14. Fancy Ampersand
使得你的"&"符号更加漂亮
.amp { font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; font-style: italic; font-weight: normal; }15. Pull Quotes for Improved Reading
使得你的引用更加明显，将引用浮动到左边或者右边，并且包围内容
.pullquote { width: 300px; float: right; margin: 5px; font-family: Georgia, "Times New Roman", Times, serif; font: italic bold #ff0000 ; }16. Rounded Borders Around Images
使用CSS3可以很容易的生成图片圆角
img { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; }17. Image Preloader
图片加载中先加载一个小图片，这样提示用户预加载图片
img { background: url(img/preloader.gif) no-repeat 50% 50%; }18. CSS3 Opacity
使用opacity属性，帮助你透明看到元素，你可以创建一个分层的纹理背景
div.L1 { background:#036; opacity:0.2; height:20px; } div.L2 { background:#036; opacity:0.4; height:20px; } div.L3 { background:#036; opacity:0.6; height:20px; } div.L4 { background:#036; opacity:0.8; height:20px; } div.L5 { background:#036; opacity:1.0; height:20px; }19. Highlight links that open in a new window
这段代码允许你通过显示不同的样式清楚地分辨新窗口/标签页打开的link。
a[target="_blank"]:before, a[target="new"]:before { margin:0 5px 0 0; padding:1px; outline:1px solid #333; color:#333; background:#ff9; font:12px "Zapf Dingbats"; content: "\279C"; }20. The New Bulletproof @Font-Face Syntax
跨浏览器的CSS代码片断，帮助你定义font face
@font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); }21. Flip an Image
翻转图片的CSS代码片断。特别适合你翻转图标
img { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }22. Email Link With An Image
快速的方法自动添加一个电子邮件图片到你的email链接
a[href^="mailto:"] { background: url(images/email.png) no-repeat right top; padding-right:10px; }23. Beautiful Blockquotes
美化你的引用
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; }24. Browser CSS hacks
大量的CSS hack帮助你让你的网站在所有浏览器下显示一致
/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body #cuatro { color: red } /* Opera 9.27 and below, safari 2 */ html:first-child #cinco { color: red } /* Safari 2-3 */ html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { color: red } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red } } /* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) { #veintiseis { color: red } } /* Safari 2 - 3.1 */ html[xmlns*=""]:root #trece { color: red } /* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""] #catorce { color: red } /* Everything but IE6-8 */ :root *> #quince { color: red } /* IE7 */ *+html #dieciocho { color: red } /* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { color: red } /* FF 3.5+ */ body:not(:-moz-handler-blocked) #cuarenta { color: red; } /***** Attribute Hacks ******/ /* IE6 */ #once { _color: blue } /* IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ } /* Everything but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8 */ #diecinueve { color: blue\9; } /* IE7, IE8 */ #veinte { color/*\**/: blue\9; } /* IE6, IE7 -- acts as an !important */ #veintesiete { color: blue !ie; } /* string after ! can be anything */ /* IE8, IE9 */ #anotherone {color: blue\0/;} /* must go at the END of all rules */25. How To Change The Default Text Selection Color on your Blog
修改高亮的文字颜色
::selection { background: #ffb7b7; /* Safari */ color: #ffffff; } ::-moz-selection { background: #ffb7b7; /* Firefox */ color: #ffffff; }26. Clearfix
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */27. Hide Logo Text With Text Indent
使得你的logo SEO友好。保证logo文字不显示
h1 { text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") no-repeat scroll; }28. Reset all Text Colors and Background Colors
重置所有的背景和文字颜色。
* { color: black !important; background-color: white !important; background-image: none !important; }29. Multiple Background Images
使用多背景图片
#multiple-images { background: url(image_1.png) top left no-repeat, url(image_2.png) bottom left no-repeat, url(image_3.png) bottom right no-repeat; }30. Linear Gradient
允许你为背景创建一个线状渐变效果，不支持一些老浏览器
background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc)); background: -moz-linear-gradient(top, #74b8d7, #437fbc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc');
看完上述内容，你们掌握实用的CSS代码片断有哪些的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
