在线样式在CSS中的优点和缺点

CSS或层叠样式表是现代网站设计中用于将视觉外观应用于页面的内容。 虽然HTML创建了页面的结构,而Javascript可以处理行为,但网站的外观是CSS的领域。 在涉及这些样式时,它们通常使用外部样式表应用,但您也可以使用称为“内联样式”的CSS样式应用于单个特定元素。

内联样式是直接在页面的HTML中应用的CSS样式。 这种方法既有优点也有缺点。 首先,我们来看看这些样式的写法。

如何编写内联样式

要创建内联CSS样式,首先要编写样式属性,类似于样式表中的样式,但它必须全部都是一行。 使用分号分隔多个属性,就像在样式表中一样。

背景:#CCC; 颜色:#FFF; 边框:纯黑1px;

将这一行样式放置在要设置样式的元素的样式属性中。 例如,如果您想将此样式应用于HTML中的段落,则该元素如下所示:

在此示例中,此特定段落将以浅灰色背景(即#ccc将呈现的内容),黑色文本(来自#000颜色)以及围绕段落所有四边的1像素纯黑色边框显示。

内联样式的优点

由于级联样式表级联样式的级联在文档中具有最高的优先级或特异性。 这意味着无论您的外部样式表中有何内容,它们都将被应用(除了任何赋予!表单的重要声明的样式外,但这不是应该在生产站点中完成的)可以避免)。

唯一具有比内联样式更高优先级的样式是由读者自己应用的用户样式 。 如果您在应用更改时遇到问题,可以尝试在元素上设置内联样式。 如果你的风格仍然不使用内联风格显示,你知道还有其他事情正在发生。

内联样式可以方便快捷地添加,因此您无需担心编写正确的CSS选择器,因为您直接将样式添加到要更改的元素(该元素实质上取代了您将在外部样式表中编写的选择器)。 您不需要创建一个全新的文档(如使用外部样式表)或编辑文档头部的新元素(如使用内部样式表)。 您只需添加几乎在每个HTML元素上都有效的样式属性。 这些都是您可能会尝试使用内联样式的所有原因,但您还必须了解此方法的一些非常重要的缺点。

内联样式的缺点

因为内联样式是级联中最具体的,所以它们可以替代你不想要的东西。 他们也否定了CSS最强大的方面之一 - 能够从一个中心CSS文件中设计大量和大量的网页,使未来的更新和样式更改更容易管理。

如果您只需要使用内联样式,那么您的文档将很快变得臃肿并且很难维护。 这是因为内联样式必须应用于您想要的每个元素。 因此,如果您希望所有段落都具有“Arial” 字体系列 ,则必须为文档中的每个

标签添加内联样式。 这增加了设计人员的维护工作和读者的下载时间,因为您需要在网站的每个页面上更改此设置以更改该字体系列。 或者,如果您使用单独的样式表,则可以在一个位置更改它,并让每个页面都能接收到该更新。

实际上,这是网页设计的倒退 - 退回标签的日子!

内联样式的另一个缺点是不可能使用它们来设置伪元素和类。 例如,对于外部样式表 ,您可以设置锚点标签的访问类型,悬停类型,活动类型和链接颜色的样式,但是对于内联样式,所有样式都是链接本身,因为这是style属性所附带的。

最终,我们建议您不要为您的网页使用内联样式 ,因为它们会导致问题并使页面需要更多维护工作。 我们唯一使用它们的时候是我们想要在开发过程中快速检查风格。 一旦我们找到了适合这一元素的东西,我们将它移动到我们的外部样式表中。

由Jennifer Krynin撰写的原文。 由Jeremy Girard编辑。