css：字体属性参考大全

### CSS：字体属性参考大全 #### 一、字体属性（Font） 字体属性是CSS中用于控制文本外观的重要组成部分。下面详细介绍各个子属性的功能及其使用方法。 ##### 1. 大小（Font Size） - **语法**：`font-size: size;` - **描述**：设置文本的字体大小。 - **值**： - `x-large`: 特大字号 - `xx-small`: 极小字号（中文环境中较少使用，推荐使用具体数值如 `14px`） - **数值**：例如 `14px`, `1.5em` ##### 2. 样式（Font Style） - **语法**：`font-style: style;` - **描述**：定义文本的字体样式。 - **值**： - `oblique`: 偏斜体 - `italic`: 斜体 - `normal`: 正常字体 ##### 3. 行高（Line Height） - **语法**：`line-height: height;` - **描述**：设置行间的垂直空白距离。 - **值**： - `normal`: 默认行高 - **数值**：例如 `1.5em` ##### 4. 粗细（Font Weight） - **语法**：`font-weight: weight;` - **描述**：设置文本的粗细程度。 - **值**： - `bold`: 粗体 - `lighter`: 细体 - `normal`: 正常粗细 ##### 5. 变体（Font Variant） - **语法**：`font-variant: variant;` - **描述**：改变小写字符的大小写形式。 - **值**： - `small-caps`: 小型大写字母 - `normal`: 正常字体 ##### 6. 大小写转换（Text Transform） - **语法**：`text-transform: transform;` - **描述**：将文本转换为大写或小写。 - **值**： - `capitalize`: 首字母大写 - `uppercase`: 全部大写 - `lowercase`: 全部小写 - `none`: 无转换 ##### 7. 文本修饰（Text Decoration） - **语法**：`text-decoration: decoration;` - **描述**：设置文本的下划线、删除线等装饰效果。 - **值**： - `underline`: 下划线 - `overline`: 上划线 - `line-through`: 删除线 - `blink`: 闪烁（已过时） - `none`: 无修饰 ##### 8. 字体族（Font Family） - **语法**：`font-family: family;` - **描述**：定义文本的字体系列。 - **示例**：`font-family: "Courier New", Courier, monospace;` #### 二、背景属性（Background） 背景属性用于控制元素背景的各个方面。 ##### 1. 色彩（Background Color） - **语法**：`background-color: color;` - **描述**：设置背景颜色。 ##### 2. 图片（Background Image） - **语法**：`background-image: url(image);` - **描述**：设置背景图片。 ##### 3. 重复（Background Repeat） - **语法**：`background-repeat: repeat;` - **描述**：设置背景图片的重复方式。 - **值**： - `no-repeat`: 不重复 - `repeat`: 水平和垂直方向重复 - `repeat-x`: 水平方向重复 - `repeat-y`: 垂直方向重复 ##### 4. 滚动（Background Attachment） - **语法**：`background-attachment: attachment;` - **描述**：设置背景图片是否随着页面滚动。 - **值**： - `fixed`: 固定 - `scroll`: 滚动 ##### 5. 位置（Background Position） - **语法**：`background-position: position;` - **描述**：设置背景图片的位置。 - **值**： - `left top`: 左上角 - `right bottom`: 右下角 - `center center`: 居中 - **数值**：例如 `10px 20px` ##### 6. 简写（Background Shorthand） - **语法**：`background: color image repeat attachment position;` - **描述**：简化背景属性的设置。 - **示例**：`background: #000 url(image) no-repeat scroll left top;` #### 三、区块属性（Block） 区块属性用于控制元素的区块布局。 ##### 1. 字间距（Letter Spacing） - **语法**：`letter-spacing: spacing;` - **描述**：设置字母之间的间距。 - **值**： - `normal`: 默认间距 - **数值**：例如 `2px` ##### 2. 对齐（Text Align） - **语法**：`text-align: align;` - **描述**：设置文本的对齐方式。 - **值**： - `justify`: 两端对齐 - `left`: 左对齐 - `right`: 右对齐 - `center`: 居中 ##### 3. 缩进（Text Indent） - **语法**：`text-indent: indent;` - **描述**：设置文本的首行缩进。 - **值**：**数值**：例如 `20px` ##### 4. 垂直对齐（Vertical Align） - **语法**：`vertical-align: align;` - **描述**：设置行内元素的垂直对齐方式。 - **值**： - `baseline`: 基线 - `sub`: 下标 - `super`: 上标 - `top`: 顶部 - `middle`: 中间 - `bottom`: 底部 ##### 5. 词间距（Word Spacing） - **语法**：`word-spacing: spacing;` - **描述**：设置单词之间的间距。 - **值**： - `normal`: 默认间距 - **数值**：例如 `2px` ##### 6. 空格处理（White Space） - **语法**：`white-space: space;` - **描述**：控制元素中的空白字符如何处理。 - **值**： - `pre`: 保留空白字符 - `nowrap`: 不换行 - `normal`: 正常换行 #### 四、显示属性（Display） 显示属性用于控制元素的显示模式。 ##### 1. 显示模式（Display） - **语法**：`display: mode;` - **描述**：定义元素的显示模式。 - **值**： - `block`: 块级元素 - `inline`: 内联元素 - `list-item`: 列表项 - `run-in`: 追加部分 - `compact`: 紧凑 - `marker`: 标记 - `table`: 表格 - `inline-table`: 内联表格 - `table-raw-group`: 表格行组 - `table-header-group`: 表格头部组 - `table-footer-group`: 表格尾部组 - `table-raw`: 表格行 - `table-column-group`: 表格列组 - `table-column`: 表格列 - `table-cell`: 表格单元格 - `table-caption`: 表格标题 #### 五、方框属性（Box） 方框属性用于控制元素的尺寸和位置。 ##### 1. 尺寸（Width/Height） - **语法**：`width: width; height: height;` - **描述**：设置元素的宽度和高度。 ##### 2. 浮动（Float） - **语法**：`float: direction;` - **描述**：使元素向左或向右浮动。 - **值**： - `left`: 向左浮动 - `right`: 向右浮动 - `none`: 不浮动 ##### 3. 清除（Clear） - **语法**：`clear: direction;` - **描述**：设置元素周围不可有浮动元素。 - **值**： - `both`: 清除左右两侧的浮动 - `left`: 清除左侧的浮动 - `right`: 清除右侧的浮动 - `none`: 不清除 ##### 4. 内边距（Padding） - **语法**：`padding: padding;` - **描述**：设置元素的内边距。 - **值**： - `top right bottom left`: 设置四个方向的内边距 ##### 5. 外边距（Margin） - **语法**：`margin: margin;` - **描述**：设置元素的外边距。 - **值**： - `top right bottom left`: 设置四个方向的外边距 #### 六、边框属性（Border） 边框属性用于控制元素的边框样式。 ##### 1. 边框样式（Border Style） - **语法**：`border-style: style;` - **描述**：设置边框样式。 - **值**： - `dotted`: 点线 - `dashed`: 虚线 - `solid`: 实线 - `double`: 双线 - `groove`: 凹槽 - `ridge`: 脊状 - `inset`: 凹陷 - `outset`: 凸出 ##### 2. 边框宽度（Border Width） - **语法**：`border-width: width;` - **描述**：设置边框的宽度。 - **值**： - **数值**：例如 `1px` ##### 3. 边框颜色（Border Color） - **语法**：`border-color: color;` - **描述**：设置边框的颜色。 - **值**： - **颜色值**：例如 `#FF0000` ##### 4. 简写（Border Shorthand） - **语法**：`border: width style color;` - **描述**：简化边框属性的设置。 - **示例**：`border: 1px solid #000;` #### 七、列表属性（List Style） 列表属性用于控制列表项的样式。 ##### 1. 类型（List Style Type） - **语法**：`list-style-type: type;` - **描述**：设置列表项的标记类型。 - **值**： - `disc`: 圆点 - `circle`: 圆圈 - `square`: 方块 - `decimal`: 数字 - `lower-roman`: 小罗马数字 - `upper-roman`: 大罗马数字 - `lower-alpha`: 小写字母 - `upper-alpha`: 大写字母 ##### 2. 位置（List Style Position） - **语法**：`list-style-position: position;` - **描述**：设置列表项标记的位置。 - **值**： - `outside`: 外侧 - `inside`: 内侧 ##### 3. 图像（List Style Image） - **语法**：`list-style-image: url(image);` - **描述**：使用图像作为列表项标记。 #### 八、定位属性（Position） 定位属性用于控制元素在页面上的位置。 ##### 1. 定位模式（Position） - **语法**：`position: mode;` - **描述**：定义元素的定位模式。 - **值**： - `absolute`: 绝对定位 - `relative`: 相对定位 - `static`: 默认定位 ##### 2. 可见性（Visibility） - **语法**：`visibility: visibility;` - **描述**：设置元素的可见性。 - **值**： - `visible`: 可见 - `hidden`: 不可见 ##### 3. 溢出（Overflow） - **语法**：`overflow: overflow;` - **描述**：当元素内容溢出时的行为。 - **值**： - `visible`: 可见 - `hidden`: 隐藏溢出的内容 - `scroll`: 显示滚动条 - `auto`: 自动显示滚动条 ##### 4. 裁切（Clip） - **语法**：`clip: rect(top, right, bottom, left);` - **描述**：裁剪元素的显示区域。 - **值**： - `rect(12px, auto, 12px, auto)`: 定义裁切矩形的四个边界 以上是关于CSS中字体属性以及其他相关属性的详细介绍。这些属性是前端开发中非常基础且重要的知识点，熟练掌握它们能够帮助开发者更好地控制网页的布局和样式。希望本文能对你学习CSS有所帮助。