1.2 css的引入方法

来源：互联网发布：cpi数据分析编辑：程序博客网时间：2024/05/17 08:17

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文件。