CSS基础入门：选择器、文本与字体笔记

在学习CSS的过程中，掌握基础选择器、文本属性和字体属性至关重要。首先，让我们深入了解CSS的基础结构和代码风格。CSS代码通常采用非强制性的格式规范，但推荐保持一致性，例如： 1. **样式书写格式**：推荐使用展开格式，使得代码更易阅读和理解，如`margin: 10px;`而非`margin:10px;`。 2. **样式命名风格**：选择器和属性名称通常使用小写，如`.my-class`，以提高可读性和遵循业界最佳实践。 3. **空格规则**：属性值前留一个空格，如`color: red;`，选择器与大括号间也保留一个空格，如`p { color: red; }`。 **基础选择器**是CSS的灵魂，它们帮助定位和定制页面元素的样式： - **标签选择器**: 通过元素标签如`<p>`选择所有该标签内的元素，例如设置段落颜色：`p { color: red; }`。 - **类选择器**: 使用`.`符号，如`.nav`，为具有相同类名的元素提供样式，如`.nav { color: blue; }`。类名应尽量有意义且避免纯数字和中文，如`.menu-item`。 - **ID选择器**: 通过`#`标识唯一的元素，如`#header`。ID属性全局唯一，与JavaScript常结合使用，如`#header h1 { font-size: 24px; }`。 - **多类名选择器**: 同一元素可以拥有多个类名，用空格分隔，如`<div class="main-content sidebar">`。 - **通配符选择器**: `*`表示选择所有元素，但在实际项目中较少使用，仅在特定场景下处理默认样式或排除其他选择器时使用。 **文本属性**和**字体属性**是样式的核心部分： - **文本属性**包括`color`（颜色）、`text-align`（文本对齐）、`font-family`（字体系列）、`font-size`（字体大小）等，例如：`p { color: #333; text-align: center; font-family: Arial, sans-serif; font-size: 16px; }` - **字体属性**涉及字体的类型、大小、粗细等，如`:hover`伪类用于设置鼠标悬停状态下的样式，如`.button:hover { background-color: #ccc; }` 总结来说，CSS基础选择器的灵活运用能够帮助你精准控制页面元素的样式，而文本和字体属性则决定了页面内容的呈现效果。学习并熟悉这些基础知识是构建美观且功能丰富的网站的关键步骤。同时，遵循良好的编码习惯和命名规范，将有助于提升代码的可维护性和团队协作效率。