CSS 速查表

上一页
下一页

CSS 代表 层叠样式表 (Cascading Style Sheets)，简称 CSS，是一种简单的设计语言，旨在简化网页设计过程。

什么是 CSS 速查表？

CSS 速查表是所有可用于设计任何网站的 CSS 属性和选择器的集合。在本速查表中，我们将提供最常用的 CSS 属性和以下列出主题的相关代码片段。

目录

CSS 基础

CSS 指定 HTML 元素如何在网页上显示。如果你将人体比作网页，那么 CSS 就是身体的造型部分，例如眼睛的颜色、鼻子的尺寸、肤色等等。

语法

selector { property: value; }

使用 CSS 的方法

有三种方法可以将 CSS 用于 HTML 文档。

  • 内联 CSS：内联 CSS 使用style 属性直接应用于 HTML 元素。
  • 内部 CSS：内部 CSS 定义在 HTML 的 head 部分，位于<style> 标签内，让浏览器知道在哪里查找 CSS。
  • 外部 CSS：外部 CSS 定义在一个单独的文件中，该文件只包含 CSS 属性，这是在处理项目时推荐的使用 CSS 的方法。

CSS 选择器

CSS 选择器 用于选择要在网页上设置样式的 HTML 元素。它们允许您定位特定的元素或元素组以应用样式，例如颜色、字体、边距等等。

下面提到了 12 种 CSS 选择器。

属性 描述 代码片段
通用选择器 用于选择所有 HTML 元素
元素选择器 用于选择特定的 HTML 元素，例如 p、span、header 等。
类选择器 用于选择您自己定义的类。
ID 选择器 用于选择您自己定义的 ID。
属性选择器 用于选择特定的 HTML 属性。
组选择器 用于选择多个元素并一起设置它们的样式。
伪元素选择器 用于选择伪元素。
伪类选择器 用于选择伪类。
后代选择器 在 CSS 中用于设置所有作为特定指定标签子标签的标签的样式。
子选择器 用于选择特定元素的所有直接子元素。
相邻兄弟选择器 用于选择紧接在特定元素之前的元素。
通用兄弟选择器 用于选择所有在特定元素之前的元素。

CSS 伪类和伪元素

伪类和伪元素都有其各自的用途，如下所述。

CSS 伪类

伪类 在 CSS 中用于根据元素的状态或在文档树中的位置选择和设置元素的样式，而无需向 HTML 元素添加额外的类或 ID。

CSS 伪类的示例

<!DOCTYPE html>
<html>

<head>
    <style>
        ::backdrop {
            background-image: url(border.png);
        }

        :modal {
            border: 8px inset blue;
            background-color: lightpink;
            box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
        }
    </style>
</head>

<body>
    <dialog>
        <button autofocus>Close</button>
        <p>The modal dialog has a beautiful backdrop!</p>
        <p>And see my styling using :modal pseudo-class</p>
    </dialog>
    <button>Open the dialog</button>

    <script>
        const dialog = document.querySelector("dialog");
        const showButton = document.querySelector("dialog + button");
        const closeButton = document.querySelector("dialog button");

        // "Show the dialog" button opens the dialog modally
        showButton.addEventListener("click", () => {
            dialog.showModal();
        });

        // "Close" button closes the dialog
        closeButton.addEventListener("click", () => {
            dialog.close();
        });
    </script>
</body>

</html>

CSS 伪元素

伪元素 用于设置元素特定部分的样式。伪元素不是 DOM（文档对象模型）的一部分，并且不存在于 HTML 标记中，但是可以使用 CSS 定位和设置它们的样式。

CSS 伪类的示例

<html>
<head>
<style>
   p::first-letter { 
      font-size: 2em;
      color: green;
   }
</style>
</head>
<body>
   <p>
      Tutorialspoint
   </p>
</body>
</html>

字体属性

CSS 字体 是一组具有统一设计和样式的文本字符。它包括字体中字符的形状、大小、粗细和其他属性。

