在这里，大多数单行代码只是 CSS 规则的一个声明。在某些情况下，选择器不仅仅是一个简单的元素；只需要添加额外的声明，就能获得更好的体验，这样它们不再是一行代码，而像神笔马良的一笔一般。其中一些单行代码更多是个性化的选项，并不适用于所有网站（比如并非每个人都使用表格或表单）。下面我就简要介绍每一种代码、它们的用途（并附示例图片）以及我喜欢使用它们的原因。请您注意，示例图片可能建立在之前的示例之上。

内容分发网络可以加速你的网站图片、CSS、JS、以及其他静态内容。 CDN 或称内容分发网络是位于世界各地的策略性放置的服务器网络，用于更快地向用户传输文件。传统 CDN 能够加速你的网站的图像、CSS、JS 和任何其他静态内容的访问。它允许网站所有者加速自己的所有内容，并为他们提供额外的功能和配置选项，而这些高级服务通常需要根据项目使用的带宽量进行支付。 但是，如果你的项目无法证明值得实施传统

欢迎回到我们为了构建更快网页所写的系列文章。本系列的第一部分和第二部分讲述了如何通过优化和替换图片来减少浏览器脂肪。本部分会着眼于在 CSS（层叠式样式表）和字体中减掉更多的脂肪。 调整 CSS 首先，我们先来看看问题的源头。CSS 的出现曾是技术的一大进步。你可以用一个集中式的样式表来装饰多个网页。如今很多 Web 开发者都会使用 Bootstrap 这样的框架。 这些框架当然方便，可是很多人都

探索开源 CSS 框架，找到适合你的项目的框架。 当大多数人想到 Web 开发时，通常会想到 HTML 或 JavaScript。他们通常会忘记对网站的欣赏能力有更大影响的技术： 级联样式表 cascading style sheets （简称 CSS）。据维基百科的说法，CSS 既是网页中最重要的部分，也是最常被遗忘的部分，尽管它是万维网的三大基石技术之一。 本文将探讨九种流行的、强大的、开源的

让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。 你可能已经熟悉 媒体查询 media query 了。它们被广泛地用于使网站具有响应性。width 和 height 属性包含视区的尺寸。然后，你可以使用 CSS 在不同的尺寸下呈现不同的布局。 prefers-color-scheme 媒体查询 的工作方式与此相同。用户可以将他们的操作系统配置为使用浅色或深色主题。prefers-

