9个实用的CSS技巧 - CSS技巧， CSS控制技巧，网页CSS控制技巧


九个实用的CSS技巧	发表于：2008-04-27

如今，在主流的网页设计和制作中， CSS的应用可以说变成了一个必备的技能。 CSS的出现彻底的实现了网页架构和内容的分离，一个CSS高手可以成功的实现许多特定的网页效果，为整个网站的管理带来翻天覆地的变化。下面是网络上流传很广的一些比较实用的CSS技巧，和大家分享一下

缩写 CSS font 属性
当我们为一个对象设置字体时，我们可能会这样写 CSS：
1. font-weight: bold;
2. font-style: italic;
3. font-variant: small-caps;
4. font-size: 1em;
5. line-height: 1.5em;
6. font-family: verdana,sans-serif
而事实上，通过 font 属性，我们可以简写为一行：
1. font: bold italic small-caps 1em/1.5em verdana,sans-serif
这样做的好处不言而喻。但是当你决定这样使用时，有一点是必须要注意的：你必须同时指定 font-size 和 font-family，而且 font-family 属性必须永远放在末尾，而 font-size 只能放在 font-family 的前面。其余的属性，当您不指定他们的时候，他们会自动使用默认值。
同时使用两个 class
你可以为网页中的元素指定一个以上的 class，多少个都无所谓。（如果你看过 Google Mail 或 Google Reader 的代码会发现，他们大量应用这种方法控制显示），例如：
1. <p class="text side">...</p>
p 会同时被应用 text 和 side 两个 CSS 类。
图像替换技巧
有的时候，我们需要将某些文字用图形来替代。但有些访客可能会不喜欢图形，而更喜欢直接看到文字。这时我们可以利用这个技巧做出更加干净的页面。
举个例子：你希望在每个页面上都显示“Buy Widget”，如果你是一个 Widget 商人，你会希望搜索引擎会收录这条关键字。你很可能会这样书写 HTML：
1. <h1><img src="widget-image.gif" alt="Buy widgets" /></h1>
这样做在显示上当然没问题，但搜索引擎有时会忽略掉 alt，而且当你需要修改这个图片的时候，你很可能要更改每个页面，很麻烦。这样的话，您不妨尝试一下这个方案：
1. <h1>Buy widgets</h1>
随后，我们为 h1 设定 CSS：
1. h1 {
2. background: url(widget-image.gif) no-repeat;
3. height: image height
4. text-indent: -2000px
5. }
跨浏览器的 CSS Box 模型
由于不同的 HTML 解释引擎对 Box 模型有不同的定义，当我们设计网页时，总会带来不大不小的麻烦。这时，不妨考虑使用“嵌套”的方法来解决。例如，我们原来的写法：
1. <div id="box">...</div>
1. #box
2. {
3. width: 100px;
4. border: 5px;
5. padding: 20px
6. }
这种写法会造成浏览器不兼容的问题，需要一系列 Hacks 来解决。不过我们可以写成下面的形式：
1. <div id="box"><div>...</div></div>
1. #box
2. {
3. width: 150px
4. }
6. #box div
7. {
8. border: 5px;
9. padding: 20px
10. }
这样，无论在哪个浏览器中，我们的 box 都是 150px 了。
将一个 block 元素居中
不用多解释了，这是个非常广泛使用的 CSS 技巧，看例子：
1. body
2. {
3. text-align: center
4. }
6. #content
7. {
8. text-align: left;
9. width: 700px;
10. margin: 0 auto
11. }
1. ....
2. <body><div id="content">.....</div></body>
3. ....
这样就实现了在任何浏览器中的居中显示。
在一个容器中定位元素
我们都知道，将一个元素设定为 position: absolute; 后，可以在页面的任何地方定位它。事实上，我们利用这一点可以在某个容器（父元素）中轻松定位一个另一个元件。我们需要对 container 进行如下设置：
1. <div id="container"><div id="navigation">...</div></div>
1. #container
2. {
3. position: relative
4. }
随后，我们想将 navigation 定位到 top: 5px, left: 30px 的地方，只需：
1. #navigation
2. {
3. position: absolute;
4. left: 30px;
5. top: 5px
6. }
为一个页面指定最小宽度
我们知道 CSS 中有个 min-width 属性，但并不是每个浏览器都能支持它（可恶的 IE），此外，我们也无法对 body 指定 min-width，因此我们可以使用下面的方案来解决：
1. <body>
2. <div id="container">...</div>
3. </body>
1. #container
2. {
3. min-width: 600px;
4. width:expression(document.body.clientWidth < 600? "600px": "auto" );
5. }
当然，你也可以进一步发挥，同时指定一个 max-width
1. #container
2. {
3. min-width: 600px;
4. max-width: 1200px;
5. width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
6. }
这样做唯一的问题是，由于使用了 IE 专有的 expression，因此可能会导致 CSS 无法通过验证。不过，得到正确的 UI 才是最重要的，who cares about the validation!
找回 IE 中消失的文字和图片
IE6 有一个很诡异的 Bug，有时候文字或背景图片会莫名其妙的消失。而当你选中页面，或是刷新什么的，他们有突然都回来了，很奇怪吧？
为了避免这个问题，我们只需要在出现问题的元素中指定：
1. position: relative;
即可解决，IE 真是个奇怪的东西。
btw: Firefox 有时候会给一些元素加上 style=”display:none”，不知道什么原因，有人能给我解释一下吗？
3D 按钮效果
提到这个特效，我们第一反应肯定是要用图片来实现，事实上，用 CSS 也可以做出效果很不错的按钮，我们来看看它的代码：
1. <style type="text/css">
2. a.demo-button {
3. display: block;
4. border: 1px solid;
5. border-color: #aaa #000 #000 #aaa;
6. width: 8em;
7. background: #fc0;
8. }
10. a.demo-button:hover
11. {
12. position: relative;
13. top: 1px;
14. left: 1px;
15. border-color: #000 #aaa #aaa #000;
16. }</style>
17. <a class="demo-button">按钮一个</a>

其实上面这些 CSS 技巧都是非常常用的了，就当普及教程吧。今后我也会陆续总结更多 CSS 技巧和大家分享。

关于本站 | 访客留言| 杰克花园博客 | 本站内容版权属于杰克花园所有，如需转载，请联系站长

九个实用的CSS技巧