属性 描述 代码片段
font 字体简写属性。
font-family 指定用于文本的字体系列或字体系列列表。
font-feature-settings 控制 OpenType 字体中的高级排版功能。
font-kerning 确定特定字母对的间距方式。
font-language-override 覆盖特定语言的字体行为。
font-optical-sizing 设置是否应优化文本渲染以在不同尺寸下查看。
font-palette 允许使用字体中包含的各种调色板之一。
font-size 设置文本的大小。
font-size-adjust 指定控制字体 x 高度的字体纵横比（数值比率）。
font-stretch 调整文本的宽度（压缩或扩展）。
font-style 指定文本的样式，例如“italic”、“oblique”或“normal”。
font-weight 设置文本的粗细或粗体。
font-synthesis 字体合成简写属性。
font-synthesis-small-caps 确定浏览器是否应该合成在字体系列中缺失的小写字母字体。
font-synthesis-style 确定浏览器是否应该合成在字体系列中缺失的斜体字体。
font-synthesis-weight 确定浏览器是否应该合成在字体系列中缺失的粗体字体。
font-variant 控制文本中小写字母是否使用小型大写字母。
font-variant-alternates 控制备用字形的用法。
font-variant-caps 控制大写字母备用字形的用法。
font-variant-east-asian 控制中日韩等东亚文字备用字形的用法。
font-variant-ligatures 控制元素的文本内容，以确定应使用哪个连字或上下文形式。
font-variant-numeric 控制数字、分数和序数标记的备用字形的用法。
font-variant-position 控制作为上标或下标定位的备用、较小字形的用法。
font-variation-settings 指定可变字体特性的四字母轴名称。

文本属性

文本 指的是以单词或字符形式书写或打印的信息，可以阅读和理解。文本可以包含书籍、文章、电子邮件、消息、网页等内容。

文本样式涉及修改文本的外观，使其更具视觉吸引力或传达特定信息。本章演示如何使用 CSS 属性操作文本。

属性 描述 代码片段
color 设置元素的颜色。
direction 定义元素内容流的方向。
line-height 设置相邻文本基线之间的距离。
text-align 设置元素的文本对齐样式。
text-decoration 定义文本的任何装饰；值可以组合。
text-indent 定义元素中第一行文本的缩进；默认为 0。
text-shadow 创建具有不同颜色和偏移量的文本投影。
text-transform 相应地转换元素中的文本。
vertical-align 设置元素的垂直位置。
white-space 定义如何处理元素内的空白。
word-spacing 在单词之间插入额外的空格。

背景属性

CSS 背景 属性用于操作元素的背景。它可以用来应用单个背景图像或多个背景图像，以及定义背景颜色、大小、位置、重复行为和其他相关属性。

属性 描述 代码片段
background 背景相关属性的简写。
background-attachment 指定背景相对于视窗的位置，固定或可滚动。
background-clip 控制背景图像延伸到元素的填充或内容框之外的程度。
background-color 设置元素的背景颜色。
background-image 在一个元素上设置一个或多个背景图像。
background-origin 设置背景的原点。
background-position 设置背景中每个图像的初始位置。
background-position-x 设置背景中每个图像的初始水平位置。
background-position-y 设置背景中每个图像的初始垂直位置。
background-repeat 控制背景中图像的重复。
background-size 控制背景图像的大小。
background-blend-mode 确定元素的背景图像如何相互混合。

阴影属性

CSS中存在两种类型的阴影属性，如下所述。

  • 文本阴影 (Text Shadow): 用于向文本添加阴影效果。它允许你指定阴影的颜色、偏移量、模糊半径和扩展半径。
  • 盒子阴影 (Box Shadow): 用于在元素周围添加阴影效果。可以添加一个或多个阴影效果，用逗号分隔。
属性 描述 代码片段
text-shadow 用于向文本添加阴影效果。
box-shadow 用于在元素周围添加阴影效果。

边框属性

边框 (Border) 属性用于在元素周围创建边框，例如 div、图像或文本。它允许你自定义边框的外观，包括其颜色、宽度和样式。

