HTML与css是两个作用不同的语言,它们同时对一个网页产生作用,因此必须通过一些方法,将css与HTML挂接在一起,才能正常工作。
在HTML中,引入css的方法主要由行内式、内嵌式、导入式、和链接式。
1.行内式
<html>
<head>
<title>行内式</title>
<style type="text/css">
/*
行内式即在标记的style属性中设定css样式,这种方法本质上没体现出css的优势,因此不推荐使用。
*/
</style>
</head>
<body>
这就是行内样式在标签的style属性中写样式,这样体现不出css的任何优势。
<h1 style="color:red">行内式</h1>
</body>
<html>
2.嵌入式
<html>
<head>
<title>嵌入式</title>
<style type="text/css">
/*
嵌入式则是将对页面中各种元素的设置集中写在<head></head>之间,对于单一的网页这种方式很方便。
但是对于一个包含很多页面的网站,如果每个页面都以内嵌方式设置各自的样式,就失去了css带来的巨大优点,
因此一个网站通常是编写一个独立的css样式表文件,在引如到html文档中。这就是接下来要讲的两种方式
*/
h1{
color:red;
}
</style>
</head>
<body>
<h1>嵌入式</h1>
</body>
<html>
3.导入式
<html>
<head>
<title>导入式</title>
<style type="text/css">
/*
同链接式首先要在写一个.css的样式文件然后用@import"xx.css";
*/
@import"css/import.css";
</style>
</head>
<body>
<h1>导入式</h1>
</body>
<html>
4.链接式
<html>
<head>
<title>链接式</title>
<style type="text/css">
/*
链接式首先要在写一个.css的样式文件然后用<link href="xx.css" rel="stylesheet" type="text/css"/>";
*/
</style>
<link href="css/link.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>链接式</h1>
</body>
<html>
使用导入式与链接式的区别
使用链接方式时,会在装载页面主题之前装载css文件,这样显示出来的网页从一开始就是带有样式效果的,而使用导入式时,会在整个页面装载完成之后再装载css文件。