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

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:

    font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    font-size: 1em;
    line-height: 1.5em;
    font-family: verdana,sans-serif

    而事实上,通过 font 属性,我们可以简写为一行:

    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 的代码会发现,他们大量应用这种方法控制显示),例如:


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

  3. 图像替换技巧
    有的时候,我们需要将某些文字用图形来替代。但有些访客可能会不喜欢图形,而更喜欢直接看到文字。这时我们可以利用这个技巧做出更加干净的页面。
    举个例子:你希望在每个页面上都显示“Buy Widget”,如果你是一个 Widget 商人,你会希望搜索引擎会收录这条关键字。你很可能会这样书写 HTML:


    这样做在显示上当然没问题,但搜索引擎有时会忽略掉 alt,而且当你需要修改这个图片的时候,你很可能要更改每个页面,很麻烦。这样的话,您不妨尝试一下这个方案:

    Buy widgets


    随后,我们为 h1 设定 CSS:

    h1 {
    background: url(widget-image.gif) no-repeat;
    height: image height
    text-indent: -2000px
    }

  4. 跨浏览器的 CSS Box 模型
    由于不同的 HTML 解释引擎对 Box 模型有不同的定义,当我们设计网页时,总会带来不大不小的麻烦。这时,不妨考虑使用“嵌套”的方法来解决。例如,我们原来的写法:



    #box
    {
    width: 100px;
    border: 5px;
    padding: 20px
    }

    这种写法会造成浏览器不兼容的问题,需要一系列 Hacks 来解决。不过我们可以写成下面的形式:



    #box
    {
    width: 150px
    }

    #box div
    {
    border: 5px;
    padding: 20px
    }

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

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

    body
    {
    text-align: center
    }

    #content
    {
    text-align: left;
    width: 700px;
    margin: 0 auto
    }


    ….

    …..


    ….

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

  6. 在一个容器中定位元素
    我们都知道,将一个元素设定为 position: absolute; 后,可以在页面的任何地方定位它。事实上,我们利用这一点可以在某个容器(父元素)中轻松定位一个另一个元件。我们需要对 container 进行如下设置:



    #container
    {
    position: relative
    }

    随后,我们想将 navigation 定位到 top: 5px, left: 30px 的地方,只需:

    #navigation
    {
    position: absolute;
    left: 30px;
    top: 5px
    }

  7. 为一个页面指定最小宽度
    我们知道 CSS 中有个 min-width 属性,但并不是每个浏览器都能支持它(可恶的 IE),此外,我们也无法对 body 指定 min-width,因此我们可以使用下面的方案来解决:




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

    当然,你也可以进一步发挥,同时指定一个 max-width

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

    这样做唯一的问题是,由于使用了 IE 专有的 expression,因此可能会导致 CSS 无法通过验证。不过,得到正确的 UI 才是最重要的,who cares about the validation!

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

    position: relative;

    即可解决,IE 真是个奇怪的东西。
    btw: Firefox 有时候会给一些元素加上 style=”display:none”,不知道什么原因,有人能给我解释一下吗?
  9. 3D 按钮效果
    提到这个特效,我们第一反应肯定是要用图片来实现,事实上,用 CSS 也可以做出效果很不错的按钮,我们来看看它的代码:

    按钮一个

    效果还不错吧,还简单。当然,如果你想做更酷的按钮的话,图片还是离不开的,不妨看看我曾经写的教程

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

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