前端开发人员有用的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, 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; 

 

圆角

.round{ 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; /* future proofing */ 
-khtml-border-radius: 10px; /* for old Konqueror browsers */ 

 

伪元素向文本的第一个字母添加特殊样式 

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"> 

 

还有一些常用的持续更新中

zhaoan

一个不起眼的IT工作者,从事过的行业较多,医疗保健、医院、月子会所、机电、重卡、软件,涉及的岗位也较多,零售、市场、平面设计、网站设计、UI设计、前端开发、后端开发、网络布线、设备维护、服务器维护、网络推广、网站运营、新媒体运营、部门管理等等,每个岗位工作基本都能独立完成,但是涉及面广导致都不精通,学习还在继续中。。。

You may also like...