html中是怎样引入css样式？以及link与@import的区别（代码实例）-百分百源码网

html中是怎样引入css样式？以及link与@import的区别（代码实例）

发布时间：09/01 来源：未知浏览：关键词：

在前端网站的开发历程中，我们都是要用到css样式的，css样式可以有效地对页面的规划、字体、色彩、背景和其它结果实现愈加准确的操纵。那么这些css样式的文件或者代码是怎样导入到html中的？本章就给大家带来html中是怎样引入CSS样式文件？乃至link与@import的不同（代码实例），让大家理解css样式是怎样导入的，重点描写css样式文件的导入。有必然的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。

一、HTML导入css样式的办法

HTML主要负责网页的内容展示，而CSS文件负责网页内容的样式，在HTML中使用css样式的办法有：行内式、内嵌式、外联式，

而外联式又分：链接式（link）和导入式（@import）。那么下面就给大家介绍一下：

1. 行内式----HTML标签中使用CSS

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内式</title>
	</head>
	<body>
		<p style="color: red;font-size: 20px;">行内式行内式行内式行内式行内式行内式行内式行内式行内式<p>
	</body>
</html>

结果图：

css援用的行内式也可称为内联式或者行级式，它直接在标签内部引入，显著的长处是十分的便利、高效；但是同时也造成了不克不及够重用样式的缺陷，假如代码行数抵达必然长度不倡议采纳。平常内联CSS作为测试使用，可以查寻代码中bug。

2.内嵌式---将CSS内容通过style标签写在head标签中

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内嵌式</title>
		<style>
			p{
				background-color: #21B4BB;
				color: #fff;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<p>内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式<p>
	</body>
</html>

结果图：

css援用的内嵌式也可称为内部式或者页级式，团体是放在head标签里边的，在style标签里边定义样式，作用范畴仅限于本页面的元素；假如你写的代码超越了几百行，想想每次把代码页拉到最上边都很烦，所以它在可保护性方面较差。

3. 外联式---通过link标签引入外部样式表（css样式文件）

1）链接式（link）

语法：

<link rel="stylesheet"  type="text/css"  href="css的途径" >

代码实例：

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>链接式</title>
		<link rel="stylesheet" type="text/css" href="style.css"  >
	</head>
	<body>
		<p>链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式<p>
	</body>
</html>

css样式文件--style.css代码：

p{
	font-size: 20px;
	color: #fff;
	background-color: #70DBDB;
}

结果图：

链接式会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开端就是带样式的结果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的长处。

2）导入式（@import）

语法：

<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>

代码实例：

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导入式</title>
		<style type="text/css" media="screen">   
		@import url("style.css");   
		</style>
	</head>
	<body>
		<p>导入式导入式导入式导入式导入式导入式导入式导入式导入式<p>
	</body>
</html>

结果图：