如何构建外部样式表

使用CSS全站

网站是风格和结构的组合,在今天的网站上,将网站的这两个方面彼此分开是最佳做法。

HTML一直是网站的结构。 在网络的早期,HTML也包含了风格信息。 诸如标签之类的元素遍布HTML代码,并在结构信息旁边添加外观和感觉信息。 网络标准运动推动我们改变这种做法,而是将所有样式信息推送到CSS或层叠样式表中。 更进一步,目前的建议是,您使用所谓的“外部样式表”来满足您的网站样式需求。

外部样式表的优点和缺点

关于层叠样式表最好的一点是您可以使用它们来保持整个网站的一致性。 最简单的方法是链接或导入外部样式表 。 如果您为网站的每个页面使用相同的外部样式表,则可以确保所有页面都具有相同的样式。 您还可以更轻松地对未来进行更改。 由于每个页面都使用相同的外部样式表,因此对该表单的任何更改都会影响每个网站页面。 这比单独更改每个页面要好得多!

外部样式表的优点

  • 您可以一次控制几个文档的外观。
    • 如果您与一群人合作创建您的网站,这一点尤其有用。 许多风格规则可能难以记忆,虽然您可能有印刷风格指南,但不断翻阅它以确定示例文本是否要用12点Arial字体或14点快递方式书写是低效和乏味的。 把所有东西都放在一个地方,并且由于这个地方也是你要做出改变的地方,所以你可以使维护变得更容易。
  • 您可以创建可用于许多不同HTML元素的样式类。
    • 如果您经常使用某种字体样式来强调页面上的各种事物,则可以使用您在样式表中设置的类属性来获得此外观和感觉,而不是为每个实例定义特定的样式重点。
  • 您可以轻松将您的样式分组以提高效率。
    • 所有可用于CSS的分组方法都可以在外部样式表中使用,这为您提供了更多的控制和灵活性。

外部样式表的缺点

  • 外部样式表可以增加下载时间,特别是如果它们非常大。 由于CSS文件是必须加载的单独文档,因此会影响执行该下载的性能。
  • 外部样式表变得非常快,因为当样式不再被使用时很难分辨,因为当页面被移除时它不会被删除。 正确管理你的CSS文件是很重要的,特别是如果多人在使用同一个文件。
  • 如果您只有一个单页网站,则可能不需要为CSS提供外部文件,因为您只有一个样式的页面。 只有一个页面站点时,外部CSS的许多优点都会丢失。

如何创建外部样式表

使用与文档级样式表类似的语法创建外部样式表。 然而,你需要包括的是选择器和声明。 就像在文档级样式表中一样,规则的语法是:

选择器{property:value;}

将这些规则保存为扩展名为.css的文本文件。 这不是必需的,但这是一个很好的习惯,因此您可以立即在目录列表中识别您的样式表。

一旦你有一个样式表文件,你需要将它链接到你的网页 。 这可以通过两种方式完成:

  1. 链接
    1. 为了链接样式表,您使用HTML标签。 这具有属性reltypehref 。 rel属性告诉你连接的是什么(在本例中是一个样式表),类型定义了浏览器的MIME类型,而href是.css文件的路径。
  2. 输入
    1. 您可以在文档级样式表中使用导入的样式表,以便您可以导入外部样式表的属性,同时不会丢失任何特定于文档的样式表。 您以类似的方式调用链接的样式表,只有在文档级样式声明中调用该样式表时才需要调用它。 您可以根据需要导入任意数量的外部样式表,以维护您的网站。

Jennifer Krynin的原创文章。 由杰里米吉拉德在8/8/17编辑