程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长嵌入式、鸿蒙、人工智能、Java等,专注于程序员成长那点儿事,希望在成长的路上有我相伴！君志所向,一往无前！

---

最近又在重新使用Css，所以本篇就对CSS常用样式属性的详细讲解，涵盖文本、字体、盒模型、背景、定位、布局等核心内容进行总结。

---

一、文本相关属性

1. color

定义文本颜色，支持多种格式：

• 关键字：red, blue

• 十六进制：#ff0000

• RGB/RGBA：rgb(255,0,0) 或 rgba(255,0,0,0.5)

• HSL/HSLA：hsl(0, 100%, 50%)

p { color: #333; }

2. text-align

控制文本水平对齐方式：

1. left（默认左对齐）

2. right

3. center

4. justify（两端对齐）

div { text-align: center; }

3. text-decoration

定义文本装饰效果：

1. • none（默认无装饰）

2. • underline（下划线）

3. • overline（上划线）

4. • line-through（删除线）

a { text-decoration: none; }

4. text-transform

控制文本大小写转换：

1. • uppercase（全大写）

2. • lowercase（全小写）

3. • capitalize（首字母大写）

h1 { text-transform: uppercase; }

5. line-height

设置行高，影响行间距：

1. • 数值（如1.5表示字体大小的1.5倍）

2. • 固定值（如24px）

p { line-height: 1.6; }

6. text-shadow

添加文本阴影效果：

• 语法：text-shadow: h-shadow v-shadow blur color;

h2 { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }

---

二、字体属性

1. font-family

定义字体类型，可设置多个备选字体：

body { font-family: "Arial", sans-serif; }

2. font-size

设置字体大小：

• 绝对单位：px（像素）

• 相对单位：em（相对于父元素）、rem（相对于根元素）

h1 { font-size: 2rem; }

3. font-weight

控制字体粗细：

• 关键字：normal, bold

• 数值：100~900

strong { font-weight: 700; }

4. font-style

设置字体样式：

1. • normal（默认）

2. • italic（斜体）

3. • oblique（倾斜）

em { font-style: italic; }

5. font（简写属性）

合并多个字体属性：

p { font: italic 16px/1.5 "Times New Roman", serif; }

---

三、盒模型属性

1. width 和 height

设置元素的宽度和高度：

.box { width: 300px; height: 200px; }

2. padding

定义内边距（元素内容与边框之间的空间）：

• 单边设置：padding-top, padding-right等

• 简写：padding: 10px 20px 10px 20px;（上、右、下、左）

div { padding: 20px; }

3. border

设置边框样式：

• 简写属性：border: width style color;

• 单边属性：border-top, border-radius（圆角）

button { border: 2px solid #000; border-radius: 5px; }

4. margin

定义外边距（元素与其他元素之间的间距）：

• auto（水平居中）

• 负值允许元素重叠

.container { margin: 0 auto; }

5. box-sizing

控制盒模型计算方式：

• content-box（默认，宽度仅包含内容）

• border-box（宽度包含内边距和边框）

* { box-sizing: border-box; }

---

四、背景属性

1. background-color

设置背景颜色：

body { background-color: #f0f0f0; }

2. background-image

定义背景图片：

.header { background-image: url("bg.jpg"); }

3. background-repeat

控制背景图片重复方式：

1. • repeat（默认重复）

2. • no-repeat

3. • repeat-x（水平重复）

div { background-repeat: no-repeat; }

4. background-position

设置背景图片起始位置：

1. • 关键字：top left, center

2. • 坐标值：50% 50%

.banner { background-position: center; }

5. background-size

调整背景图片尺寸：

1. • cover（完全覆盖容器）

2. • contain（完整显示图片）

section { background-size: cover; }

---

五、定位与布局

1. position

设置定位方式：

1. • static（默认，不定位）

2. • relative（相对自身原位置偏移）

3. • absolute（相对于最近定位父元素）

4. • fixed（相对于视口固定）

5. • sticky（滚动时固定）

.navbar { position: fixed; top: 0; }

2. display

定义元素显示类型：

1. • block（块级元素）

2. • inline（行内元素）

3. • inline-block（行内块）

4. • flex（弹性布局）

5. • grid（网格布局）

.menu { display: flex; }

3. float

设置元素浮动：

1. • left（左浮动）

2. • right（右浮动）

3. • none（默认不浮动）

img { float: left; margin-right: 20px; }

4. clear

清除浮动影响：

• left, right, both

.footer { clear: both; }

---

六、过渡与动画

1. transition

定义属性变化的过渡效果：

button {
  transition: all 0.3s ease-in-out;
}
button:hover { transform: scale(1.1); }

2. animation

通过关键帧实现复杂动画：

@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.slide-in { animation: slide 1s forwards; }

---

七、变形与视觉效果

1. transform

实现元素变形：

1. • rotate()（旋转）

2. • translate()（位移）

3. • scale()（缩放）

4. • skew()（倾斜）

.card:hover { transform: rotate(5deg); }

2. opacity

设置元素透明度（0~1）：

.modal { opacity: 0.9; }

3. box-shadow

添加元素阴影：

• 语法：box-shadow: h-shadow v-shadow blur spread color inset;

.card { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

---

八、其他常用属性

1. cursor

设置鼠标指针样式：

1. • pointer（手形）

2. • default（箭头）

3. • text（文本输入）

button { cursor: pointer; }

2. overflow

控制内容溢出处理：

1. • visible（默认显示）

2. • hidden（隐藏溢出）

3. • scroll（添加滚动条）

div { overflow: auto; }

3. z-index

设置层叠顺序（需配合定位使用）：

.modal { z-index: 999; }

---

好啦，就到这里啦，晚安！