CSS 快速参考#

/* 1. 内联样式 */
<div style="color: red;">文本</div>

/* 2. 内部样式表 */
<style>
  body { color: red; }
</style>

/* 3. 外部样式表（推荐） */
<link rel="stylesheet" href="style.css">

/* 4. 导入 */
@import url("style.css");

选择器 {
  属性: 值;
  属性: 值;
}

/* 这是注释 */
/* 
  多行注释
*/

/* CSS 中的类选择器（以点 . 开头） */
.button {
  padding: 10px 20px;
  background: blue;
  color: white;
}

<!-- HTML 中使用 class 属性应用类选择器 -->
<button class="button">点击我</button>
<div class="button">也可以应用在 div 上</div>

/* CSS */
.card {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

<!-- HTML -->
<div class="card">
  <h2>卡片标题</h2>
  <p>卡片内容</p>
</div>

/* CSS */
.button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button-primary {
  background: blue;
  color: white;
}

.button-large {
  padding: 15px 30px;
  font-size: 18px;
}

<!-- HTML：一个元素可以同时拥有多个类 -->
<button class="button button-primary button-large">
  大号主按钮
</button>

/* CSS：只选择特定标签上的类 */
button.button {
  display: inline-block;
}

div.button {
  display: block;
}

<!-- HTML -->
<button class="button">按钮元素</button>
<div class="button">div 元素</div>

/* CSS：选择某个类内部的另一个类 */
.card {
  padding: 20px;
}

.card .card-title {
  font-size: 24px;
  font-weight: bold;
}

.card .card-body {
  margin-top: 10px;
}

<!-- HTML -->
<div class="card">
  <h2 class="card-title">标题</h2>
  <div class="card-body">内容</div>
</div>

/* Block（块） */
.card { }

/* Element（元素） */
.card__title { }
.card__body { }
.card__footer { }

/* Modifier（修饰符） */
.card--large { }
.card--primary { }
.card__title--highlighted { }

<!-- HTML 对应 -->
<div class="card card--large">
  <h2 class="card__title card__title--highlighted">标题</h2>
  <div class="card__body">内容</div>
  <div class="card__footer">页脚</div>
</div>

/* 连字符命名（kebab-case） */
.text-primary { }
.button-large { }
.nav-item { }

/* 下划线命名（snake_case） */
.text_primary { }
.button_large { }

/* 驼峰命名（camelCase） */
.textPrimary { }
.buttonLarge { }

/* CSS：类选择器可以配合伪类使用 */
.button {
  background: blue;
}

.button:hover {
  background: darkblue;
}

.button:active {
  background: navy;
}

.button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

<!-- HTML -->
<button class="button">悬停我</button>
<button class="button disabled">禁用按钮</button>

/* CSS */
/* 优先级：内联样式 > ID > 类 > 标签 */

/* 标签选择器（优先级：1） */
div {
  color: black;
}

/* 类选择器（优先级：10） */
.container {
  color: blue;
}

/* ID 选择器（优先级：100） */
#main {
  color: red;
}

/* 多个类选择器（优先级：10 + 10 = 20） */
.container.primary {
  color: green;
}

<!-- HTML -->
<div class="container">蓝色（类选择器优先级高于标签）</div>
<div id="main" class="container">红色（ID 优先级最高）</div>
<div class="container primary">绿色（多个类优先级更高）</div>

/* CSS */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-large {
  padding: 15px 30px;
  font-size: 18px;
}

.btn-small {
  padding: 5px 10px;
  font-size: 12px;
}

<!-- HTML -->
<button class="btn btn-primary">主按钮</button>
<button class="btn btn-primary btn-large">大号主按钮</button>
<button class="btn btn-secondary btn-small">小号次按钮</button>

/* CSS */
.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  padding: 15px;
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.card-body {
  padding: 20px;
}

.card-footer {
  padding: 15px;
  background: #f8f9fa;
  border-top: 1px solid #ddd;
}

