CSS内联样式表

内联样式是通过 HTML 元素的 style 属性直接定义的 CSS 样式。以下是一个常见的内联样式属性大全，涵盖了大多数常用的 CSS 属性及其用法示例。

---

1. 布局与定位

属性	示例值	说明
display	block, inline, inline-block, none	控制元素的显示方式
position	static, relative, absolute, fixed, sticky	设置元素的定位方式
top	10px, 50%	设置元素距离顶部的距离
left	20px, 30%	设置元素距离左侧的距离
right	15px, 25%	设置元素距离右侧的距离
bottom	5px, 10%	设置元素距离底部的距离
float	left, right, none	设置元素的浮动方式
clear	left, right, both, none	清除浮动
z-index	1, 100, auto	设置元素的堆叠顺序

---

2. 尺寸与间距

属性	示例值	说明
width	100px, 50%, auto	设置元素的宽度
height	200px, 30%, auto	设置元素的高度
min-width	300px, 50%	设置元素的最小宽度
max-width	500px, 80%	设置元素的最大宽度
min-height	100px, 20%	设置元素的最小高度
max-height	400px, 60%	设置元素的最大高度
margin	10px, 5px 10px, auto	设置元素的外边距
padding	15px, 10px 20px	设置元素的内边距

---

3. 背景

属性	示例值	说明
background-color	#40B3DF, rgb(255,0,0), red	设置背景颜色
background-image	url('image.jpg')	设置背景图片
background-repeat	repeat, no-repeat, repeat-x, repeat-y	设置背景图片的重复方式
background-position	center, top left, 50% 50%	设置背景图片的位置
background-size	cover, contain, 100% 100%	设置背景图片的尺寸

---

4. 边框

属性	示例值	说明
border	1px solid black	设置边框（宽度、样式、颜色）
border-width	2px, thin, thick	设置边框宽度
border-style	solid, dashed, dotted	设置边框样式
border-color	red, #000, rgb(0,0,0)	设置边框颜色
border-radius	5px, 50%	设置边框圆角

---

5. 文字与字体

属性	示例值	说明
color	#333, blue, rgb(0,0,255)	设置文字颜色
font-family	Arial, 'Times New Roman'	设置字体
font-size	16px, 1.2em, small	设置字体大小
font-weight	bold, normal, 700	设置字体粗细
font-style	italic, normal	设置字体样式
text-align	left, center, right	设置文字对齐方式
text-decoration	underline, none, line-through	设置文字装饰
line-height	1.5, 20px	设置行高
letter-spacing	2px, normal	设置字符间距
word-spacing	5px, normal	设置单词间距

---

6. 其他样式

属性	示例值	说明
opacity	0.5, 1	设置元素透明度
visibility	visible, hidden	设置元素是否可见
cursor	pointer, default, move	设置鼠标指针样式
overflow	visible, hidden, scroll, auto	设置内容溢出时的处理方式
box-shadow	2px 2px 5px rgba(0,0,0,0.3)	设置元素的阴影
transition	all 0.3s ease	设置过渡效果
transform	rotate(45deg), scale(1.2)	设置元素的变换效果

---

7. border-collapse: collapse; 介绍

border-collapse 是 CSS 中用于控制 表格边框 处理方式的属性。它有两个主要值：

值	作用
collapse	合并相邻单元格的边框（默认只显示一条边框，去掉双重边框）
separate	保留单元格各自的边框（默认行为，每个单元格边框独立存在）

示例代码

<div style="
  width: 300px;
  height: 200px;
  background-color: #40B3DF;
  border: 2px solid black;
  border-radius: 10px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: white;
  padding: 20px;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
  opacity: 0.9;
">
  这是一个内联样式的示例
</div>

运行 HTML :

---

注意事项

1. 优先级：内联样式的优先级高于外部样式表和内部样式表（除非使用 !important）。
2. 维护性：内联样式不利于代码复用和维护，建议尽量使用外部样式表。
3. 动态样式：内联样式常用于通过 JavaScript 动态修改样式。

希望这份大全对你有帮助！