如何使用本地风格的HTML5和CSS3编程 - 傻瓜

风格可以直接在HTML5主体中定义。这是这种类型的代码的一个例子。本地风格有时也被称为 元素级 样式，因为它修改了页面上元素的特定实例。

localStyles。 html

本地风格
本段具有本地定义的边框
<！ --1 - >
这一段有一系列应用的字体和文字规则。

当你查看这段代码时，几件事情应该变得明显：

• No 元素在标题中。 通常，在页眉中使用一个部分来定义所有样式。这个页面没有这样的细分。

• 段落有自己的风格属性。 风格属性被添加到HTML正文中的每个段落。所有HTML元素都支持style属性。

• 整个样式代码放在一对引号中。 对于每个样式化元素，整个样式都会放入一对引号中，因为它是一个HTML属性。您可以使用缩进和空格来使事情更容易理解。

何时使用本地风格

本地风格不应该是您的首选，但在某些情况下它们可能会有用。

如果你正在编写一个程序来翻译文字处理器或其他工具，本地风格往往是最简单的方法来进行翻译工作。如果您使用文字处理器创建页面，并告诉它将页面另存为HTML，则通常会使用本地样式，因为文字处理器通常以其专有格式使用此技术。

通常当你看到一个有很多本地风格的HTML页面时，这是因为一个自动翻译工具创建了页面。

有时，您会看到代码示例中使用的本地样式。例如，下面的代码可以用来演示不同的边框样式：

localBorders。 html

内联边框
这个段落有一个黑色的边框
这个段落有一个双黑色的边框

例如，看到元素旁边的样式是有帮助的。这段代码对于演示或测试目的是很好的（如果你只想快速浏览一些边框样式），但对于产品代码来说这不是一个好主意。

本地风格具有非常高的优先级，因此您在本地风格中应用的任何内容都会覆盖其他风格规则。如果事情不像您期望的那样工作，这可能是一个有用的解决方法，但最好让您的样式正确工作，而不是依赖于解决方法。

局部风格的缺点

应用局部风格相当容易，但大多数情况下，通常不推荐这种技术，因为它有一些问题，如

• 效率低下： 如果您可以使用style属性在元素级别定义样式，只定义特定的实例。如果你想以这种方式为整个页面设置段落颜色，最终你会写出很多风格规则。

• 可读性： 如果样式信息散布在整个页面中，则要比在标题（或外部文档）中集中查找和修改要困难得多。

• 缺乏分离： 将元素置于元素级别会使内容与样式分离。变得更加困难，风格和内容的混合使得你的代码难以阅读和修改。

• 重大错误： 整批CSS规则必须用一对引号填充到一个HTML属性中。这可能是棘手的阅读，因为你有CSS直接集成到HTML流。

• 引用问题： HTML属性需要引号，一些CSS元素也需要引号（例如，在其中包含空格的字体系列）。在单个元素中引用多个级别是麻烦的处方。