html中是如何引入css样式？以及link与@import的区别（代码实例）-html教程-PHP中文网

首页

web前端

html教程

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

青灯夜游

Sep 13, 2018 pm 03:08 PM

csslink@import

在前端网站的开发过程中，我们都是要用到css样式的，css样式可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。那么这些css样式的文件或者代码是如何导入到html中的？本章就给大家带来html中是如何引入CSS样式文件？以及link与@import的区别（代码实例），让大家了解css样式是如何导入的，重点描述css样式文件的导入。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、HTML导入css样式的方法

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

而外联式又分：链接式（link）和导入式（@import）。【推荐学习：css视频教程】

那么下面就给大家介绍一下：

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>

效果图：

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

css引用的行内式也可称为内联式或者行级式，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。

优点:

没有了样式表文件，在某些时候可以提升效率;
使用 style 属性的样式效果会最强，会覆盖掉其他引入方式的相同样式效果。

缺点:

多个元素难以共享样式，不利于代码复用;
HTML 和 CSS 代码混杂，不利于程序员和搜索引擎阅读。

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>

效果图：

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

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

优点：跟行间样式表相同不会产生额外的请求，且它初步实现了结构与样式的分离，比较适合单页面网站应用。

缺点：由于内部样式表是写在 HTML 文件中的，导致页面不纯净、文件体积大、不利于网络爬虫获取信息、不利于维护、页面之间无法共享样式

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;
}

效果图：

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

链接式会以网页文件主体装载前装载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>

效果图：

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

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。

3）外联式的优缺点

优点：

实现了结构与表现的代码完全分离
方便复用及维护
因为分离到各自独立的文件中，让 HTML 文件大小大幅减少了，从而让页面结构更容易被程序员和网络爬虫读懂
对搜索引擎友好，让搜索引擎给页面评分更高，有利于页面搜索引擎排名
外部样式表在用户首次访问后就被缓存到用户电脑上，下次访问无需加载

缺点：

如果样式很多，CSS 文件会变的很大查找起来不方便。此外，多一个 CSS 文件就多一次 HTTP 请求，在访问量大的网站中会加重服务器压力

二、链接式（link）与导入式（@import）的区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；而@import属于CSS范畴，只能加载CSS；
link引用CSS时，在页面载入时同时加载；而@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；而@import是在CSS2.1提出的，低版本的浏览器不支持。
ink支持使用Javascript控制DOM去改变样式；而@import不支持。
@import可以在CSS文件中再次引入其他样式表；而link不支持。

（学习视频分享：web前端入门）

以上是html中是如何引入css样式？以及link与@import的区别（代码实例）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

See all articles