了解 CSS 是什么以及如何在 HTML 中使用 CSS
在这里实时编写CSS样式，立即查看效果：
输入选择器，自动计算优先级分数：
输入选择器后自动计算...
ID选择器 (#id)
→ 100分
类/伪类 (.class, :hover)
→ 10分
元素/伪元素 (div, ::before)
→ 1分
测试你对CSS基础的理解：
CSS (Cascading Style Sheets，层叠样式表) 是用于描述 HTML 文档样式的语言。它控制网页的外观和布局。
CSS 规则由选择器和声明块组成：
选择器 {
属性: 值;
属性: 值;
}
/* 示例 */
p {
color: blue;
font-size: 16px;
}👆 点击上方各部分查看详细解释
有三种方式在 HTML 中使用 CSS：
直接在 HTML 元素的 style 属性中编写 CSS。
<p style="color: red; font-size: 20px;">这是红色文本</p>📝 实时编辑内联样式：
这是内联样式演示文本
优点：优先级最高，可以快速测试样式
缺点：难以维护，不能复用，不推荐大量使用
在 HTML 文档的 <head> 部分使用 <style> 标签。
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>优点：适合单页面的样式
缺点：不能在多个页面间共享
创建独立的 .css 文件，在 HTML 中通过 <link> 标签引入。
<!-- HTML 文件 -->
<head>
<link rel="stylesheet" href="styles.css">
</head>/* styles.css 文件 */
p {
color: green;
font-size: 16px;
}优点：可复用，易维护，推荐使用
缺点：需要额外的 HTTP 请求
优先级：最高
复用性：❌ 无
维护性：❌ 差
⚠️ 不推荐
优先级：中等
复用性：⚠️ 单页
维护性：⚠️ 一般
💡 适合单页
优先级：最低
复用性：✅ 全站
维护性：✅ 好
✅ 推荐使用
这段文字使用内联样式：红色、20px、加粗
这段文字使用内部样式：蓝色、18px、斜体
这段文字模拟外部样式：绿色、16px（本页面的样式来自外部 CSS）
当多个样式规则应用于同一元素时，优先级决定哪个样式生效。
输入选择器，计算其优先级权重：
/* 优先级示例 */
p { color: rgba(255, 255, 255, 0.95); } /* 优先级最低 */
.text { color: blue; } /* 优先级较高 */
#special { color: green; } /* 优先级更高 */
<p style="color: red;">...</p> /* 优先级最高 */
p { color: yellow !important; } /* !important 最高 */下面的文本应用了多个样式规则，观察哪个生效：
/* CSS 样式规则 */
#priority-demo {
color: green; /* ID选择器 - 优先级：100 */
}
.priority-class {
color: blue; /* 类选择器 - 优先级：10 */
}
p.priority-element {
color: orange; /* 元素+类选择器 - 优先级：11 */
}<!-- HTML 代码 -->
<p class="priority-class" id="priority-demo" style="color: red;">
这段文字应用了多个样式...
</p>这段文字应用了多个样式：元素选择器（橙色）、类选择器（蓝色）、ID选择器（绿色）、内联样式（红色）
🎯 优先级计算：
结果：文字显示为红色，因为内联样式的优先级最高！
使用 /* */ 添加注释，注释不会被浏览器渲染。
/* 这是单行注释 */
/*
* 这是多行注释
* 可以写多行说明
*/
p {
color: blue; /* 设置文字颜色为蓝色 */
}