设置HTML元素样式的正确方法

我知道你可以做到：

<img style="position: absolute;" src="test.png" alt="Test image" width="50" height="50" />

我发现我之所以使用这种方法，主要是因为一些我并不知道的原因。但在本例中，我只是将样式添加到

div

，而不是直接添加到

img

。或者，当我这样做时，我直接向

img

元素添加样式，方法是在CSS中用

#foobar img{…}

选择它

<div id="foo">
    <img id="bar" src="test.png" alt="Test image" width="50" height="50" />
</div>

通常，如果一个容器只是完成工作所必需的，我会这样做，在

img

和

div#foo

元素上会有一些样式

我知道可能有更多的方法，但主要是最后两种方法，我不太确定何时使用它们。我知道还有其他HTML元素，但我只是拿了一个

div

和

img

来演示

---

话虽如此，我想知道每种方法的优缺点是什么，哪种方法应该是一种好的做法？

在我看来，没有绝对的答案。这取决于你的设计

如果您的站点中有许多类似的部分需要设置相同的样式，那么应该使用div容器（或其他元素，如

，

等）

此方法的优点是，您可以在节中设置其他元素的样式，而无需为每个元素指定

类

属性或

id

，从而使代码更干净，更易于维护

如果你想设计一个独特的元素，最好使用id属性并将CSS添加到这个id中

---

请记住，id是唯一的，因此，如果同一页面中有两个元素具有相同的CSS，则必须复制CSS代码，这绝不是一个好主意。

使用样式表的主要原因是能够将其缓存在网站中，从而在最初加载时加快加载时间。您之所以在html本身上看到一些带有样式的元素，可能是因为它是通过服务器端代码或客户端脚本注入的。FB开发人员实际上看不到这部分代码，相反，他们只能看到几行服务器代码，因此在他们这方面，这可能并不意味着如何进行样式设计，无论每个元素是在样式表上还是在html本身上寻址

另一个原因可能是，当有太多的样式在许多类之上（嵌套类）进行时，最后的选择可能是在html元素本身上使用它，因为它具有最高的优先级，并覆盖由类或任何其他形式完成的任何样式

---

以这种方式使用样式的原因很多，但一般来说，开发人员更容易保持html/css/脚本的整洁，如果可能的话，也更容易分离，但当事情变得复杂时，打破常规的做法实际上会更容易……

许多不必要的标记会产生一个称为“标记汤”（tagsoup）的问题。这是一个手写HTML的问题；您的目标是最大限度地使用CSS样式，避免使用过多和无意义的标记

在“正确”创建文档时，应该从文档大纲的角度开始。假设页面是一个报告，它将从上到下阅读，并且左对齐，样式简单。您可以使用最少的标记设计此层次结构，充分利用页眉、节、文章和页脚标记。在“旧时代”，您将使用div代替

接下来，应用样式以影响外观，包括文档中元素的相对位置。这是可以添加任何非语义div的地方，以便于在box模型中进行定位和组织。同样，您仍然尝试将包装或非语义标记保持在最低限度

考虑到所有这些因素，大型站点通常不会由干净、严格的语义文档大纲组成。大多数情况下，这些站点都是通过代码组装的，将动态内容构建到整个页面中。在这些场景中，更多的非语义包装标签通常作为模块化、自包含代码生成HTML片段的副产品。此外，web应用程序可能需要包装标签，以帮助通过AJAX或其他javascript操作重新绘制动态内容

CSS发挥作用的地方也是添加非语义包装标签的一个因素。由于CSS的特殊性（），有时需要有一些额外的“句柄”，您可以使用它们来对特定的标记组合进行非常非常特殊的处理

这样做的好处是编写您可以在项目中管理的最干净、最语义的代码。除了最小化和语义化之外，就其本身而言，没有一种“适当的方式”

进一步阅读

• 语义HTML-
• 语义HTML有多重要
• 关于HTML语义和前端架构-
• “使用语义HTML有什么好处？”-
• CSS特殊性：你应该知道的事情-

---

像您在示例中引用的那样，将此类元素放在容器中是一种很好的做法，因为对于具有不同容器的图像，可能会有不同的样式。不同的人员和方法将推广不同的最佳做法，以确定如何设置元素的样式。不幸的是，没有“正确的方法”。通常想想你正在尝试做什么，非常重要的是，你将来可能需要做什么。e、 g.“我是否只需要为这一张图片设置样式，它只会出现在这一页上？”意思是“我可以使用一个ID。”但“我是否需要为一系列图片设置样式，这些图片可以在某个地方替换为其他图片？”意思是“我可能可以通过在

div

中使用

\foobar img{}对其进行排序

很好。注意：你应该删除图像中的高度和宽度声明，并将其放入css中：）@Chris这篇文章让我在图像标记本身而不是css中声明图像的尺寸。我只会在

<div id="foobar">
    <img src="test.png" alt="Test image" width="50" height="50" /> //use 'src' in place of 'sc'
</div>

<div id="foo">
    <img id="bar" src="test.png" alt="Test image" width="50" height="50" />
</div>