.card-title {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

<!-- HTML -->
<div class="card">
  <div class="card-header">
    <h3 class="card-title">卡片标题</h3>
  </div>
  <div class="card-body">
    <p>卡片内容</p>
  </div>
  <div class="card-footer">
    <button>操作按钮</button>
  </div>
</div>

/* CSS */
.hidden {
  display: none;
}

.visible {
  display: block;
}

/* 响应式显示/隐藏 */
@media (max-width: 768px) {
  .hidden-mobile {
    display: none;
  }
  
  .visible-mobile {
    display: block;
  }
}

@media (min-width: 769px) {
  .hidden-desktop {
    display: none;
  }
  
  .visible-desktop {
    display: block;
  }
}

<!-- HTML -->
<div class="hidden-mobile">移动端隐藏</div>
<div class="visible-mobile">仅移动端显示</div>
<div class="hidden-desktop">桌面端隐藏</div>
<div class="visible-desktop">仅桌面端显示</div>

/* ✅ 好：语义清晰 */
.primary-button { }
.article-card { }
.navigation-menu { }

/* ❌ 不好：不够语义化 */
.red-button { }
.box1 { }
.div3 { }

/* ✅ 好：保持浅层选择器 */
.card-title { }
.card-body { }

/* ❌ 不好：选择器过深 */
.card .header .title .text { } /* 太深了 */

/* ✅ 好：模块化，可复用 */
.btn { }
.btn-primary { }
.btn-large { }

/* ❌ 不好：耦合度高 */
.header-button { } /* 只能用在 header 中 */

/* ✅ 好：命名风格一致 */
.text-primary { }
.text-secondary { }
.button-primary { }
.button-secondary { }

/* ❌ 不好：命名风格混乱 */
.textPrimary { }
.text-secondary { }
.button_primary { }

color: #333;                    /* 文字颜色 */
font-size: 16px;                /* 字体大小 */
font-family: Arial, sans-serif; /* 字体族 */
font-weight: bold;              /* 字体粗细 (normal/bold/100-900) */
font-style: italic;             /* 字体样式 (normal/italic) */
text-align: center;             /* 文本对齐 (left/center/right/justify) */
text-decoration: underline;      /* 文本装饰 (none/underline/line-through) */
text-transform: uppercase;      /* 文本转换 (none/uppercase/lowercase/capitalize) */
line-height: 1.5;               /* 行高 */
letter-spacing: 1px;            /* 字母间距 */
word-spacing: 2px;              /* 单词间距 */
text-indent: 2em;               /* 首行缩进 */
white-space: nowrap;            /* 空白处理 (normal/nowrap/pre) */
text-overflow: ellipsis;        /* 文本溢出 (clip/ellipsis) */

background-color: #fff;         /* 背景颜色 */
background-image: url("bg.jpg"); /* 背景图片 */
background-repeat: no-repeat;    /* 重复方式 (repeat/no-repeat/repeat-x/repeat-y) */
background-position: center;     /* 位置 (top/center/bottom/left/right/百分比) */
background-size: cover;         /* 尺寸 (cover/contain/百分比) */
background-attachment: fixed;    /* 固定方式 (scroll/fixed) */
background: #fff url("bg.jpg") no-repeat center/cover; /* 简写 */

border-width: 1px;              /* 边框宽度 */
border-style: solid;            /* 边框样式 (solid/dashed/dotted/double/none) */
border-color: #333;             /* 边框颜色 */
border: 1px solid #333;         /* 简写 */
border-radius: 5px;             /* 圆角 */
border-top: 1px solid #333;     /* 上边框 */
border-bottom: 1px solid #333;   /* 下边框 */
border-left: 1px solid #333;     /* 左边框 */
border-right: 1px solid #333;   /* 右边框 */

width: 100px;                   /* 宽度 */
height: 100px;                  /* 高度 */
min-width: 200px;               /* 最小宽度 */
max-width: 800px;               /* 最大宽度 */
min-height: 100px;              /* 最小高度 */
max-height: 500px;              /* 最大高度 */

margin: 10px;                   /* 外边距（四个方向） */
margin: 10px 20px;              /* 上下 左右 */
margin: 10px 20px 30px 40px;    /* 上 右 下 左 */
margin-top: 10px;               /* 上外边距 */
margin-right: 10px;             /* 右外边距 */
margin-bottom: 10px;            /* 下外边距 */
margin-left: 10px;              /* 左外边距 */

padding: 10px;                  /* 内边距（同上规则） */
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

display: block;                 /* 块级元素 */
display: inline;               /* 行内元素 */
display: inline-block;         /* 行内块 */
display: flex;                 /* 弹性布局 */
display: grid;                 /* 网格布局 */
display: none;                 /* 隐藏 */

visibility: visible;            /* 可见 */
visibility: hidden;            /* 隐藏（占位） */

opacity: 0.5;                  /* 透明度 (0-1) */

position: static;              /* 静态定位（默认） */
position: relative;            /* 相对定位 */
position: absolute;           /* 绝对定位 */
position: fixed;               /* 固定定位 */
position: sticky;               /* 粘性定位 */

top: 10px;                     /* 距离顶部 */
right: 10px;                   /* 距离右边 */
bottom: 10px;                  /* 距离底部 */
left: 10px;                    /* 距离左边 */

z-index: 10;                   /* 层级（数值越大越靠前） */

overflow: visible;              /* 可见（默认） */
overflow: hidden;              /* 隐藏 */
overflow: scroll;               /* 滚动 */
overflow: auto;                 /* 自动 */
overflow-x: hidden;            /* 水平方向 */
overflow-y: scroll;             /* 垂直方向 */

list-style-type: disc;         /* 列表标记类型 (disc/circle/square/none) */
list-style-position: outside;   /* 标记位置 (inside/outside) */
list-style-image: url("icon.png"); /* 标记图片 */
list-style: disc outside;      /* 简写 */

border-collapse: collapse;     /* 边框合并 (collapse/separate) */
border-spacing: 0;             /* 边框间距 */
caption-side: top;              /* 标题位置 (top/bottom) */
empty-cells: hide;              /* 空单元格 (show/hide) */

/* 容器属性 */
display: flex;
flex-direction: row;            /* 方向 (row/column/row-reverse/column-reverse) */
flex-wrap: nowrap;              /* 换行 (nowrap/wrap/wrap-reverse) */
justify-content: center;        /* 主轴对齐 (flex-start/flex-end/center/space-between/space-around) */
align-items: center;            /* 交叉轴对齐 (flex-start/flex-end/center/baseline/stretch) */
align-content: center;          /* 多行对齐 */
gap: 10px;                      /* 间距 */

/* 项目属性 */
flex-grow: 1;                   /* 放大比例 */
flex-shrink: 1;                 /* 缩小比例 */
flex-basis: auto;               /* 基础大小 */
flex: 1;                        /* 简写 (grow shrink basis) */
align-self: center;             /* 自身对齐 */
order: 1;                       /* 排序 */

/* 水平居中 */
.container {
  display: flex;
  justify-content: center;
}

/* 垂直居中 */
.container {
  display: flex;
  align-items: center;
}

/* 水平垂直居中 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 两端对齐 */
.container {
  display: flex;
  justify-content: space-between;
}

/* 容器属性 */
display: grid;
grid-template-columns: 1fr 1fr 1fr;  /* 列定义 */
grid-template-rows: 100px 200px;      /* 行定义 */
grid-template-areas: 
  "header header"
  "sidebar main";                     /* 区域命名 */
grid-gap: 10px;                       /* 间距 */
gap: 10px;                            /* 间距（新语法） */
justify-items: center;               /* 水平对齐 */
align-items: center;                 /* 垂直对齐 */

/* 项目属性 */
grid-column: 1 / 3;                  /* 列范围 */
grid-row: 1 / 2;                     /* 行范围 */
grid-area: header;                   /* 区域名称 */
justify-self: center;                /* 自身水平对齐 */
align-self: center;                  /* 自身垂直对齐 */

/* 三列布局 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 响应式网格 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* 水平居中 */
.center {
  margin: 0 auto;
  width: 800px;
}

/* 垂直居中（单行文本） */
.center-text {
  line-height: 100px;
  height: 100px;
}

/* 绝对定位居中 */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 基本语法 */
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

/* 常用断点 */
@media (max-width: 576px) { }   /* 手机 */
@media (max-width: 768px) { }   /* 平板 */
@media (max-width: 992px) { }   /* 小桌面 */
@media (max-width: 1200px) { }  /* 大桌面 */

/* 多条件 */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 平板横屏 */
}

