CSS 常用样式属性
这篇教学整理了 CSS 常用的样式属性，并按照各个功能进行分类，点击样式属性名称就可以查看详细教学，只要熟悉这些样式属性，就可以在网页排版领域如鱼得水，轻松实现各种版面效果 ( 一些较为些冷门的样式属性会再陆续补充 )。
快速导览：
文字
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| color | yes | 文字颜色 |
| font | yes | 文字样式缩写格式 |
| font-family | yes | 设定字体 |
| font-size | yes | 文字尺寸 |
| font-weight | yes | 文字粗细 |
| letter-spacing | yes | 字元间距、字母间距 |
| word-spacing | yes | 单字间距 ( 单字：两个空白之间的文字 ) |
| font-style | yes | 文字样式 ( 正常、斜体 ) |
| text-transform | yes | 文字大小写转换 |
| text-overflow | yes | 文字超过范围的显示行为 |
| text-combine-upright | yes | 垂直水平书写方向整合 |
| text-decoration、text-decoration-* | yes | 文字装饰 ( 底线、删除线、顶线 ) |
| text-shadow | yes | 文字阴影 |
| text-emphasis text-emphasis-style text-emphasis-color |
yes | 文字重点强调 ( 文字上方符号提示 ) |
| text-underline-offset | yes | 底线上下定位 |
| text-underline-position | yes | 底线位置 |
| ruby-position | yes | 标注文字的位置 |
| paint-order | yes | 文字外框。 |
对齐与换行
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| line-height | yes | 行高 |
| word-break | yes | 文字换行方式 ( 需搭配 white-space: normal; ) |
| line-break | yes | 具有标点符号 CJK ( 中日韩 ) 文字的换行方式。 |
| white-space-collapse | yes | 连续空白遇到换行的处理方式 |
| overflow-wrap ( 旧版为 word-wrap ) | yes | 单字中的换行方式 |
| text-wrap | yes | 美化排版的换行方式 |
| white-space | yes | 处理文字间的空白以及软换行行为 |
| hyphens | yes | 连字号 ( 换行时使用 ) |
| hyphenate-character | yes | 自订换行符号 |
| text-align | yes | 水平对齐 |
| text-align-last | yes | 最后一行对齐 |
| text-indent | yes | 缩排 |
| column-count | no | 文字根据数量自动分栏 |
| column-width | no | 文字根据宽度自动分栏 |
| columns | no | 文字自动分栏缩写格式 |
| column-rule-style | no | 文字自动分栏隔线样式 |
| column-rule-color | no | 文字自动分栏隔线颜色 |
| column-rule-width | no | 文字自动分栏隔线宽度 |
| column-rule | no | 文字自动分栏隔线缩写格式 |
| column-span | no | 文字自动分栏标题 |
| column-fill | no | 文字自动分栏方式 |
文字进阶设定 ( 针对部分特殊字元或特殊排版需求 )
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| tab-size | yes | 定义 Tab 大小 |
| writing-mode | yes | 书写模式 ( 左到右、右到左、上到下 ) |
| text-orientation | yes | 字元方向 ( 旋转 90 度 ) |
| direction、unicode-bidi | yes | 宣告方向 ( 左到右、右到左 ) |
| font-smooth | yes | 文字平滑化 ( 针对 Retina 屏幕 ) |
| font-kerning | yes | 文字间距微调 ( 效果不明显 ) |
| font-stretch | yes | 文字宽度 ( 需要字体支援 ) |
| font-synthesis | yes | 文字合成 ( 处理缺少的字体 ) |
| font-variant | yes | 文字替代与变体 ( 针对 OpenType 字型 ) |
| font-feature-settings | yes | 进阶排版 ( 针对 OpenType 字型 ) |
| font-palette | yes | 使用彩色文字特定色盘 |
| base-palette | - | 彩色字型基础色盘编号 ( 规则定义使用 ) |
| override-colors | - | 指定要覆盖色盘中颜色 ( 规则定义使用 ) |
元素容器
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| display | no | 容器显示类型 |
| width、height | no | 宽度和高度 |
| max-width、max-height min-width、min-height |
no | 最大或最小宽高 |
| box-sizing | no | 定义宽高显示方式 |
| aspect-ratio | no | 根据比例调整宽高 |
| padding、padding-* | no | 内边距 |
| margin、margin-* | no | 外边界 |
| overflow | no | 内容溢出与裁切 |
| overflow-x、overflow-y | no | x y 轴的内容溢出显示方式 |
| visibility | yes | 元素可见性 ( 隐藏、显示 ) |
| content-visibility | no | 内容可见性 ( 隐藏、显示 ) |
| opacity | no | 元素透明度 |
| box-shadow | no | 容器阴影 |
| contain | no | 内容范围 |
| zoom | no | 缩放比例 |
| resize | no | 手动调整尺寸 |
| block-size、inline-size | no | 根据文字方向定义长宽 |
| margin 逻辑属性 | no | 根据文字方向定义外边界 |
| padding 逻辑属性 | no | 根据文字方向定义内边距 |
边框和轮廓
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| border | no | 边框 ( 缩写格式 ) |
| border-color | no | 边框颜色 |
| border-style | no | 边框样式 |
| border-width | no | 边框粗细 |
| border-radius | no | 边框圆角 |
| border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius |
no | 边框单一圆角 ( 根据位置 ) |
| border-start-start-radius border-start-end-radius border-end-start-radius border-end-end-radius |
no | 边框单一圆角 ( 根据方向 ) |
| border-image | no | 图像边框 ( 缩写格式 ) |
| border-image-outset | no | 边框的图像扩展范围 |
| border-image-repeat | no | 边框的图像重复 |
| border-image-slice | no | 边框的图像切片 |
| border-image-source | no | 边框的图像来源 |
| border-image-width | no | 边框的图像宽度 |
| outline | no | 轮廓 ( 缩写格式 ) |
| outline-style | no | 轮廓样式 |
| outline-width | no | 轮廓粗细 |
| outline-color | no | 轮廓颜色 |
| outline-offset | no | 轮廓位置 |
| border 逻辑属性 | no | 根据文字方向定义边框 |
背景或图片元素
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| background | no | 背景 ( 缩写格式 ) |
| background-attachment | no | 背景图片固定 ( 是否跟随视窗卷动 ) |
| background-repeat | no | 背景图片重复 |
| background-blend-mode | no | 背景混合模式 |
| background-color | no | 背景色 |
| background-image | no | 背景图片 |
| background-position | no | 背景图片定位位置 |
| background-origin | no | 背景图片定位参考 |
| background-clip | no | 裁切背景 |
| background-size | no | 背景图片尺寸 |
| object-fit | no | 对象填满方式 ( 针对可置换内容元素 ) |
| object-position | no | 对象定位 ( 针对可置换内容元素 ) |
遮罩或滤镜
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| mask | no | 遮罩 ( 缩写格式 ) |
| mask-clip | no | 遮罩裁切 |
| mask-composite | no | 遮罩集合运算 |
| mask-image | no | 图像遮罩 |
| mask-mode | no | 遮罩模式 |
| mask-origin | no | 遮罩参照 |
| mask-position | no | 遮罩位置 |
| mask-repeat | no | 遮罩重复方式 |
| filter | no | 图像滤镜 |
| clip-path | no | 裁切路径 ( 将元素剪裁出指定形状 ) |
基本排版与定位
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| position | no | 定位 |
| top、bottom、left、right | no | 位置距离定位 |
| inset、inset-block、inset-inline | no | 内嵌宽度定位 |
| float | no | 浮动 |
| shape-outside | no | 浮动形状 |
| shape-image-threshold | no | 浮动形透明度的临界值 |
| shape-margin | no | 浮动形状的尺寸 |
| clear | no | 清除浮动 |
| vertical-align | no | 垂直对齐 |
| z-index | no | 图层关系 |
Flex 弹性排版
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| flex | no | 弹性伸缩 ( 缩写格式 ) |
| flex-direction | no | 弹性元素方向 |
| flex-shrink | no | 弹性项目缩小比例 |
| flex-wrap | no | 弹性元素换行 |
| row-gap | no | 弹性元素垂直间距 |
| column-gap | no | 弹性元素水平间距 |
| gap | no | 弹性元素垂直与水平间距 |
| justify-content ( flex ) | no | 水平对齐 |
| align-self ( flex ) | no | 覆写单一元素垂直对齐方式 |
| align-items ( flex ) | no | 单行垂直对齐 |
| align-content ( flex ) | no | 多行垂直对齐 |
| place-content ( flex ) | no | 对齐缩写格式 |
| order ( flex ) | no | 弹性项目顺序位置 |
Grid 网格排版
清单
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| list-style | yes | 清单样式简写 |
| list-style-image | yes | 清单图片标记 |
| list-style-position | yes | 清单标记位置 |
| list-style-type | yes | 清单标记类型 |
| counter-increment | no | 定义清单计数器增加的数值 |
| counter-reset | no | 定义清单计数器名称并重设数值 |
| counter-set | no | 设定清单数值 (修改清单数值 ) |
表格
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| table-layout | yes | 每个储存格“自动分配”的宽度 |
| caption-side | no | 表格的标题 |
| empty-cells | no | 空储存格状态 |
| border-collapse | yes | 表格边框重叠 |
| border-spacing | yes | 表格边框间距 |
转换
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| transform | no | 转换函数 |
| transform-style | no | 变形转换模式 |
| transform-origin | no | 转换中心点 |
| perspective | no | 透视距离 |
| perspective-origin | no | 透视中心点 |
| backface-visibility | no | 背面可视 |
| translate | no | 平移 |
| rotate | no | 旋转 |
| scale | no | 尺寸缩放 |
转场渐变
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| transition | no | 转场 |
| transition-duration | no | 转场持续时间 |
| transition-property | no | 转场属性 |
| transition-delay | no | 转场延迟时间 |
| transition-behavior | no | 转场行为 |
| @starting-style | no | 定义起始值 ( 只搭配转场 ) |
| transition-timing-function | no | 转场速度 |
动画
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| @keyframe | - | 定义动画影格｜ |
| animation-name | no | 动画名称 |
| animation-duration | no | 动画持续时间 |
| animation-iteration-count | no | 动画播放次数 |
| animation-delay | no | 动画延迟时间 |
| animation-timing-function | no | 动画速度 |
| animation-direction | no | 动画播放方向 |
| animation-fill-mode | no | 动画播放前后模式 |
| animation-play-state | no | 动画播放或暂停 |
| animation-composition | no | 动画合成设定 |
| animation | no | 动画 ( 缩写格式 ) |
| animation-timeline | no | 动画进度、动画时间轴 |
| animation-range | no | 动画执行范围 |
| view-timeline | no | 动画可视范围时间轴 |
| offset-path | no | 动画路径 |
| offset-distance | no | 移动距离 |
| offset-anchor | no | 对齐路径 |
| offset-rotate | no | 旋转方向 |
| offset-position | no | 路径位置 |
| offset | no | 动画路径 ( 缩写格式 ) |
生成内容、定义、特殊样式属性
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| all | no | 所有样式 |
| appearance | no | 浏览器默认样式 |
| variables | - | 变数 |
| content | no | 生成内容 |
| quotes | yes | 引号 |
| @media | - | 媒体查询 |
| @container | - | 容器查询 |
| container-type | no | 容器类型 |
| container-name | no | 容器名称 |
| container | no | 容器缩写格式 |
| @property | - | 自订属性值 |
| @layer | - | 分层优先级 |
| @scope | - | 选择器作用域 |
| @font-face | - | 定义字型 |
| @font-palette-values | - | 定义彩色字型 |
| @counter-style | - | 定义计数规则 |
| @page | - | 打印网页 |
| @import | - | 导入样式 |
浏览器与用户行为
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| scrollbar-color | yes | 卷轴颜色 |
| scrollbar-gutter | yes | 卷轴宽度 |
| scrollbar-width | yes | 卷轴空间 |
| cursor | yes | 鼠标光标图示 |
| pointer-events | yes | 鼠标互动行为 |
| user-select | no | 用户选取 |
| scroll-behavior | no | 卷动行为 |
| overscroll-behavior | no | 超过卷动的行为 ( 移动设备限定 ) |
| break-after、break-before | no | 打印时位于前页或后页 |
| break-inside | no | 打印时是否跨页 |
| color-scheme | no | 装置深色或浅色 ( 搭配 light-dark() ) |
滤镜与颜色函数
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| mix-blend-mode | no | 图像混合模式 |
| isolation | no | 限制图像混合范围 |
| backdrop-filter | no | 背景滤镜 |
| filter | no | 图像滤镜 |
| blur() | - | 高斯模糊 ( 函数类型 ) |
| brightness() | - | 亮度 ( 函数类型 ) |
| contrast() | - | 对比度 ( 函数类型 ) |
| drop-shadow() | - | 阴影 ( 函数类型 ) |
| grayscale() | - | 灰阶效果 ( 函数类型 ) |
| invert() | - | 负片效果 ( 函数类型 ) |
| sepia() | - | 棕褐色效果 ( 函数类型 ) |
| saturate() | - | 饱和度 ( 函数类型 ) |
| hue-rotate() | - | 色相 ( 函数类型 ) |
| opacity() | - | 透明度 ( 函数类型 ) |
| linear-gradient() | - | 线性渐层 ( 函数类型 ) |
| radial-gradient() | - | 放射渐层 ( 函数类型 ) |
| conic-gradient() | - | 圆锥形渐层 ( 函数类型 ) |
| repeating-linear-gradient() | - | 线性重复渐层 ( 函数类型 ) |
| repeating-radial-gradient() | - | 放射重复渐层 ( 函数类型 ) |
| repeating-conic-gradient() | - | 圆锥形重复渐层 ( 函数类型 ) |
| rgb() | - | RGB 色彩模型 ( 函数类型 ) |
| hsl() | - | HSL 色彩模型 ( 函数类型 ) |
| lab() | - | Lab 色彩模型 ( 函数类型 ) |
| lch() | - | LCH 色彩模型 ( 函数类型 ) |
| oklab() | - | OkLab 色彩模型 ( 函数类型 ) |
| oklch() | - | OkLCH 色彩模型 ( 函数类型 ) |
| color() | - | 指定色彩空间颜色 ( 函数类型 ) |
| color-mix() | - | 颜色混合 ( 函数类型 ) |
| light-dark() | - | 深色与浅色模式 ( 函数类型 ) |
CSS 其他函数类型
| 样式属性 | 是否继承 | 说明 |
|---|---|---|
| calc() | - | 基本数学运算 |
| round() | - | 四舍五入 |
| clamp() | - | 限制数值范围 |
| max()、min() | - | 最大值与最小值 |
| maxmin() | - | 最大值与最小值 |
| repeat() | - | grid 网格排版重复设定 |
| hypot() | - | 参数平方和的平方根 |
| mod()、rem() | - | 余数 |
| exp()、log() | - | 指数函数 |
| pow()、sqrt() | - | 次方与平方根 |
| sin()、cos()、tan() asin()、acos()、atan()、atan2() |
- | 三角函数 |
| attr() | - | 取得套用该选择器元素的属性值 |
| url() | - | 网址 |
| counter() | - | 计数器 |
| counters() | - | 多层计数器 |
| circle() | - | 圆形 |
| ellipse() | - | 椭圆形 |
| rect() | - | 四边形 |
| polygon() | - | 多边形 |
| inset() | - | 内缩边距和圆角 |
| xywh() | - | 虚拟矩形 |
| ray() | - | 放射线形状 |
| path() | - | 路径 |
小结
其实 CSS 还有一些较为“冷门”的样式属性，由于很少有机会使用，未来有空再陆续补充，但只要熟悉这些常用的样式属性，就可以在 CSS 领域终于如得水，轻松做出各种 CSS 排版效果啰。
微信扫码关注
抖音扫码关注