CSS入门教程：基础语法与选择器应用

"CSS入门笔记" 本文档是一份关于CSS（层叠样式表）的基础学习笔记，适合初学者阅读。以下是对CSS核心概念的详细解析： ### CSS基础语法 CSS的规则由两部分组成：选择器（Selector）和声明（Declaration）。选择器用于指定要应用样式的HTML元素，而声明则包含一个或多个属性-值对，定义元素的具体样式。 ```css selector { declaration1; declaration2; declarationN } ``` 例如，以下代码设置`h1`元素的颜色为红色，字体大小为14像素： ```css h1 { color: red; font-size: 14px; } ``` ### 选择器的分组 通过逗号分隔，可以将多个选择器组合在一起，使它们共享相同的声明。这样可以避免重复编写相同的样式规则。 ```css h1, h2, h3, h4, h5, h6 { color: green; } ``` ### 继承及其问题 CSS允许子元素继承父元素的某些属性。例如，如果设置了`body`元素的字体，那么其所有子元素也会默认使用这个字体。但在早期浏览器，如Netscape4，对继承的支持并不完全。为了兼容这些旧版本浏览器，可以使用冗余规则，即直接为需要继承样式的元素设置样式。 ```css body { font-family: Verdana, sans-serif; } p, td, ul, ol, li, dl, dt, dd { font-family: Verdana, sans-serif; } ``` ### CSS派生选择器 派生选择器允许你基于元素的上下文关系来定义样式。例如，如果你想让列表项（`li`）中的`strong`元素显示为斜体而非粗体，可以这样写： ```css li strong { font-style: italic; font-weight: normal; } ``` 在这个例子中，`li strong`是一个派生选择器，它会选择`li`元素内的`strong`元素，并应用相应的样式。 总结来说，CSS是网页设计中用于控制布局和视觉呈现的关键工具。通过理解基本语法、选择器的使用、继承机制以及派生选择器的概念，初学者可以逐步掌握CSS并实现丰富的网页设计效果。继续深入学习，包括更复杂的选择器、盒模型、定位、响应式设计等，将有助于成为一名熟练的前端开发者。