做网页设计的都有这样的经验，就是必须记住各种各样的代码语法、技巧以及代码片段，尤其对于CSS，有许多语法规则及声明很值得我们牢记，因为它们确实有助于改善我们的网站设计，也有助于技术创新。本文总结10条有用的也是十分重要的CSS声明及其常用值，对于网页设计人员或爱好者们，值得收藏、应该牢记！
@media
@media screen and (max-width: 960px) {
}
@media 不仅仅是针对打印的网页样式化规则，在今天来说，更多应用于响应式或自适应网页设计方面。例如，你可以通过min-width 属性来创建一条media query，能够根据用户设备的视窗大小来调整你的网页布局，以适应用户需要。
background-size
body {
background: url(image.jpg) no-repeat;
background-size: 100%;
}
这是一条很有用也很酷的CSS3属性，用于定义网页背景图片的大小，获得了所有浏览器的全面支持。曾几何时，为了制作一张背景图片，必须先要考虑到页面的大小，实在要费不少的周折，但现在已经不用这么麻烦了，就这么一句代码，你就可以实现全屏式的背景图片效果。
@font-face
@font-face {
font-family: Blackout;
src: url("assests/blackout.ttf") format("truetype");
}
@font-face 也是CSS3属性之一，是近几年来网页设计方面的一个革新，用于引入字体和定义字体类型，你可以随意引用某一字体服务提供商的字体，也可以引用免费字体，如谷歌网页字体、Typekit。
margin: 0 auto;
#container {
margin: 0 auto;
}
非常乖巧的CSS声明：margin: 0 auto; ，是你初涉CSS首先应该要学会的。使用这条CSS声明，能够将任何网页中的块元素居中显示。
overflow: hidden
.container {
overflow: hidden;
}
提到CSS，有许多清除浮动的方法，但最简单有效的莫过于使用overflow: hidden;这条声明了。
.clearfix
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
在使用overflow: hidden; 来清除浮动无效的情况下可以用clearfix来替换。
color: rgba();
.btn {
color: rgba(0,0,0,0.5);
}
PNG格式图片常常被用在网页中的透明效果设计方面，但我们也可以使用另一种高级的CSS表达方式来获得透明效果，那就是 RGBa 颜色模型，RGBA是代表Red（红色）、Green（绿色）、Blue（蓝色）和Alpha的色彩空间。
input[type="text"]
input[type="text"] {
width: 200px;
}
这是一个CSS高级选择器，用于定义文本框样式的，例如代码中的width: 200px，表示宽度。
transform: rotate(30deg);
.title {
transform: rotate(30deg);
}
表示某个元素的旋转角度，如30deg即旋转30度。
a {outline: none;}
a {outline: none;}
设定链接对象外围的线条轮廓为“无”，用于去掉链接外虚线框，但有时可能默认出现虚线框会影响美观，如果你确实觉得出现虚线框影响美观的话，你完全可以有更好的选择，那就是使用CSS中的:focus伪类。如a: focus { outline: none;}.
from http://line25.com/articles/10-css-rules-every-web-designer-should-know
@media
@media screen and (max-width: 960px) {
}
@media 不仅仅是针对打印的网页样式化规则，在今天来说，更多应用于响应式或自适应网页设计方面。例如，你可以通过min-width 属性来创建一条media query，能够根据用户设备的视窗大小来调整你的网页布局，以适应用户需要。
background-size
body {
background: url(image.jpg) no-repeat;
background-size: 100%;
}
这是一条很有用也很酷的CSS3属性，用于定义网页背景图片的大小，获得了所有浏览器的全面支持。曾几何时，为了制作一张背景图片，必须先要考虑到页面的大小，实在要费不少的周折，但现在已经不用这么麻烦了，就这么一句代码，你就可以实现全屏式的背景图片效果。
@font-face
@font-face {
font-family: Blackout;
src: url("assests/blackout.ttf") format("truetype");
}
@font-face 也是CSS3属性之一，是近几年来网页设计方面的一个革新，用于引入字体和定义字体类型，你可以随意引用某一字体服务提供商的字体，也可以引用免费字体，如谷歌网页字体、Typekit。
margin: 0 auto;
#container {
margin: 0 auto;
}
非常乖巧的CSS声明：margin: 0 auto; ，是你初涉CSS首先应该要学会的。使用这条CSS声明，能够将任何网页中的块元素居中显示。
overflow: hidden
.container {
overflow: hidden;
}
提到CSS，有许多清除浮动的方法，但最简单有效的莫过于使用overflow: hidden;这条声明了。
.clearfix
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
在使用overflow: hidden; 来清除浮动无效的情况下可以用clearfix来替换。
color: rgba();
.btn {
color: rgba(0,0,0,0.5);
}
PNG格式图片常常被用在网页中的透明效果设计方面，但我们也可以使用另一种高级的CSS表达方式来获得透明效果，那就是 RGBa 颜色模型，RGBA是代表Red（红色）、Green（绿色）、Blue（蓝色）和Alpha的色彩空间。
input[type="text"]
input[type="text"] {
width: 200px;
}
这是一个CSS高级选择器，用于定义文本框样式的，例如代码中的width: 200px，表示宽度。
transform: rotate(30deg);
.title {
transform: rotate(30deg);
}
表示某个元素的旋转角度，如30deg即旋转30度。
a {outline: none;}
a {outline: none;}
设定链接对象外围的线条轮廓为“无”，用于去掉链接外虚线框，但有时可能默认出现虚线框会影响美观，如果你确实觉得出现虚线框影响美观的话，你完全可以有更好的选择，那就是使用CSS中的:focus伪类。如a: focus { outline: none;}.
from http://line25.com/articles/10-css-rules-every-web-designer-should-know
