引入css样式制作网页
内联样式
直接在HTML元素的style属性中编写CSS代码，适用于单个元素的样式定制。
<p style="color: blue; font-size: 16px;">这是一段内联样式的文本。</p>内部样式表
在HTML文件的<head>部分使用<style>标签定义样式，适用于当前页面的样式控制。
<head>
<style>
p {
color: red;
font-family: Arial;
}
</style>
</head>
<body>
<p>这段文本使用内部样式表。</p>
</body>外部样式表
通过独立的.css文件引入样式，适用于多页面共享样式。
- 创建
styles.css文件：/* styles.css */ body { background-color: #f0f0f0; } h1 { text-align: center; } - 在HTML中通过
<link>引入：<head> <link rel="stylesheet" href="styles.css"> </head>
使用CSS框架
通过CDN或本地文件引入如Bootstrap等框架，快速构建响应式设计。
<head>
<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button class="btn btn-primary">框架按钮</button>
</body>注意事项
- 优先级规则：内联样式 > 内部样式表 > 外部样式表（同权重下后者覆盖前者）。
- 使用外部样式表时，确保文件路径正确，
href属性需指向CSS文件位置。 - 为提升性能，建议将CSS文件放在
<head>中尽早加载。
