每个网页设计师应该知道的10条CSS规则

通过网页设计师的大量CSS经验，我们会记住所有种代码语法，兼容性和片段。有一些特定的CSS，可以真正帮助改变你的网站设计改变较旧的技术规则和声明。这里是我收集到的很有用的10条CSS规则

 

@media

@media screen and (max-width: 960px) {

}

 

如果需要支持老版本的浏览器，那你就必须坚持使用css1的媒体描述符screen和print，到底是哪些老版本的浏览器，没有查。它们是相互排斥的，因此在为屏幕显示而生成页面的时候，浏览器会忽略掉打印样式表，反之亦然。所以，每个样式表都需要包含相同的样式选择器，但是有不同的规则声明，以便为不同的输出设备分别生成页面样式。 

background-size

body {
    background: url(image.jpg) no-repeat;
    background-size: 100%;
}

 

CSS3支持 background-size这一属性，只需要这样简单的一行代码就实现了日益流行的全背景图像效果

 

@font-face

@font-face {
	font-family: Blackout;
	src: url("assests/blackout.ttf") format("truetype");
}

@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】比方用谷歌的Webfonts或Typekit

margin: 0 auto;

#container {
    margin: 0 auto;
}

 

margin: 0 auto; 这是你在布局时最常用的也是经常第一个用到的CSS代码片段. 添加 margin: 0 auto; 就可以在父类元素居中并且转换成块元素，如果发现没有居中，那可能忘记定义DIV的宽度了

overflow: hidden

.container {
    overflow: hidden;
}

 

通常你要解决浮动的问题会想到clear:both，但是overflow: hidden不仅仅局限于隐藏溢出，他还可以清除浮动

.clearfix

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

 

对于那些浮动溢出：隐藏;不起作用的情况下，最好的办法是clearfix技术。记住，你不必定义clearfix类的名称，您可以针对此代码到您的任何HTML元素

color: rgba();

.btn {
    color: rgba(0,0,0,0.5);
}

 

PNG图像用于创建任何一种透明的效果，但现在可以到另一个实现CSS透明度的方法使用RGBA颜色模式创建的。在十六进制值的地方使用RGBA让你选择一种颜色，使用它的红色，绿色和蓝色通道，以及α水平，如0.5，设置透明度为50％。

input[type="text"]

input[type="text"] {
    width: 200px;
}

 

input[type="text"]这是一个很常用的CSS技巧，他不需要额外定义类名称，选择在特定的属性是非常有用的造型元素，就可以应用到任何的input元素

transform: rotate(30deg);

.title {
    transform: rotate(30deg);
}

 

在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、scale、skew和translate这四种方法来实现 目前浏览器支持情况：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+

a {outline: none;}

a {outline: none;}

　　

当聚焦a标签的时候，在a标签的区域周围会有一个虚线的框，这个框不同于border的是，它是不占有任何宽度的。当你取消焦点的时候，这个虚线框就会自然消失。你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等本身就不支持这个效果，所以看不到。下面是outline的样子示例，也是我正在做的一个页面上截取出来的。定义outline: none;就可以实现取消这个线条

文章收集了