css使用外部样式表、内部样式表和内联样式
在CSS中，样式可以以三种不同的方式应用于HTML页面：外部样式表、内部样式表和内联样式。每种方式都有其特点和适用场景。
外部样式表
外部样式表是一个独立的CSS文件，通常具有 .css 扩展名。你可以将样式规则定义在外部样式表中，然后通过HTML中的<link>元素将其链接到你的页面。
优点：
易于维护和更新：只需更改一个CSS文件，就可以更新整个网站的样式。
可重用：一个CSS文件可以为多个HTML页面提供样式。
提高页面加载速度：浏览器可以缓存外部样式表，减少重复下载。
使用方法：
html
复制
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <!-- 页面内容 --> </body> </html>
内部样式表
内部样式表是在HTML文档的<head>部分使用<style>标签定义的样式规则。
优点：
适用于小型网站或单个页面，其中样式不需要频繁更新。
可以即时应用样式，无需等待外部文件加载。
使用方法：
html
复制
<!DOCTYPE html> <html> <head> <style> body { background-color: #f0f0f0; } h1 { color: #333; } </style> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p > </body> </html>
内联样式
内联样式是在HTML元素内部直接定义的样式属性。
优点：
可以即时应用样式，无需等待外部文件或<style>标签加载。
适用于需要特定样式的单个元素。
使用方法：
html
复制
<!DOCTYPE html> <html> <head> </head> <body> <h1 style="color: #ff0000;">这是一个带有内联样式的标题</h1> <p style="font-size: 16px;">这是一个带有内联样式的段落。</p > </body> </html>
在实际开发中，通常推荐使用外部样式表来定义网站的通用样式，然后使用内部样式表或内联样式来覆盖特定的样式。这样可以保持样式的组织和重用性，同时也允许对个别元素进行定制。
