html中引入css样式的方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！
一、HTML导入css样式的方法
HTML主要负责网页的内容展现，而CSS文件负责网页内容的样式，在HTML中使用css样式的方法有：行内式、内嵌式、外联式，
而外联式又分：链接式（link）和导入式（@import）。那么下面就给大家介绍一下：
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>
效果图：
css引用的行内式也可称为内联式或者行级式，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。
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>效果图：
css引用的内嵌式也可称为内部式或者页级式，整体是放在head标签里边的，在style标签里边定义样式，作用范围仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。
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>效果图：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。
二、链接式（link）与导入式（@import）的区别
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；而@import属于CSS范畴，只能加载CSS；
link引用CSS时，在页面载入时同时加载；而@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；而@import是在CSS2.1提出的，低版本的浏览器不支持。
ink支持使用Javascript控制DOM去改变样式；而@import不支持。
@import可以在CSS文件中再次引入其他样式表；而link不支持。
感谢各位的阅读！看完上述内容，你们对html中引入css样式的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
