CSS设计网站布局样式常用技巧

更新时间:2019-09-07 15:41:41 来源:青锋建站 作者:青锋建网站
  CSS样式学习起来非常简单,使也有不少大家不熟悉的技巧,也许是因为用得比较少,时间久了就忘了。青锋建站给大家列出一些CSS常用的一些技巧性方法。

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

电话 15632335515 | 邮箱 943703539@qq.com | QQ 943703539 | 微信 qingfengjianzhan

Copyright © 2016-2026 青锋建站 版权所有