html 标记容器的 css

Question

这是一个有点普遍的问题，但我的目标是在我的项目中使用最少的 css 来实现简洁的 html 标记，这已经困扰了我很长时间。

我经常使用具有固定大小的a链接和背景图像的容器元素（例如：h1）。

例如： 标记：

<h1 id="branding"><a href="site.com">Brand Name</a></h1>

Css：

h1#branding {
     display:block;
     width:200px;
     height:50px
}

h1#branding a {
     display:block;
     width:200px;
     height:50px;
     text-indent:-999em;
     background-image:url(path/to/img.png) no-repeat 0 0;
}

如您所见，我在 h1 和 a 元素上都包含了固定大小。我这样做是因为我过去在一些较旧的浏览器上看到过视觉问题，当时我没有为包含元素提供宽度和高度值。

我还使用此技术进行一些具有

• ..

结构的导航，并且必须向 ul、li 和 a 元素添加尺寸，这使得 CSS 重复且冗长......

有更好的方法吗？

Answer 1

如果我正确理解您的要求，您可以将所有共享属性分配给各个元素使用的一个 CSS 类：

/* All shared properties */
h1#branding, h1#branding ul, h1#branding li, h1#branding a {
    display:block;
    width:200px;
    height:50px
    background-image:url(path/to/img.png) no-repeat 0 0;
}

/* Individual properties */
h1#branding a {
    text-indent:-999em;
}

Answer 2

为什么要通过 CSS 中的背景图像加载图像？为什么不简单地使用 标签？如果您想使用 CSS 精灵图像，我可以理解一点，但似乎您没有这样做（或者至少您的示例代码没有显示它）。使用 标签使得无需使用 display:block 并指定两次宽度和高度。然后，您只需为图像本身指定一次宽度和高度。例如：

<a href="site.com" title="Brand Name"><img src="path/to/img.png" width="200" height="50" alt="Brand Name" /></a>

从 SEO 的角度来看，用

标签包围（我假设的）徽标也不是最佳实践。您应该为页面标题保留

标记，而不是公司或品牌名称。唯一可以做到这一点的页面是主页，但即使在那里我也不会这样做。

如果您想坚持使用 CSS 背景图像和徽标周围的

标记，那么您的 CSS 代码确实是正确的。