- （1）外部样式表；
- （2）内部样式表；
- （3）内联样式表；
下面我们详细为大家介绍这3种CSS引入方式。
1、CSS外部样式表
外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用 标签来引用CSS样式表。
当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。
外部样式表在单独文件中定义，并且在<head></head>标签对中使用 标签来引用。
CSS外部样式表实例：
<!DOCTYPE html>
<html ns=\"http://www.w3.org/1999/xhtml\">
<head>
< ></ >
<!--在HTML页面中引用文件名为index的css文件-->
< href=\"index.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>
<body>
<div></div>
</body>
</html>
说明：外部样式表都是在head标签内使用 标签来引用的。
2、内部样式表
内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在<style></style>标签对内，并且<style></style>标签对是放在<head></head>标签对内的。
内部样式表实例
<!DOCTYPE html>
<html ns=\"http://www.w3.org/1999/xhtml\">
<head>
< ></ >
<!--这是内部样式表，CSS样式在style标签中定义-->
<style type=\"text/css\">
p{color:Red;}
</style>
</head>
<body>
<p>码农教程</p>
<p>码农教程</p>
<p>码农教程</p>
</body>
</html>
对于内部样式表，CSS样式在<style>标签内定义，而<style>标签必须放在<head>标签内。
<##ads_in_article_manong##>
3、内联样式表
内联样式表，也是把CSS代码和HTML代码放在同一个文件中，但是跟内部样式表不同，CSS样式不是在<style></style>标签对中定义，而是在标签的style属性中定义。
内联样式表实例
<!DOCTYPE html>
<html ns=\"http://www.w3.org/1999/xhtml\">
<head>
< ></ >
</head>
<body>
<p style=\"color:Red; \">码农教程</p>
<p style=\"color:Red; \">码农教程</p>
<p style=\"color:Red; \">码农教程</p>
</body>
</html>
大家仔细对比一下这个例子和内部样式表中的例子，其实这两段代码实现的是同一个效果。三个p元素都定义了color属性，那么如果采用以下内部样式表，样式只需要写一遍；而如果采用内联样式表，则三个p元素都要单独写一遍。
内联样式是在单个元素内定义的，对于网站来说，冗余代码很多，而且由于冗余代码多，每次改动CSS样式都要到具体的标签内修改，这样使得网站的维护性也非常差。
在“HTML入门教程”中为什么强烈不推荐使用Dreamweaver那种“点点点”的方式来制作网页，就是因为在那种方式产生的代码中，CSS样式全部都是使用内联样式，导致冗余代码非常多，网站的维护性也非常差。
如何选中css引入方式
在实际开发中，小编建议使用外部样式表，而在CSS入门学习与测试的过程中，我们可以不用像开发阶段那么规范，可以直接使用内部样式表，因为代码量不是很多，HTML代码和CSS代码放在同一个文件，这样也方便我们修改和测试。不管是在测试或者实际开发中，我们都不建议使用内联样式表。不过呢，我们可以使用内联样式表进行细节的微调。
继续阅读与本文标签相同的文章
今天是阿兹海默症日，这和谷歌街景有什么关系？
程序员经典面试题，高并发系统，一般需要怎么做
-
剧情反转？美企主动购买华为5G技术，华为成赞赏排行榜第一名！
2026-05-14栏目： 教程
-
城市数字化后，新一代内生安全系统可全方位保护
2026-05-14栏目： 教程
-
谷歌也来“唱衰”5G，5G手机只会徒增功耗？为何这么说？
2026-05-14栏目： 教程
-
量子信息和量子技术白皮书合肥宣言在中科大发布
2026-05-14栏目： 教程
-
微信悄悄更新一新功能，来看看！
2026-05-14栏目： 教程