您可能不知道的另外十个 CSS 技巧

Trenton Moss

4.67/5 (40投票s)

2006年8月5日

9分钟阅读

73727

热门文章《你可能不知道的十个 CSS 技巧》的续篇 - 学习新知识，看看有多少是你已经知道的！

1. 块级元素 vs. 内联元素

几乎所有的 HTML 元素不是块级元素就是内联元素。块级元素的特点包括：HTMLelements are either block or inline elements. The characteristics of block elements include

总是从新的一行开始
高度、行高以及上下外边距可以被操作
宽度默认为其父元素的 100%，除非指定了宽度

块级元素的例子包括 <div>、<p>、<h1>、<form>、<ul> 和 <li>。另一方面，内联元素则具有相反的特点：

在同一行开始
高度、行高以及上下外边距不能被改变
宽度与文本/图像一样长，并且不能被操作

内联元素的例子包括 <span>、<a>、<label>、<input>、<img>、<strong> 和 <em>。

要改变元素的状态，你可以使用 display: inline 或 display: block。但是将一个元素从块级改为内联，或者反之，有什么意义呢？嗯，起初你可能觉得很少会用到这个，但实际上这是一个非常强大的技术，你可以在任何时候使用它来：

让一个内联元素从新的一行开始
让一个块级元素在同一行开始
控制一个内联元素的宽度（对导航链接尤其有用）
操作一个内联元素的高度
为块级元素设置与文本等宽的背景色，而无需指定宽度

2. 另一种盒模型 hack 替代方案

盒模型 hack 用于修复 IE 6 之前版本浏览器在 Windows 上的一个渲染问题，即边框和内边距被包含在元素的宽度中，而不是额外增加上去。已经提出了许多基于 CSS 的解决方案来纠正这个问题，这里是另一个我们非常喜欢的方案：IE6 browsers onPC, where by the border and padding are included in the width of an element, as opposed to added on. A number ofCSS-based solutions have been put forward to remedy this, so here's another one which we really like

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

第一个 width 命令会被所有浏览器读取；第二个会被除了 Windows 上的 IE 5.x 之外的所有浏览器读取。IE5.x onPC。因为第二个命令排在第二位，它优先于第一个命令——任何排在后面的命令总是会覆盖前面的命令。那么，这一切是如何工作的呢？

通过在冒号前放置空的注释标签 (/**/)，IE 5.0 会忽略该命令。同样，通过在冒号后放置这些空的注释标签，IE 5.5 会忽略该命令。通过将这两个规则结合使用，我们可以对所有的 IE 5.x 隐藏该命令。IE5.0 will ignore the command. Likewise, by placing these empty comment tags after the colon,IE5.5 will ignore the command. By using these two rules in conjunction with each other, we can hide the command from all ofIE5.x.

3. 页面的最小宽度

一个非常有用的 CSS 命令是 min-width，你可以用它为任何元素指定最小宽度。这对于指定页面的最小宽度特别有用。CSScommand that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

不幸的是，IE 不理解这个命令，所以我们需要想出一种新方法来让它在这个浏览器中工作。首先，我们在 <body> 标签下插入一个 <div>，因为我们不能给 <body> 指定最小宽度。IEdoesn't understand this command, so we'll need to come up with a new way of making this work in this browser. First, we'll insert a <div> under the <body> tag, as we can't assign a minimum width to the <body>

<body>
<div id="container">

接下来我们创建我们的 CSS 命令，以创建一个 600px 的最小宽度：CSScommands, so as to create a minimum width of 600px

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

第一个命令是常规的最小宽度命令；第二个是一个简短的 JavaScript 命令，只有 IE 理解。不过请注意，这个命令会导致你的 CSS 文档无法通过验证，所以你可能更愿意将它插入到每个 HTML 文档的 head 部分来解决这个问题。IEunderstands. Do note though, this command will cause yourCSSdocument to invalidate so you may prefer to insert it into the head of eachHTMLdocument to get round this.

你可能还想将这个最小宽度与最大宽度结合起来。

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

4. IE4. IE 中的宽度和高度问题