/* 方向 */
@media (orientation: landscape) { }  /* 横屏 */
@media (orientation: portrait) { }    /* 竖屏 */

/* 设备类型 */
@media screen { }                     /* 屏幕 */
@media print { }                      /* 打印 */

width: 100%;                        /* 百分比 */
width: 100vw;                       /* 视口宽度 */
height: 100vh;                      /* 视口高度 */
font-size: 1rem;                    /* 根元素字体大小 */
font-size: 1em;                     /* 父元素字体大小 */
font-size: 16px;                    /* 像素（固定） */

<meta name="viewport" content="width=device-width, initial-scale=1.0">

transition: property duration timing-function delay;
transition: all 0.3s ease 0s;        /* 简写 */
transition-property: width;          /* 属性 */
transition-duration: 0.3s;          /* 持续时间 */
transition-timing-function: ease;    /* 时间函数 (ease/linear/ease-in/ease-out/ease-in-out) */
transition-delay: 0s;                /* 延迟 */

/* 示例 */
.button {
  background: blue;
  transition: background 0.3s ease;
}
.button:hover {
  background: red;
}

/* 定义动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

/* 使用动画 */
.element {
  animation: fadeIn 1s ease;
  animation-name: fadeIn;            /* 动画名称 */
  animation-duration: 1s;            /* 持续时间 */
  animation-timing-function: ease;   /* 时间函数 */
  animation-delay: 0s;               /* 延迟 */
  animation-iteration-count: infinite; /* 次数 (1/infinite) */
  animation-direction: normal;       /* 方向 (normal/reverse/alternate) */
  animation-fill-mode: forwards;     /* 填充模式 (none/forwards/backwards/both) */
  animation-play-state: running;      /* 状态 (running/paused) */
}

