html怎么导入css文件

方法:1、使用link标签,语法“<link rel="stylesheet" type="text/css" href="css文件路径" >”;2、使用“@import”规则,语法“@import url("CSS文件路径");”。

/2021/06/156f1b56

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS文件一般叫CSS外部样式表,是用于放置CSS代码的文本文件,而CSS代码具有一定规律规则的文本代码组成。我们使用记事本将扩展名更改即可变成CSS文件。

css文件是以.css为后缀名的,我们看到以.css为后缀的文件就是css文件。

html怎么导入css文件

html中导入css文件的方法有两种:

  • 链接式(link)

  • 导入式(@import)

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

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

1、链接式(link)

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

语法:

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

效果图:

/2021/06/edc41681.png" title="/2021/06/edc41681.png" alt="1

2、导入式(@import)

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

语法:

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

效果图:

/2021/06/7fadd7c6.png" title="/2021/06/7fadd7c6.png" alt="2

(学习视频分享:css视频教程)

以上就是html怎么导入css文件的详细内容,更多请关注北冥有鱼编程技术建站教程其它相关文章!

相关推荐:

如何使用 Python pdfkit 基于 HTML 生成多页 PDF

本文详解如何在Django项目中利用pdfkit将多个HTML内容块分别渲染为独立PDF页面,核心是通过CSS的page-break-after:always实现精准分页。 本文详解如何在django项目中利用pdfkit将多个html内容块分别渲染为独立pdf页面,核心是通过css的`page-b...

PythonPlotly交互式图表教程_动态数据展示实战

Plotly是Python中制作交互式图表的首选工具,支持缩放、悬停、拖拽等交互功能,三步即可创建图表:准备数据、调用px.line等函数、用fig.show()显示或write_html导出;支持动画、实时刷新与用户交互驱动更新;可定制悬停信息、适配移动端并保障离线使用。 用Plotly快速创建可...

Python单元测试项目实战教程_覆盖率分析与断言应用

Python单元测试需兼顾覆盖率与精准断言:用pytest-cov生成HTML报告查漏补缺,聚焦missedlines;用原生assert验证返回值、异常和状态变化;通过parametrize覆盖边界与异常场景;在CI中设fail_under阈值强制保障质量。 写Python单元测试不只是让代码“跑...

PythonAI实战驱动学习教程_边做项目边成长

学Python做AI要动手做项目,从最小可行项目起步,边做边查文档和报错,小步迭代优化,并用Git记录每次改进过程。 学Python做AI,光看理论没用,得动手做项目。项目不是为了炫技,而是帮你把零散知识点串起来,遇到问题倒逼自己查文档、调代码、读报错——这才是真实的学习节奏。 从“能跑通”开始:选...