1. CSS属性尽量使用简写
一般用CSS设定字体属性是这样做的：font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
但也可以把它们全部写到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-serif
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
2、使用OOCSS编写规则
OOCSS不是一个新语言或者是CSS框架，他只不过是一种新的写法，一种面向对象的容易重用的一种CSS规则，也是OOP的概念，从而降低了页面的加载时间，提高了网面的性能。这里关键的一点就是如何在页面中识别，创建和模块化可重用的对象，并在页面中任何需要的地方重用，并扩展其附加功能。使用OOCSS编写样式时，我们需要预先定义一些通用的CSS组件，然后通过在一个元素使用多个CSS类选择器的方法进行代码编写。
<style>
.bgc {background:#666699;}
.greybd {border:1px solid #ddd}
.fcolor:{#666;}
</style>
<div class="bgc greybd fcolor">青锋建站</div>
3、CSS box模型对老版本浏览器的兼容
这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：#box
{
width: 100px;
border: 5px;
padding: 20px
}
这样调用它：
<div>...</div>
这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
但用CSS也可以达到同样的目的，让它们显示效果一致。
#box
{
width: 150px
}
#box div
{
border: 5px;
padding: 20px
}
这样调用：
<div><div>...</div></div>
这样，不管什么浏览器，宽度都是150点了。
4. CSS块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：#content
{
width: 700px;
margin: 0 auto
}
5、用CSS对齐文文章
垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。CSS对齐文本方法时，垂直对齐使用line-height属性(注意line-height的值要和块级元素的高度相同，水平对齐使用text-align:center；
例如:<div stye="width:800px;height:60px;line-height:60px;text-align:center></div>
以上就是青锋建站给大家分享的CSS设计网站布局样式常用技巧，青锋建站，提供专业的高品质网站制作服务，包括网站建设，SEO，网络营销，PHP开发，网站建设知名品牌，全国接单，专业做优化型网站，为企业构建营销平台。
转载请注明来源网址：青锋建站-http://www.sjzphp.com/webdis/cssskill.html
