實用的CSS代碼片斷有哪些

實用的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代碼片斷有哪些的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！