在HTML中引用CSS有几种方法，包括内部样式表、外部样式表和内联样式，下面将详细介绍这些方法，并提供相应的示例代码。
（图片来源网络，侵删）
1. 内部样式表
内部样式表是将CSS代码直接嵌入到HTML文档的<head>标签内的<style>标签中，这种方法适用于较小的项目或单个HTML文件。
<!DOCTYPE html> <html> <head> <title>内部样式表示例</title> <style> body { backgroundcolor: lightblue; } h1 { color: white; textalign: center; } p { fontfamily: verdana; fontsize: 20px; } </style> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是一个使用内部样式表的示例。</p> </body> </html>2. 外部样式表
外部样式表是将CSS代码保存在一个独立的外部文件中，然后在HTML文档中使用<link>标签引用该文件，这种方法适用于较大的项目或多个HTML文件共享相同的样式。
创建一个名为styles.css的外部CSS文件：
body { backgroundcolor: lightblue; } h1 { color: white; textalign: center; } p { fontfamily: verdana; fontsize: 20px; }在HTML文档中使用<link>标签引用该外部样式表：
<!DOCTYPE html> <html> <head> <title>外部样式表示例</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是一个使用外部样式表的示例。</p> </body> </html>3. 内联样式
内联样式是将CSS属性直接应用于HTML元素，通过在元素的style属性中添加CSS规则来实现，这种方法可以快速修改单个元素的样式，但不建议在整个页面上广泛使用。
<!DOCTYPE html> <html> <head> <title>内联样式示例</title> </head> <body> <h1 style="color: white; textalign: center;">欢迎来到我的网站</h1> <p style="fontfamily: verdana; fontsize: 20px;">这是一个使用内联样式的示例。</p> </body> </html>
