内联< style>标签与内联css属性 [英] Inline <style> tags vs. inline css properties

问题描述

设置CSS属性的首选方法是什么？

What is the preferred method for setting CSS properties?

内联样式属性：

<div style="width:20px;height:20px;background-color:#ffcc00;"></div>

样式属性< style> ...< / style& 标签：

<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"</div>

推荐答案

样式规则可以使用：

• 外部文件


• 页内样式标签


• 内联样式属性

通常，我更喜欢使用链接的样式表，因为它们：

Generally, I prefer to use linked style sheets because they:

• 可以由浏览器缓存以提高性能;

但是，您的问题正在特别询问 style 标记与内联样式。在这种情况下，优先使用 style 标记：

However, your question is asking specifically about the style tag versus inline styles. Prefer to use the style tag, in this case, because it:

• 将标记与样式清晰分开;


• 生成更清晰的HTML标记;

内联元素只影响其各自的元素。

Inline elements only affect their respective element.

style 标记，内联属性是特殊性。特定性确定一种样式覆盖另一种样式的时间。通常，内联样式具有更高的特异性。

An important difference between the style tag and the inline attribute is specificity. Specificity determines when one style overrides another. Generally, inline styles have a higher specificity.

阅读 CSS：Specificity Wars 有趣的看看这个主题。

Read CSS: Specificity Wars for an entertaining look at this subject.

我希望有助于！

这篇关于内联< style>标签与内联css属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！