样式1">这是一段使用自定义类样式的文本</p>类型二：ID样式 ( 唯一标识样式 )ID样式用于唯一标识一个元素，HTML 标签通过自身的 id 属性来指定应用该样式。例如：<style type="text/css"><!--#myId1 { background-color: yellow; border: 2px solid black; padding: 10px;}</style><div id="myId1">这是使用ID样式的唯一区块</div>CSS选择器的优先级在CSS中，选择器的优先级决定了当多个规则应用于同一元素时，哪个规则的样式会被应用。优先级从高到低排序如下：
1. 内联样式 (如 `style="..."`) - 优先级最高
2. ID选择器 (`#`) - 优先级次之
3. 类选择器 (`.`), 属性选择器和伪类 (`:`) - 优先级再次
4. 标签选择器 (`element`) 和伪元素 (`::`) - 优先级最低
5. 通用选择器 (`*`), 子选择器 (`>`), 相邻兄弟选择器 (`+`) 和一般同胞选择器 (`~`) - 不增加优先级
如果选择器的优先级相同，则后定义的样式会覆盖前面的样式，这就是CSS的层叠特性。
CSS盒模型CSS盒模型是理解网页元素布局的关键。每个HTML元素都可以看作是一个矩形框，包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。内容区域是实际显示的文本或图像，内边距围绕内容，边框包围内边距，外边距则是元素与其他元素之间的空间。
```css
box-sizing: border-box;
```
此属性可以让元素的宽度和高度包含边框和内边距，更方便控制元素尺寸。
CSS布局模式CSS布局模式主要有以下几种：
1. 流动布局（Flow Layout）：默认布局方式，元素从左到右排列，换行时向下移动。
2. 定位布局（Positioning）：通过 `position` 属性（如 `relative`, `absolute`, `fixed`）来控制元素相对于其正常位置或其他元素的位置。
3. 弹性盒布局（Flexbox）：适用于一维布局，如行或列，可以灵活调整元素大小和排列顺序。
4. 网格布局（Grid）：二维布局系统，可以精确控制元素在网格中的位置和大小。
CSS3新特性CSS3引入了许多新特性，如：
1. 渐变（Gradients）
2. 影像（Background Images）
3. 动画（Animations）
4. 选择器增强（如 `:nth-child()`, `:not()`, `:target` 等）
5. 伪元素和伪类的扩展（如 `::before`, `::after`, `::first-letter`, `::first-line` 等）
6. 多列布局（Columns）
7.响应式设计（Media Queries）：允许根据设备特性（如屏幕大小）来调整布局和样式。
CSS是一种强大的工具，用于美化和控制网页的呈现效果。通过熟练掌握各种选择器、布局模式和新特性，开发者可以创建出具有出色用户体验的网页设计。对于初学者而言，理解CSS的基础概念和常用技巧是必不可少的，随着经验的增长，可以进一步探索高级特性和最佳实践，提升网页设计水平。
