HTML调用CSS的四种方法

HTML调用CSS的四种方法

Created in: 2015/9/30 18:35:44 原文地址:http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import 前言:因工作使用到以前未曾接触的CSS,但是在调用CSS的过程中遇到一个大问题:

所有CSS规则存放在style标签中。media元素的值可以像上文所述的“screen”/“print”。

这种方法的缺点是每次用户访问网页时Style文件都需要重新下载,这将导致轻微慢的浏览体验。相对的,这种方法也有一些优点。因为CSS是HTML文档的一部分,整个页面只以一个文件的方式存在。在向他人发送邮件页面时或者HTML页面作为类似博客模板时,此方式将会被使用。另一个使用此方法的优点是动态内容。如果你通过数据库来生成页面内容,你同时也能产生动态Style。Blogger采用了这种方法——它动态地插入HTML标题颜色到嵌入在HTML中的CSS规则。这使得用户可以通过Admin页面改变颜色而非在Blog模板中修改CSS。

3. HTML标记加入内联CSS

Style规则也可以直接加入HTML元素中。你只需要在元素中加入一个style参数,同时输入Style规则作为其值。下面是一个标题文本为红色、背景为黑色的示例:

This is a red heading with a black background

这是一种不好的方法,因为它将使网页膨胀,使得网页维护变得头疼。但是它在一些条件下,仍然有些用途。一个例子便是:假如你在使用一个你没有CSS文件权限时,对应的只需简单地在元素中加入Style规则。

4. 在CSS文件中导入CSS文件

另外一种有趣的在HTML页面加入CSS的方式是导入规则。这种方式让我们从CSS内部附加一个新的CSS文件。下面瞧瞧一个如何完成的例子,然后我将会展示当你可能使用这种方法的特殊例子。为了在内部导入CSS文件,只需简单地用下面规则:

@import "newstyles.css";

只需将”newstyles”改成你的CSS文件名,同时确定包含正确的文件路径。记住,文件路径是相对于现在我们所在的CSS文件而言的,如果CSS文件是嵌入到HTML页面中,则路径是相对于HMTL文件而言。

让我们想像:我们有一个1000张页面的网站,并且我们在网站的每一个页面都链接到一个CSS文件。现在我们想像:我们需要加入第二个CSS文件到所有页面中。我们可以编辑这1000个页面,增加第二个CSS链接或者一个更好的方式即是在第一个文件中导入新的CSS文件。我们可以节约自己许多小时的工作量。

Happy CSS coding…

关于作者: admin

相关推荐

原神调查石龛攻略

原神调查石龛攻略

365直播电视 09-07
珍珠主要产地在哪里?中国出名的珍珠产地介绍
胡歌为什么不关注刘雯 两人私下关系到底怎么样?