HTML插入CSS样式表方法总结

简介

在HTML中插入CSS的方法主要有三种,它们分别是内联样式、内部样式、链接式和外部样式。本文结合的具体的例子,总结HTML插入CSS的方法。

内联样式

内联样式是在标记的style属性中设定CSS样式。如下面的例子将h1的内容标记为黑底白字。
<h1 style="color:white;background-color:black">
		This is a line of Text.
</h1>
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。这种方式仅设置某个具体标记,无法与其它标记共用,没有体现出CSS的优势,不推荐使用。

内部样式表

内部样式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。如对本网页所有的h1标记都设置为黑底白字:
<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文件。因此,显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

总结

一般来说,推荐使用链接式外部样式表的方式, 这样,  在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。

参考资料

1. CSS彻底研究

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值