CSS小技巧（转）

11lingxian

浏览: 372943 次
性别:
来自: 青岛

最近访客更多访客>>

devcang

wangchh8134

zjy_369

ztcwh

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS IE 浏览器 JavaScript XML

Webcredible上列出了不少关于CSS使用语法上的小技巧，还是比较实用的。以前很多东西只知道要这么写，可很少去考虑为什么。看来用CSS能做的事情远远比自己所了解的要多。

1. 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 这几个属性如果不做设定的话将默认为normal。

2. 同时使用两个Class定义
一般我们只会给内容块指定一个Class，但这并不代表我们只能指定一个。实际上只要你愿意，可以同时把任意多个Class赋给某块内容。比如：

xml 代码

<p class="text side">...p>

多个Class之间用空格分隔即可。当多个Class之间的属性发生重叠的时候，将根据各个Class在CSS定义文件中被定义的位置，后定义的Class属性自动覆盖之前定义的Class属性（而不是根据你在class="text side"这里排列的顺序来进行覆盖）

3. CSS border的缺省值
通常我们定义border属性都会提供color,width,style这些属性。比如 border: 3px solid #000 。不过实际上必须要提供的属性只有style。如果你只写 border: solid 的话，其他的属性自动使用缺省值。border的缺省宽度是medium(大约3px-4px)，缺省的颜色是位于border里面的内容文字的颜色。如果这些缺省值可以满足你的要求，你完全可以省略这两项属性。

4. 专门用于打印的CSS文档
很多web页面都会提供一个打印链接，方便用户使用另一种适合打印界面的CSS。但实际上你完全可以为你的页面指定两个CSS文档link，这样浏览器会自动调用合适的CSS来用于显示或打印。比如：

xml 代码

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

通过指定link的media属性，浏览器就能根据需要来调用特定的CSS文件来处理页面了。关于打印更多的建议，请参见 Print Different,

5. CSS中的内容垂直对齐
用传统的table来实现垂直对齐很容易，只要用 vertical-align: middle 就可以让table的内容垂直居中。但这个属性在CSS里面却行不通。
解决方法是把内容的行高设置成与内容块一样高。比如你的div高是32px，那就在你的CSS定义里面添加属性 line-height: 32px; 这样文字看上去就垂直居中于层里面了。不过这个方法只适用于单行文字，对于多行文字，似乎没有什么好方法。

6. 让背景色能够垂直拉齐到底部
CSS与传统的table来说另一个让人不爽的地方是它的垂直层的对齐。如果你的页面分为两列，其中一列比较长而另一列比较短，同时两列的背景色和页面总的背景色是不同的话，显示出来的效果就比较丑陋，不像table那样只要把td的高度设成100%就能够把每一列的高度拉到一样长。
要解决这个问题似乎只能用一个取巧的办法，根据每列的宽度和背景色设置背景图片，让用户看上去似乎拉平了：

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

7. block / inline 属性
任何一个HTML元素都是block或者inline的。
block元素的特性包括：

总是另起一行开始显示
height, line-height, top/bottom margin属性可以被设置
width缺省值是100%,除非你指定了另外的width值

这一类的HTML元素包括<div>, <p>, <h1>, <form>, <ul> 以及 <li>等。

inline元素的特性包括：

直接跟在当前行的后面显示
height, line-height, top/bottom margin属性不能改变
width值就等于包含其中的文字/图片的宽度，并且这个值不能被改变

这一类的HTML元素包括<span>, <a>, <label>, <input>, <img>, <strong> 以及 <em>等。

你可以通过设置元素属性display: inline 或 display: block来改变元素的以上特性。

8. 设置页面的最小宽度
CSS语法中很有用的一个属性是 min-width 。通过这个属性你可以设置任何元素的最小宽度。也就是说你也可以用这个来限制页面显示的最小宽度。
然后在CSS定义里面定义最小宽度为600px：

但有个小问题是：IE浏览器无法为<body>元素设置min-width，因此要让这个属性起作用，我们需要走点弯路。
首先在<body>后面插入一个<div>：
<body>
<div class="container">

css 代码

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

第一个属性是最小宽度定义的标准写法；第二个属性则是只有IE能够理解的javascript表达式。
你也可以同时设定页面的最大最小宽度：

css 代码

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

9. Text-transform 属性
这个属性可能也是CSS当中用的人不多但却很有用处的属性之一。其常见的可用值包括：text-transform: uppercase, text-transform: lowercase 以及 text-transform: capitalize。第一个将把所有的字母转化成大写；第二个将把所有字母转成小写；第三个则把每个单词的首字母转成大写。不过对于非英文网站来说，这个功能确实就没什么用了。

10. IE中消失的文字和图片
IE有个很莫名其妙的Bug：有时候文字或者背景图片死活显示不出来。如果你全选整个页面，会发现那些内容实际上还在那里，或者重新刷新一下页面显示就正常了。
通常来说这个问题都发生在那些跟在浮动元素后面显示的文字或背景图片身上。要解决这个问题，可以试试给你的那些消失的元素加上position: relative 属性。如果还不行，再试试设置一下width属性。一般来说这样做之后问题就解决了。

分享到：