html怎么引用css文件

百变鹏仔 4周前 (09-22) #HTML

文章标签文件

引用css文件的方法：1、使用“”语句；2、在style标签中使用“@import url("css文件路径");”语句。

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

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表（外联CSS），有两种方式：链接式、导入式。

语法：

立即学习“前端免费学习笔记（深入）”；

1、链接式

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2、导入式

<style type="text/css">  @import url("css文件路径");</style>

例如：

<!DOCTYPE><html><head>  <meta charset="utf-8" />  <title>外部样式表</title>  <!--链接式:推荐使用-->  <link rel="stylesheet" type="text/css" href="css/style.css" />   <!--导入式-->  <style type="text/css">    @import url("css/style.css");  </style></head><body>     <ol>         <li>1111</li>         <li>2222</li>     </ol></html>

链接式和导入式的区别

1、属于XHTML

2、优先加载CSS文件到页面

@import

1、属于CSS2.1

2、先加载HTML结构在加载CSS文件。

外联CSS的优点：

1、HTML页面的大小更小，结构更清晰。

2、加载速度更快。

3、相同的.css文件可以在多个页面上使用。

外联CSS的缺点：

1、在加载外部CSS之前，页面可能无法正确呈现。

学习视频分享：css视频教程、html视频教程

文章推荐

html怎么引用css文件

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8