IEIE 处理事情的方式相当奇怪。它不理解 min-width 和 min-height 命令，而是将 width 和 height 解释为 min-width 和 min-height——真是搞不懂！

这可能会导致问题，因为我们可能需要盒子是可调整大小的，以便在需要放入更多文本或用户调整文本大小时能够适应。如果我们只对一个盒子使用 width 和 height 命令，那么非 IE 浏览器将不允许盒子调整大小。但如果我们只使用 min-width 和 min-height 命令，那么我们就无法控制 IE 中的宽度或高度。IEbrowsers won't allow the box to resize. If we only use the min-width and min-height commands though then we can't control the width or height inIE!

在使用背景图片时，这尤其成问题。如果你使用的背景图片是 80px 宽和 35px 高，那么你会希望确保使用此图片的盒子的默认大小正好是 80 x 35px。然而，如果用户调整文本大小，盒子的大小需要能够优雅地扩展。

为了解决这个问题，你可以对一个带有 class="box" 的盒子使用以下代码：

.box
{
    width: 80px;
    height: 35px;
}

html>body .box
{
    width: auto;
    height: auto;
    min-width: 80px;
    min-height: 35px;
}

所有浏览器都会读取第一条 CSS 规则，但 IE 会忽略第二条规则，因为它使用了子选择器命令。CSSrule butIEwill ignore the second rule because it makes use of the child selector command. Non-IE非 IE 浏览器会读取第二条规则，并覆盖第一条规则中的值，因为这条 CSS 规则更具体，而更具体的 CSS 规则总是会覆盖那些不太具体的规则。CSSrule is more specific, and CSS rules that are more specific always override those that are less specific.

5. text-transform 命令

text-transform 是一个鲜为人知但非常实用的 CSS 命令。这个规则的三个比较常用的值是：text-transform: uppercase、text-transform: lowercase 和 text-transform: capitalize。第一个规则将所有字符转换为大写字母，第二个将它们全部转换为小写字母，第三个则使每个单词的首字母大写。CSScommands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word capitals.

这个命令对于帮助确保整个网站风格的一致性非常有用，特别是在有多个内容编辑者的情况下。比如说，你的风格指南规定标题中的单词必须以大写字母开头。为了确保总是如此，可以使用 text-transform: capitalize。即使网站编辑忘记了大写，他们的错误也不会在网站上显示出来。

此外，最好使用 text-transform: uppercase 来将单词大写，因为屏幕阅读器可能会将大写的较短单词读成首字母缩略词。一个很好的例子是“CONTACT US”，一些屏幕阅读器会将其读作“contact U S”。

6. IE 中消失的文本或图像IE?

IEIE 有一个非常奇怪的 bug，文本或背景图片有时会从视野中消失。这些项目实际上还在那里，如果你选中屏幕上的所有内容或按刷新键，它们通常会重新出现。有点奇怪，是吧？

这个问题主要发生在背景图片和浮动元素旁边的文本上。为了解决这个问题，只需在消失元素的 CSS 命令中插入 position: relative，出于某种奇怪的原因，这通常会解决问题。如果这不起作用（有时确实会），在 CSS 中为有问题的元素指定一个宽度，那应该就能解决问题了。

7. 不可见文本

有时你可能真的想让文本变得不可见。不可见文本对于屏幕阅读器用户尤其有用，比如为一个表单项指定标签或在一个区域前插入一个标题。不想通过插入这些来改变视觉外观？让它们不可见，这样使用视觉浏览器的用户就不知道它们的存在了。

如果你正在使用打印或手持设备 CSS 文件，你可能也想让文本不可见，因为某些信息可能不需要在这两种媒介上显示（更多相关内容见下文）。

要使文本不可见，你可以使用 display: none——简单！这对于从手持设备（如果支持 CSS）和打印的网页中隐藏文本效果很好，但对于许多屏幕阅读器来说就不那么好了。屏幕阅读器现在变得过于聪明，有些实际上会忽略任何被赋予 display: none 规则的文本。CSSis supported) and printed web pages, but isn't so great for many screen readers. Screen readers are now becoming too clever for their own good, and some will actually ignore the any text that has the rule display: none assigned to it.