属性 描述 代码片段
border 在一个声明中设置所有边框属性
border-bottom 设置元素的下边框。
border-bottom-color 设置元素下边框的颜色。
border-bottom-width 设置元素下边框的宽度。
border-bottom-style 设置元素下边框的样式。
border-color 设置元素的边框颜色。
border-left 设置元素的左边框。
border-left-color 设置元素左边框的颜色。
border-left-width 设置元素左边框的宽度。
border-left-style 设置元素左边框的样式。
border-right 设置元素的右边框。
border-right-color 设置元素右边框的颜色。
border-right-width 设置元素右边框的宽度。
border-right-style 设置元素右边框的样式。
border-style 设置元素边框的样式
border-top 设置元素的上边框。
border-top-color 设置元素上边框的颜色。
border-top-width 设置元素上边框的宽度。
border-top-style 设置元素上边框的样式。
border-width 设置元素边框的宽度。
border-image 设置边框图像。
border-image-outset 设置图像突出显示，即边框图像区域超出边框框的程度。
border-image-repeat 定义边框图像是否应重复、圆角、间距或拉伸。
border-image-source 设置作为边框传递给元素的图像的源/路径。
border-image-slice 此属性显示如何在边框中分割图像。
border-image-width 设置要设置为边框的图像的宽度。

CSS Flexbox

Flexbox 在容器内沿单个维度组织元素，该维度可以是水平或垂直对齐的。

属性 值 示例
flex-direction 设置弹性项目的弹性方向。
flex-wrap 设置弹性项目是否应换行。
justify-content 设置弹性项目沿主轴的对齐方式。
align-items 设置弹性项目沿交叉轴的对齐方式。
align-content 设置弹性容器内弹性行的对齐方式和间距。
flex-flow 同时设置 flex-direction 和 flex-wrap 属性。
flex-grow 设置弹性项目在弹性容器内增长。
flex-shrink 设置弹性项目缩小尺寸以适应可用空间。
flex-basis 设置弹性项目的初始大小。
flex 简写属性，组合三个与 flex 相关的属性：flex-grow、flex-shrink 和 flex-basis。
align-self 设置特定弹性项目沿交叉轴的对齐方式。
order 用于指定弹性项目在其弹性容器内出现的顺序。

CSS Grid

CSS Grid 是一种方便简洁的方式来定义元素的网格布局。

属性 描述 代码片段
display 定义元素是网格容器还是内联网格容器。
gap 定义行和列之间的间隙。
grid-area 定义网格项目在网格布局中的位置和大小。
grid-column 控制网格项目在网格容器中沿列方向的放置。
grid-row 控制网格项目在网格容器中沿行方向的放置。
grid-template 指定网格列、网格行和网格区域。
grid-auto-columns 确定自动生成的网格列轨道的尺寸或此类轨道的模式。
grid-auto-rows 确定自动生成的网格行轨道的尺寸或此类轨道的模式。
grid-auto-flow 指定网格项目在网格中的排列。

渐变

CSS 渐变 允许通过在两种或多种颜色之间创建平滑过渡来为 HTML 元素设计自定义颜色。

CSS 定义了三种类型的渐变。

  • 线性渐变 (Linear Gradient): 从左到右、从上到下或对角线渐变。
  • 径向渐变 (Radial Gradient): 从中心到边缘渐变。
  • 圆锥渐变 (Conic Gradient): 围绕中心点旋转。

代码片段

在这个片段中，你可以检查三种类型的渐变。

linear-gradient()
/* to right, black, yellow, green */
radial-gradient()
/* circle, black, yellow, green */
conic-gradient()
/* black, yellow, green */

