### CSS样式大全知识点详解
#### 一、字体样式（Font Properties）
**1. 字体大小 (Font Size):**
- `font-size: x-large;` 设置字体大小为x-large。
- `font-size: xx-small;` 设置字体大小为xx-small。
- 可以使用单位如px, em或百分比定义具体的大小。
**2. 字体风格 (Font Style):**
- `font-style: oblique;` 斜体。
- `font-style: italic;` 斜体。
- `font-style: normal;` 正常字体。
**3. 行高 (Line Height):**
- `line-height: normal;` 设置默认行高。
- 也可以指定具体的数值或百分比来调整行间距。
**4. 字体粗细 (Font Weight):**
- `font-weight: bold;` 加粗字体。
- `font-weight: lighter;` 较轻的字体。
- `font-weight: normal;` 正常字体粗细。
**5. 字体变化 (Font Variant):**
- `font-variant: small-caps;` 小型大写字母效果。
- `font-variant: normal;` 正常字体。
**6. 文本转换 (Text Transform):**
- `text-transform: capitalize;` 首字母大写。
- `text-transform: uppercase;` 全部大写。
- `text-transform: lowercase;` 全部小写。
**7. 文本修饰 (Text Decoration):**
- `text-decoration: underline;` 下划线。
- `text-decoration: overline;` 上划线。
- `text-decoration: line-through;` 删除线。
- `text-decoration: blink;` 闪烁（已废弃）。
**8. 字体系列 (Font Family):**
- `font-family: "Courier New", Courier, monospace;`
- 可以指定多个备选字体，浏览器会根据可用性选择。
#### 二、背景样式（Background Properties）
**1. 背景颜色 (Background Color):**
- `background-color: #FFFFFF;` 设置背景颜色为白色。
**2. 背景图片 (Background Image):**
- `background-image: url('image-url');` 设置背景图片。
- 使用`url()`函数引入图片路径。
**3. 背景重复 (Background Repeat):**
- `background-repeat: no-repeat;` 背景图片不重复显示。
- `background-repeat: repeat-x;` 背景图片水平方向重复。
- `background-repeat: repeat-y;` 背景图片垂直方向重复。
**4. 背景固定 (Background Attachment):**
- `background-attachment: fixed;` 背景图片随滚动条滚动而固定位置。
- `background-attachment: scroll;` 背景图片随内容滚动。
**5. 背景位置 (Background Position):**
- `background-position: left top;` 背景图片左上角定位。
- 支持水平和垂直两个方向的定位。
**6. 复合背景属性:**
- `background: #000 url('image-url') repeat fixed left top;` 综合设置背景颜色、背景图片及其属性。
#### 三、文本排版（Text Alignment and Spacing）
**1. 字母间距 (Letter Spacing):**
- `letter-spacing: normal;` 默认字母间距。
- 也可以设置具体数值调整字母间距。
**2. 文本对齐方式 (Text Alignment):**
- `text-align: justify;` 文本两端对齐。
- `text-align: left;` 左对齐。
- `text-align: right;` 右对齐。
- `text-align: center;` 居中对齐。
**3. 首行缩进 (Text Indent):**
- `text-indent: 20px;` 设置首行缩进20像素。
**4. 垂直对齐 (Vertical Alignment):**
- `vertical-align: baseline;` 基线对齐。
- `vertical-align: sub;` 下标。
- `vertical-align: super;` 上标。
- `vertical-align: top;` 顶部对齐。
- `vertical-align: bottom;` 底部对齐。
**5. 单词间距 (Word Spacing):**
- `word-spacing: normal;` 默认单词间距。
- 也可以设置具体数值调整单词间距。
**6. 白色空格处理 (White Space Handling):**
- `white-space: pre;` 保留空格和换行。
- `white-space: nowrap;` 不换行。
#### 四、显示模式（Display Properties）
**1. 显示模式 (Display Mode):**
- `display: block;` 作为块级元素显示。
- `display: inline;` 作为内联元素显示。
- `display: list-item;` 作为列表项显示。
- `display: run-in;` 内联和块级混合。
- `display: table;` 作为表格显示。
#### 五、盒模型（Box Model）
**1. 宽度与高度 (Width & Height):**
- `width: 200px;` 设置宽度。
- `height: 100px;` 设置高度。
**2. 浮动与清除 (Float & Clear):**
- `float: left;` 元素向左浮动。
- `clear: both;` 清除左右浮动。
**3. 外边距 (Margin):`
- `margin: 10px 20px;` 上下外边距10px，左右外边距20px。
**4. 内边距 (Padding):**
- `padding: 5px 10px;` 上下内边距5px，左右内边距10px。
#### 六、边框样式（Border Properties）
**1. 边框样式 (Border Style):**
- `border-style: dotted;` 点状边框。
- `border-style: dashed;` 虚线边框。
- `border-style: solid;` 实线边框。
- `border-style: double;` 双线边框。
- `border-style: groove;` 凹槽边框。
- `border-style: ridge;` 凸起边框。
- `border-style: inset;` 内嵌边框。
- `border-style: outset;` 外凸边框。
**2. 边框宽度 (Border Width):**
- `border-width: 2px;` 设置边框宽度为2像素。
**3. 边框颜色 (Border Color):**
- `border-color: #FF0000;` 设置边框颜色为红色。
#### 七、列表样式（List Style Properties）
**1. 列表标记类型 (List Style Type):**
- `list-style-type: disc;` 圆形标记。
- `list-style-type: circle;` 实心圆形标记。
- `list-style-type: square;` 方形标记。
- `list-style-type: decimal;` 数字标记。
- `list-style-type: lower-roman;` 小写罗马数字标记。
- `list-style-type: upper-roman;` 大写罗马数字标记。
- `list-style-type: lower-alpha;` 小写英文字母标记。
- `list-style-type: upper-alpha;` 大写英文字母标记。
**2. 列表标记位置 (List Style Position):**
- `list-style-position: inside;` 列表标记在文本内部。
- `list-style-position: outside;` 列表标记在文本外部。
**3. 列表标记图像 (List Style Image):**
- `list-style-image: url('image-url');` 设置列表项前的图片标记。
#### 八、定位样式（Positioning Properties）
**1. 定位模式 (Position Mode):**
- `position: absolute;` 绝对定位。
- `position: relative;` 相对定位。
- `position: static;` 默认定位（无定位）。
**2. 可见性 (Visibility):**
- `visibility: visible;` 元素可见。
- `visibility: hidden;` 元素不可见但保留空间。
- `visibility: inherit;` 继承父元素的可见性设置。
**3. 溢出处理 (Overflow):**
- `overflow: visible;` 默认，内容溢出时可见。
- `overflow: hidden;` 隐藏溢出内容。
- `overflow: scroll;` 显示滚动条。
- `overflow: auto;` 自动显示滚动条。
**4. 剪切区域 (Clip):**
- `clip: rect(12px, auto, 12px, auto);` 设置剪切区域，控制元素显示范围。
通过以上这些CSS样式的详细介绍，我们可以了解到如何通过不同的属性和值来实现网页中各种元素的精确布局和美化。这些知识点是前端开发中非常基础且重要的部分，熟练掌握它们能够帮助开发者更好地进行网页设计和开发工作。
