【发布时间】：2009-08-12 04:27:52
【问题描述】：
作为一个开始从基于表格的设计过渡到完整 CSS 的人，我想知道使用样式属性来调整元素是否被认为是“作弊”，并且是否绝对所有的演示都应该严格地在样式表中?
另见：
【问题讨论】：
标签： html css stylesheet
【发布时间】：2009-08-12 04:27:52
【问题描述】：
在某些情况下，您确定自己想要做的就是调整这一特定元素的样式，而不是其他任何事情。
在这些情况下，您可以愉快地使用内联样式属性。 但是，在未来的某个时候，您会意识到实际上您需要将相同的样式应用到其他东西上，然后您会意识到自己错了。
去过那里，做到了。 8-)
【讨论】：
我觉得这里有一个方面没有涉及到：手工编辑的 HTML sn-ps 和生成的 HTML sn-ps 之间的区别。
对于人工编辑，将样式保存在文件中可能会更好、更容易维护。
不过
一旦您开始使用服务器端脚本或某种 JavaScript 生成 HTML 元素，请确保将所有样式基本功能所需内联！
例如，您编写了某种生成工具提示的 JavaScript 库。现在，您将在页面中注入 DIV，这将需要一些样式。例如，position: absolute 和最初的 display:none。您可能想为这些元素指定类.popup，并要求该类在某些CSS 文件中具有正确的定义。毕竟样式应该是在 CSS 文件中指定的吧？
你会让你的 JavaScript 库很难重用，因为你不能再简单地复制和调用一个 .js 文件并完成它。相反，您必须复制 .js 文件，但还必须确保脚本所需的所有样式都在您的 CSS 文件中定义，并且您必须去寻找这些样式，并确保它们的名称不与您已有的课程冲突。
为了最大程度地方便使用，只需在创建元素时直接在元素上设置所需的样式即可。对于纯粹出于美学目的的样式，例如background-color、font-size 等，您仍然可以附加一个类，以便为脚本的使用者提供一种简单的方法来更改脚本元素的外观，但不要'不需要！
【讨论】：
-
这就是为什么你让你的 .js 将一个
<style>标记附加到你的<head>包含具有足够低特异性的规则，以便使用你的脚本的开发人员可以轻松地在外部样式表中覆盖它们。但是您仍然不使用style=属性，因为它几乎不可能被覆盖。 -
style 属性完全可以使用 !important 关键字覆盖。
-
使用
style=，CSS 编辑器需要了解生成代码的所有内部工作原理，因为他们无法在样式表中看到所有可能的样式。如果您生成的元素要通过 CSS 进行自定义，那么 CSS 应该是外部的。
您可以使用样式属性，但使用 CSS 的重点是您在单个文件中进行更改，它会影响整个网站。尽量避免（旧习惯难改）
【讨论】：
它是不可维护的。我们所有人都做到了。你最好做的就是把每一次调整都变成一种风格。让我教你一些大多数开发人员不知道的 CSS 知识……你可以一次使用 N 种样式。
例如，假设您有一个很棒的彩色divs 样式，称为someDIVStyle：
.someDIVStlye
{
background-color: yellow;
...
}
您想使用它，但只想将background-color 调整为蓝色。许多人会复制/粘贴它，然后根据更改制作新样式。但是，简单地创建这样的样式：
.blueBackground
{
background-color: blue;
}
这样应用它：
<div class="someDIVStyle blueBackground">...
最右边的样式总是覆盖它前面的样式的属性。您可以一次使用多种样式来满足您的需求。
【讨论】：
-
Pedantry：您可能希望避免仅描述针对该类编写的规则所应用的样式的类名；相反，描述预期规则的特定目的（例如：
highlight）。这样，您可以稍后再回来将background-color: blue更改为background-color: red，而不会导致所有使用它的标记变得误导...... -
实际上，最后声明的样式会覆盖之前声明的样式，因此在此示例中，您需要确保 .blueBackground 在样式表中位于 .someDIVStyle 之前。这实际上咬了我一次，我花了很长时间才弄明白。
-
@shog9 - 这不是迂腐，这暴露了设计理念的严重缺陷
-
我认为这是一个微不足道的设计决定。自从 Quark、PageMaker 和基于 SGML 的 Compugraphic 类型代码驱动 phototype 的时代以来，我一直在使用样式（坦率地说，您可以说这是 HTML 的基础）。我会说看到这些东西并使用它超过 30 年，我知道随着时间的推移最容易管理什么。为什么不直接使用 GUID 或 MD5 哈希作为样式名称，因为您不打算让它们代表它们是什么？
-
重点是样式代表意义 - 即 和 而不是 和 - 如果您稍后需要添加仅在蓝色或黄色中有意义的第三种样式，则无需更改 HTML 即可使其正常工作。
我同意其他一些发帖人的观点，即最好将样式信息保留在样式表中。 CSS 往往会很快变得复杂，将这些信息放在一个地方是很好的（而不是必须从 HTML 来回跳转到样式表来查看正在使用的样式）。
一个离题的小提示：在 IE8 中按 F12 会显示一个很棒的工具，可以让您检查正在浏览的网页中元素的样式。在 Firefox 中，FireBug 做同样的事情。如果您想知道样式更改将如何影响元素，那么这些工具就是救命稻草。
【讨论】：
-
++提到了 Firebug（和 IE8 的克隆）：这些工具在维护样式标记方面确实改变了游戏规则，允许您编写复杂的规则集而无需跟踪所有交互在你的脑海中。
-
是的，它们也显示继承的样式信息（一直到浏览器的内置样式，至少 FireBug 是这样）。您可以获取其他版本 IE 的 IE Web Developer 工具，一直到 IE6。
这是一个非常“个人”的问题，对我来说，“ALL”这个词是一个非常强烈的词。您应该尽最大努力在您的 css 中拥有大部分样式。但是，如果它使您的生活更轻松，您可以偶尔使用样式。
【讨论】：
一般来说样式表最好有样式，尤其是要多次使用的时候，但是使用样式属性绝对不是“作弊”。快速浏览一下 stackoverflow 源代码会发现很多这样的例子。
【讨论】：
-
仅仅因为 StackOverflow 做了一些事情并不能使它正确！
是的，这有点作弊，但如果你想作弊一点，就看你自己了。 :)
在样式表中包含样式的基本思想是将内容与布局分开。如果您使用样式属性，您仍然在内容中混合布局。
不过，它并没有那么糟糕，因为您可以很容易地将样式移到一个类中。在开发过程中能够如此轻松地为特定元素设置样式非常方便，而无需编写类名并担心样式将如何级联。
我有时会让 style 属性在生产代码中通过，如果它是特定于一页的东西，并且它是否会存在很长时间是值得怀疑的。偶尔只是因为时间紧迫，以后可以清理一下……
因此，即使您有时使用样式属性，您仍然应该有一个雄心，即所有样式都应该在样式表中。从长远来看，它使代码更易于维护。
【讨论】：
正如其他人所说，一般来说，不会。
但是，在某些情况下它是完全合理的。例如，今天我必须将随机背景图像加载到一个 div 中，从一个包含未知 # 个文件的目录。基本上，客户端可以将文件拖放到该文件夹中，它们将显示在随机背景图像旋转中。
对我来说，这是在 div 上动态构建样式标签的明显原因。
此外，例如，如果您使用的是带有 web 表单和内置控件的 .net 框架，那么无论如何您都会看到使用的内联样式！
【讨论】：
将样式信息放在特定页面中可能有很好的理由。
例如，如果您想在每个页面（旅行社...）上使用不同的标题背景，则将样式信息放在该特定元素中要容易得多（更好的是，在文档的标题中...... .) 而不是在每个页面上为该元素赋予不同的类并在外部样式表中定义所有这些类。
【讨论】：
-
为什么不为每个页面使用单独的、特定于页面的样式表？
-
取决于样式的数量。如果它只是一个背景图片，通过添加另一个外部样式表来减慢页面的加载速度似乎有点浪费。
-
不必是外部的，如果这是一个问题。
-
这就是我的意思更好，在文档的头部。我只是认为在某些情况下，只需在样式声明中覆盖文档头部的一个属性，而不是为每个页面仅为一个属性声明类。
-
啊，明白了。当我第一次阅读您的答案时，我并没有真正考虑页面内样式表和外部样式表。
样式属性确实有一个重要用途：以编程方式设置样式。虽然 DOM 包含操作样式表的方法，但对它们的支持仍然参差不齐，而且它们对于许多任务（例如隐藏和显示元素）来说有点重量级。
【讨论】：
是的，style 属性通常是不受欢迎的。由于您要从基于表格的方法转向 CSS 方法，我强烈建议您避免使用内联样式。正如之前的发帖人所指出的：坏习惯很难改掉，为了一时的方便而养成使用内联样式的习惯是错误的。您不妨回到使用字体标签。真的没有区别。
话虽如此，在某些情况下使用简单的内联样式是有意义的，但首先要养成使用样式表的习惯。只有当您对将所有内容都放在样式表中感到满意时，您才应该开始查看快捷方式。
我认为这是每个发布答案的人的普遍共识
【讨论】：