10条你不可不知的css规则

Posted on 2006-12-20 10:33 雨中太阳阅读(343) 评论(1) 编辑收藏

：【译】10条你不可不知的css规则

正文： Published December 6th, 2004 in CssStaff Tags: No Tags.

原文地址：Ten CSS Tricks You May not Know

kelet译后感：这10条中有很多条我认为都非常有用，你平时可能遇到的一些莫名的问题也许会在这里找到解决的方法。一些地方我还是把英文的标记原名放在括号内注明了，这样可以明白一些。希望对你有所帮助。（ps：还是挺讨厌遇到<和>的html语句的，因为我暂时只能用它们的原始代号来转换，请留言中避免使用它们，如果要用的话可以使用原始的代码来转换，查看我的页面源代码就可以看到怎么表示了。）

1. CSS字体定义缩写规则
当你定义字体时用到以下这些属性：
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;

那么你可以缩写成这样简短的一行：font: 1em/1.5em bold italic small-caps verdana,serif 这样看上去就好多了。只是我需要给你几点忠告：这种css缩写形式只有当你同时定义了字体和字号的时候才有用。且如果你定义了字重（font- weight），字型(font-style)以及字的变量(font-varient)，那么这些属性值就会自动显示为默认的正常状态的值，记住这一点。
2. 采用两个类
通常我们只采用一个类(class)来定义一个属性，但是这并不表示你只能这样做不可。事实上，你可以想加多少类在一个属性上都可以。例如你可以这样

…

。

使用这两个类（用空格分开而不是逗号）意味着这个段落将同时采用text和side的规则。如果两个类之间有重复的定义，那么将采用两个中属于下一级的那个类的规则。
3. CSS的默认边框（border）值
当你定义个border的首你通常会考虑它的颜色（color）、宽度（width）和样式（style）（次序任意）。例如 border: 3px solid #000将会显示一个黑色的实心的3px宽边。然而这里唯一需要定义的只是border的style（样式）。

如果你要定义一个border为实心（solid），那么边框就将采用浏览器默认的值。但是什么是默认的值呢？边框的默认宽度是中等（相当于3到 4px），默认的颜色是边框内的文本的颜色。如果这两者中任意一个都是你想要的边框的样式，那么你完全可以不用自己费劲去写定义语句。
4. IE会忽略!important
5. 在css规则中通常最后定义的会被优先执行。然而如果你在一个语句后面采用采用 !important那么浏览器应当会不考虑其后的语句而优先执行这个css语句。这一规则对所有非ie浏览器均适用。例如：margin-top: 3.5em !important; margin-top: 2em 那么在所有非IE浏览器中上顶边将会被设置成3.5em，而ie中设置成2em。这一点有时候也是很有用的。尤其是当使用相对边缘（如举例中的那种）的时候，这一点可以在ie和其他浏览器里面显示的略为不同。图片替代技巧
我们通常建议采用HTML标记来显示text，但是不要用在图片显示上面。这样的做的好处是可以提高页面加载速度并且有比较的好的访问率。然而如果你非觉得你的页面的访客都不喜欢看你这个网页的文字的话，那么你只能使用图片了。

举例来说，如果你是个配件供应商，你想要每个页面的顶图都是你要卖的小配件，并且希望这一词条能够被搜索引擎搜到的话，你可以这样定义图片< h1> “Buy

。这样做当然可以，但是我得很明白的告诉你的是搜索引擎并不会看重你图片的alt文本。（因为有太多网页建设者使用alt文本来冒充关键字了）。所以另外一种方法是

Buy widgets

,这样你显然不必采用你的隐藏文字了。那么修正这一问题的方法是在css的样式里面这样定义
h1
{ background: url(widget-image.gif) no-repeat;
}
h1 span
{
position: absolute;
left:-2000px;
}

那么带有你希望字体的图片现在就会在浏览器下正常显示了，而且由于我们采用了距离屏幕左边缘2000px的定义那个文本并不会显示在页面的图片上。
6. 另析CSS盒子(box)模型
box模型通常使用来修正ie6以前的浏览器中，边框（border）和补白（padding）被包含在元素的宽度值中而不是附加在宽度之外的问题。例如当定义一个container的尺寸的时候，你也许会采用下面的css规则：
#box
{
width: 100px;
border: 5px;
padding: 20px;
}
这个css规则会使用在

