今天小编跟大家讲解下有关在HTML中引入CSS的3种方式使用介绍 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关在HTML中引入CSS的3种方式使用介绍 的相关资料，希望小伙伴们看了有所帮助。
在HTML中 引入CSS的方法主要有行内式、内嵌式、导入式和链接式行内式：即在标记的style属性中设定CSS样式 这种方式本质上没有体现出CSS的优势 因此不推荐使用例：复制代码代码如下: <html> <head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Text Demo</title> </head> <body><h1 style=color:white;background-color=blue;>This is a line of Text.</h1> </body> </html>嵌入式：嵌入式则将对页面中各种元素的设置集中写在<head>和</head>之间 对于单一的网页 这种方法很方便。但是对于一个包含很多页面的网站 如果每个页面都以内嵌方式设置各自的样式 就失去了CSS带来的巨大优点 因此一个网站通常都是编写一个独立的CSS样式表文件 使用以下两种方式中的一种 引入HTML文档中。例：复制代码代码如下: <html> <head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Text Demo</title><style type="text/css">h1{ color:white; background-color:boue; }</style> </head> <body><h1>This is a line of Text.</h1><h1>This is another line of Text.</h1> </body> </html>导入式与链接式：导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件 二者有相应的区别。事实上 二者最大的区别在于链接式使用HTML的标记引入外部CSS文件 而使用导入式则是使用CSS的规则引入外部CSS文件。因此它们的语法也不同。如果使用链接式 需要使用如下语句引入外部CSS文件。<link href="mystyle.css" rel="stylesheet" type="text/css" />如果使用导入式 则需要使用如下语句。复制代码代码如下:<style type="text/css"> @import"mystyle.css";</style>此外 采用这两种方式后的显示效果也略有区别。使用链接方式时 会在装置页面主体部分之前装载CSS文件 这样显示出来的网页从一开始就是带有样式的效果 而使用导入式时 会在整个页面装载完成后再装载CSS文件 对于有的浏览器来说 在一些情况下 如果网页文件的体积比较大 则会出现先显示无样式的页面 闪烁一下之后再出现样式设置后的效果。从浏览者的感受来说 这是使用导入式的一个缺陷。对于一些比较大的网站 为了便于维护 可能会希望把所有的CSS样式分类别放到几个CSS文件中 这样如果使用链接式引入 就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类 就需要同时调整HTML文件。这对于维护工作来说 是一个缺陷。如果使用导入式 则可以只引进一个总的CSS文件 在这个文件中再导入其他独立的CSS文件；而链接式则不具备这个特征。因此这里给大家的一个建议是 如果需要引入一个CSS文件 则使用链接方式；如果需要引入多个CSS文件 则首先用链接方式引入一个“目录”CSS文件 这个“目录”CSS文件中再使用导入式引入其他CSS文件。如果希望通过Javascript来动态决定引入哪个CSS文件 则必须使用链接方式才能实现。来源：爱蒂网
