1. CSS 的基本语法规则
CSS 的基本语法由选择器和声明块组成。选择器指定要应用样式的 HTML 元素，而声明块包含一个或多个属性和值对，用于定义元素的样式。
/* 选择器 */ h1 { font-size: 24px; color: red; } /* 声明块 */ font-size: 24px; color: red;
其中，选择器可以是 HTML 元素名、类名、ID 名、属性名等。常见的选择器类型有：
- 元素选择器：
p,a,h1等 - 类选择器：
.box,.highlighted等 - ID 选择器：
#header,#content等 - 属性选择器：
[type="text"],[href]等
2. 样式的引入规则
在 HTML 中引入 CSS 样式通常有三种方式：
1. 内部样式表
使用 </code> 标签在 HTML 文件中嵌入 CSS 样式。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%3E%5Cn%3Chead%3E%5Cn%20%20%3Ctitle%3E%E7%A4%BA%E4%BE%8B%E9%A1%B5%E9%9D%A2%3C%2Ftitle%3E%5Cn%20%20%3Cstyle%3E%5Cn%20%20%20%20h1%20%7B%5Cn%20%20%20%20%20%20font-size%3A%2024px%3B%5Cn%20%20%20%20%20%20color%3A%20red%3B%5Cn%20%20%20%20%7D%5Cn%20%20%3C%2Fstyle%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%20%20%3Ch1%3E%E7%A4%BA%E4%BE%8B%E6%A0%87%E9%A2%98%3C%2Fh1%3E%5Cn%20%20%3Cp%3E%E8%BF%99%E6%98%AF%E4%B8%80%E4%B8%AA%E7%A4%BA%E4%BE%8B%E6%AE%B5%E8%90%BD%E3%80%82%3C%2Fp%3E%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22OIrrm%22%7D"></div><h4 id="EFpAm" style="background-color: rgba(28, 23, 240, 0.1);">2. 外部样式表</h4><div style="background-color: rgba(28, 23, 240, 0.1);">在 HTML 文件中使用 <code><link></code> 标签引入外部 CSS 样式表文件。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%3E%5Cn%3Chead%3E%5Cn%20%20%3Ctitle%3E%E7%A4%BA%E4%BE%8B%E9%A1%B5%E9%9D%A2%3C%2Ftitle%3E%5Cn%20%20%3Clink%20rel%3D%5C%22stylesheet%5C%22%20href%3D%5C%22style.css%5C%22%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%20%20%3Ch1%3E%E7%A4%BA%E4%BE%8B%E6%A0%87%E9%A2%98%3C%2Fh1%3E%5Cn%20%20%3Cp%3E%E8%BF%99%E6%98%AF%E4%B8%80%E4%B8%AA%E7%A4%BA%E4%BE%8B%E6%AE%B5%E8%90%BD%E3%80%82%3C%2Fp%3E%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22pqNdm%22%7D"></div><div style="background-color: rgba(28, 23, 240, 0.1);">其中，<code>href</code> 属性指定外部样式表的路径。</div><h4 id="vWW9s" style="background-color: rgba(28, 23, 240, 0.1);">3. 内联样式</h4><div style="background-color: rgba(28, 23, 240, 0.1);">在 HTML 元素中使用 <code>style</code> 属性设置内联样式，该样式仅适用于当前元素。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%3E%5Cn%3Chead%3E%5Cn%20%20%3Ctitle%3E%E7%A4%BA%E4%BE%8B%E9%A1%B5%E9%9D%A2%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%20%20%3Ch1%20style%3D%5C%22font-size%3A%2024px%3B%20color%3A%20red%3B%5C%22%3E%E7%A4%BA%E4%BE%8B%E6%A0%87%E9%A2%98%3C%2Fh1%3E%5Cn%20%20%3Cp%3E%E8%BF%99%E6%98%AF%E4%B8%80%E4%B8%AA%E7%A4%BA%E4%BE%8B%E6%AE%B5%E8%90%BD%E3%80%82%3C%2Fp%3E%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22w1mTN%22%7D"></div><h3 id="LMDEQ" style="background-color: rgba(28, 23, 240, 0.1);">结论</h3><div style="background-color: rgba(28, 23, 240, 0.1);">CSS 是一种用于描述网页样式的语言，其基本语法由选择器和声明块组成。在 HTML 中引入 CSS 样式通常有三种方式：内部样式表、外部样式表和内联样式。熟练掌握 CSS 的语法规则和引入规则，能够帮助开发者更好地掌控页面的样式和布局。同时，使用良好的代码风格和规范，能够提高代码的可读性和维护性。</div>
