1. 布局和尺寸

属性

  • width:设置元素的宽度。
  • height:设置元素的高度。
  • margin:设置元素的外边距。
  • padding:设置元素的内边距。
  • border:设置元素的边框。
  • box-sizing:设置元素的盒模型。
  • display:设置元素的显示方式。
  • position:设置元素的定位方式。
  • z-index:设置元素的堆叠顺序。
  • float:设置元素的浮动方式。
  • clear:设置元素的清除浮动。
  • flex:设置弹性布局中的项目属性。
  • grid:设置网格布局中的项目属性。

示例

css
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
.box { width: 200px; /* 宽度 */ height: 100px; /* 高度 */ margin: 10px; /* 外边距 */ padding: 10px; /* 内边距 */ border: 2px solid black; /* 边框 */ box-sizing: border-box; /* 盒模型 */ display: block; /* 显示方式 */ position: relative; /* 定位方式 */ z-index: 1; /* 堆叠顺序 */ float: left; /* 浮动方式 */ clear: both; /* 清除浮动 */ flex: 1; /* 弹性布局 */ grid-area: 1 / 1 / 2 / 2; /* 网格布局 */ }

2. 文本和字体

属性

  • color:设置文本颜色。
  • font-family:设置字体系列。
  • font-size:设置字体大小。
  • font-weight:设置字体粗细。
  • font-style:设置字体样式(如斜体)。
  • text-align:设置文本的水平对齐方式。
  • text-decoration:设置文本的装饰(如下划线)。
  • line-height:设置行高。
  • letter-spacing:设置字母间距。
  • word-spacing:设置单词间距。
  • text-transform:设置文本转换(如大写)。
  • text-shadow:设置文本阴影。

示例

css
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
.text { color: blue; /* 文本颜色 */ font-family: Arial, sans-serif; /* 字体系列 */ font-size: 16px; /* 字体大小 */ font-weight: bold; /* 字体粗细 */ font-style: italic; /* 字体样式 */ text-align: center; /* 文本对齐方式 */ text-decoration: underline; /* 文本装饰 */ line-height: 1.5; /* 行高 */ letter-spacing: 1px; /* 字母间距 */ word-spacing: 2px; /* 单词间距 */ text-transform: uppercase; /* 文本转换 */ text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 文本阴影 */ }

3. 背景和边框

属性

  • background-color:设置背景颜色。
  • background-image:设置背景图像。
  • background-repeat:设置背景图像的重复方式。
  • background-position:设置背景图像的位置。
  • background-size:设置背景图像的大小。
  • border-width:设置边框宽度。
  • border-style:设置边框样式。
  • border-color:设置边框颜色。
  • border-radius:设置圆角。
  • box-shadow:设置阴影。

示例

css
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
.background { background-color: yellow; /* 背景颜色 */ background-image: url('image.jpg'); /* 背景图像 */ background-repeat: no-repeat; /* 背景图像不重复 */ background-position: center; /* 背景图像居中 */ background-size: cover; /* 背景图像覆盖整个元素 */ border-width: 2px; /* 边框宽度 */ border-style: solid; /* 边框样式 */ border-color: black; /* 边框颜色 */ border-radius: 10px; /* 圆角 */ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 阴影 */ }

4. 转换和动画

属性

  • transform:设置元素的转换。
  • transition:设置过渡效果。
  • animation:设置动画。
  • @keyframes:定义动画的关键帧。

示例

css
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
.transform { transform: rotate(45deg); /* 旋转 45 度 */ transform: scale(1.5); /* 放大 1.5 倍 */ transform: translate(20px, 10px); /* 平移 20px 水平,10px 垂直 */ transition: all 0.3s ease; /* 所有属性在 0.3 秒内平滑过渡 */ } @keyframes example { from { background-color: red; } to { background-color: yellow; } } .animation { animation: example 2s infinite; /* 动画名称,持续时间,重复次数 */ }

5. 可见性和透明度

属性

  • visibility:设置元素的可见性。
  • opacity:设置元素的透明度。

示例

css
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
.visibility { visibility: visible; /* 可见 */ visibility: hidden; /* 隐藏,但占据空间 */ } .opacity { opacity: 0.5; /* 50% 透明度 */ }

6. 其他常用属性

