S 特性（可选）CSS（层叠样式表）是用于描述HTML或XML（包括如SVG或XHTML）文档外观和格式的样式语言。它控制网页的布局、颜色、字体、动画等视觉表现。
以下是一个全面的 CSS 样式用法大全 概览，涵盖常用语法、选择器、属性、布局方式及现代特性。
一、CSS 基础语法代码语言：javascript复制选择器 {
属性: 值;
属性: 值;
}示例：
代码语言：javascript复制p {
color: red;
font-size: 16px;
}二、CSS 引入方式内联样式（Inline）
代码语言：javascript复制
文本
内部样式表（Internal）代码语言：javascript复制
外部样式表（External）
代码语言：javascript复制文件 styles.css 内容：
代码语言：javascript复制p { color: purple; }三、CSS 选择器大全选择器
示例
说明
元素选择器
p { }
选择所有
元素
类选择器
.class { }
选择 class=“class” 的元素
ID 选择器
#id { }
选择 id=“id” 的元素
后代选择器
div p { }
div 内的所有 p 元素
子选择器
div > p { }
div 的直接子元素 p
相邻兄弟
h1 + p { }
紧接在 h1 后的 p 元素
通用兄弟
h1 ~ p { }
h1 后面所有的同级 p 元素
属性选择器
[type="text"]
拥有 type=“text” 的元素
伪类
a:hover { }
鼠标悬停时的链接
伪元素
::before, ::after
在元素前后插入内容
常用伪类:hover - 鼠标悬停:focus - 获得焦点:active - 被激活（点击）:visited - 已访问链接:first-child, :last-child:nth-child(n) - 第 n 个子元素:not() - 排除某个选择器常用伪元素::before / ::after - 插入内容::first-line - 首行样式::first-letter - 首字母样式::selection - 选中文本样式四、常用 CSS 属性1. 文本与字体代码语言：javascript复制color: #333; /* 文字颜色 */
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold; /* normal, bold, 100-900 */
font-style: italic; /* 斜体 */
text-align: center; /* left, right, justify */
text-decoration: none; /* underline, overline, line-through */
text-transform: uppercase; /* 大写、小写、首字母大写 */
line-height: 1.5; /* 行高 */
letter-spacing: 1px; /* 字间距 */
word-spacing: 2px; /* 词间距 */
white-space: nowrap; /* 控制空白处理 */2. 盒模型（Box Model）代码语言：javascript复制width: 200px;
height: 100px;
padding: 10px; /* 内边距 */
border: 1px solid #ccc; /* 边框 */
margin: 20px; /* 外边距 */
box-sizing: border-box; /* 包含 padding 和 border 在 width/height 中 */边框详细设置代码语言：javascript复制border-width: 1px;
border-style: solid;
border-color: black;
/* 或简写 */
border: 2px dashed red;
/* 圆角 */
border-radius: 8px;
border-top-left-radius: 10px;
/* 阴影 */
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);3. 背景代码语言：javascript复制background-color: #f0f0f0;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover; /* contain, 100% 100% */
background-attachment: fixed; /* 背景固定 */
/* 简写 */
background: #fff url(bg.png) no-repeat center center / cover;4. 显示与可见性代码语言：javascript复制display: block; /* block, inline, inline-block, none */
visibility: hidden; /* visible, hidden (保留空间) */
opacity: 0.8; /* 透明度 0-1 */
overflow: hidden; /* visible, scroll, auto */5. 定位（Positioning）代码语言：javascript复制position: static; /* 默认 */
position: relative; /* 相对定位 */
position: absolute; /* 绝对定位（相对于最近的定位祖先） */
position: fixed; /* 固定定位（相对于视口） */
position: sticky; /* 粘性定位 */
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
z-index: 10; /* 层叠顺序，仅对定位元素有效 */6. 浮动与清除代码语言：javascript复制float: left; /* left, right, none */
clear: both; /* both, left, right, none */ ⚠️ 注意：浮动主要用于早期布局，现多被 Flex/Grid 替代。
五、现代布局方式1. Flexbox（弹性布局）代码语言：javascript复制.container {
display: flex;
flex-direction: row; /* row, column, row-reverse, column-reverse */
justify-content: center; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
flex-wrap: wrap; /* 是否换行 */
}
.item {
flex: 1; /* 缩写：flex-grow, flex-shrink, flex-basis */
flex-basis: 100px;
}2. Grid（网格布局）代码语言：javascript复制.container {
display: grid;
grid-template-columns: 1fr 2fr; /* 列宽 */
grid-template-rows: 100px 1fr; /* 行高 */
gap: 10px; /* 网格间距 */
grid-template-areas:
"header header"
"nav main"
"footer footer";
}
.header { grid-area: header; }
.nav { grid-area: nav; }3. 多列布局（Columns）代码语言：javascript复制.container {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #ddd;
}六、响应式设计1. 媒体查询（Media Queries）代码语言：javascript复制@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
@media (min-width: 1024px) {
.sidebar {
width: 300px;
}
}2. 视口单位代码语言：javascript复制width: 100vw; /* 视口宽度的 100% */
height: 100vh; /* 视口高度的 100% */
font-size: 4vmin; /* 取 vw 和 vh 中较小者 */3. 相对单位em：相对于父元素字体大小rem：相对于根元素（html）字体大小%：相对于父元素ch：相对于字符 ‘0’ 的宽度ex：相对于小写字母 x 的高度七、过渡与动画1. 过渡（Transition）代码语言：javascript复制.button {
background: blue;
transition: all 0.3s ease;
}
.button:hover {
background: red;
transform: scale(1.1);
}
### 2. 动画（Animation）
```css
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out infinite alternate;
}八、其他实用技巧1. 重置默认样式（CSS Reset）代码语言：javascript复制* {
margin: 0;
padding: 0;
box-sizing: border-box;
}2. 清除浮动（Clearfix）代码语言：javascript复制.clearfix::after {
content: "";
display: table;
clear: both;
}3. 居中技巧水平居中：margin: 0 auto;（块级元素）
水平垂直居中：
代码语言：javascript复制.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
或使用 Flex：
代码语言：javascript复制.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}九、CSS 最佳实践语义化命名：使用 BEM、SMACSS 等命名规范
避免过度嵌套：减少选择器复杂度
使用变量（CSS Custom Properties）
代码语言：javascript复制:root {
--primary-color: #007bff;
}
.btn {
background: var(--primary-color);
}模块化与组件化：便于维护
性能优化：避免频繁重排重绘，合理使用 transform 和 opacity
十、现代 CSS 特性（可选）CSS Houdini：自定义属性与渲染Container Queries：基于容器尺寸的响应式Scroll Snap：滚动吸附Backdrop Filter：背景模糊Color Functions：color-mix(), oklch() 等（现代浏览器支持）