HTML 中的 CSS 样式应用指南

这段代码展示了如何在 HTML 中使用 CSS 样式来改变页面元素的外观，包括设置背景颜色、文本颜色等。

<html>
<head>
<style type='text/css'>
span#highlight
{
background-color:yellow
}
body {
color:red
}
h1{
color:#00ff00
}
p.ex {
color:rgb(0,0,255)
}
</style>
</head>
<body>
<p>
<span id='highlight'>黄色加亮。</span> 
给文本加亮，在CSS中是一件简单的事情。
</p>
<h1>这是 heading 1</h1>
<p>这是一段普通的段落。请注意，该段落的文本是红色的。</p>
<p class='ex'>该段落中的文本是蓝色的。</p>
</body>
</html>

代码解析：

<style> 标签: 在 <head> 标签中，<style type='text/css'> 用于定义 CSS 样式。
CSS 选择器:
- span#highlight: ID 选择器，将 id 为 'highlight' 的 <span> 元素的背景颜色设置为黄色。
- body: 将所有 <body> 元素内的文本颜色设置为红色。
- h1: 将所有 <h1> 元素的文本颜色设置为绿色。
- p.ex: 类选择器，将所有 class 为 'ex' 的 <p> 元素的文本颜色设置为蓝色。
应用样式: 在 <body> 标签中，不同的 HTML 元素应用了上述定义的 CSS 样式，实现了不同的文本颜色和背景颜色效果。

总结:

通过这段代码，我们可以学习到如何在 HTML 中使用 CSS 样式来改变网页元素的外观，从而创建更加美观和易于阅读的网页。