1. 内嵌式写法
在HTML文件的头部加上<style>标签,然后把CSS的代码直接放在<style>标签中。这种方式的优点是直接在HTML文件中修改样式,修改方便,但缺点是样式代码与HTML代码混杂在一起,不方便维护。
1.1 示例代码
<style>
h1 {
color: red;
}
p {
font-size: 16px;
}
</style>
2. 内部样式表写法
在HTML文件的头部使用<style>标签,但将CSS代码放在<style>标签的外部,定义在<style>标签的内部。这种方式的优点是样式与HTML代码分离,便于维护和修改。
2.1 示例代码
<head>
<style>
h1 {
color: red;
}
p {
font-size: 16px;
}
</style>
</head>
3. 外部样式表写法
将CSS的代码写在独立的CSS文件中,然后在HTML文件中使用<link>标签引用。这种方式的优点是样式与HTML代码完全分离,便于维护。
3.1 示例代码
在HTML文件中引用CSS代码:
<head>
<link rel="stylesheet" href="style.css">
</head>
在独立的CSS文件(style.css)中定义样式:
h1 {
color: red;
}
p {
font-size: 16px;
}
总结
以上介绍了CSS的三种常用写法,包括内嵌式写法、内部样式表写法和外部样式表写法。不同的写法适用于不同的场景,需要根据实际情况来选择合适的方式。
CSS的写法不同,但一定要注意代码的规范性和易维护性,这对于后期网站的维护和升级非常重要。