CSS · 代码集

📝 · 文字样式

/* 字体 */

font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
font-size: 16px;
font-weight: 400; /* normal | bold | 100-900 */
font-style: italic; /* normal | italic */
font-variant: small-caps;

/* 小型大写字母 */

/* 文字颜色 */

color: #333;
color: rgba(0, 0, 0, 0.85);

/* 文字装饰 */

text-decoration: underline;
text-decoration: line-through;
text-decoration: underline wavy #e74c3c; /* 波浪下划线 */

/* 文字阴影 */

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

大小写转换 */

text-transform: uppercase; /* lowercase | capitalize */

📏 段落间距与对齐

/* 行高 */

line-height: 1.8; line-height: 28px;

/* 段间距 */

margin: 16px 0; margin-top: 20px; margin-bottom: 10px;

/* 内边距 */

padding: 12px 20px; padding: 1em 2em;

/* 对齐 */

text-align: left; /* center | right | justify(两端对齐) */

/* 首行缩进 */

text-indent: 2em;

/* 字间距 */

letter-spacing: 1px;

/* 词间距（英文） */

word-spacing: 2px;

🎨 背景与边框

/* 背景 */

background: #f8f9fa; background: linear-gradient(135deg, #667eea, #764ba2); background: url(bg.png) center/cover;

/* 边框 */

border: 1px solid #e0e0e0; border-left: 4px solid #3498db; /* 左侧强调线 */ border-bottom: 2px dashed #e74c3c; border-radius: 8px; /* 圆角 */ border-radius: 20px 4px 20px 4px; /* 不规则圆角 */

/* 轮廓（不占空间） */

outline: 2px solid #ff6b6b; outline-offset: 4px;

📐 布局与尺寸

/* 宽度限制 */

max-width: 600px; width: 80%; min-width: 200px;

/* 溢出处理 */

overflow: hidden; overflow-x: auto; /* 横向滚动 */

/* 盒模型 */

box-sizing: border-box;

⚡ 特效

/* 阴影 */

box-shadow: 0 2px 12px rgba(0,0,0,0.1); box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* 内阴影 */

/* 渐变文字 */

background: linear-gradient(to right, #ff6b6b, #feca57); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

/* 透明度 */

opacity: 0.8;

/* 变换 */

transform: rotate(2deg); transform: scale(1.05); transform: skewX(-5deg); transform: translateY(-4px);

/* 过渡动画 */

transition: all 0.3s ease;

/* 滤镜 */

filter: blur(1px); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));

✂️ 文本截断

/* 单行省略号 */

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

/* 多行省略号（3行） */

display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;

/* 换行规则 */

ord-break: break-all; /* 强制断词 */ word-wrap: break-word; /* 长单词换行 */ white-space: pre-wrap; /* 保留空格和换行 */

🖱️ 交互状态

p { cursor: pointer; user-select: none; /* 禁止选中文字 */ } p:hover { color: #e74c3c; background: #f0f0f0; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); } p:active { transform: scale(0.98); } p:first-child { } /* 第一个段落 */ p:last-child { } /* 最后一个段落 */ p:nth-child(odd) { } /* 奇数段落 */

🎯 实用组合示例

/* 引用块风格 */

/* 卡片风格 */

/* 高亮提示 */

text-align: center = 让文字在元素内水平居中。

<p style="text-align: left/center/right;"> 靠左

只对行内/行内块元素生效(文字/span/a/img)，对div块级无效但里面文字会居中

margin: 0 auto = 让一个块级元素（如 div）整体水平居中

vertical-align: middle = 垂直方向对齐

flex-direction: column; = 纵向排列 flex-wrap: wrap; =换行 justify-content: center;居中

justify-content: center/flex-start左/flex-end右/space-between两端对齐中间平分/space-around每个元素两边有间距; /* 水平居中 */

align-items: center/flex-start上/flex-end下/stretch拉伸填满(默认); /* 垂直居中 */

对flex子元素生效

margin: 0 auto 自身居中于父容器

基础

<p> =段落(换行+段间距) <div> =块级容器(无间距纯容器) <span> =行内容器(不换行) <h1> =标题(加粗+不同大小) br =换行(无间距)

margin: 0 auto = 让一个块级元素（如 div）整体水平居中

vertical-align: middle = 垂直方向对齐

CSS Columns（内容自动分流）

<div class="two-columns" >

.two-columns { column-count: 2; /* 分2列 */ column-gap: 40px; /* 列间距 */ column-rule: 1px solid #e0e0e0; /* 中间分隔线 */ }

<div class="container"> <div class="left"> <div class="right">

.container { display: flex; gap: 20px; /* 两列间距 */ } .left { flex: 1; /* 占1份 */ background: #e8f4fd; padding: 20px; } .right { flex: 1; /* 占1份 */ background: #fff3e0; padding: 20px; }

不等宽比例：.left { flex: 2; } /* 占 2/3 */ .right { flex: 1; } /* 占 1/3 */ /* 或者用固定宽度 + 自适应 */ .left { width: 300px; flex-shrink: 0; } .right { flex: 1; }

响应式（手机端自动变上下）：.container { display: flex; gap: 20px; } @media (max-width: 768px) { .container { flex-direction: column; /* 窄屏变上下 */ } }

最强大：Grid 布局

.container { display: grid; grid-template-columns: 1fr 1fr; /* 两列等宽 */ gap: 20px; } /* 不等宽 */ .container { grid-template-columns: 300px 1fr; /* 左侧固定300，右侧自适应 */ grid-template-columns: 2fr 1fr; /* 2:1 比例 */ grid-template-columns: 200px 1fr 200px; /* 三列，中间自适应 */ }

侧边栏 + 主体:.layout { display: flex; min-height: 100vh; } .sidebar { width: 250px; background: #2c3e50; color: #fff; } .main { flex: 1; padding: 30px; }

display: flex; 横向 flex-direction: column; 子元素竖向排列 ↓ flex-direction: row; 子元素横向排列 →

/* 主流断点方案 */ @media (max-width: 576px) { /* 手机 */ } @media (max-width: 768px) { /* 平板竖屏 */ } @media (max-width: 992px) { /* 平板横屏 / 小笔记本 */ } @media (max-width: 1200px) { /* 桌面 */ } @media (min-width: 1400px) { /* 大屏优化 */ }

阅读类窄版:.article { max-width: 680px; /* 理想阅读宽度：60~75个字符 */ margin: 0 auto; font-size: 17px; line-height: 1.8; }

通栏 + 内容区分离:/* 背景通栏，内容居中限制宽度 */ .section { width: 100%; /* 背景铺满 */ background: #f5f5f5; } .section-inner { max-width: 1200px; margin: 0 auto; padding: 60px 20px; }