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

Inline <style> tags vs. inline css properties

提问by Paul

What is the preferred method for setting CSS properties?

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

Inline style properties:

内联样式属性：

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

Style properties in <style>...</style>tags:

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

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

回答by jmbertucci

Style rules can be attached using:

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

• External Files
• In-page Style Tags
• Inline Style Attribute

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

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

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

• can be cached by browsers for performance; and
• are a lot easier to maintain for a development perspective.

• 可以被浏览器缓存以提高性能；和
• 从开发的角度来看，维护起来要容易得多。

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

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

• provides a clear separation of markup from styling;
• produces cleaner HTML markup; and
• is more efficient with selectors to apply rules to multiple elements on a page improving management as well as making your page size smaller.

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

Inline elements only affect their respective element.

内联元素只影响它们各自的元素。

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

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

Read CSS: Specificity Warsfor an entertaining look at this subject.

阅读CSS：Specificity Wars以有趣的方式了解这个主题。

I hope that helps!

我希望这有帮助！

回答by Niet the Dark Absol

Here's one aspect that could rule the difference:

这是可以决定差异的一个方面：

If you change an element's style in JavaScript, you are affecting the inline style. If there's already a style there, you overwrite it permanently. But, if the style were defined in an external sheet or in a <style>tag, then setting the inline one to ""restores the style from that source.

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

回答by Lawrence Mok

It depends.

这取决于。

The main point is to avoid repeated code.

重点是避免重复代码。

If the same code need to be re-used 2 times or more, and should be in sync when change, use external style sheet.

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

If you only use it once, I think inline is ok.

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

回答by Spudley

To answer your direct question: neither of these is the preferred method. Use a separate file.

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

Inline styles should only be used as a last resort, or set by Javascript code. Inline styles have the highest level of specificity, so override your actual stylesheets. This can make them hard to control (you should avoid !importantas well for the same reason).

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

An embedded <style>block is not recommended, because you lose the browser's ability to cache the stylesheet across multiple pages on your site.

<style>不推荐嵌入块，因为您将失去浏览器跨站点上多个页面缓存样式表的能力。

So in short, wherever possible, you should put your styles into a separate CSS file.

所以简而言之，只要有可能，你应该把你的样式放到一个单独的 CSS 文件中。

回答by RobB

From a maintainability standpoint, it's much simpler to manage one item in one file, than it is to manage multiple items in possibly multiple files.

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

Separating your styling will help make your life much easier, especially when job duties are distributed amongst different individuals. Reusability and portability will save you plenty of time down the road.

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

When using an inline style, that will override any external properties that are set.

使用内联样式时，这将覆盖设置的任何外部属性。

回答by Henry

I agree with the majority view that external stylesheets are the prefered method.

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

However, here are some practical exceptions:

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

• Dynamic background images. CSS stylesheets are static files so you need to use an inline style to add a dynamic (from a database, CMS etc...) background-imagestyle.

• If an element needs to be hidden when the page loads, using an external stylesheet for this is not practical, since there will always be some delay before the stylesheet is processed and the element will be visible until that happens. style="display: none;"is the best way to achieve this.

• If an application is going to give the user fine control over a particular CSS value, e.g. text color, then it may be necessary to add this to inline styleelements or in-page <style></style>blocks. E.g. style="color:#{{ page.color }}", or <style> p.themed { color: #{{ page.color }}; }</style>

• 动态背景图像。CSS 样式表是静态文件，因此您需要使用内联样式来添加动态（来自数据库、CMS 等）background-image样式。

• 如果在页面加载时需要隐藏元素，则为此使用外部样式表是不切实际的，因为在处理样式表之前总会有一些延迟，并且在此之前元素将是可见的。style="display: none;"是实现这一目标的最佳方式。

• 如果应用程序要让用户对特定的 CSS 值（例如文本颜色）进行精细控制，则可能需要将其添加到内联style元素或页内<style></style>块中。例如style="color:#{{ page.color }}"，或<style> p.themed { color: #{{ page.color }}; }</style>

回答by Robin Manoli

There can be different reasons for choosing one way over the other.

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

• If you need to specify css to elements that are generated programmatically (for example modifying css for images of different sizes), it can be more maintainable to use inline css.
• If some css is valid only for the current page, you should rather use the script tag than a separate .css file. It is good if the browser doesn't have to do too many http requests.

• 如果您需要为以编程方式生成的元素指定 css（例如，为不同大小的图像修改 css），则使用内联 css 会更易于维护。
• 如果某些 css 仅对当前页面有效，您应该使用脚本标记而不是单独的 .css 文件。如果浏览器不必做太多的http请求就好了。

Otherwise, as stated, it is better to use a separate css file.

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

回答by Sukane

You can set CSS using three different ways as mentioned below :-

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

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

Preferred / ideal way of setting the css style is using as external style sheets when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file.

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

sample usage can be :-

示例用法可以是：-

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

If you want to apply a unique style to a single document then you can use Internal style sheet.

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

Don't use inline style sheet,as it mixes content with presentation and looses many advantages.

不要使用内联样式表，因为它混合了内容和演示文稿并失去了许多优势。

回答by Federico

Whenever is possible is preferable to use class .myclass{}and identifier #myclass{}, so use a dedicated cssfile or tag <style></style>within an html. Inline style is good to change css option dynamically with javascript.

只要有可能，最好使用 class.myclass{}和 identifier #myclass{}，因此请在html 中使用专用的css文件或标签。内联样式很适合使用 javascript 动态更改 css 选项。<style></style>