CSS基础入门：选择器、属性与应用详解

CSS基础（一）文档提供了一个全面的CSS入门指南，包括CSS的基本概念、语法、选择器种类及其应用。CSS，全称层叠样式表，是用于描述HTML元素外观和布局的语言，类似于为网页添加视觉层面的化妆。 1. **CSS概念**： CSS的主要作用是控制网页元素的样式，如颜色、尺寸、位置等，它通过定义CSS规则，实现对HTML结构的样式化。CSS样式表可以内联在HTML标签中，也可以写在外部文件中引用。 2. **选择器类型**： - **标签选择器**：通过指定HTML标签来应用样式，如`.example`会应用到所有`<example>`标签。 - **类选择器**：以`.`开始，如`.custom-class`，具有更好的灵活性，一个元素可以应用多个类。 - **ID选择器**：以`#`开始，如`#unique-id`，每个页面仅能使用一次，且每个标签只能有一个ID。 - **通配符选择器**：`*`表示匹配所有元素，但不推荐使用，因性能问题。 - **复合选择器**：如`div.example`表示同时满足div标签和.example类的选择器，或`p + h2`（后代选择器）表示紧跟在`<p>`后的`<h2>`。 3. **颜色表示**： - 颜色名称：如`red`。 - 十六进制颜色：如`#000000`，其中`#`后红、绿、蓝三个部分各两位，分别对应RGB颜色值。 - RGB/RGBA：RGB表示三原色组合，RGBA添加透明度（A值）。 4. **样式属性**： - `width` 和 `height` 设置元素的尺寸。 - `background-color` 设置背景颜色。 - `font-size` 控制文本大小。 - `text-align` 调整文本水平对齐。 - `text-indent` 设置首行缩进。 - `color` 设置文本颜色。 5. **选择器注意事项**： - 类和ID选择器命名规则强调使用字母和下划线，并避免纯数字、特殊字符开头和汉字命名。 - 保持CSS代码简洁高效，避免过多使用通配符选择器。 6. **高级选择器**： - 交集选择器（标签+类/ID）：当满足特定标签和类/ID条件时应用样式。 - 后代选择器：通过空格连接两个选择器，适用于嵌套关系，如`.parent .child`表示`.parent`下的`.child`元素。 总结来说，本文档详尽介绍了CSS的基础知识，涵盖了选择器的使用、属性设置和命名规则，对初学者理解和掌握CSS语言非常有帮助。通过理解和实践这些内容，能够更好地美化和组织HTML页面的呈现效果。