1.2 css的引入方法

最新推荐文章于 2025-06-24 17:44:00 发布

原创最新推荐文章于 2025-06-24 17:44:00 发布 · 540 阅读

0 ·

CC 4.0 BY-SA版权

css+div 专栏收录该内容

2 篇文章

订阅专栏

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