…

中。

这就意味着在所有ie6后的浏览器下box的总宽度是150px（100px的宽＋2个5px宽的边框＋两个20px宽的补白）。在这些浏览器中box的总宽度包括了补白和边框才是100px。box模型的定义可以修正这一问题，但是也会带来许多麻烦。

一个简单的修正法如下：
#box
{
width: 150px;
}
#box div {
border: 5px;
padding: 20px;
}

这个css规则会使用在

…

中。很完美。现在所有浏览器下的box宽度都是150px。
7. 中间对齐一个块（block）元素
假设你想要一个固定宽度的网页布局，主体部分以浮动元素形式显示在屏幕中央。你可以采用下面的CSS语句:
#content
{
width: 700px;
margin: 0 auto;
}
然后你会想要

包围住每一个页面的内容项，而且它有一个自动的左边缘和右边缘以确保它总是在屏幕中央。很简单。。。不过也不尽然，我们仍然得考虑一下ie6以前的浏览器的显示问题，因为这些浏览器不会按照css的控制进行中心对齐。你得改变一下上面的css语句：
body
{
text-align: center;
}
#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}

这就会中心对齐主体部分，但是会导致文字都变成中心对齐的。为了修正这一问题，我们可以把文字对齐方式 text-align: left这条语句加到content div的css定义中去。
8. 采用css进行垂直对齐
表格（table）的垂直对齐不是个难题。为了使一个cell的所有子内容都在它中间一直线对齐，你可能会采用vertical-align: middle，但是这并不会在css布局中发挥作用。假设你想要一个高度是2em的菜单项，你或许会在css规则中使用vertical align的语句，这没什么作用，并且文字会全部显示在box元素的顶部。

唔。。不是你想要的效果吧。有什么解决方法么？那么你可以在css语句里面把行高设置为和box元素的高度一样的值。在上面的语句中box就是2em高，然后我们可以在它的css定义中加入 line-height: 2em，并且使text文本浮动（float）在box的中间。ok，效果达到了。
9. 在一个容器（container）里面采用CSS定位
CSS的一个很大的优点是你可以用它来设置一个对象（object）在页面中的绝对位置。当然你也可以（而且经常会被用到）在一个容器（container）里面设置对象（object）的位置。这很容易实现。只要采用下面的css语句：
#container
{
position: relative;
}

现在这个容器（container）内的任何一个元素都会变成相对于它的定位。你可以采用下面的html结构：

为了使导航的位置在距离它的父元素box左侧30px，顶部5px的位置，你可以使用下面的css语句：
#navigation
{
position: absolute;
left: 30px;
top: 5px;
}

完成!在这个特殊的例子中，你当然你可以使用margin: 5px 0 0 30px，但是其他一些情况下你最好还是采用position来定位。
10. 屏幕底部的背景颜色
CSS的一个缺点就是不能实现垂直方向的控制，这样就会导致不能用table进行布局的问题。假设你有一个包含网站导航的列要放在页面的左侧，这个页面背景是白色的，但是你想要左侧有一个蓝色背景。很简单，你只要采用下面这样的CSS语句：
#navigation
{
background: blue;
width: 150px;
}

采用上面的语句的话，会有一个问题：由于导航内容的每一个条目并不会延伸倒页面底部，就会产生它下方的部分仍然显示白色背景色。这样看起来好像被切断了一样的左侧蓝色背景色就会破坏你原本的设计意图。那么你能怎么办呢？

很不幸的是只有一个解决方法，那就是用一个蓝色的背景图来代替左侧的蓝色背景色。语句如下：
body
{
background: url(blue-image.gif) 0 0 repeat-y;
}
你放置在原来位置上的背景图的宽度正好是150px而且颜色也就用你想要的那个颜色。这样座的缺点就是你不能以em来定义左侧宽度，因为如果用户手动调整浏览器的文字大小的时候，左列的宽度也会改变，但是蓝色背景图像并不会跟着变换尺寸。

但是现在只有这么一个办法解决我们一开始列出的问题，所以如果你希望左列的颜色不一样的话最好用px来定义左列的宽度。

分类: CSS+DIV

好文要顶关注我收藏该文