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

设置 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>
357473 次浏览
小开
最佳答案

样式规则可用以下方法附上:

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

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

  • 可被浏览器缓存以便执行; 以及
  • 从开发的角度来看，维护起来要容易得多。

但是，您的问题是具体询问 style标记与内联样式的区别。在这种情况下，更喜欢使用 style标记，因为:

  • 提供明确的标记与样式分离;
  • 产生更清晰的 HTML 标记; 以及
  • 使用选择器将规则应用于页面上的多个元素更加有效，可以改善管理，并使页面尺寸更小。

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

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

阅读 CSS: 特异性战争以了解这个主题的有趣之处。

我希望这能有所帮助！

小开

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

分开你的风格将有助于使你的生活更容易，特别是当工作职责分布在不同的个人之间。可重用性和可移植性将为您节省大量时间。

使用内联样式时，将重写所设置的任何外部属性。

小开

这里有一个可能决定差异的方面:

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

小开

只要有可能，最好使用类 .myclass{}和标识符 #myclass{}，因此在 Html中使用专用的 CSS文件或标记 <style></style>。 内联样式可以用 javascript 动态地更改 css 选项。

小开

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

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

不建议使用嵌入式 <style>块，因为浏览器无法在站点的多个页面之间缓存样式表。

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

小开

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

  • 如果您需要将 css 指定给以编程方式生成的元素(例如，为不同大小的图像修改 css) ，那么使用内联 css 可能更容易维护。
  • 如果某些 css 只对当前页有效，那么您应该使用 script 标记而不是单独的。Css 档案。如果浏览器不需要执行太多的 http 请求，那么这是很好的。

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

小开

您可以使用下面提到的三种不同的方法来设置 CSS:-

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

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

样本用量可以是:-

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

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

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

小开

看情况。

主要的一点是要避免重复的代码。

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

如果您只使用它一次，我认为 inline 是可以的。

小开

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

然而，这里有一些实际的例外:

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

  • 如果页面加载时需要隐藏某个元素，那么使用外部样式表来实现这一点是不可行的，因为在处理样式表之前总会有一些延迟，而且在此之前该元素将是可见的。style="display: none;"是实现这一点的最佳方法。

  • 如果一个应用程序要给用户一个特定的 CSS 值的精细控制，例如文本颜色，那么可能需要将它添加到内联的 style元素或页面内的 <style></style>块。例如 style="color:#\{\{ page.color }}"或 <style> p.themed { color: #\{\{ page.color }}; }</style>

小开

内联 CSS 在标签中的优先级比 CSS 高。 添加 CSS 有三种方法。 阅读 w3school 上的这篇文章，内容非常丰富。


提交答案