transform: translateX(10px);         /* 水平移动 */
transform: translateY(10px);         /* 垂直移动 */
transform: translate(10px, 20px);    /* 移动 */
transform: scale(1.5);               /* 缩放 */
transform: rotate(45deg);            /* 旋转 */
transform: skew(10deg);              /* 倾斜 */
transform: matrix(1, 0, 0, 1, 0, 0); /* 矩阵 */

/* 组合 */
transform: translate(10px, 20px) rotate(45deg) scale(1.2);

/* 变换原点 */
transform-origin: center;            /* 中心 (center/top/bottom/left/right/百分比) */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

box-sizing: content-box;              /* 默认（width 不包括 padding 和 border） */
box-sizing: border-box;              /* width 包括 padding 和 border（推荐） */

/* 单行 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行（WebKit） */
.text-ellipsis-multi {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* 方法1：clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 方法2：使用 Flexbox */
.container {
  display: flex;
}

/* 方法3：使用 Grid */
.container {
  display: grid;
}

/* 方法1：Flexbox（推荐） */
.container {
  display: flex;
  align-items: center;
}

/* 方法2：绝对定位 */
.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* 方法3：Grid */
.container {
  display: grid;
  align-items: center;
}

/* 块级元素 */
.block {
  margin: 0 auto;
  width: 800px;
}

/* Flexbox */
.container {
  display: flex;
  justify-content: center;
}

/* Grid */
.container {
  display: grid;
  justify-items: center;
}

/* 文本 */
.text {
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
}

/* 定义 */
:root {
  --primary-color: #007bff;
  --font-size: 16px;
}

/* 使用 */
.element {
  color: var(--primary-color);
  font-size: var(--font-size);
}

/* 默认值 */
.element {
  color: var(--primary-color, #000);
}

/* 隐藏 */
.hidden { display: none; }
.invisible { visibility: hidden; }

/* 显示 */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* 浮动 */
.float-left { float: left; }
.float-right { float: right; }
.clearfix::after { content: ""; display: table; clear: both; }

/* 文本对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* 字体粗细 */
.font-normal { font-weight: normal; }
.font-bold { font-weight: bold; }

/* 间距 */
.m-0 { margin: 0; }
.mt-1 { margin-top: 0.25rem; }
.p-0 { padding: 0; }
.pt-1 { padding-top: 0.25rem; }

.element {
  color: inherit;        /* 继承父元素 */
  font-size: inherit;
}

/* 示例：Flexbox（旧浏览器） */
.container {
  display: -webkit-box;      /* 旧版 Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;              /* 标准 */
}

/* Transform */
.element {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}