CSS（层叠样式表）是 Web 开发人员必不可少的工具，可让你精确地设置 HTML 元素的样式。但是，掌握 CSS 不仅仅需要了解基础知识。以下 25 个 CSS 技巧可以让您的生活更轻松，代码更简洁。 1. 垂直和水平居中元素 问题：在容器中垂直和水平居中元素。 解决方案：使用 Flexbox。 .container { display: flex; justify-content: cente

RFC 自 2010 年左右以来，术语“CSS3”已被广泛用于涵盖对级联样式表 (CSS) 的各种添加和增强。但是，随着 CSS 随着新功能和规范的不断发展，笼统术语“CSS3”已变得不够充分且具有误导性。该 RFC 提议将 CSS 属性分为不同的组，即 CSS3、CSS4 和 CSS5，以更好地组织和促进对不断发展的 CSS 格局的理解。这种分类旨在提高采用率和教学便利性，同时不会对 CSS 工

1. CSS权重计算规则 图片 CSS权重计算规则是用来决定当多个CSS规则应用到同一个HTML元素上时，哪一个规则会最终生效的准则。 1.1. 权重计算规则： 第一优先级：!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。 第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用） 第二等：ID

「庆余年2」 终于开播了~最近起点读书APP内上架了庆余年典藏书，最大的特色是里面新加入了全新的阅读皮肤，一个拟物化的卷轴滚动效果，效果如下： 就是在拖动页面时，卷轴会随着页面的滚动而展开或卷起，就像在拖动真的画布一样，非常舒适，录屏可能看着不是很清晰，强烈建议去端内自行体验。 当时看到这个效果时就在思考，如何在 web 中也实现这样一个效果呢？ 经过一番琢磨，发现仅使用 CSS 就能完成这样的效

CSS 是一种美丽且复杂的技术，我们每天在工作中都会用到。然而，包括我在内的许多开发者都忽略了它的一些重要方面。 这很明显，因为在互联网上很难找到关于 CSS 的新知识或高级内容。大多数内容创作者只写一些热门话题，比如新语言、框架和库。 个人对 CSS 的了解仅限于让它正常工作。而这特别令人遗憾，因为我们从未尝试深入研究这个主题。认识到这一点后，做了一些研究，并列出了一些新发现的内容。 CSS 性

不知你是否好奇，CSS 3 都这么多年了，为啥一直没有 CSS 4 呢？其实，这是因为 CSS 并没有严格的版本概念。最近，CSS 工作组提议将 CSS 属性进行分组，即 CSS 3、CSS 4、CSS 5。下面就来简单探讨一下 CSS 的级别。 CSS 3 很好，但是... 自2010年起，CSS 3 一直作为代指 CSS 中新增的增强功能的标签。然而，随着 CSS 技术的飞速发展，新的特性和功

在Web 开发领域中，CSS(层叠样式表)是构建网站视觉美感和布局的支柱。虽然许多开发人员熟悉常用的 CSS 属性，但仍有大量隐藏的宝石等待被发现。 在今天这篇文章中，我们揭示了 15 个隐藏的 CSS 属性，这些属性可能没有引起您的注意，但在增强您的网页设计能力方面具有巨大的潜力。 1.backdrop-filter: 此属性将图形效果(例如模糊或色移)应用于元素内容后面的区域。它非常适合创建磨

再次介绍一些你可能没用过的SVG小技巧。 再次介绍一些你可能没用过的SVG小技巧。 有时候会遇到一些完全相同的图形，如果能用上 CSS背景平铺，那就再合适不过了。举个例子，有这样一个按钮。 相比普通的按钮，多个左右两个小装饰，如果是你，会怎样实现呢？ 假设这个小图标是a.svg，想了一下，应该有以下几种方式。 1.伪元素 刚好用上::before和::after，设置相同的背景就行了，示意如下：

背景 当下，构建交互式应用程序的主流技术是 Web 技术，其中包括 HTML、CSS 与 JavaScript。在过去的 10 年，Web 技术生态发生了翻天覆地的变化，包括层出不穷的开发框架，诸如 React、Vue、Svelte，也包括日新月异的前端工程化工具，比如 Webpack、esbuild、Vite 等等。但归根结底，他们都逃不开 HTML、CSS、JavaScript 三剑客的范畴。

现代CSS强大的令人难以置信。 这次我们来用 CSS 实现这样一个功能：有多个宽度不同的标签水平排列，当外层宽度不足时，会提示超出的数量，演示效果如下 图片 如果让我用 JavaScript来实现估计都有点折腾，毕竟宽度都是动态的，要监听各部分的尺寸变化，包括标签的位置和外层的宽度，总之不是一两行代码就能搞定的。 现如今，纯CSS也能完美的实现这样的效果，而且比 JS 实现更加简单，一起来看看吧

CSS 选择器的权重（特异性）是确定在多个选择器应用于同一元素时，哪个选择器的样式会最终生效的关键因素。然而，关于 CSS 选择器特异性的理解，常常存在一些常见的误解。本文将探讨这些误解，并帮助大家理解 CSS 选择器的权重。 误解一：权重是一个数字 CSS 选择器的权重并不是一些数字。所以，计算元素的权重时，并不是简单的将权重数值相加就可以了。 CSS 选择器的权重由三个部分组成，表示为 (a,

页面渲染机制 页面渲染机制是浏览器将HTML、CSS和JavaScript等代码转换为可视化页面的过程。以下是页面渲染的主要步骤： HTML解析：浏览器首先接收HTML文件，然后对其进行解析，创建一个叫做DOM（Document Object Model）的数据结构。DOM是HTML元素的树形表示，它能够让JavaScript和CSS访问和操作页面的内容。 CSS解析：同时，浏览器也会解析CSS文

在当今互联网时代，网页性能优化已经成为前端开发不可或缺的一环。无论是从用户体验的角度，还是从搜索引擎优化（SEO）的角度来看，网页加载速度都至关重要。在这个快节奏的世界里，用户期待着无缝流畅地浏览网页，而对于访问速度慢或响应迟缓的网站，他们往往会选择离开，转而寻找其他更优质的替代品。 而在网页加载速度的优化过程中，CSS选择器的作用不可忽视。作为定义网页样式的关键工具之一，CSS选择器直接影响着浏

前言 大家还记得我们之前介绍过的CSS_Flex 那些鲜为人知的内幕,在文章中我们不是对API的罗列，而是从内部原理方向来解析Flex中我们常见的属性和使用方式。该篇文章也得到大家的一致好评。 而今天，我们来讲讲我们平时可能会忽略，但是在一些应用场景中能让我们得心应手的另外的布局方式 - Grid。 还是和上一篇Flex文章一样，我们不是对Grid的API进行罗列，而是从更深层次的角度来了解Gri

em 在 css 中代表一个相对于当前字号的长度单位， denoted as "em" (例如，font-size: 1.2em;)。它与 px (像素) 和 rem (根 em) 不同，因为它是相对的，相对于当前字号，而 px 是绝对的，表示屏幕像素，rem 相对于文档根元素的字号。em 用于调整文本大小和间距，从而根据用户首选项调整文本大小、创建响应式设计和定义元素之间的空间。 EM 标签在