HTML head
HTML 图像 

HTML 样式

在 HTML 中，样式通常通过 CSS（层叠样式表）来定义。CSS 可以控制 HTML 元素的布局、颜色、字体等外观。以下是一些基本的HTML 和 CSS 样式的示例：


1、内联样式

内联样式直接在 HTML 元素中使用style属性来定义。但这种方法不推荐用于大型项目，因为它会使 HTML 代码变得混乱且难以维护。

<p style="color: red; font-size: 20px;">这是一个红色的段落。</p>



2、内部样式表

内部样式表在 HTML 文档的 <head> 部分使用 <style> 标签来定义。

<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        p {  
            color: blue;  
            font-size: 18px;  
        }  
    </style>  
</head>  
<body>  
    <p>这是一个蓝色的段落。</p>  
</body>  
</html>


3、外部样式表

外部样式表是一个单独的 .css 文件，可以在多个 HTML 文档中使用。

在 HTML 文档中，使用 <link> 标签在 <head> 部分引用它。

CSS 文件（styles.css）:

p {  
    color: red;  
    font-size: 16px;  
}


说明：在实际使用过程中，一般使用外部样式表的方式

HTML文件:

<!DOCTYPE html>  
<html>  
<head>  
<link rel="stylesheet" type="text/css" href="styles.css">  
</head>  
<body>  
    <p>这是一个字体为红色的段落。</p>  
</body>  
</html>


4、选择器

CSS 选择器用于选择你想要样式化的 HTML 元素。上面示例中的p就是一个选择器，它选择了所有的<p>元素。还有其他类型的选择器，如类选择器（.classname）、ID选择器（#idname）、属性选择器等。


5、伪类和伪元素

CSS还提供了伪类和伪元素来选择特定状态的元素或元素的特定部分。例如，:hover伪类用于选择鼠标悬停在其上的元素。

p:hover {  
    color: yellow;  
}


上述代码会使鼠标悬停在 <p> 元素上时，文本颜色变为黄色。