级联样式表的好处

通过这个CSS短期课程获取事实

级联样式表具有许多优点。 它们允许您在整个网站上使用相同的样式表。 有两种方法可以做到这一点:

  1. 与LINK元素链接
  2. 使用@import命令进行导入
    1. <风格>
    2. @import url('http://www.yoursite.com/styles.css');

外部样式表的优点和缺点

关于级联样式表的最好的事情之一是您可以使用它们来保持您的网站的一致性。 最简单的方法是链接或导入外部样式表。 如果您为网站的每个页面使用相同的外部样式表,则可以确保所有页面都具有相同的样式。

使用外部样式表的一些优点包括您可以一次控制多个文档的外观。 如果您与一群人合作创建您的网站,这一点尤其有用。 许多风格规则可能难以记忆,虽然您可能有印刷风格指南,但要不断翻阅它以确定示例文本是否要用12点Arial字体或14点信使书写是很繁琐的。

您可以创建可用于许多不同HTML元素的样式类。 如果您经常使用特殊的Wingdings字体来强调页面上的各种内容,则可以使用您在样式表中设置的Wingdings类来创建它们,而不是为每个重点实例定义特定的样式。

您可以轻松将您的样式分组以提高效率。 所有可用于CSS的分组方法都可以在外部样式表中使用,这为您提供了更多的控制和灵活性。

也就是说,也有很好的理由不使用外部样式表。 首先,他们可以增加下载时间,如果你链接到很多。

每次创建新的CSS文件并将其链接或导入到文档中时,都需要Web浏览器再次调用Web服务器来获取文件。 而服务器调用减慢了页面加载时间。

如果您只有少量样式,则可能会增加页面的复杂度。
由于样式在HTML中不可见,因此任何查看页面的人都必须获取另一个文档(CSS文件)来弄清楚发生了什么。

如何创建外部样式表

外部样式表的编写方式与嵌入式和内联样式表相同。 但是你需要写的是样式选择器声明 。 您不需要文档中的STYLE元素或属性。

与所有其他CSS一样,规则的语法是:

选择器{property:value; }

这些规则被写入扩展名为.css的文本文件中。 例如,你可以命名你的样式表styles.css。

一旦你有一个样式表文件,你需要将它链接到你的网页。 正如我上面提到的,这是通过两种方式完成的。

链接CSS文件

为了链接样式表,您使用LINK元素。 这具有属性rel和href。 rel属性告诉浏览器你正在链接的是什么(在这里是一个样式表),而href属性则保存了CSS文件的路径。

还有一个可选的属性类型,可用于定义链接文档的MIME类型。 这在HTML5中不是必需的,但应该在HTML 4文档中使用。

以下是您用来链接名为styles.css的CSS样式表的代码:

在HTML 4文档中,您可以编写:

type =“text / css” >

导入CSS样式表

导入的样式表放置在STYLE元素中。 如果你喜欢,你可以使用嵌入式样式。 您还可以在链接的样式表中包含导入的样式。 在STYLE或CSS文档中,写入:

@import url('http://www.yoursite.com/styles.css');