一:CSS的三种引用方式
1、外部样式表
2、内部样式表
3、内联样式表
二:代码编写
1、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>外部样式表</title>
<link href="index.css" rel="stylesheet"type="text/css"/>
</head>
<body>
<div></div>
</body>
</html>
2、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表</title>
<style type="text/css">
p {
color:red;
}
</style>
</head>
<body>
<p>绿叶学习网</p>
<p>绿叶学习网</p>
<p>绿叶学习网</p>
</body>
</html>
3、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内联样式表</title>
</head>
<body>
<p style="color:red;">绿叶学习网</p>
<p style="color:red;">绿叶学习网</p>
<p style="color:red;">绿叶学习网</p>
</body>
</html>
三:浏览器运行效果
四:三种方式的区别
为了提升网站的性能和维护性,一般使用外部样式表,方便应用到多个页面。
初学者建议使用内部样式表,代码量不多,HTML代码和CSS代码放在同一个文件,也方便修改和测试。
内联样式表冗余代码多,网站维护性差,不建议使用。不过可以使用内联样式表进行细节的微调。