因此，对于屏幕阅读器用户，需要一种新的方法：position: absolute; left: -9000px。这基本上是将文本定位到屏幕左边缘左侧 9000px 的位置，从而使其不可见。

8. CSS8. 用于手持设备的 CSS 文档

A separateCSS可以为 PDA 和手机创建一个单独的 CSS 文档，并且仅当使用这些设备访问你的网站时才激活。越来越多的网站正在为打印创建单独的 CSS 文档，这样当用户选择打印时，网页就会自动变得适合打印。你也可以为手持设备做同样的事情。PDAs and mobile phones, and only activated when one of these devices is being used to access your site. More and more websites are creating separate CSS documents for printing, so web pages automatically become print-friendly when users choose to print them. You can also do the same for handheld devices.

以下命令用于调用手持设备 CSS 文件：CSS8. 用于手持设备的 CSS 文档

<link type="text/css" rel="stylesheet" href="handheldstyle.css" 
      media="handheld" />

CSScommands in the handheldCSS手持设备 CSS 文件中的命令会覆盖主 CSS 文档中任何等效的命令。那么，你应该在这个文件中放置什么命令呢？CSSdocument. So, what commands should you place in this file?

理想情况下，你希望手持设备网页用户避免横向滚动。要测试这一点，请在常规浏览器窗口中打开你的网站，并将其宽度调整为 150px。然后，打开你的主 CSS 文件，并在文档最底部插入一些新命令。你在这里放置的命令应该调整网站的布局，使其在 150px 宽度下不需要水平滚动。然后，打开一个新文档，将这些新命令剪切并粘贴过去，并将其保存为 handheldstyle.css（或任何你想给它的名字）。CSSfile and insert some new commands at the very bottom of the document. The commands you place here should adjust the layout of the website so that it doesn't require horizontal scrolling at a 150px width. Then, open up a new document, cut and paste these new commands over, and save it as handheldstyle.css (or whatever name you want to give it).

你的网站为手持设备网页用户提供的内容应该与在传统网页浏览器上提供的内容有很大不同，因为用户体验是完全不同的。要获取更多信息，像《手持设备可用性》这样的书是一本很好的读物。

9. 3D 按压按钮效果

在网络早期，当鼠标悬停时看起来像是被按下去的 3D 按钮曾风靡一时。那时，这只能通过图像和 JavaScript 实现，但现在随着 CSS 的出现，我们可以复古一把，重新创造这种效果。CSSwe can go all retro and re-create this effect.

你需要的主要 CSS 命令是：

a {
    display: block;
    border: 1px solid;
    border-color: #aaa #000 #000 #aaa;
    width: 8em;
    background: #fc0;
}

a:hover
{
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #000 #aaa #aaa #000;
}

除了这些命令，你可以插入任何其他命令来达到期望的呈现效果——唯一的限制是你的想象力！

10. 每个页面使用相同的导航代码

大多数网站会高亮显示用户在网站中所处位置的导航项，以帮助用户定位。这是基本可用性的一个基本要求，但可能会很麻烦，因为你需要为每个页面调整导航背后的 HTML 代码。那么我们能否两全其美呢？有没有可能在每个页面上都高亮导航，而无需在每个页面上调整 HTML 代码呢？当然可以……HTMLcode behind the navigation for each and every page. So can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on each and every page? Of course it is...

首先，你需要为每个导航项分配一个 class：

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

然后，你需要在 <body> 标签中插入一个 id。这个 id 应该代表用户在网站中的位置，并且当用户移动到不同的网站部分时应该改变。在“首页”时，它应该是 <body id="home">，在“关于我们”时，它应该是 <body id="about">，在“联系我们”时是 <body id="contact">。

接下来，你创建一个新的 CSS 规则：CSS规则

#home .home, #about .about, #contact .contact
{
    commands for highlighted navigation go here
}

这基本上创建了一个规则，只有当 class="home" 包含在 id="home" 内时，当 class="about" 在 id="about" 内时，以及当 class="contact" 在 id="contact" 内时，该规则才会生效。这些情况只会在用户处于相应的网站部分时发生，从而无缝地创建了我们高亮显示的导航项。