实用css集合

1. 样式清空
   方案1：

    @charset "utf-8";
    /* CSS Document */
    body, div {
    	font-family:"Microsoft YaHei", "微软雅黑";
    	color: #666;
    	margin: 0 auto;
    	padding: 0;
    	text-align: center;
    	font-size: 12px;
    }
    dd, dl, dt, form, h1, h2, h3, h4, h5, h6, img, input, li, p, span, ul, ol {
    	padding: 0;
    	margin: 0;
    }
    img {
    	border: none;
    }
    a:link, a:visited {
    	text-decoration: none;
    }
    dd, li {
    	list-style-type: none;
    }
    .none {
    	display: none;
    }
    .clearfloat {
    	clear: both;
    	height: 0;
    	font-size: 0;
    	overflow: hidden;
    }
    ::-moz-selection {
    	background:#8DC63F;
    	color:#fff;
    }
    ::selection {
    	background: #8DC63F;
    	color: #fff;
    }
    a:focus, input {
    	outline: 0;
    }
    .fl {
    	float: left;
    }
    .fr {
    	float: right;
    }
    .clearfix:after {
    	content: "";
    	display: block;
    	clear: both;
    }
    .clearfix {
    	zoom: 1;
    }

方案2：

@charset "utf-8";

/* CSS Document */

html,
body {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-family: "Microsoft YaHei", "微软雅黑";
}

body,
div {
	margin: 0px auto;
	padding: 0px;
	text-align: center;
	font-size: 18px;
}

img,
input,
form,
dl,
p,
dd,
dt,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
span {
	padding: 0px;
	margin: 0px;
}

img {
	border: none;
}

a:link,
a:visited {
	text-decoration: none;
}

li,
dd {
	list-style-type: none;
}

.none {
	display: none;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.clearfloat {
	clear: both;
	height: 0px;
	font-size: 0px;
	overflow: hidden;
}

body {
	min-width: 1190px;
	background-color: #ffffff;
}

2.垂直对齐

.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

3.跨浏览器的图像灰度

img{
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

4.用CSS动画实现省略号动画

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

5.跨浏览器的透明

.transparent {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

6.通用媒体查询

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

7.自定义文本选择

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

8.锚链接伪类

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

9.全屏背景

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

10.内容垂直居中

.container {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}