HTML中如何增加CSS
CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括SVG和XHTML等）文档的呈现。它定义了诸如字体、颜色、布局和其他视觉元素的外观和格式。不同于HTML的标记语言，CSS是一种独立的样式表语言。在本文中，我们将学习如何在HTML文件中引入和使用CSS样式表。
1. 在HTML中嵌入CSS代码
在HTML文件内部，可以使用<style>标签将CSS样式表嵌入到HTML文档中：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
在上述示例中，我们将CSS样式表嵌入<style>标签内，并将其放置在HTML文件的<head>标签中。
在CSS样式表中，我们定义了body元素的背景色为lightblue，h1元素的文本颜色为white，文本居中，并将这些样式应用到HTML文件中的相应元素。
需要注意的是，在HTML文件中嵌入CSS代码通常只适用于简单的、具有少量代码的小型网站。当应用于大型网站时，这种方式会非常不可取。
2. 在HTML中引用外部CSS文件
将CSS样式表嵌入HTML文件中是一种方式，但更常见的是在HTML文件中引用一个外部的CSS文件。可以通过在HTML文件的<head>标签内使用<link>标签来实现：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
在上述示例中，我们使用<link>标签引用名为“style.css”的外部CSS文件。在CSS文件中，我们可以写入任意数量的样式定义，然后将其应用到HTML文件中的相应元素。
需要注意的是，CSS文件必须与HTML文件位于同一Web服务器上，或从使用的CDN加载。否则，Web浏览器将无法加载外部CSS文件。
3. 特定页面使用CSS样式
在某些情况下，您可能需要仅将特定样式应用于特定页面。为此，您可以使用HTML文件的属性，如ID或类名。以下是一些示例：
<h1 id="main">This is a heading</h1>
<p>This is a paragraph.</p>
<p class="important">This paragraph is important.</p>
<p>This paragraph is not important.</p>
上述代码中，我们使用了ID和Class属性，并将其分别命名为“main”和“important”。您可以在CSS样式表中使用这些ID或类名来选择要应用样式的特定元素。以下是一些示例：
/* 应用于 h1 元素的背景颜色和文本对齐 */
#main {
background-color: lightblue;
text-align: center;
}
/* 应用于带有类名 important 的段落 */
.important {
font-size: 24px;
font-weight: bold;
}
在上述代码中，我们将不同的样式应用于ID和Class属性中的元素。我们使用了符号“#”来表示ID和“.”来表示类名。
4. CSS样式继承
CSS样式可以继承，这意味着某些样式可以应用到父元素及其后代元素。例如，如果我们将字体颜色设置为红色，并将其应用于整个页面的body元素，则所有的后代元素都将继承这个颜色：
/* 应用于 body 元素及其所有后代元素 */
body {
color: red;
}
/* 仅应用于 h1 元素 */
h1 {
font-size: 40px;
}
在上述代码中，由于h1元素是在body元素内部声明的，因此它从body元素继承其颜色。因此，我们只需对body元素设置字体颜色，就可以应用到整个页面的所有文本。
总结
本文介绍了在HTML中增加CSS样式的不同方式，包括内联样式、引用外部样式表以及使用ID和类名选择器等。我们还介绍了CSS样式继承的概念以及如何使用它来应用相同的样式到多个网页元素上。无论您选择哪种方式，都可以通过使用CSS样式表来轻松添加丰富的视觉元素和强大的交互特性。