CSS 使用技巧

下面我和大家说说CSS在实践中的写法,注意的地方,我会在做标记,这样帮住大家读懂。

1. 文字的水平居中

将一段文字置于容器的水平中点,只要设置text-align属性即可:

text-align:center;  //文字的居中

2. 容器的水平居中

先为该容器设置一个明确宽度,然后将margin的水平值设为auto即可。

div#container {

width:760px;

margin:0 auto;  //auto代表,左右两站对齐

}

3. 文字的垂直居中

单行文字的垂直居中,只要将行高与容器高设为相等即可。

比如,容器中有一行数字。

1234567890123

 

然后CSS这样写:

div#container {height: 35px; line-height: 35px;}

如果有n行文字,那么将行高设为容器高度的n分之一即可。

4. 容器的垂直居中

比如,有一大一小两个容器,请问如何将小容器垂直居中?

 

首先,将大容器的定位为relative。

div#big{

position:relative; //relative 相对定位

height:480px;

}

然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。

div#small {

position: absolute;

top: 50%;

height: 240px;

margin-top: -120px;

}

使用同样的思路,也可以做出水平居中的效果。

5. 图片宽度的自适应

如何使得较大的图片,能够自动适应小容器的宽度?CSS可以这样写:

img {max-width: 100%}

但是IE6不支持max-width,所以遇到IE6时,使用IE条件注释,将语句改写为:

img {width: 100%}

6. 3D按钮

要使按钮具有3D效果,只要将它的左上部边框设为浅色,右下部边框设为深色即可。

div#button {

background: #888;

border: 1px solid;

border-color: #999 #777 #777 #999;

}

7. font属性的快捷写法

font快捷写法的格式为:

body {

font: font-style font-variant font-weight font-size line-height font-family;

}

所以,

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

font-weight: normal;

font-variant: small-caps;

font-style: italic;

line-height: 150%;

}

可以被写成:

body {

font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;

}

8. link状态的设置顺序

link的四种状态,需要按照下面的前后顺序进行设置:

a:link

a:visited  //当鼠标访问时

a:hover //当鼠标经过时

a:active

9. IE条件注释

你可以利用条件注释,设置只对IE产生作用的语句:

< ![endif]–>

还可以区分各种不同的IE版本:

本文固定链接: http://blog.wmphp.com/208.html | 顺盛网络博客

该日志由 admin 于2011年07月07日发表在 CSS 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: CSS 使用技巧 | 顺盛网络博客
【上一篇】
【下一篇】

CSS 使用技巧:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter