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

来源：互联网 2024-10-11 21:03:17

在前端网站的开发过程中，我们都是要用到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>

效果图：

优点:

没有了样式表文件，在某些时候可以提升效率;
使用 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 文件中的，导致页面不纯净、文件体积大、不利于网络爬虫获取信息、不利于维护、页面之间无法共享样式

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>

效果图：

3）外联式的优缺点

优点：