让企业赢在全网营销时代
当前位置: 首页>>建站知识>>PC建站

常用的添加CSS的几个方法

作者:admin 点击量:476次 2018-07-08 01:55:46

自己建网站时有多种方法可以将级联样式表添加到HTML文档中。不过今天在这个简短的教程中,我们将解释四种主要css添加方法的优缺点。大家在日常建设自己网站时可以作为参考,也可以直接代入使用。

自己建网站如何调入css

链接到一个单独的CSS文件

这是将CSS规则附加到HTML文档中最常用的方法。使用此方法所有样式规则都包含在一个以.CSS扩展名保存的文本文件中。该文件保存在您的服务器上,并直接从每个HTML文件链接到该文件。这个链接只是你放在HTML文档部分的一行简单的HTML。例如以下的代码方式:

网站链接到一个单独的CSS文件

确保你包含正确的路径到你的CSS文件中href。如果CSS文件与HTML文件位于同一文件夹中,则不需要路径(如上面的示例),但是如果它保存在文件夹中,则可以像这样指定它。media参数指定何时使用CSS规则。“屏幕”表示在电脑屏幕上使用。如果您指定“打印”,则仅在打印页面时遵循规则。如果需要您可以包含多个CSS文件。

链接到一个单独的CSS文件有很多好处。如果您需要在整个网站上进行风格更改,则只需在单个CSS文件中进行一次更改即可。如果你想完全改变你的网站的外观,你只需要更新这一个文件。一个单独的CSS文件可以提高网站打开速度。当一个人第一次访问您的网站时,他们的浏览器会下载当前页面的HTML以及链接的CSS文件。然后当他们导航到另一个页面时,他们的浏览器只需要下载该页面的HTML,CSS文件就被缓存了,所以不需要再次下载。这可以显着提高网站的浏览速度。

CSS嵌入到HTML中

您也可以将CSS规则直接嵌入任何HTML页面。为此您需要将以下代码添加到您的HTML文档中:

自己建网站时把CSS嵌入到HTML中

所有的CSS规则都写在样式标签之间。

这种方法的缺点是每次访问页面时都必须下载样式,这会导致浏览体验稍微慢一些。但是有一些优点。由于CSS是HTML文档的一部分,整个页面只存在一个文件。如果您通过电子邮件将该页面发送给某人,或者该页面将被用作模板(如博客模板),则此功能非常有用。我在我的液体布局演示中使用这种方法,所以当人们查看页面的源代码时,他们可以一起看到HTML和CSS代码。使用这种方法的另一个优点是动态内容。如果您正在使用数据库来生成页面内容,则还可以同时生成动态样式。比如在博客网站中它动态地将标题和其他元素的颜色插入页面中嵌入的CSS规则。这使用户可以从管理页面更改这些颜色,而无需实际编辑其博客模板中的CSS

将内联CSS添加到HTML标记

样式规则也可以直接添加到任何HTML元素。要做到这一点,你只需要添加一个样式参数到元素并输入你的样式规则作为值。以下是红色文字和黑色背景标题的示例:

将内联CSS添加到HTML标记中

这不是一个好的方法,因为它会膨胀你的HTML,使网站维护真正头痛。但是在某些情况下它可能会有用。例如如果您使用的是无法访问CSS文件的系统,只需将样式规则直接添加到元素即可。

从CSS中导入CSS文件

将CSS添加到HTML页面的另一个有趣方法是使用导入规则。这让我们可以从CSS本身附加一个新的CSS文件。我们来看一个这样做的例子,然后我将展示一个当你可能使用这个方法的实例。要从CSS中导入新的CSS文件,只需使用以下规则:

添加css文件

只需将“newstyles”更改为CSS文件的名称,并确保也包含文件的正确路径。请记住路径是相对于当前我们所在的CSS文件,如果CSS嵌入到HTML页面中,那么路径是相对于HTML文件。

比如我们有一个1000页的网站,我们链接到网站上的每个页面的CSS文件。现在我们想要添加第二个CSS文件到所有这些页面。我们可以编辑所有1000个HTML文件并添加第二个CSS链接,或者用更好的方法是从第一个文件中导入第二个CSS文件。同过这些方法在建网站时可以为自己节省了许多的工作!