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标记，因为它：

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

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

阅读CSS: Specificity Wars，了解这个主题。

我希望有所帮助！

Answer 2

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

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

Answer 3

回答您的直接问题：这些都不是首选方法。使用单独的文件。

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

不推荐嵌入式<style>阻止，因为您失去了浏览器在您网站上的多个网页上缓存样式表的功能。

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

Answer 4

取决于。

重点是避免重复编码。

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

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

Answer 5

从可维护性的角度来看，在一个文件中管理一个项目比在多个文件中管理多个项目要简单得多。

分离您的造型将有助于您的生活更轻松，尤其是当工作职责分配给不同的人时。可重用性和便携性将为您节省大量时间。

使用内联样式时，将覆盖设置的所有外部属性。

Answer 6

我同意大多数观点，即外部样式表是首选方法。

但是，这里有一些实际例外：

动态背景图片。 CSS样式表是静态文件，因此您需要使用内联样式来添加动态（来自数据库，CMS等...）background-image样式。
如果在页面加载时需要隐藏元素，则使用外部样式表是不切实际的，因为在处理样式表之前总是会有一些延迟，并且元素在此之前可见。 style="display: none;"是实现此目标的最佳方式。
如果某个应用程序要让用户对特定的CSS值进行精细控制，例如文本颜色，则可能需要将其添加到内联style元素或页内<style></style>块中。例如。 style="color:#{{ page.color }}"或<style> p.themed { color: #{{ page.color }}; }</style>

Answer 7

在可能的情况下，最好使用课程.myclass{}和标识符#myclass{}，因此在 html中使用专用的 css 文件或标记<style></style> 。使用javascript动态更改css选项的内联样式。

Answer 8

选择一种方式可能有不同的原因。

否则，如上所述，最好使用单独的css文件。

Answer 9

您可以使用以下三种不同的方式设置CSS： -

1.External style sheet
2.Internal style sheet
3.Inline style

设置css样式的首选/理想方式是将样式应用于多个页面时用作外部样式表。使用外部样式表，您可以通过更改一个文件来更改整个Web站点的外观。

样本用法可以是： -

<head>
    <link rel="stylesheet" type="text/css" href="your_css_file_name.css">
</head>

如果要将唯一样式应用于单个文档，则可以使用内部样式表。

不要使用内联样式表，因为它将内容与表示混合在一起并且具有许多优点。