引导者## CSS 属性大全### 简介层叠样式表 (Cascading Style Sheets, CSS) 是一种用于描述网页呈现方式的样式表语言。它控制着网页的布局、颜色、字体、大小等等。CSS 属性是 CSS 语言的核心，每个属性都控制着 HTML 元素的特定样式。### CSS 属性分类为了方便学习和使用，我们可以将 CSS 属性按照功能大致分为以下几类：1.
文本样式属性
2.
背景样式属性
3.
字体样式属性
4.
列表样式属性
5.
表格样式属性
6.
边框样式属性
7.
外边距样式属性
8.
内边距样式属性
9.
定位样式属性
10.
尺寸样式属性
11.
显示样式属性
12.
轮廓样式属性
13.
动画样式属性
14.
变换样式属性
15.
过渡样式属性
16.
Flexbox 布局属性
17.
Grid 布局属性
18.
多列布局属性
### 常用 CSS 属性详解下面我们选择一些常用的 CSS 属性进行详细说明：#### 1. 文本样式属性
color
: 设置文本颜色。
例：`color: red;` (设置文本颜色为红色)
text-align
: 设置文本水平对齐方式。
值：left, right, center, justify
例：`text-align: center;` (设置文本居中对齐)
text-decoration
: 设置文本装饰线。
值：none, underline, overline, line-through
例：`text-decoration: underline;` (为文本添加下划线)
text-transform
: 设置文本的大小写转换。
值: none, uppercase, lowercase, capitalize
例：`text-transform: uppercase;` (将文本转换为大写)
line-height
: 设置行高。
例：`line-height: 1.5;` (设置行高为字体大小的 1.5 倍)
letter-spacing
: 设置字符间距。
例：`letter-spacing: 2px;` (设置字符间距为 2px)
word-spacing
: 设置单词间距。
例：`word-spacing: 10px;` (设置单词间距为 10px)#### 2. 背景样式属性
background-color
: 设置背景颜色。
例：`background-color: #f0f0f0;` (设置背景颜色为浅灰色)
background-image
: 设置背景图片。
例：`background-image: url("image.jpg");` (设置背景图片为 image.jpg)
background-repeat
: 设置背景图片重复方式。
值：repeat, repeat-x, repeat-y, no-repeat
例：`background-repeat: no-repeat;` (设置背景图片不重复)
background-position
: 设置背景图片位置。
值：top, bottom, left, right, center (可以组合使用)
例：`background-position: center top;` (设置背景图片在水平居中，垂直顶部)
background-size
: 设置背景图片大小。
值：cover, contain, 指定宽度和高度
例：`background-size: cover;` (设置背景图片自适应元素大小)#### 3. 字体样式属性
font-family
: 设置字体系列。
例：`font-family: Arial, sans-serif;` (设置字体为 Arial，如果 Arial 不可用则使用默认 sans-serif 字体)
font-size
: 设置字体大小。
例：`font-size: 16px;` (设置字体大小为 16px)
font-weight
: 设置字体粗细。
值: normal, bold, bolder, lighter, 100 - 900 (数字越大字体越粗)
例：`font-weight: bold;` (设置字体为粗体)
font-style
: 设置字体样式。
值: normal, italic, oblique
例：`font-style: italic;` (设置字体为斜体)#### 4. 列表样式属性
list-style-type
: 设置列表项标记类型。
值：disc, circle, square, decimal, lower-roman, upper-roman, none
例：`list-style-type: circle;` (设置列表项标记为圆形)
list-style-position
: 设置列表项标记位置。
值：inside, outside
例：`list-style-position: inside;` (设置列表项标记位于文本内部)
list-style-image
: 使用图片作为列表项标记。
例：`list-style-image: url("marker.png");` (使用 marker.png 图片作为列表项标记)#### 5. 表格样式属性
border
: 设置表格边框。
例：`border: 1px solid black;` (设置表格边框为 1px 宽的黑色实线)
border-collapse
: 设置表格边框合并方式。
值：collapse, separate
例：`border-collapse: collapse;` (合并表格边框)
table-layout
: 设置表格布局算法。
值：auto, fixed
例：`table-layout: fixed;` (使用固定表格布局)#### 6. 边框样式属性
border-width
: 设置边框宽度。
例：`border-width: 2px;`
border-style
: 设置边框样式。
值：solid, dashed, dotted, double, groove, ridge, inset, outset, none
例：`border-style: dashed;`
border-color
: 设置边框颜色。
例：`border-color: blue;`
您可以分别设置上下左右不同方向的边框样式：
border-top
: 设置上边框样式。
border-right
: 设置右边框样式。
border-bottom
: 设置下边框样式。
border-left
: 设置左边框样式。#### 7. 外边距样式属性
margin
: 设置所有方向的外边距。
例：`margin: 10px;` (设置所有方向的外边距为 10px)
margin-top
: 设置上外边距。
margin-right
: 设置右外边距。
margin-bottom
: 设置下外边距。
margin-left
: 设置左外边距。#### 8. 内边距样式属性
padding
: 设置所有方向的内边距。
例：`padding: 15px;` (设置所有方向的内边距为 15px)
padding-top
: 设置上内边距。
padding-right
: 设置右内边距。
padding-bottom
: 设置下内边距。
padding-left
: 设置左内边距。#### 9. 定位样式属性
position
: 设置元素的定位方式。
值：static, relative, absolute, fixed, sticky
例：`position: absolute;` (设置元素为绝对定位)
top
: 设置元素顶部距离参照物的距离。
right
: 设置元素右侧距离参照物的距离。
bottom
: 设置元素底部距离参照物的距离。
left
: 设置元素左侧距离参照物的距离。
z-index
: 设置元素的堆叠顺序。#### 10. 尺寸样式属性
width
: 设置元素的宽度。
例：`width: 200px;` (设置元素宽度为 200px)
height
: 设置元素的高度。
例：`height: 100px;` (设置元素高度为 100px)
max-width
: 设置元素的最大宽度。
max-height
: 设置元素的最大高度。
min-width
: 设置元素的最小宽度。
min-height
: 设置元素的最小高度。#### 11. 显示样式属性
display
: 设置元素的显示方式。
值：none, block, inline, inline-block, flex, grid, table, ...
例：`display: none;` (隐藏元素)
visibility
: 设置元素的可见性。
值: visible, hidden
例：`visibility: hidden;` (隐藏元素，但保留其占据的空间)
overflow
: 设置元素内容溢出时的处理方式。
值: visible, hidden, scroll, auto
例：`overflow: hidden;` (隐藏溢出元素内容)#### 12. 轮廓样式属性
outline
: 设置元素轮廓样式的简写属性，可以设置宽度、样式和颜色。
例：`outline: 2px dashed red;`
outline-width
: 设置元素轮廓的宽度。
outline-style
: 设置元素轮廓的样式。
outline-color
: 设置元素轮廓的颜色。
outline-offset
: 设置轮廓与边框之间的距离。#### 13. 动画样式属性
animation
: 动画属性的简写属性，可以设置多个动画属性。
animation-name
: 定义动画名称。
animation-duration
: 定义动画完成一个周期所花费的时间。
animation-timing-function
: 定义动画的速度曲线。
animation-delay
: 定义动画何时开始。
animation-iteration-count
: 定义动画的播放次数。
animation-direction
: 定义动画是否在下一周期逆向播放。
animation-fill-mode
: 定义动画完成时保持哪个阶段的状态。
animation-play-state
: 定义动画是播放还是暂停。#### 14. 变换样式属性
transform
: 元素变换的简写属性，可以设置旋转、缩放、倾斜和平移等效果。
transform-origin
: 设置元素变换的原点。#### 15. 过渡样式属性
transition
: 过渡效果的简写属性，可以设置多个过渡属性。
transition-property
: 定义应用过渡效果的 CSS 属性名称。
transition-duration
: 定义过渡效果的时间。
transition-timing-function
: 定义过渡效果的速度曲线。
transition-delay
: 定义过渡效果何时开始。#### 16. Flexbox 布局属性
display
: 设置元素为 Flex 容器，使用 Flexbox 布局。
值：flex, inline-flex
flex-direction
: 设置主轴方向。
flex-wrap
: 设置子元素是否换行。
justify-content
: 设置主轴上的子元素对齐方式。
align-items
: 设置交叉轴上的子元素对齐方式。
align-content
: 设置多根轴线的对齐方式。#### 17. Grid 布局属性
display
: 设置元素为 Grid 容器，使用 Grid 布局。
值：grid, inline-grid
grid-template-columns
: 定义网格列的宽度。
grid-template-rows
: 定义网格行的 高度。
grid-gap
: 设置网格线之间的间距。
justify-items
: 设置网格项目在单元格中的水平对齐方式。
align-items
: 设置网格项目在单元格中的垂直对齐方式。
justify-content
: 设置网格容器在水平方向的对齐方式。
align-content
: 设置网格容器在垂直方向的对齐方式。#### 18. 多列布局属性
column-count
: 设置元素应该被分割成多少列。
column-gap
: 设置列之间的间距。
column-rule
: 设置列之间规则线的样式，可以设置宽度、样式和颜色。
column-span
: 设置元素应该跨越多少列。### 总结以上只是列举了部分常用 CSS 属性，还有很多其他属性可以用来控制网页样式。学习 CSS 最重要的是掌握不同属性的功能和使用方法，并将其灵活运用到实际项目中。 为了方便查阅和学习，建议收藏 W3School 等权威网站提供的 CSS 属性参考手册。
CSS 属性大全
简介层叠样式表 (Cascading Style Sheets, CSS) 是一种用于描述网页呈现方式的样式表语言。它控制着网页的布局、颜色、字体、大小等等。CSS 属性是 CSS 语言的核心，每个属性都控制着 HTML 元素的特定样式。
CSS 属性分类为了方便学习和使用，我们可以将 CSS 属性按照功能大致分为以下几类：1. **文本样式属性** 2. **背景样式属性** 3. **字体样式属性** 4. **列表样式属性** 5. **表格样式属性** 6. **边框样式属性** 7. **外边距样式属性** 8. **内边距样式属性** 9. **定位样式属性** 10. **尺寸样式属性** 11. **显示样式属性** 12. **轮廓样式属性** 13. **动画样式属性** 14. **变换样式属性** 15. **过渡样式属性** 16. **Flexbox 布局属性** 17. **Grid 布局属性** 18. **多列布局属性**
常用 CSS 属性详解下面我们选择一些常用的 CSS 属性进行详细说明：
1. 文本样式属性* **color**: 设置文本颜色。* 例：`color: red;` (设置文本颜色为红色) * **text-align**: 设置文本水平对齐方式。* 值：left, right, center, justify* 例：`text-align: center;` (设置文本居中对齐) * **text-decoration**: 设置文本装饰线。* 值：none, underline, overline, line-through* 例：`text-decoration: underline;` (为文本添加下划线) * **text-transform**: 设置文本的大小写转换。* 值: none, uppercase, lowercase, capitalize* 例：`text-transform: uppercase;` (将文本转换为大写) * **line-height**: 设置行高。* 例：`line-height: 1.5;` (设置行高为字体大小的 1.5 倍) * **letter-spacing**: 设置字符间距。* 例：`letter-spacing: 2px;` (设置字符间距为 2px) * **word-spacing**: 设置单词间距。* 例：`word-spacing: 10px;` (设置单词间距为 10px)
2. 背景样式属性* **background-color**: 设置背景颜色。* 例：`background-color:
f0f0f0;` (设置背景颜色为浅灰色) * **background-image**: 设置背景图片。* 例：`background-image: url("image.jpg");` (设置背景图片为 image.jpg) * **background-repeat**: 设置背景图片重复方式。* 值：repeat, repeat-x, repeat-y, no-repeat* 例：`background-repeat: no-repeat;` (设置背景图片不重复) * **background-position**: 设置背景图片位置。* 值：top, bottom, left, right, center (可以组合使用)* 例：`background-position: center top;` (设置背景图片在水平居中，垂直顶部) * **background-size**: 设置背景图片大小。* 值：cover, contain, 指定宽度和高度* 例：`background-size: cover;` (设置背景图片自适应元素大小)
3. 字体样式属性* **font-family**: 设置字体系列。* 例：`font-family: Arial, sans-serif;` (设置字体为 Arial，如果 Arial 不可用则使用默认 sans-serif 字体) * **font-size**: 设置字体大小。* 例：`font-size: 16px;` (设置字体大小为 16px) * **font-weight**: 设置字体粗细。* 值: normal, bold, bolder, lighter, 100 - 900 (数字越大字体越粗)* 例：`font-weight: bold;` (设置字体为粗体) * **font-style**: 设置字体样式。* 值: normal, italic, oblique* 例：`font-style: italic;` (设置字体为斜体)
4. 列表样式属性* **list-style-type**: 设置列表项标记类型。* 值：disc, circle, square, decimal, lower-roman, upper-roman, none* 例：`list-style-type: circle;` (设置列表项标记为圆形) * **list-style-position**: 设置列表项标记位置。* 值：inside, outside* 例：`list-style-position: inside;` (设置列表项标记位于文本内部) * **list-style-image**: 使用图片作为列表项标记。* 例：`list-style-image: url("marker.png");` (使用 marker.png 图片作为列表项标记)
5. 表格样式属性* **border**: 设置表格边框。* 例：`border: 1px solid black;` (设置表格边框为 1px 宽的黑色实线) * **border-collapse**: 设置表格边框合并方式。* 值：collapse, separate* 例：`border-collapse: collapse;` (合并表格边框) * **table-layout**: 设置表格布局算法。* 值：auto, fixed* 例：`table-layout: fixed;` (使用固定表格布局)
6. 边框样式属性* **border-width**: 设置边框宽度。* 例：`border-width: 2px;` * **border-style**: 设置边框样式。* 值：solid, dashed, dotted, double, groove, ridge, inset, outset, none* 例：`border-style: dashed;` * **border-color**: 设置边框颜色。* 例：`border-color: blue;`**您可以分别设置上下左右不同方向的边框样式：*** **border-top**: 设置上边框样式。 * **border-right**: 设置右边框样式。 * **border-bottom**: 设置下边框样式。 * **border-left**: 设置左边框样式。
7. 外边距样式属性* **margin**: 设置所有方向的外边距。* 例：`margin: 10px;` (设置所有方向的外边距为 10px) * **margin-top**: 设置上外边距。 * **margin-right**: 设置右外边距。 * **margin-bottom**: 设置下外边距。 * **margin-left**: 设置左外边距。
8. 内边距样式属性* **padding**: 设置所有方向的内边距。* 例：`padding: 15px;` (设置所有方向的内边距为 15px) * **padding-top**: 设置上内边距。 * **padding-right**: 设置右内边距。 * **padding-bottom**: 设置下内边距。 * **padding-left**: 设置左内边距。
9. 定位样式属性* **position**: 设置元素的定位方式。* 值：static, relative, absolute, fixed, sticky* 例：`position: absolute;` (设置元素为绝对定位) * **top**: 设置元素顶部距离参照物的距离。 * **right**: 设置元素右侧距离参照物的距离。 * **bottom**: 设置元素底部距离参照物的距离。 * **left**: 设置元素左侧距离参照物的距离。 * **z-index**: 设置元素的堆叠顺序。
10. 尺寸样式属性* **width**: 设置元素的宽度。* 例：`width: 200px;` (设置元素宽度为 200px) * **height**: 设置元素的高度。* 例：`height: 100px;` (设置元素高度为 100px) * **max-width**: 设置元素的最大宽度。 * **max-height**: 设置元素的最大高度。 * **min-width**: 设置元素的最小宽度。 * **min-height**: 设置元素的最小高度。
11. 显示样式属性* **display**: 设置元素的显示方式。* 值：none, block, inline, inline-block, flex, grid, table, ...* 例：`display: none;` (隐藏元素) * **visibility**: 设置元素的可见性。* 值: visible, hidden* 例：`visibility: hidden;` (隐藏元素，但保留其占据的空间) * **overflow**: 设置元素内容溢出时的处理方式。* 值: visible, hidden, scroll, auto* 例：`overflow: hidden;` (隐藏溢出元素内容)
12. 轮廓样式属性* **outline**: 设置元素轮廓样式的简写属性，可以设置宽度、样式和颜色。* 例：`outline: 2px dashed red;` * **outline-width**: 设置元素轮廓的宽度。 * **outline-style**: 设置元素轮廓的样式。 * **outline-color**: 设置元素轮廓的颜色。 * **outline-offset**: 设置轮廓与边框之间的距离。
13. 动画样式属性* **animation**: 动画属性的简写属性，可以设置多个动画属性。 * **animation-name**: 定义动画名称。 * **animation-duration**: 定义动画完成一个周期所花费的时间。 * **animation-timing-function**: 定义动画的速度曲线。 * **animation-delay**: 定义动画何时开始。 * **animation-iteration-count**: 定义动画的播放次数。 * **animation-direction**: 定义动画是否在下一周期逆向播放。 * **animation-fill-mode**: 定义动画完成时保持哪个阶段的状态。 * **animation-play-state**: 定义动画是播放还是暂停。
14. 变换样式属性* **transform**: 元素变换的简写属性，可以设置旋转、缩放、倾斜和平移等效果。 * **transform-origin**: 设置元素变换的原点。
15. 过渡样式属性* **transition**: 过渡效果的简写属性，可以设置多个过渡属性。 * **transition-property**: 定义应用过渡效果的 CSS 属性名称。 * **transition-duration**: 定义过渡效果的时间。 * **transition-timing-function**: 定义过渡效果的速度曲线。 * **transition-delay**: 定义过渡效果何时开始。
16. Flexbox 布局属性* **display**: 设置元素为 Flex 容器，使用 Flexbox 布局。* 值：flex, inline-flex * **flex-direction**: 设置主轴方向。 * **flex-wrap**: 设置子元素是否换行。 * **justify-content**: 设置主轴上的子元素对齐方式。 * **align-items**: 设置交叉轴上的子元素对齐方式。 * **align-content**: 设置多根轴线的对齐方式。
17. Grid 布局属性* **display**: 设置元素为 Grid 容器，使用 Grid 布局。* 值：grid, inline-grid * **grid-template-columns**: 定义网格列的宽度。 * **grid-template-rows**: 定义网格行的 高度。 * **grid-gap**: 设置网格线之间的间距。 * **justify-items**: 设置网格项目在单元格中的水平对齐方式。 * **align-items**: 设置网格项目在单元格中的垂直对齐方式。 * **justify-content**: 设置网格容器在水平方向的对齐方式。 * **align-content**: 设置网格容器在垂直方向的对齐方式。
18. 多列布局属性* **column-count**: 设置元素应该被分割成多少列。 * **column-gap**: 设置列之间的间距。 * **column-rule**: 设置列之间规则线的样式，可以设置宽度、样式和颜色。 * **column-span**: 设置元素应该跨越多少列。
总结以上只是列举了部分常用 CSS 属性，还有很多其他属性可以用来控制网页样式。学习 CSS 最重要的是掌握不同属性的功能和使用方法，并将其灵活运用到实际项目中。 为了方便查阅和学习，建议收藏 W3School 等权威网站提供的 CSS 属性参考手册。
