CSS的三种引用方式
在HTML中，引入CSS共有三种方式，分别是外部样式表，内部样式表，内联样式表。
1、外部样式表
外部样式表是最理想的CSS引用方式，在实际开发中，为了提高网站的性能和维护性，一般都是使用外部样式表。所谓的外部样式表，就是把CSS代码单独放在一个文件中，然后通过HTML文档中link标签，导入样式表。
语法：
<link href="文件路径" rel="stylesheet" type="text/css">示例代码：
<html>
<head>
<title>外部样式表</title>
<link href="1.css" rel="stylesheet" type="text/css>
</head>
<body>
<div></div>
</body>
</html>link标签，是在head内部使用的，通过导入css文件，来达到代码分离的目的。
2、内部样式表
内部样式表，就是HTML代码和CSS代码在同一个文件中。css代码放在<style></style>标签内，并且把<stytle></style>放在<head>内部。
语法：
<style type="text/css">
......
</style>示例代码：
<html>
<head>
<title>内部样式表</title>
<stytle type="text/css">
div
{
.......
}
</style>
</head>
<body>
<div></div>
</body>
</html>对于内部样式表，css样式代码必须放在style标签内部，并且style放在head内部。
3、内联样式表
内联样式表，也是把HMTL和CSS代码放在一个文件中，但是不是放在<head>内部，而是通过<style>标签放置在HTML的各个元素标签内。
语法：
<div style="width:100px;height:100px;"></div>示例代码：
<html>
<head>
<title>内联样式表</title>
</head>
<body>
<p style="color:Red">CSS入门基础</p>
<p style="color:blue">CSS入门基础</p>
<p style="color:green">CSS入门基础</p>
</body>
</html>大家注意观察，内联样式表直接对所在标签起作用，如果需要标签实现效果，需要针对每个标签都写css代码，容易造成冗余，维护css代码时还需要找到标签，这对于维护大型网站来说，工作量大，还容易出错。
在HTML入门学习时，不建议大家使用Dreamweaver那种“点点点”的方式开发网页，该工具生成的网页代码均是使用的内联样式代码，后期维护起来非常麻烦，冗余较多，也不便于初学者理解。
在实际开发中，我们都会使用外部样式表，这样代码分离，需要修改样式时，只需要修改css样式代码文件，网页就会自动产生效果，很方便。但是分享学习过程中，我会使用内部样式表的方式，因为这样CSS代码和HTML代码在同一个文件中，方便修改和测试。
除了上面提到的三种引用方式，CSS还有一种@import方式，这种方式类似于外部样式表的调用，但是在实际开发中，极少用到@import方式，原因在于，@import方式先加载HTML后再加载CSS，link方式是先加载CSS后加载HTML，如果HTML先与CSS加载，网页的观感会非常差，影响用户体验，所以一般我们都是使用link方式。
了解前端培训开发技术知识，关注我，有更多精彩内容与您分享！
1396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
