简介
在HTML中插入CSS的方法主要有三种,它们分别是内联样式、内部样式、链接式和外部样式。本文结合的具体的例子,总结HTML插入CSS的方法。
内联样式
内联样式是在标记的style属性中设定CSS样式。如下面的例子将h1的内容标记为黑底白字。
<h1 style="color:white;background-color:black">
This is a line of Text.
</h1>
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。这种方式仅设置某个具体标记,无法与其它标记共用,没有体现出CSS的优势,不推荐使用。
内部样式表
<head>
<style type="text/css">
h1{
color:white;
background-color:blue
}
</style>
</head>
这种方法的 缺点是对于一个包含很多网页的网站,在每个网页中使用嵌入式,需要维护很多份样式表,这种情况下,样式的修改和维护非常麻烦,耗时耗力。
当单个文档需要特殊的样式时,就应该使用内部样式表。
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。CSS样式定义在.css文件中,可以通过一定的规则在HTML页面中进行引用,这种又分为两种方式:
导入式
导入式使用
CSS规则引入外部.css文件,语法如下:
<head>
<style type="text/css">
@import"mystyle.css";
</style>
</head>
导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷,因此这种方式也很少被使用。
链接式
链接式使用
HTML规则引入外部CSS文件,它在网页的<head></head>标签对中使用<link>标记来引入.css文件,使用语法如下:
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
</head>
使用链接式时,会在网页文件主体装载前装载CSS文件。因此,显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。