1、文本样式
文本样式属性可以单独使用，也可以组合使用，以创建丰富多样的文本效果。通过使用这些CSS属性，开发者可以有效地控制网页上文本的显示方式。
p {
color: red; /* 文本颜色为红色 */
font-family: "Arial", sans-serif; /* 使用Arial字体，没有则使用sans-serif字体族 */
font-size: 16px; /* 字体大小为16像素 */
font-weight: bold; /* 字体加粗 */
font-style: italic; /* 字体倾斜 */
text-align: center; /* 文本居中对齐 */
text-decoration: underline; /* 文本下划线 */
text-transform: uppercase; /* 文本转换为大写 */
line-height: 1.5; /* 行高为1.5倍 */
text-shadow: 1px 1px 2px gray; /* 文本阴影效果 */
letter-spacing: 0.5em; /* 字符间距0.5em */
word-spacing: 1em; /* 单词间距1em */
}2、背景
CSS（Cascading Style Sheets）中关于背景的属性非常有用，可以用来设置网页元素的背景样式。正确使用背景属性能够大幅提升网页的美观性和用户体验。
/* CSS样式 */
.element-style {
/* 设置背景颜色为淡蓝色 */
background-color: lightblue;
/* 设置背景图像 */
background-image: url('image.jpg');
/* 背景图像不重复 */
background-repeat: no-repeat;
/* 背景图像位于元素的中心 */
background-position: center;
/* 背景图像覆盖整个元素 */
background-size: cover;
/* 背景图像固定，不随滚动条滚动 */
background-attachment: fixed;
/* 其他样式设置 */
width: 300px; /* 宽度设置为300px */
height: 200px; /* 高度设置为200px */
border: 1px solid #000; /* 边框为黑色实线 */
}
3、盒模型
CSS中，盒模型是一个非常基础且关键的概念，用于控制页面上的元素布局。
布局属性描述内容（Content）元素的实际内容，可以是文字、图片或其他媒体内容。内边距（Padding）内容与边框之间的空间。增加内边距会增加元素的大小。边框（Border）围绕在内边距和内容外的边框。边框的大小不仅会影响元素的视觉效果，也会影响元素的总尺寸。外边距（Margin）元素与其他元素之间的空间。不同于内边距，外边距不会影响元素本身的大小，但它会影响元素与其他元素的距离。
使用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Model Example</title>
<style>
.box {
width: 200px; /* 设置内容的宽度 */
height: 200px; /* 设置内容的高度 */
padding: 20px; /* 内边距 */
border: 5px solid black; /* 边框 */
margin: 30px; /* 外边距 */
background-color: lightblue; /* 背景颜色 */
}
</style>
</head>
<body>
<div class="box">这里是内容区域</div>
</body>
</html>
4、布局控制
CSS中，用于布局控制的常用属性主要涉及盒模型、定位、显示方式以及网格和柔性盒布局（Flexbox）等方面。CSS（层叠样式表）是用来控制网页布局和外观的语言。
/* 容器使用 flex 布局，适合复杂的排列方式 */
.container {
display: flex;
justify-content: space-around; /* 子元素间隔均匀排列 */
}
/* 头部元素使用 sticky 定位，滚动时始终固定在页面顶部 */
.header {
position: sticky;
top: 0;
background-color: #f8f9fa; /* 背景颜色 */
padding: 10px 0; /* 垂直内边距 10px，水平内边距 0 */
width: 100%; /* 宽度填满容器 */
}
/* 使用 flex 属性给元素提供弹性空间分配 */
.item {
flex: 1; /* 允许元素根据需要伸缩填充空间 */
margin: 10px; /* 周围留有 10px 的外边距 */
padding: 20px; /* 内部间距 20px */
background-color: lightblue; /* 背景颜色 */
}
/* 网格容器设置，定义了一个三列等宽的网格 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列，每列分配一份平均空间 */
}
/* 网格子元素位置控制，位于第二列 */
.grid-item {
grid-column: 2;
padding: 15px; /* 内边距 */
border: 1px solid #ccc; /* 边框 */
}
/* 全宽度的元素 */
.full-width {
width: 100%; /* 使用百分比宽度，使元素宽度与容器相同 */
}
/* 半屏幕高度的元素 */
.half-screen-height {
height: 50vh; /* 使用视窗高度单位，使元素高度为屏幕高度的一半 */
}
/* 为.box类设置边距和填充 */
.box {
margin: 20px; /* 外边距 20px */
padding: 10px; /* 内边距 10px */
border: 1px solid black; /* 黑色边框 */
}