分享30個開發人員有用的CSS代碼片斷

時間 2019-11-25
原文原文鏈接
Css Reset by Eric Meyercss
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, font, 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 {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-size: 100%;
     vertical-align: baseline;
     background: transparent;
 }

 body {
     line-height: 1;
 }

 ol, ul {
     list-style: none;
 }

 blockquote, q {
     quotes: none;
 }

 blockquote:before, blockquote:after,
 q:before, q:after {
     content: '';
     content: none;
 }

 /* remember to define focus styles! */
 :focus {
     outline: 0;
 }

 /* remember to highlight inserts somehow! */
 ins {
     text-decoration: none;
 }

 del {
     text-decoration: line-through;
 }

 /* tables still need 'cellspacing="0"' in the markup */
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }

根據文件格式顯示不一樣的連接樣式
/* 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;
 }

在IE瀏覽器刪除textarea的滾動條
textarea{
overflow:auto;
}

瀏覽器特定的 hacks
/* IE 6 */
 * html .yourclass { }

 /* IE 7 */
 *+html .yourclass{ }

 /* IE 7 and modern browsers */
 html>body .yourclass { }

 /* Modern browsers (not IE 7) */
 html>/**/body .yourclass { }

 /* Opera 9.27 and below */
 html:first-child .yourclass { }

 /* Safari */
 html[xmlns*=""] body:last-child .yourclass { }

 /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
 body:nth-of-type(1) .yourclass { }

 /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
 body:first-of-type .yourclass {  }

 /* Safari 3+, Chrome 1+ */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
  .yourclass  {  }
 }

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

固定寬度且居中
.wrapper {
width:960px;
margin:0 auto;
}

Rounded corners – border-radius
.round{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px; /*future proofing */5-khtml-border-radius:10px; /*for old Konqueror browsers */6}
僞元素向文本的第一個字母添加特殊樣式
p:first-letter{
    display:block;
    margin:5px 0 0 5px;
    float:left;
    color:#000;
    font-size:60px;
    font-family:Georgia;
 }

使用 @fontface
@font-face {
     font-family: 'MyFontFamily';
     src: url('myfont-webfont.eot?') format('eot'),
          url('myfont-webfont.woff') format('woff'),
          url('myfont-webfont.ttf')  format('truetype'),
          url('myfont-webfont.svg#svgFontName') format('svg');
     }

跨瀏覽器的inline-block
li {
         width: 200px;
         min-height: 250px;
         border: 1px solid #000;
         display: -moz-inline-stack;
         display: inline-block;
         vertical-align: top;
         margin: 5px;
         zoom: 1;
         *display: inline;
         _height: 250px;
 }

Fixed Footer
#footer {
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
 }

 /* IE 6 */
 * html #footer {
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
 }

更改內容區域的大小
#content {
width:100%;
margin:0;
float:none;
}

CSS3 Media Queries （這個不經常使用主要用於智能設備的判斷顯示不一樣的媒體）
/* 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 */
 }

多背景圖片
#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;
}

多列
#columns-3 {
    text-align: justify;
    -moz-column-count: 3;
    -moz-column-gap: 12px;
    -moz-column-rule: 1px solid #c4c8cc;
    -webkit-column-count: 3;
    -webkit-column-gap: 12px;
    -webkit-column-rule: 1px solid #c4c8cc;
 }

在IE的最小高度
.box {
min-height:500px;
height:auto !important;
height:500px;
}
突出顯示文本樣式
::selection {
    color: #000000;
    background-color: #FF0000;
 }

 ::-moz-selection {
    color: #000000;
    background: #FF0000;
 }

Box Shadow
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
佔位符文本樣式
::-webkit-input-placeholder {color:#ccc;font-style:italic }
:-moz-placeholder           {color:#ccc;font-style:italic }

CSS3 3D文字效果
h1 {
   text-shadow: 0 1px 0 #ccc,
                0 2px 0 #c9c9c9,
                0 3px 0 #bbb,
                0 4px 0 #b9b9b9,
                0 5px 0 #aaa,
                0 6px 1px rgba(0,0,0,.1),
                0 0 5px rgba(0,0,0,.1),
                0 1px 3px rgba(0,0,0,.3),
                0 3px 5px rgba(0,0,0,.2),
                0 5px 10px rgba(0,0,0,.25),
                0 10px 10px rgba(0,0,0,.2),
                0 20px 20px rgba(0,0,0,.15);
 }

WebKit的邊界半徑修正
-webkit-background-clip: padding-box;

XBrowser的border-radius（CSS3PIE）
.roundbox {
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 -khtml-border-radius:8px;
 border-radius:8px;
 behavior: url(/PIE.htc);
 }

更好的兼容IE瀏覽器的
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS3工具提示（這個很實用，看我網站的導航工具提示效果)
a {
   color: #900;
   text-decoration: none;
 }

 a:hover {
   color: red;
   position: relative;
 }

 a[title]:hover:after {
   content: attr(title);
   padding: 4px 8px;
   color: #333;
   position: absolute;
   left: 0;
   top: 100%;
   white-space: nowrap;
   z-index: 20px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 0px 0px 4px #222;
   -webkit-box-shadow: 0px 0px 4px #222;
   box-shadow: 0px 0px 4px #222;
   background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
 }

CSS3背景大小
body {
   background: #000 url(http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg) center center fixed no-repeat;
   -moz-background-size: cover;
   background-size: cover;
 }

 @media only all and (max-width: 1024px) and (max-height: 768px) {
   body {   
     -moz-background-size: 1024px 768px;
     background-size: 1024px 768px;
   }
 }

跨瀏覽器的CSS頁面捲曲陰影
.page-curl {
 position: relative;
 background: #ffffff;
 background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
 -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }

 .page-curl:after {
 z-index: -1;
 position: absolute;
 background: transparent;
 width: 70%;
 height: 55%;
 content: '';
 right: 10px;
 bottom: 10px;
 -webkit-transform: skew(15deg) rotate(5deg);
 -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
 -moz-transform: skew(15deg) rotate(5deg);
 -moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }

 .page-curl:before {
 z-index: -2;
 position: absolute;
 background: transparent;
 width: 70%;
 height: 55%;
 content: '';
 left: 10px;
 bottom: 10px;
 -webkit-transform: skew(-15deg) rotate(-5deg);
 -webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
 -moz-transform: skew(-15deg) rotate(-5deg);
 -moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }

CSS3模糊文字
.blur {
color:transparent;
text-shadow:0 0 5px rgba(0,0,0,0.5);
}

修復 IE6/7 margin/padding雙倍 間距錯誤
ul li
 {
   float: right;
   margin-right: 10px;
   *display: inline; /*Target IE7 and bellow*/
   _display: inline; /*Target IE6 and bellow*/
 }
 /* This example fixes the double right margin bug */

連接僞類的順序
a:link {color:blue;}
a:visited {color:purple;}
a:hover {color:red;}
a:active {color:yellow;}
響應佈局的HTML Meta標籤
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
轉載自:http://www.9958.pw/post/csshtml