介绍
以下是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)";/*IE8*/
filter:alpha(opacity=50);/*IE5-7*/
-moz-opacity:0.5;/*Netscape*/
-khtml-opacity:0.5;/*Safari1.x*/
opacity:0.5;/*Goodbrowsers*/
}
常规媒体查询
/*Smartphones(portraitandlandscape)———–*/
@mediaonlyscreenand(min-device-width:320px)and(max-device-width:480px){
}
/*Smartphones(landscape)———–*/
@mediaonlyscreenand(min-width:321px){
}
/*Smartphones(portrait)———–*/
@mediaonlyscreenand(max-width:320px){
}
/*iPads(portraitandlandscape)———–*/
@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px){
}
/*iPads(landscape)———–*/
@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:landscape){
}
/*iPads(portrait)———–*/
@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:portrait){
}
/*Desktopsandlaptops———–*/
@mediaonlyscreenand(min-width:1224px){
}
/*Largescreens———–*/
@mediaonlyscreenand(min-width:1824px){
}
/*iPhone4———–*/
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(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-repeatcentercenterfixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
强制垂直滚动条
html{
height:101%
}
文本首字母大写
p:first-letter{
display:block;
margin:4px004px;
float:left;
color:#ff3366;
font-size:5.3em;
font-family:Georgia,TimesNewRoman,serif;
}
内外阴影
#mydiv{
-moz-box-shadow:inset2px04px#000;
-webkit-box-shadow:inset2px04px#000;
box-shadow:inset2px04px#000;
}
#mydiv{
-webkit-box-shadow:02px2px-2pxrgba(0,0,0,0.52);
-moz-box-shadow:02px2px-2pxrgba(0,0,0,0.52);
box-shadow:02px2px-2pxrgba(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:30pxsolidtransparent;
border-top-color:#00aabb;
border-bottom:0;
border-left:0;
margin-left:-15px;
margin-bottom:-30px;
}
自定义输入样式
input[type=text],textarea{
-webkit-transition:all0.30sease-in–out;
-moz-transition:all0.30sease-in–out;
-ms-transition:all0.30sease-in–out;
-o-transition:all0.30sease-in–out;
outline:none;
padding:3px0px3px3px;
margin:5px1px3px0px;
border:1pxsolid#ddd;
}
input[type=text]:focus,textarea:focus{
box-shadow:005pxrgba(81,203,238,1);
padding:3px0px3px3px;
margin:5px1px3px0px;
border:1pxsolidrgba(81,203,238,1);
}
