CSS常用标签

元素选择器：

• body: 对整个文档的样式。
• h1, h2, ..., h6: 标题的样式。
• p: 段落的样式。
• a: 链接的样式。
• ul, ol, li: 列表的样式。
• table, tr, td: 表格的样式。

类选择器：

• .classname: 指定具有相同类名的元素的样式。

ID选择器：

• #idname: 指定具有特定ID的元素的样式。

伪类选择器：

• :hover: 鼠标悬停时的样式。
• :active: 鼠标点击时的样式。
• :visited: 已访问链接的样式。
• :nth-child(n): 指定第n个子元素的样式。

组合选择器：

• element1 element2: 选择元素1内的元素2。
• element1 > element2: 选择元素1直接包含的元素2。
• element1 + element2: 选择元素1相邻的下一个元素2。
• element1 ~ element2: 选择元素1后面的所有元素2。

属性选择器：

• [attribute]: 选择具有指定属性的元素。
• [attribute=value]: 选择具有指定属性值的元素。

通用选择器：

• *: 选择所有元素。

伪元素选择器：

• ::before: 在元素前插入内容。
• ::after: 在元素后插入内容。

文本样式：

• font-family: 设置字体。
• font-size: 设置字体大小。
• font-weight: 设置字体粗细。
• color: 设置文本颜色。
• text-align: 设置文本水平对齐。
• text-decoration: 设置文本装饰，如下划线。
• line-height: 设置行高。

背景和边框样式：

• background-color: 设置背景颜色。
• background-image: 设置背景图片。
• border: 设置边框样式。
• border-radius: 设置边框圆角。
• box-shadow: 设置盒子阴影。

布局和定位：

• display: 设置元素的显示方式，如block、inline、none等。
• width: 设置元素宽度。
• height: 设置元素高度。
• margin: 设置外边距。
• padding: 设置内边距。
• position: 设置定位方式，如static、relative、absolute等。
• top, right, bottom, left: 设置元素的位置。

盒子模型：

• box-sizing: 设置盒子的尺寸计算方式，如content-box、border-box。
• margin, padding, border: 设置盒子的外边距、内边距、边框。

浮动和清除：

• float: 设置元素浮动方式，如left、right。
• clear: 清除浮动，以防止影响后续元素。

动画和过渡：

• transition: 设置过渡效果。
• animation: 设置动画效果。

响应式设计：

• @media: 媒体查询，用于根据屏幕尺寸应用不同的样式

盒子模型：

• width: 设置元素的宽度。
• height: 设置元素的高度。
• margin: 设置元素的外边距。
• padding: 设置元素的内边距。
• border: 设置元素的边框。
• border-radius: 设置边框的圆角。
• box-sizing: 设置元素的盒子模型。

文本样式：

• font-family: 设置字体系列。
• font-size: 设置字体大小。
• font-weight: 设置字体粗细。
• font-style: 设置字体样式，如斜体。
• color: 设置文本颜色。
• text-align: 设置文本的水平对齐。
• text-decoration: 设置文本装饰，如下划线。
• line-height: 设置行高。

背景和边框样式：

• background-color: 设置背景颜色。
• background-image: 设置背景图片。
• background-repeat: 设置背景图片的重复方式。
• background-position: 设置背景图片的位置。
• border-color: 设置边框颜色。
• border-width: 设置边框宽度。
• border-style: 设置边框样式。

布局和定位：

• display: 设置元素的显示方式，如block、inline、flex等。
• position: 设置元素的定位方式，如relative、absolute、fixed等。
• top, right, bottom, left: 设置元素的定位位置。
• float: 设置元素的浮动方式。
• clear: 清除浮动。

列表样式：

• list-style-type: 设置列表项的标志样式，如实心圆、数字、字母等。
• list-style-image: 设置自定义的列表项标志图片。
• list-style-position: 设置列表项标志的位置。

动画和过渡：

• transition: 设置过渡效果。
• animation: 设置动画效果。

响应式设计：

• @media: 媒体查询，用于根据不同的屏幕尺寸应用不同的样式。