零基础学Web 05（链接外部样式表、link元素、链接网站图标）

最新推荐文章于 2025-05-12 11:48:09 发布

原创最新推荐文章于 2025-05-12 11:48:09 发布 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

web零基础学习专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用HTML的link元素引入外部CSS样式表，以实现更有效的文档组织和优化用户体验。当样式内容较多时，外部样式表可以避免HTML文档内容混乱，便于管理和维护。同时，通过link标签，可以针对不同的设备和打印设置引入不同样式，并展示了引入多个外部样式表的示例。此外，还提及了link元素用于设置网站favicon图标的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

链接外部样式表

引言：除了可以在style元素里面添加，我们还可以将css样式表保存为外部文件，然后使用link元素将其链接进来。
复习style元素：

定义和用法
<style>标签用于为 HTML 文档定义样式信息。
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。
例如：<style type=text/css> ....</style>
style 元素位于 head 部分中。
实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewpoint" content="width=device-width,initial-scale=1.0">
		<title>hello</title>
		<style type="text/css">
			h1{color:red;}
			p{color:blue;}
		</style>
	</head>
	<body>
		<h1>标题是</h1>
		<p>我的段落是</p>
	</body>
</html>

在这里插入图片描述
链接外部样式表

通过将css样式表存储为外部文件然后用link元素引入进来的好处，就是当我们的样式表内容非常多的时候，可以单独存储为外部文件，这样就避免了喧宾夺主（当打开html文档以后映入我们眼帘的全是css样式，主要内容往往会忽略）。
应用（将原来style元素引入的样式改为link元素引入css外部文件）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我们的方特之旅</title>
<style type="text/css">
h1 {text-align:center;
color:white;
}
p{text-align:center;
color:white;
}

body{
background-image:url(halfRombes.png);
}
</style>
<style media="print">
h1{color:black;
}

p{color:black;
}
</style>
<style media="screen and (min-width:512px) and (max-width:1024px)">
body{
background-image:url(123.png);
}
</style>
</head>
<body>
<h1>我们的方特之旅</h1>
<p>请问你们这趟旅行开心吗？<br>A.开心<br>B.不开心<br>C.非常不开心<br></p>

</body>
</html>

只需要把以下部分分别存储为为1.css 、print.css 、screen.css文件，然后利用link标签将css文件引入。
1.css文件内容如下

h1 {text-align:center;
color:white;
}
p{text-align:center;
color:white;
}

body{
background-image:url(halfRombes.png);
}

print.css内容如下

h1{color:black;
}

p{color:black;
}

screen.css内容如下

body{
background-image:url(123.png);
}

引入的语句为

<link rel="stylesheet" type="text/css" href="1.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen.css">

link标签的使用说明

定义和用法
<link>标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
提示
link 元素是空元素，它仅包含属性。
此元素只能存在于 head 部分，不过它可出现任何次数。
属性见下图表

链接网站图标
引入：当我们打开网页的时候，标签栏上往往会有一个小的图标，这个图标我们称之为favicon=“favorite icon”,通常情况为icon格式的文件，我们一般使用link元素进行引入。
1.常用语句为

<link rel="icon" type="image/x-icon" href="b1.icon">

引入以后得到的效果如下：
在这里插入图片描述