css 样式模板

### CSS 样式模板知识点详解 #### 一、字体属性(Font) 字体属性是CSS中用于控制文本外观的一系列属性，包括大小、样式、粗细等。 - **font-size**: 设置文字大小。 - `x-large`: 特大，通常中文环境中较少使用这种描述性的大小单位，更常见的是直接使用具体的数值（如`24px`）。 - `xx-small`: 极小，同样中文环境中使用较少。 - **单位**：`px`(像素)，`pt`(点)是最常用的单位。 - **font-style**: 控制文字样式。 - `oblique`: 偏斜体。 - `italic`: 斜体。 - `normal`: 正常字体样式。 - **line-height**: 控制行间距。 - `normal`: 正常行高。 - **单位**：`px`, `pt`, `em`等。 - **font-weight**: 控制字体粗细。 - `bold`: 粗体。 - `lighter`: 细体。 - `normal`: 正常粗细。 - **font-variant**: 变体字体。 - `small-caps`: 小型大写字母。 - `normal`: 正常字体。 - **text-transform**: 文本转换。 - `capitalize`: 首字母大写。 - `uppercase`: 全部大写。 - `lowercase`: 全部小写。 - `none`: 无转换。 - **text-decoration**: 文本装饰。 - `underline`: 下划线。 - `overline`: 上划线。 - `line-through`: 删除线。 - `blink`: 闪烁（已废弃）。 - **font-family**: 字体族。 - **常用字体**： - `"Courier New"`: 等宽字体。 - `Arial, Helvetica, sans-serif`: 无衬线字体。 - `"Times New Roman", Times, serif`: 衬线字体。 - `Verdana`: 易读性高的无衬线字体。 #### 二、背景属性(Background) 背景属性用于设置元素的背景色、背景图片等。 - **background-color**: 背景颜色。 - 示例：`#FFFFFF` (纯白色)。 - **background-image**: 背景图片。 - 示例：`url('path/to/image.jpg')`。 - **background-repeat**: 背景图片是否重复。 - `no-repeat`: 不重复。 - `repeat-x`: 水平重复。 - `repeat-y`: 垂直重复。 - `repeat`: 默认值，同时水平和垂直重复。 - **background-attachment**: 背景图片是否随页面滚动而滚动。 - `fixed`: 固定在浏览器窗口。 - `scroll`: 随页面滚动。 - **background-position**: 背景图片的位置。 - 示例：`left top`。 - **复合属性**：可以将上述多个属性合并成一个属性进行设置。 - 示例：`background: #000 url('path/to/image.jpg') repeat fixed left top;` #### 三、区块属性(Block) 区块属性用于控制文本或内容的布局。 - **letter-spacing**: 字符间距。 - 示例：`1px` 或 `normal`。 - **text-align**: 文本对齐方式。 - `justify`: 两端对齐。 - `left`: 左对齐。 - `right`: 右对齐。 - `center`: 居中。 - **text-indent**: 首行缩进。 - 示例：`2em`。 - **vertical-align**: 垂直对齐方式。 - `baseline`: 基线对齐。 - `sub`: 下标对齐。 - `super`: 上标对齐。 - `top`: 顶部对齐。 - `middle`: 中间对齐。 - `bottom`: 底部对齐。 - **word-spacing**: 单词间距。 - 示例：`1px` 或 `normal`。 - **white-space**: 空白处理。 - `pre`: 保留空白字符。 - `nowrap`: 不换行。 - **display**: 显示模式。 - `block`: 块级元素。 - `inline`: 内联元素。 - `list-item`: 列表项。 - `run-in`: 追加部分。 - `compact`: 紧凑。 - `marker`: 标记。 - `table`: 表格。 - `inline-table`: 内联表格。 - `table-row-group`: 表格行组。 - `table-header-group`: 表格头部组。 - `table-footer-group`: 表格尾部组。 - `table-row`: 表格行。 - `table-column-group`: 表格列组。 - `table-column`: 表格列。 - `table-cell`: 表格单元格。 - `table-caption`: 表格标题。 #### 四、方框属性(Box) 方框属性用于定义元素的尺寸、浮动等。 - **width**: 宽度。 - **height**: 高度。 - **float**: 浮动方向。 - **clear**: 清除浮动。 - **margin**: 外边距。 - **padding**: 内边距。 #### 五、边框属性(Border) 边框属性用于定义元素的边框样式、宽度及颜色。 - **border-style**: 边框样式。 - `dotted`: 点线。 - `dashed`: 虚线。 - `solid`: 实线。 - `double`: 双线。 - `groove`: 槽线。 - `ridge`: 脊线。 - `inset`: 凹陷。 - `outset`: 凸起。 - **border-width**: 边框宽度。 - 示例：`1px`。 - **border-color**: 边框颜色。 - 示例：`#000000` (黑色)。 - **复合属性**：可以将边框样式、宽度、颜色合并为一个属性。 - 示例：`border: 1px solid #000000;` #### 六、列表属性(List-style) 列表属性用于控制列表项的样式。 - **list-style-type**: 列表项目符号类型。 - `disc`: 圆点。 - `circle`: 圆圈。 - `square`: 方块。 - `decimal`: 阿拉伯数字。 - `lower-roman`: 小写罗马数字。 - `upper-roman`: 大写罗马数字。 - `lower-alpha`: 小写字母。 - `upper-alpha`: 大写字母。 - **list-style-position**: 列表项目符号位置。 - `outside`: 项目符号位于列表文本之外。 - `inside`: 项目符号位于列表文本之内。 - **list-style-image**: 使用图片作为项目符号。 - 示例：`url('path/to/image.jpg')`。 #### 七、定位属性(Position) 定位属性用于精确控制元素的位置。 - **position**: 定位方式。 - `absolute`: 绝对定位。 - `relative`: 相对定位。 - `fixed`: 固定定位。 - `static`: 静态定位。 - `sticky`: 粘性定位。 以上是根据提供的“CSS样式模板”中的内容整理出的关键知识点。这些属性和值的选择与组合可以帮助开发者灵活地控制网页的布局和样式，从而创建出美观且功能强大的网站。