介紹

以下是10個來自于網絡收集的非常實用且重要的CSS代碼片段

 

 

 

 

CSS重置

這是CSS瀏覽器重置的基本和常見的CSS代碼段

 

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

跨瀏覽器透明度設置

.transparent {     
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8 */     
     filter: alpha(opacity=50); /* IE 5-7 */     
     -moz-opacity: 0.5;/* Netscape */     
     -khtml-opacity: 0.5; /* Safari 1.x */    
     opacity: 0.5;  /* Good browsers */ 
} 

 

常規媒體查詢

 

/* Smartphones (portrait and landscape) ----------- */ 
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    
} 
/* Smartphones (landscape) ----------- */ 
 @media only screen and (min-width : 321px) { 
    
} 
/* Smartphones (portrait) ----------- */ 
 @media only screen and (max-width : 320px) { 
     
} 
/* iPads (portrait and landscape) ----------- */ 
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
     
} 
/* iPads (landscape) ----------- */ 
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
     
} 
/* iPads (portrait) ----------- */ 
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
     
} 
/* Desktops and laptops ----------- */ 
 @media only screen and (min-width : 1224px) { 
    
} 
/* Large screens ----------- */ 
 @media only screen and (min-width : 1824px) { 
     
} 
/* iPhone 4 ----------- */ 
 @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { 
    
} 

 

自定義選中文本

 

::selection { 
     background: #51a351; 
} 
 ::-moz-selection { 
     background: #51a351; 
} 
 ::-webkit-selection { 
     background: #51a351; 
} 

 

帶CSS3的全屏背景

 

html { 
     background: url('images/bg.jpg') no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
} 

 

強制垂直滾動條

html { 
     height: 101%  
} 

文本首字母大寫

 

p:first-letter { 
     display: block; 
     margin: 4px 0 0 4px; 
     float: left; 
     color: #ff3366; 
     font-size: 5.3em; 
     font-family: Georgia, Times New Roman, serif; 
} 

 

內外陰影

 

#mydiv { 
     -moz-box-shadow: inset 2px 0 4px #000; 
     -webkit-box-shadow: inset 2px 0 4px #000; 
     box-shadow: inset 2px 0 4px #000; 
} 

 

 

#mydiv { 
     -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); 
     -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); 
     box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); 
} 

 

語音氣泡

 

.speech-bubble { 
    position: relative; 
    background: #00aabb; 
    border-radius: .4em; 
} 
  
.speech-bubble:after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    width: 0; 
    height: 0; 
    border: 30px solid transparent; 
    border-top-color: #00aabb; 
    border-bottom: 0; 
    border-left: 0; 
    margin-left: -15px; 
    margin-bottom: -30px; 
} 

 

自定義輸入樣式

 

input[type=text], textarea { 
     -webkit-transition: all 0.30s ease-in-out; 
     -moz-transition: all 0.30s ease-in-out; 
     -ms-transition: all 0.30s ease-in-out; 
     -o-transition: all 0.30s ease-in-out; 
     outline: none; 
     padding: 3px 0px 3px 3px; 
     margin: 5px 1px 3px 0px; 
     border: 1px solid #ddd; 
} 
 input[type=text]:focus, textarea:focus { 
     box-shadow: 0 0 5px rgba(81, 203, 238, 1); 
     padding: 3px 0px 3px 3px; 
     margin: 5px 1px 3px 0px; 
     border: 1px solid rgba(81, 203, 238, 1); 
}