HTML CSS
CSS (Cascading Style Sheets)，即层叠样式表，是用于描述 HTML 文档（或 XML 等其他标记语言文档）外观和格式的语言。CSS 负责网页的样式，而 HTML 负责网页的结构。将结构与样式分离是现代 Web 开发的核心原则之一。
有三种方式可以将 CSS 应用于 HTML 文档：
- 内联样式 (Inline CSS)
- 内部样式表 (Internal CSS)
- 外部样式表 (External CSS)
1. 内联样式 (Inline CSS)
内联样式是直接在 HTML 元素的 style 属性中编写 CSS 规则。这种方法的作用域仅限于单个元素。
优点:
- 简单直接，适合快速测试或对单个元素应用独特的样式。
缺点:
- 将样式和结构混合在一起，违反了关注点分离原则。
- 难以维护，如果要修改多个元素的相同样式，需要逐个修改。
- 无法利用 CSS 的缓存机制。
示例:
html
<h1 style="color:blue; text-align:center;">这是一个蓝色的居中标题</h1>
<p style="color:red;">这是一个红色的段落。</p>2. 内部样式表 (Internal CSS)
内部样式表是使用 <style> 标签将 CSS 规则直接写在 HTML 文档的 <head> 部分。这些样式规则对整个页面都有效。
优点:
- 将所有样式集中在一个地方，比内联样式更易于管理。
- 可以为多个元素定义样式，提高了代码的复用性。
缺点:
- 样式只对当前页面有效。如果多个页面需要使用相同的样式，你必须在每个页面中都复制一份。
示例:
html
<!DOCTYPE html>
<html>
<head>
<title>内部样式表示例</title>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>3. 外部样式表 (External CSS)
外部样式表是将所有的 CSS 规则保存在一个独立的 .css 文件中，然后使用 <link> 标签在 HTML 文档的 <head> 部分引入它。这是最推荐的方法。
优点:
- 完全分离: 实现了 HTML 结构和 CSS 样式的完全分离，使代码更清晰、更易于维护。
- 可重用性: 同一个
.css文件可以被多个 HTML 页面引用，实现样式的全局统一。 - 缓存: 浏览器可以缓存
.css文件，当用户访问网站的其他页面时，无需重新下载样式文件，从而加快了页面加载速度。
步骤:
- 创建一个名为
styles.css(或任何你喜欢的名字) 的文件。 - 在
styles.css文件中编写你的 CSS 规则：css/* styles.css */ body { background-color: lightblue; } h1 { color: navy; text-align: center; } - 在 HTML 文件的
<head>中使用<link>标签引入它：html<!DOCTYPE html> <html> <head> <title>外部样式表示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html>
样式层叠顺序
如果同一个元素被多种方式应用了样式，浏览器会按照以下优先级来决定最终的样式（从高到低）：
- 内联样式 (在
style属性中) - 外部和内部样式表 (在
<head>中)。如果这两者同时存在，后出现的规则会覆盖先出现的。 - 浏览器默认样式
因此，一个内联样式会覆盖掉任何在 <head> 中定义的样式。