您的位置： 首页 / Design / 9 个 CSS 技巧总结

PREV / NEXT

9 个 CSS 技巧总结

Published at May 21, 3pm

看了两篇不错的文章，总结了 20 个 CSS 技巧。但我个人觉得并不是每个技巧都很实用，因此我从这 20 个中精选了一些翻译，我想这些技巧对大家会更有用。当然，如果你希望看到全部的 20 个技巧，可以看看这两篇原文。Ten CSS tricks you may not know Ten more CSS tricks you may not know

  1. 缩写 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 的前面。其余的属性，当您不指定他们的时候，他们会自动使用默认值。

  2. 同时使用两个 class
    你可以为网页中的元素指定一个以上的 class，多少个都无所谓。（如果你看过 Google Mail 或 Google Reader 的代码会发现，他们大量应用这种方法控制显示），例如：

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

    p 会同时被应用 text 和 side 两个 CSS 类。

  3. 图像替换技巧
    有的时候，我们需要将某些文字用图形来替代。但有些访客可能会不喜欢图形，而更喜欢直接看到文字。这时我们可以利用这个技巧做出更加干净的页面。
    举个例子：你希望在每个页面上都显示“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. }
  4. 跨浏览器的 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. }
    5.  
    6. #box div
    7. {
    8. border: 5px;
    9. padding: 20px
    10. }

    这样，无论在哪个浏览器中，我们的 box 都是 150px 了。

  5. 将一个 block 元素居中
    不用多解释了，这是个非常广泛使用的 CSS 技巧，看例子：

    1. body
    2. {
    3. text-align: center
    4. }
    5.  
    6. #content
    7. {
    8. text-align: left;
    9. width: 700px;
    10. margin: 0 auto
    11. }
    1. ....
    2. <body><div id="content">.....</div></body>
    3. ....

    这样就实现了在任何浏览器中的居中显示。

  6. 在一个容器中定位元素
    我们都知道，将一个元素设定为 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. }
  7. 为一个页面指定最小宽度
    我们知道 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!

  8. 找回 IE 中消失的文字和图片
    IE6 有一个很诡异的 Bug，有时候文字或背景图片会莫名其妙的消失。而当你选中页面，或是刷新什么的，他们有突然都回来了，很奇怪吧？
    为了避免这个问题，我们只需要在出现问题的元素中指定：

    1. position: relative;

    即可解决，IE 真是个奇怪的东西。
    btw: Firefox 有时候会给一些元素加上 style=”display:none”，不知道什么原因，有人能给我解释一下吗？

  9. 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. }
    9.  
    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 技巧和大家分享。

原文链接**：花儿开了 - 9 个 CSS 技巧总结

** 本博客文章欢迎转载，但请务必保留原文链接！同时，本博文章不欢迎任何形式的派生及篡改，如需引用，请使用引用通告(Trackback) - http://blog.istef.info/2007/05/21/9-css-tricks/trackback/。商业网站使用请务必先取得作者授权！

收藏和分享本文 17fav 收藏本文

， 发表您的观点 ，或推荐本文 Loading... 。


5 Responses

All / Comments / Trackbacks / Subcribe
  1. leavic
    May 21, 9pm / LINK / REPLY
    Gravatar

    这与其说是技巧，不如说是基本内容。
    翻译文章之前，是不是应该审视一下文章本身的质量？尤其是第三条中的图像替代法。

  2. links for 2007-05-22 | 时光漫步
    May 23, 6am
  3. 炎妖儿
    May 23, 3pm / LINK / REPLY
    Gravatar

    最小宽度那个,如果在加入DTD声明的前提下,IE6会挂掉-_-!!!

  4. williamlong » links for 2007-08-19
    Aug 20, 4am
  5. links for 2007-08-19 « williamlong’s blog
    Aug 20, 6am

Now, It's your Turn!

BACK TO Article / Comments