内联<style>标签与内联css属性

Question

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

内联样式属性:

<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>

Answer 1

可以使用以下方式附加样式规则

• 外部文件
• 页内样式标签
• 内联样式属性

一般来说,我更喜欢使用链接样式表,因为它们:

• 浏览器可以缓存性能; 和
• 从开发角度来看,维护起来要容易得多.

但是,您的问题是专门询问style标记与内联样式.style在这种情况下,更喜欢使用标签,因为它:

• 提供标记与样式的明确分离;
• 产生更清晰的HTML标记; 和
• 选择器可以更有效地将规则应用于页面上的多个元素,从而改善管理并缩小页面大小.

内联元素仅影响其各自的元素.

style标签和内联属性之间的一个重要区别是特异性.特异性决定了一种风格何时覆盖另一种风格.通常,内联样式具有更高的特异性.

阅读CSS:特殊性战争,以便对这个主题进行有趣的观察.

我希望有所帮助!

Answer 2

这是可以统治差异的一个方面:

如果在JavaScript中更改元素的样式,则会影响内联样式.如果那里已有样式,则永久覆盖它.但是,如果样式是在外部工作表或<style>标记中定义的,则设置内联工具以""从该源恢复样式.

Answer 3

这取决于.

重点是避免重复代码.

如果相同的代码需要重复使用2次或更多次,并且在更改时应该同步,请使用外部样式表.

如果你只使用一次,我认为内联是可以的.

Answer 4

回答你的直接问题:这些都不是首选方法.使用单独的文件.

内联样式应仅用作最后的手段,或由Javascript代码设置.内联样式具有最高级别的特异性,因此覆盖您的实际样式表.这可能使他们难以控制(!important出于同样的原因你也应该避免).

<style>建议不要使用嵌入式块,因为您失去了浏览器在您网站上的多个页面上缓存样式表的功能.

简而言之,只要有可能,您应该将样式放入单独的CSS文件中.