在这里，大多数单行代码只是 CSS 规则的一个声明。在某些情况下，选择器不仅仅是一个简单的元素；只需要添加额外的声明，就能获得更好的体验，这样它们不再是一行代码，而像神笔马良的一笔一般。其中一些单行代码更多是个性化的选项，并不适用于所有网站（比如并非每个人都使用表格或表单）。下面我就简要介绍每一种代
2024-07-20
内容分发网络可以加速你的网站图片、CSS、JS、以及其他静态内容。CDN 或称内容分发网络是位于世界各地的策略性放置的服务器网络，用于更快地向用户传输文件。传统 CDN 能够加速你的网站的图像、CSS、JS 和任何其他静态内容的访问。它允许网站所有者加速自己的所有内容，并为他们提供额外的功能和配置选
2024-07-19
欢迎回到我们为了构建更快网页所写的系列文章。本系列的第一部分和第二部分讲述了如何通过优化和替换图片来减少浏览器脂肪。本部分会着眼于在 CSS（层叠式样式表）和字体中减掉更多的脂肪。调整 CSS首先，我们先来看看问题的源头。CSS 的出现曾是技术的一大进步。你可以用一个集中式的样式表来装饰多个网页。如
2024-07-18
探索开源 CSS 框架，找到适合你的项目的框架。当大多数人想到 Web 开发时，通常会想到 HTML 或 JavaScript。他们通常会忘记对网站的欣赏能力有更大影响的技术： 级联样式表 cascading style sheets （简称 CSS）。据维基百科的说法，CSS 既是网页中最重要的部
2024-07-17
让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。你可能已经熟悉 媒体查询 media query 了。它们被广泛地用于使网站具有响应性。width 和 height 属性包含视区的尺寸。然后，你可以使用 CSS 在不同的尺寸下呈现不同的布局。prefers-color-scheme
2024-07-17
CSS（层叠样式表）是 Web 开发人员必不可少的工具，可让你精确地设置 HTML 元素的样式。但是，掌握 CSS 不仅仅需要了解基础知识。以下 25 个 CSS 技巧可以让您的生活更轻松，代码更简洁。1. 垂直和水平居中元素问题：在容器中垂直和水平居中元素。解决方案：使用 Flexbox。.con
2024-06-04
RFC自 2010 年左右以来，术语“CSS3”已被广泛用于涵盖对级联样式表 (CSS) 的各种添加和增强。但是，随着 CSS 随着新功能和规范的不断发展，笼统术语“CSS3”已变得不够充分且具有误导性。该 RFC 提议将 CSS 属性分为不同的组，即 CSS3、CSS4 和 CSS5，以更好地组织
2024-05-31
1. CSS权重计算规则图片CSS权重计算规则是用来决定当多个CSS规则应用到同一个HTML元素上时，哪一个规则会最终生效的准则。1.1. 权重计算规则：第一优先级：!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。第一等：内联样式，如：style="color
2024-05-30
「庆余年2」 终于开播了~最近起点读书APP内上架了庆余年典藏书，最大的特色是里面新加入了全新的阅读皮肤，一个拟物化的卷轴滚动效果，效果如下：就是在拖动页面时，卷轴会随着页面的滚动而展开或卷起，就像在拖动真的画布一样，非常舒适，录屏可能看着不是很清晰，强烈建议去端内自行体验。当时看到这个效果时就在思
2024-05-28
CSS 是一种美丽且复杂的技术，我们每天在工作中都会用到。然而，包括我在内的许多开发者都忽略了它的一些重要方面。这很明显，因为在互联网上很难找到关于 CSS 的新知识或高级内容。大多数内容创作者只写一些热门话题，比如新语言、框架和库。个人对 CSS 的了解仅限于让它正常工作。而这特别令人遗憾，因为我
2024-05-27
不知你是否好奇，CSS 3 都这么多年了，为啥一直没有 CSS 4 呢？其实，这是因为 CSS 并没有严格的版本概念。最近，CSS 工作组提议将 CSS 属性进行分组，即 CSS 3、CSS 4、CSS 5。下面就来简单探讨一下 CSS 的级别。CSS 3 很好，但是...自2010年起，CSS 3
2024-05-23
在Web 开发领域中，CSS(层叠样式表)是构建网站视觉美感和布局的支柱。虽然许多开发人员熟悉常用的 CSS 属性，但仍有大量隐藏的宝石等待被发现。在今天这篇文章中，我们揭示了 15 个隐藏的 CSS 属性，这些属性可能没有引起您的注意，但在增强您的网页设计能力方面具有巨大的潜力。1.backdr
2024-05-20
再次介绍一些你可能没用过的SVG小技巧。再次介绍一些你可能没用过的SVG小技巧。有时候会遇到一些完全相同的图形，如果能用上 CSS背景平铺，那就再合适不过了。举个例子，有这样一个按钮。相比普通的按钮，多个左右两个小装饰，如果是你，会怎样实现呢？假设这个小图标是a.svg，想了一下，应该有以下几种方式
2024-05-16
背景 当下，构建交互式应用程序的主流技术是 Web 技术，其中包括 HTML、CSS 与 JavaScript。在过去的 10 年，Web 技术生态发生了翻天覆地的变化，包括层出不穷的开发框架，诸如 React、Vue、Svelte，也包括日新月异的前端工程化工具，比如 Webpack、esbui
2024-05-14
现代CSS强大的令人难以置信。这次我们来用 CSS 实现这样一个功能：有多个宽度不同的标签水平排列，当外层宽度不足时，会提示超出的数量，演示效果如下图片如果让我用 JavaScript来实现估计都有点折腾，毕竟宽度都是动态的，要监听各部分的尺寸变化，包括标签的位置和外层的宽度，总之不是一两行代码就能
2024-05-09
CSS 选择器的权重（特异性）是确定在多个选择器应用于同一元素时，哪个选择器的样式会最终生效的关键因素。然而，关于 CSS 选择器特异性的理解，常常存在一些常见的误解。本文将探讨这些误解，并帮助大家理解 CSS 选择器的权重。误解一：权重是一个数字CSS 选择器的权重并不是一些数字。所以，计算元素的
2024-05-07
页面渲染机制页面渲染机制是浏览器将HTML、CSS和JavaScript等代码转换为可视化页面的过程。以下是页面渲染的主要步骤：HTML解析：浏览器首先接收HTML文件，然后对其进行解析，创建一个叫做DOM（Document Object Model）的数据结构。DOM是HTML元素的树形表示，它能
2024-05-07
在当今互联网时代，网页性能优化已经成为前端开发不可或缺的一环。无论是从用户体验的角度，还是从搜索引擎优化（SEO）的角度来看，网页加载速度都至关重要。在这个快节奏的世界里，用户期待着无缝流畅地浏览网页，而对于访问速度慢或响应迟缓的网站，他们往往会选择离开，转而寻找其他更优质的替代品。而在网页加载速度
2024-04-30
前言大家还记得我们之前介绍过的CSS_Flex 那些鲜为人知的内幕,在文章中我们不是对API的罗列，而是从内部原理方向来解析Flex中我们常见的属性和使用方式。该篇文章也得到大家的一致好评。而今天，我们来讲讲我们平时可能会忽略，但是在一些应用场景中能让我们得心应手的另外的布局方式 - Grid。还是
2024-04-30
em 在 css 中代表一个相对于当前字号的长度单位， denoted as "em" (例如，font-size: 1.2em;)。它与 px (像素) 和 rem (根 em) 不同，因为它是相对的，相对于当前字号，而 px 是绝对的，表示屏幕像素，rem 相对于文档根元素的字号。em 用于调整
2024-04-28