在HTML中直接加入CSS,可以让页面更加美观，提高用户体验，我将详细为大家介绍如何在HTML中直接加入CSS，帮助大家轻松掌握这一技能。
我们需要了解CSS的引入方式,在HTML中，CSS可以通过以下三种方式引入：
- 行内样式
- 内部样式
- 外部样式
下面,我们逐一介绍这三种方式。
行内样式
行内样式是将CSS代码直接写在HTML标签的style属性中,这种方式简单直接，但只对当前标签有效，以下是一个行内样式的例子：
<!DOCTYPE html>
<html>
<head>
<title>行内样式示例</title>
</head>
<body>
<p style="color: red; font-size: 16px;">这是一个红色、16px大小的段落。</p>
</body>
</html>
在上面的例子中,我们为<p>标签添加了style属性，并在其中设置了文字颜色和字体大小。
内部样式
内部样式是将CSS代码写在HTML文档的<style>标签中，通常位于<head>标签内，这种方式可以设置整个页面的样式，但不利于样式复用，以下是一个内部样式的例子：
<!DOCTYPE html>
<html>
<head>
<title>内部样式示例</title>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个蓝色、18px大小的段落。</p>
<p>这是另一个蓝色、18px大小的段落。</p>
</body>
</html>
在上面的例子中,我们为所有的<p>标签设置了蓝色字体和18px的大小。
外部样式
外部样式是将CSS代码写在一个单独的CSS文件中,然后在HTML文档中通过<link>标签引入，这种方式可以实现样式复用，降低维护成本，以下是一个外部样式的例子：
- 创建一个CSS文件,命名为
style.css，并写入以下代码：
p {
color: green;
font-size: 20px;
}
- 在HTML文档中引入
style.css：
<!DOCTYPE html>
<html>
<head>
<title>外部样式示例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>这是一个绿色、20px大小的段落。</p>
<p>这是另一个绿色、20px大小的段落。</p>
</body>
</html>
在上面的例子中,我们通过<link>标签引入了外部的style.css文件，为所有的<p>标签设置了绿色字体和20px的大小。
通过以上三种方式,我们可以在HTML中直接加入CSS，在实际开发过程中，我们可以根据需求和场景选择合适的方式，需要注意的是，行内样式的优先级最高，其次是内部样式，最后是外部样式，当多个样式作用于同一个标签时，优先级高的样式会覆盖优先级低的样式。
掌握了如何在HTML中直接加入CSS,我们可以对网页进行美化和布局，提高用户的浏览体验，希望这篇文章能帮助大家更好地理解和运用HTML和CSS。