CSS3基础知识：选择器、字体设置、盒模型详解

CSS3基础选择器、字体设置属性、文本系列设置属性、盒模型基本介绍 **一、基本选择器** 基本选择器是CSS选择器的基础，用于选择HTML文档中的元素，以便应用样式。常见的基本选择器有： 1. **类选择器**：通过标签的class属性选择标签。例如：`.box{}`，选择所有具有class="box"的元素。 2. **标签选择器**：通过标签的名称选择标签。例如：`div{}`，选择所有的`<div>`元素。 3. **通配符选择器**：选择所有标签。例如：`*{}`，选择所有元素。 4. **ID选择器**：通过id属性选择标签。例如：`#box{}`，选择具有id="box"的元素。 **二、font系列字体设置属性** font系列字体设置属性用于控制文本的字体、颜色、修饰等外观。主要包括： 1. **字体大小**：`font-size`属性用于控制文字字体的大小。例如：`font-size: 14px;`，定义字体大小为14px。 2. **字体家族**：`font-family`属性用于控制文字字体的家族。例如：`font-family: Arial, sans-serif;`，定义字体家族为Arial，如果不支持则使用sans-serif。 3. **字体样式**：`font-style`属性用于控制文字字体的样式。例如：`font-style: italic;`，定义字体样式为斜体。 4. **字体粗细**：`font-weight`属性用于控制文字字体的粗细。例如：`font-weight: bold;`，定义字体粗细为粗体。 **三、text系列设置属性** text系列设置属性用于控制文本的外观。主要包括： 1. **文本颜色**：`color`属性用于控制文本的颜色。例如：`color: #FF0000;`，定义文本颜色为红色。 2. **文本对齐**：`text-align`属性用于控制文本的对齐方式。例如：`text-align: center;`，定义文本对齐方式为居中。 3. **文本修饰**：`text-decoration`属性用于控制文本的修饰方式。例如：`text-decoration: underline;`，定义文本修饰方式为下划线。 **四、盒模型基本介绍** 盒模型是CSS布局的基础，用于描述元素的布局结构。盒模型主要包括： 1. **内容区**：元素的内容区域。 2. **内边距**：元素的内边距区域。 3. **边框**：元素的边框区域。 4. **外边距**：元素的外边距区域。 在CSS中，我们可以使用盒模型来控制元素的布局结构，例如：`margin`属性用于控制元素的外边距，`padding`属性用于控制元素的内边距，`border`属性用于控制元素的边框等。