属性

  • cursor:设置鼠标指针的形状。
  • overflow:设置溢出内容的处理方式。
  • white-space:设置空白字符的处理方式。
  • vertical-align:设置元素的垂直对齐方式。
  • list-style:设置列表项的样式。
  • content:在伪元素中插入内容。
  • counter-reset:设置计数器的重置。
  • counter-increment:设置计数器的递增。

示例

css
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
.cursor { cursor: pointer; /* 指针形状 */ } .overflow { overflow: visible; /* 默认值,内容超出时可见 */ overflow: hidden; /* 内容超出时隐藏 */ overflow: scroll; /* 内容超出时显示滚动条 */ overflow: auto; /* 内容超出时根据需要显示滚动条 */ } .white-space { white-space: normal; /* 默认值,空白字符会被折叠 */ white-space: pre; /* 保留空白字符 */ white-space: nowrap; /* 不换行 */ } .vertical-align { vertical-align: baseline; /* 基线对齐 */ vertical-align: top; /* 顶部对齐 */ vertical-align: middle; /* 居中对齐 */ vertical-align: bottom; /* 底部对齐 */ } .list-style { list-style: disc; /* 圆点 */ list-style: square; /* 方块 */ list-style: none; /* 无样式 */ } ::before { content: "前缀"; /* 插入内容 */ } .counter { counter-reset: section; /* 重置计数器 */ counter-increment: section; /* 递增计数器 */ }

汇总表格

功能 属性 描述 示例
布局和尺寸 width 设置元素的宽度 width: 200px;
height 设置元素的高度 height: 100px;
margin 设置元素的外边距 margin: 10px;
padding 设置元素的内边距 padding: 10px;
border 设置元素的边框 border: 2px solid black;
box-sizing 设置元素的盒模型 box-sizing: border-box;
display 设置元素的显示方式 display: block;
position 设置元素的定位方式 position: relative;
z-index 设置元素的堆叠顺序 z-index: 1;
float 设置元素的浮动方式 float: left;
clear 设置元素的清除浮动 clear: both;
flex 设置弹性布局中的项目属性 flex: 1;
grid 设置网格布局中的项目属性 grid-area: 1 / 1 / 2 / 2;
文本和字体 color 设置文本颜色 color: blue;
font-family 设置字体系列 font-family: Arial, sans-serif;
font-size 设置字体大小 font-size: 16px;
font-weight 设置字体粗细 font-weight: bold;
font-style 设置字体样式 font-style: italic;
text-align 设置文本的水平对齐方式 text-align: center;
text-decoration 设置文本的装饰 text-decoration: underline;
line-height 设置行高 line-height: 1.5;
letter-spacing 设置字母间距 letter-spacing: 1px;
word-spacing 设置单词间距 word-spacing: 2px;
text-transform 设置文本转换 text-transform: uppercase;
text-shadow 设置文本阴影 text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
背景和边框 background-color 设置背景颜色 background-color: yellow;
background-image 设置背景图像 background-image: url('image.jpg');
background-repeat 设置背景图像的重复方式 background-repeat: no-repeat;
background-position 设置背景图像的位置 background-position: center;
background-size 设置背景图像的大小 background-size: cover;
border-width 设置边框宽度 border-width: 2px;
border-style 设置边框样式 border-style: solid;
border-color 设置边框颜色 border-color: black;
border-radius 设置圆角 border-radius: 10px;
box-shadow 设置阴影 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
转换和动画 transform 设置元素的转换 transform: rotate(45deg);
transition 设置过渡效果 transition: all 0.3s ease;
animation 设置动画 animation: example 2s infinite;
@keyframes 定义动画的关键帧 @keyframes example { from { background-color: red; } to { background-color: yellow; } }
可见性和透明度 visibility 设置元素的可见性 visibility: visible;
opacity 设置元素的透明度 opacity: 0.5;
其他常用属性 cursor 设置鼠标指针的形状 cursor: pointer;
overflow 设置溢出内容的处理方式 overflow: visible;
white-space 设置空白字符的处理方式 white-space: normal;
vertical-align 设置元素的垂直对齐方式 vertical-align: baseline;
list-style 设置列表项的样式 list-style: disc;
content 在伪元素中插入内容 ::before { content: "前缀"; }
counter-reset 设置计数器的重置 counter-reset: section;
counter-increment 设置计数器的递增 counter-increment: section;

希望这些分类和示例能帮助你更好地理解和使用 CSS 属性。