2.1 外部样式表
把 CSS (Cascading Style Sheets) 加入 HTML 文档可以美化网页的外观和提高使用的便利性。连接 CSS 到 HTML 有几种方法，每种方法有其优点并适合不同场景。
连接 CSS 的方法：
- 外部样式表 (External Stylesheets)
- 内部样式表 (Internal Stylesheets)
- 内联样式 (Inline Styles)
外部样式表 (External Stylesheets)
外部样式表是独立的 CSS 文件，通过 <link> 标签连接到 HTML 文档。这种方法允许将样式与文档结构分开，从而简化样式管理，并能在多页中重复使用 CSS 文件。
优势：
- 便于管理样式
- 在多页重复使用样式
- 提升缓存和性能
语法：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>文本</p>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>标题</h1>
<p>文本</p>
</body>
</html>
CSS 文件示例(styles.css):
CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 内部样式表 (Internal Stylesheets)
内部样式表位于 HTML 文档的 <head> 部分，通过 <style> 标签定义。这种方法在需要只对单页应用样式或者外部文件不可用时很方便。
优势：
- 简单易用适合单页
- 无需额外文件
语法：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>文本</p>
</body>
</html>
2.3 内联样式 (Inline Styles)
内联样式直接应用于 HTML 元素，通过 style 属性。这种方法对于快速测试或者需要变动单个元素样式时十分有用。
优势：
- 快速精准应用样式
- 适合通过 JavaScript 动态变动
缺点：
- 大量元素时样式管理困难
- 不易重复使用样式
语法：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式示例</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">标题</h1>
<p style="color: #666; background-color: #f4f4f4;">文本</p>
</body>
</html>
在一页中使用所有方法的示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>所有 CSS 连接方法示例</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">标题</h1>
<p style="color: #666;">这个文本使用了内联样式。</p>
</body>
</html>
2.4 样式优先级顺序
当样式通过不同方法连接时，其应用优先级如下：
- 内联样式 (Inline Styles) 拥有最高优先级
- 内部样式表 (Internal Stylesheets) 其次
- 外部样式表 (External Stylesheets) 优先级最低
如果同一元素应用了几个优先级相同的样式，优先级由选择器的特殊性和声明顺序决定。
样式优先级示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式优先级示例</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* 内部样式 */
}
</style>
</head>
<body>
<p style="color: red;">由于内联样式优先级，这段文字将是红色。</p>
</body>
</html>
GO TO FULL VERSION