渐变示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .InnerFrame-container {
            font-family: Arial, sans-serif;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            width: 110px;
        }
        .InnerFrame-color-picker {
            display: flex;
        }
        .InnerFrame-color-options {
            display: flex;
            flex-direction: column;
            margin-right: 20px;
            width: 100%;
            gap: 10px;
        }
        .InnerFrame-color-options button {
            background-color: rgb(0, 153, 51);
            border: 2px solid grey;
            border-radius: 10px;
            padding: 10px;
            cursor: pointer;
            color: white;
            font-family: monospace;
        }
        .InnerFrame-color-options button:hover {
            background-color: rgb(0, 125, 51);
        }
        .InnerFrame-output-display {
            border: 2px solid grey;
            width: 110px;
            border-radius: 10px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="InnerFrame-container">
        <div class="InnerFrame-color-picker">
            <div class="InnerFrame-bg InnerFrame-color-options">
                <button onclick="setGradient(this, 'linear')">Linear Gradient</button>
                <button onclick="setGradient(this, 'radial')">Radial Gradient</button>
                <button onclick="setGradient(this, 'conic')">Conic Gradient</button>
            </div>
            <div class="InnerFrame-output-display" id="InnerFrame-colorDisplay">
                Choose a gradient for background
            </div>
        </div>
    </div>

    <script>
        let previousButton = null;

        function setGradient(button, type) {
            let colorDisplay = document.getElementById('InnerFrame-colorDisplay');
            if (type === 'linear') {
                colorDisplay.style.backgroundImage = 'linear-gradient(to right, black, yellow, green)';
            } else if (type === 'radial') {
                colorDisplay.style.backgroundImage = 'radial-gradient(circle, black, yellow, green)';
            } else if (type === 'conic') {
                colorDisplay.style.backgroundImage = 'conic-gradient(black, yellow, green)';
            }

            if (previousButton) {
                previousButton.style.backgroundColor = 'rgb(0, 153, 51)';
            }

            button.style.backgroundColor = 'rgb(0, 100, 25)';
            previousButton = button;
        }
    </script>
</body>
</html>

分类属性

CSS 分类 属性允许你控制如何显示元素，设置图像将在另一个元素中显示的位置，设置元素相对于其正常位置的位置，使用绝对值设置元素的位置，以及如何控制元素的可见性。

属性 描述 代码片段
clear 设置元素的哪些边距不能与浮动元素相邻；元素向下移动，直到该边距清除。
cursor 定义光标的形状。
display 控制元素的显示方式。
float 确定元素是否浮动到左侧或右侧，允许文本环绕它或以内联方式显示。
position 设置元素的定位模型。
visibility 确定元素在文档或表格中是否可见。

CSS 函数

CSS 函数可用于为你的网站或应用程序添加样式和格式，并可以极大地改善用户体验。

请参阅以下函数类型列表以了解每个函数。

CSS 函数 描述 代码片段
变换函数 (Transform Functions) 这些函数用于表示视觉变换，并用作 transform 属性中的值。
数学函数 (Math Functions) 这些函数可用于 CSS 中，使用数学函数表示数值。
滤镜函数 (Filter Functions) 这些函数表示能够改变输入图像外观的图形效果。它用于 filter 和 backdrop-filter 属性中。
颜色函数 (Color Functions) 这些函数用于定义表示颜色的各种方法。
图像函数 (Image Functions) 这些函数提供图像或渐变的图形表示。
计数器函数 (Counter Functions) 理论上，CSS 计数器函数可以在任何可用 的地方使用，但它们通常与 content 属性一起使用。
形状函数 (Shape Functions) 这些函数表示视觉形状，并用于 clip-path、offset-path 和 shape-outside 等属性中。
引用函数 (Reference Functions) 为了引用在其他地方定义的值，这些函数用作属性的值。
网格函数 (Grid Functions) 这些函数用于定义 CSS 网格。
字体函数 (Font Functions) 这些函数通过结合使用 CSS 字体函数和 font-variant-alternates 属性来管理。
缓动函数 (Easing Functions) 这些函数用于过渡和动画属性来自以下函数。

注意： 要详细了解每个函数，请查看文章 CSS 函数。

媒体查询

媒体查询 允许根据查看页面的设备或浏览器的特性将 CSS 样式应用于网页。使用媒体查询，我们可以创建适应不同屏幕尺寸、分辨率和方向的设计。

CSS 媒体类型 描述 代码片段
all 适用于所有设备。
print 适用于分页的不透明材料和在屏幕上以打印预览模式查看的文档。请参阅关于分页媒体的部分。
screen 主要用于彩色计算机屏幕。
CSS 媒体特性 描述 代码片段
orientation 检查设备的屏幕或页面是纵向还是横向。
aspect-ratio 检查视口或渲染表面的纵横比。
display-mode 检查 Web 应用程序的显示模式。
overflow-block 确定用户设备如何处理垂直方向上超出初始容器边界的内容。
overflow-inline 确定用户设备如何处理水平方向超出初始容器边界的內容。
高度 确定视窗的高度。
宽度 确定视窗的宽度。

结论

遵循本速查表将帮助您回顾 CSS 知识。如果您是 CSS 新手，我们建议您学习我们的免费CSS 教程。

您可以查看我们的其他速查表
打印页面
上一页
下一页
广告