实用的CSS代码片断有哪些

实用的CSS代码片断有哪些，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

CSS是大家在web开发中常用的语言，但是有时候使用非常不爽。某一个CSS可能应用在不同的浏览器中行为不全一样。所以大家得花很多时间来进行调试。

幸运的是，网络上大家可以找到很多不错的CSS代码片断，能够有效地帮助大家解决一般性的或者设计问题。这里我们收集了30个CSS的代码片断帮助大家调试。

代码

1. Chris Poteet’s CSS浏览器重置代码

这个代码能够有效地帮助大家解决跨浏览器问题。虽然不支持IE6，但是对于这种美国占有率低于1%的浏览器，大家大可以放弃。

  * {  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.

  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;  }   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-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-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) {     }   @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {     }   @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {     }

6. Style links depending on file format

修改外部链接，email链接，pdf链接的样式

 a[href^="http://"]{      padding-right: 20px;      background: url(external.gif) no-repeat center right;  }     a[href^="mailto:"]{  padding-right: 20px;   background: url(email.png) no-repeat center right;   }     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：

  * {margin:0;padding:0;}      html, body {height: 100%;}   #wrap {min-height: 100%;}   #main {overflow:auto;      padding-bottom: 150px;}    #footer {position: relative;      margin-top: -150px;      height: 150px;      clear:both;}     body:before { content:"";  height:100%;  float:left;  width:0;  margin-top:-32767px; }   

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

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%;  }  p {    font-size: 1.2em;  }

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;                white-space: pre-wrap;           white-space: pre-line;           white-space: -pre-wrap;          white-space: -o-pre-wrap;        white-space: -moz-pre-wrap;      white-space: -hp-pre-wrap;       word-wrap: break-word;           }

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';      class="lazy" data-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帮助你让你的网站在所有浏览器下显示一致

   * html #uno  { color: red }    *:first-child+html #dos { color: red }     html>body #tres { color: red }    html>body #cuatro { color: red }    html:first-child #cinco { color: red }    html[xmlns*=""] body:last-child #seis { color: red }    body:nth-of-type(1) #siete { color: red }    body:first-of-type #ocho {  color: red }    @media screen and (-webkit-min-device-pixel-ratio:0) {   #diez  { color: red  }  }    @media screen and (max-device-width: 480px) {   #veintiseis { color: red  }  }    html[xmlns*=""]:root #trece  { color: red  }    *|html[xmlns*=""] #catorce { color: red  }    :root *> #quince { color: red  }    *+html #dieciocho {  color: red }    #veinticuatro,  x:-moz-any-link  { color: red }    #veinticinco,  x:-moz-any-link, x:default  { color: red  }    body:not(:-moz-handler-blocked) #cuarenta { color: red; }      #once { _color: blue }    #doce { *color: blue;  }    #diecisiete { color: blue }    #diecinueve { color: blue\9; }    #veinte { color: blue\9; }    #veintesiete { color: blue !ie; }    #anotherone  {color: blue\0/;} 

25. How To Change The Default Text Selection Color on your Blog

修改高亮的文字颜色

::selection {     background: #ffb7b7;          color: #ffffff;     }  ::-moz-selection {     background: #ffb7b7;          color: #ffffff;     }

26. Clearfix

.clearfix:after {      visibility: hidden;      display: block;      font-size: 0;      content: " ";      clear: both;      height: 0;  }   .clearfix { display: inline-block; }    * html .clearfix { height: 1%; }  .clearfix { display: block; }  

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代码片断有哪些的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网行业资讯频道，感谢各位的阅读！