CSS基础01 - HTML页面嵌套使用CSS的三种方式
在HTML页面中,我们可以通过三种方式使用CSS:
- 内联样式:直接在HTML元素的
style
属性中书写CSS代码。 - 内部样式表:在HTML文档的
<head>
部分,使用<style>
标签来书写CSS代码。 - 外部样式表:创建一个单独的CSS文件,并通过HTML文档的
<link>
标签引入。
以下是每种方式的示例代码:
- 内联样式:
<p style="color: red;">这是一个红色文本。</p>
- 内部样式表:
<head>
<style>
p { color: blue; }
</style>
</head>
<body>
<p>这是一个蓝色文本。</p>
</body>
- 外部样式表:
<!-- 在<head>部分引入外部CSS文件 -->
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
styles.css 文件内容:
p {
color: green;
}
在HTML页面中使用CSS时,推荐使用外部样式表,因为它可以在多个页面之间共享样式信息,减少代码冗余,并且有利于SEO和维护。
评论已关闭