禅游空间

简体中文

English

简体中文

English

外观

CSS 语法速查手册

约 2662 字大约 9 分钟

css

2020-05-08

一份完整的 CSS 语法速查手册，涵盖选择器、单位、布局、动画等核心特性。

背景与动机

CSS 是前端开发的基础语言，但属性繁多容易遗忘。本文整理了常用的 CSS 语法和实战案例，帮助开发者快速查阅。

选择器

基础选择器

选择器示例说明CSS 版本
.class.intro选择 class="intro" 的所有元素1
#id#firstname选择 id="firstname" 的所有元素1
**选择所有元素2
elementp选择所有 <p> 元素1
element,elementdiv,p选择所有 <div> 元素和所有 <p> 元素1

层级选择器

选择器示例说明CSS 版本
element elementdiv p选择 <div> 元素内部的所有 <p> 元素1
element>elementdiv>p选择父元素为 <div> 元素的所有 <p> 元素2
element+elementdiv+p选择紧接在 <div> 元素之后的所有 <p> 元素2
element1~element2p~ul选择前面有 <p> 元素的每个 <ul> 元素3

属性选择器

选择器示例说明CSS 版本
[attribute][target]选择带有 target 属性所有元素2
[attribute=value][target=_blank]选择 target="_blank" 的所有元素2
[attribute~=value][title~=flower]选择 title 属性包含单词 "flower" 的所有元素2
`[attribute=value]``[lang=en]`
[attribute^=value]a[src^="https"]选择其 src 属性值以 "https" 开头的每个 <a> 元素3
[attribute$=value]a[src$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素3
[attribute*=value]a[src*="abc"]选择其 src 属性中包含 "abc" 子串的每个 <a> 元素3

伪类选择器

链接状态：

选择器示例说明CSS 版本
:linka:link选择所有未被访问的链接1
:visiteda:visited选择所有已被访问的链接1
:activea:active选择活动链接1
:hovera:hover选择鼠标指针位于其上的链接1
:focusinput:focus选择获得焦点的 input 元素2

子元素选择器：

选择器示例说明CSS 版本
:first-childp:first-child选择属于父元素的第一个子元素的每个 <p> 元素2
:last-childp:last-child选择属于父元素最后一个子元素每个 <p> 元素3
:only-childp:only-child选择属于父元素的唯一子元素的每个 <p> 元素3
:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素3
:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数3

类型选择器：

选择器示例说明CSS 版本
:first-of-typep:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素3
:last-of-typep:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素3
:only-of-typep:only-of-type选择属于其父元素唯一的 <p> 元素的每个 <p> 元素3
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素3
:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数3

其他伪类：

选择器示例说明CSS 版本
:first-letterp:first-letter选择每个 <p> 元素的首字母1
:first-linep:first-line选择每个 <p> 元素的首行1
:beforep:before在每个 <p> 元素的内容之前插入内容2
:afterp:after在每个 <p> 元素的内容之后插入内容2
:lang(language)p:lang(it)选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素2
:root:root选择文档的根元素3
:emptyp:empty选择没有子元素的每个 <p> 元素（包括文本节点）3
:target#news:target选择当前活动的 #news 元素3
:enabledinput:enabled选择每个启用的 <input> 元素3
:disabledinput:disabled选择每个禁用的 <input> 元素3
:checkedinput:checked选择每个被选中的 <input> 元素3
:not(selector):not(p)选择非 <p> 元素的每个元素3
::selection::selection选择被用户选取的元素部分3

常用单位

类型示例说明
像素px绝对单位，最常用
比例计算calc(90% - 20px)动态计算尺寸
相对字体em相对于父元素字体大小
根字体rem相对于根元素字体大小
视口单位vh、vw相对于视口高度和宽度
十六进制颜色#FFFFFF颜色值表示法

布局属性

显示与隐藏

  • display：元素显示方式
    • none：不显示
    • block：块级元素
    • inline：行内元素
    • inline-block：行内块元素
  • visibility：可见性
    • hidden：隐藏但保留空间
    • visible：可见
  • opacity：透明度，取值 0.0（完全透明）到 1.0（完全不透明）

尺寸控制

  • width：元素宽度
  • height：元素高度
  • max-width / min-width：最大/最小宽度
  • max-height / min-height：最大/最小高度

滚动条

  • overflow: auto：内容溢出时显示滚动条
  • overflow-x: auto：横向溢出时显示滚动条
  • overflow-y: auto：纵向溢出时显示滚动条

文字属性

属性说明常用值
font-size字体大小14px、1.5em、1rem
font-style字体风格normal、italic、oblique
font-weight字体粗细normal、bold、100-900
font-family字体类型"Microsoft YaHei"、sans-serif
line-height行高1.5、24px
letter-spacing字间距1px、0.1em
text-indent文本缩进2em
text-align文本对齐left、center、right、justify
text-shadow文字阴影1px 1px 2px #000
-webkit-font-smoothing字体平滑antialiased

边框属性

属性说明示例
border-radius圆角5px、50%
border-image图片边框url(border.png) 30 round
box-shadow盒子阴影0 2px 4px rgba(0,0,0,0.1)
box-sizing盒模型content-box、border-box、inherit

背景属性

基础背景

  • background-color：背景颜色
  • background-image：背景图片，支持多背景 url(), url()
  • background-repeat：重复方式
  • background-position：定位位置
  • background-size：背景尺寸
  • background-attachment：背景固定方式，fixed 表示固定不动
  • background-origin：背景定位区域

渐变背景

线性渐变语法：

background: linear-gradient(方向, 开始颜色, ..., 终止颜色);

径向渐变语法：

background: radial-gradient(shape size, start-color, ..., last-color);

示例：

/* 线性渐变 */
background: linear-gradient(180deg, #2074af, #2c91d2);

/* 径向渐变 */
background: radial-gradient(circle, #fff, #000);

3D 变换

景深设置

perspective 属性定义观察者与画面的距离：

perspective: 1000px;
perspective-origin: 50% 50%;

变换类型

transform-style 属性控制子元素是否保留 3D 效果：

  • flat：子元素不保留 3D 设置（默认）
  • preserve-3d：子元素保留 3D 设置

坐标系说明

  • X 轴：向右为正
  • Y 轴：向下为正
  • Z 轴：向外为正

变换方法

位移：

transform: translateX(100px);  /* X 轴位移 */
transform: translateY(50px);   /* Y 轴位移 */
transform: translateZ(20px);   /* Z 轴位移 */
transform: translate3d(x, y, z);  /* 3D 位移 */

缩放：

transform: scaleX(2);   /* X 轴缩放 */
transform: scaleY(1.5); /* Y 轴缩放 */
transform: scaleZ(1);   /* Z 轴缩放 */
transform: scale3d(x, y, z);  /* 3D 缩放 */

旋转：

  • 顺时针为正，逆时针为负
transform: rotateX(45deg);  /* 绕 X 轴旋转 */
transform: rotateY(45deg);  /* 绕 Y 轴旋转 */
transform: rotateZ(45deg);  /* 绕 Z 轴旋转 */
transform: rotate3d(x, y, z, angle);  /* 3D 旋转 */

动画

关键帧定义

使用 @keyframes 定义动画序列：

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

动画属性

属性说明值
animation-name动画名称关键帧名称
animation-duration动画周期1s、500ms
animation-timing-function速度曲线linear、ease、ease-in-out
animation-delay开始延迟0s、500ms
animation-iteration-count播放次数1、infinite
animation-direction播放方向normal、reverse、alternate
animation-play-state播放状态running、paused
animation-fill-mode时间外状态forwards、backwards、both

简写语法

animation: fadeIn 5s infinite linear;
/* 等价于：
   animation-name: fadeIn;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
*/

表格属性

属性说明值
table-layout表格布局算法auto、fixed
border-collapse边框合并separate、collapse
border-spacing单元格间距5px、10px 20px
empty-cells空单元格显示show、hide
caption-side标题位置top、bottom

实战案例：毛玻璃拖拽窗口

以下是一个实现毛玻璃效果的可拖拽窗口示例：

效果说明

  • 窗口背景使用 filter: blur() 实现毛玻璃效果
  • 支持鼠标拖拽移动窗口
  • ::after 伪元素实现背景模糊

完整代码

blur-window.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>毛玻璃拖拽窗口</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .wrapper {
      position: absolute;
      top: calc(50% - 250px);
      left: calc(50% - 400px);
      width: 800px;
      height: 500px;
      overflow: hidden;
      background-image: url("img1.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 800px 500px;
    }
    .app {
      z-index: 1;
      position: absolute;
      width: 300px;
      height: 150px;
      overflow: hidden;
      text-align: center;
      box-shadow: 0px 0px 5px #252525b8;
      border-radius: 3px;
    }
    /* Key: blur background using ::after pseudo element */
    .app::after {
      content: '';
      z-index: -1;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: -30px;
      background-image: url("img1.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 800px 500px;
      background-attachment: fixed;
      filter: blur(10px);
    }
    .bar {
      background: #b3b3b375;
      height: 24px;
      cursor: move;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      line-height: 24px;
      color: #000;
      font-size: 14px;
    }
    .content {
      height: 126px;
      line-height: 120px;
    }
  </style>
</head>
<body>
  <div class="wrapper" id="wrapper">
    <div class="app" id="app">
      <div class="bar" id="bar">可拖拽头部</div>
      <div class="content" id="content">这里是内容</div>
    </div>
  </div>
  <script>
    const dragBox = function(wrapper, drag, app) {
      function getCss(ele, prop) {
        return parseInt(window.getComputedStyle(ele)[prop]);
      }
      let initX, initY, dragable = false;
      let appLeft = getCss(app, 'left');
      let appTop = getCss(app, 'top');

      drag.addEventListener('mousedown', function(e) {
        dragable = true;
        initX = e.clientX;
        initY = e.clientY;
      }, false);

      document.addEventListener('mousemove', function(e) {
        if (dragable === true) {
          const nowX = e.clientX;
          const nowY = e.clientY;
          const disX = nowX - initX;
          const disY = nowY - initY;
          app.style.left = appLeft + disX + 'px';
          app.style.top = appTop + disY + 'px';
        }
      });

      drag.addEventListener('mouseup', function() {
        dragable = false;
        appLeft = getCss(app, 'left');
        appTop = getCss(app, 'top');
      }, false);
    };

    dragBox(
      document.querySelector('#wrapper'),
      document.querySelector('#bar'),
      document.querySelector('#app')
    );
  </script>
</body>
</html>

关键技术点

  1. 毛玻璃效果：通过 ::after 伪元素叠加模糊背景实现
  2. 背景对齐：background-attachment: fixed 确保伪元素背景与父容器对齐
  3. 拖拽实现：监听 mousedown、mousemove、mouseup 事件计算位移

总结

本文整理了 CSS 核心语法，包括：

  • 选择器体系：基础、层级、属性、伪类选择器
  • 布局属性：显示控制、尺寸、滚动
  • 文字与边框属性
  • 背景、渐变与 3D 变换
  • 动画与表格属性
  • 毛玻璃窗口实战案例

建议收藏本文作为速查手册，开发时快速定位所需属性。

参考资源

[格式修正摘要]:

  • 添加 H1 标题和文章摘要
  • 将选择器内容整理为标准 Markdown 表格
  • 列表语法从 * 统一改为 -
  • 为所有代码块添加语言标识
  • 中英文之间添加空格
  • 添加代码示例前的文字说明
  • 代码注释改为英文
  • 添加总结和参考资源
  • 移除重复的表格属性行