网页开发人员使用 CSS 样式语言为语义 HTML 文档添加动态、创意、用户友好的样式。刚接触 CSS 的网页开发人员通过练习基本的 CSS 选择器语法、属性、@规则和伪类/伪元素来学习样式,这些 CSS 功能足以构建一个可访问、美观、用户友好、现代的网站,但要了解 CSS 的全部潜力,还有更多要学习的。
当网页开发人员广泛使用 CSS 设计网站前端并尝试 CSS 时,他们经常发现新功能、解决方法和技巧,这些帮助他们提高生产力并改善 CSS 技能。这些技巧和窍门帮助每个人在不编写 JavaScript、SVG 和基于 HTML Canvas 的实现的情况下,高效实现快速、吸引人的 CSS-only 解决方案来解决设计问题。例如,现在网页开发人员可以创建快速、轻量级的倒计时器,而无需编写一行 JavaScript 代码。
在本文中,我将解释十个 CSS 技巧和窍门,帮助您充分利用 CSS,以高效地构建现代网页界面,而无需使用 JavaScript、SVG、HTML Canvas 或集成庞大的第三方 UI 工具包和库。练习这些技术,扩展您的 CSS 掌握能力!
正确放置 UI 元素是设计高质量界面的强制要求。在大多数情况下,网页开发人员必须垂直和水平居中子元素。由于不同的布局系统和定位特性,CSS 无法提供单个属性来居中任何元素。在响应式设计流行之前,网页开发人员使用负边距技巧来居中 HTML 元素 - 现在,您会发现许多方法来使用各种现代和旧的 CSS 属性来居中元素,但在 CSS 中最简单的方法是什么?
现代 CSS 网格功能支持使用 place-items
简写属性来居中网格块,因此我们可以使用它来居中子元素,如下所示:
<div>
<button>一个居中的按钮</button>
</div>
<style>
div {
height: 100vh;
display: grid;
place-items: center;
}
</style>
内置的 SVG 实现通常提供了生成任何高级、自定义形状的全功能方法。因此,标准的 HTML 实现没有提供内置标签来从标准 DOM 元素创建任意形状,但我们可以使用标准的 CSS 属性将 div
元素转换为各种几何形状,例如,使用 border-radius
创建圆形。
默认 div
元素中边框渲染的行为在流行的浏览器中是相同的,它让我们可以创建三角形,如下所示:
<div></div>
<style>
div {
border-right: 20px solid transparent;
border-bottom: 20px solid darkcyan;
border-left: 20px solid transparent;
}
</style>
您可以通过为不同的边框边添加可见颜色并更改边框厚度来创建各种三角形。
过去,网页开发人员通常使用 JavaScript 在网页上创建简单的倒计时器。CSS 动画功能帮助网页开发人员在不编写 JavaScript 代码的情况下动态更新 DOM 元素的视觉效果。因此,现在我们可以使用标准 CSS 动画创建方法来创建倒计时,通过定义几个关键帧。
我们可以使用 @property
@规则、CSS 变量和 CSS 计数器来使用纯 CSS 在记录时间内创建灵活、可定制的倒计时,而无需自己创建很多关键帧:
<div></div>
<style>
@property --c {
syntax: "<integer>";
initial-value: 0;
inherits: true;
}
@keyframes timer {
from { --c: 10 }
to { --c: 0 }
}
:root { animation: timer 5s linear }
div::after {
counter-reset: c var(--c);
content: counter(c, decimal-leading-zero);
}
</style>
上述 CSS 片段使用 @property
@规则、变量和计数器与 CSS 动画功能创建了一个计时器。即使它不使用很多动画关键帧定义,它也使用 counter-reset
属性为每个动画帧呈现动态值:
通过使用 calc()
和 mod()
CSS 数学函数,调整全局计时器变量的结束值,您可以创建显示分钟、秒和毫秒的倒计时器。
从以下故事中了解更多关于 CSS 函数的知识:
浏览器将 DOM 元素呈现为浏览器视口边界内的可视 UI 元素。但是,HTML 表单元素通常打开超出标准 DOM 视口的原生 UI 元素,因此没有跨浏览器解决方案来自定义原生表单元素的平台特定、浏览器特定弹出元素。例如,我们无法自定义 HTML 选择元素的下拉弹出窗口,但我们可以使用 CSS 自定义选择框的初始视图在所有浏览器中,因为初始表单控件视图在 DOM 中呈现:
<div>
<select>
<option>React</option>
<option>Angular</option>
<option>Svelte</option>
<option>Vue</option>
<option>Lit</option>
</select>
</div>
<style>
div {
position: relative;
min-width: 200px;
}
select {
appearance: none;
padding: 6px;
font-size: 14px;
border-radius: 4px;
width: 100%;
border: 2px solid #ccc;
outline: none;
}
select:focus { border: 2px solid #aaa; }
div::after {
border-right: 6px solid transparent;
border-top: 6px solid #333;
border-left: 6px solid transparent;
position: absolute;
top: 42%;
right: 12px;
content: "";
pointer-events: none;
}
</style>
上述 CSS 定义通过添加自定义图标和边框来自定义 HTML 选择元素的初始视图,如下预览所示:
使用相同的技术,您可以覆盖用户代理样式表中的默认样式,自定义其他原生表单控件并添加额外的子元素,而无需使用 JavaScript 嵌入元素。
众所周知,border-radius
CSS 属性帮助我们为矩形 DOM 元素创建圆角或椭圆边缘。此外,使用 clip-path
属性,我们可以创建漂亮的花式边角。您知道我们可以使用渐变填充创建创意花式边角吗?
通过为元素填充径向渐变背景,我们可以创建一个完美的、锐利的圆形。如果我们将生成的圆形设为透明,将其用作蒙版,并移动到角落,它会切割所有四个角,创建类似相框的边角:
<div></div>
<style>
div {
width: 200px;
height: 100px;
background: darkcyan;
mask: radial-gradient(14px at 40px 40px, transparent 98%, black) -40px -40px;
}
</style>
这个网页应用 让您通过动态调整几个参数来生成这些类型的边角。
网页开发人员通常使用类和标识符为语义 HTML 元素应用样式。CSS 标准还支持带有模式匹配的属性选择器,因此我们可以使用它们为元素编写全局样式。一个简单的例子是编写以下选择器,为所有原生文本输入添加全局样式:
input[type="text"] {
/* ... */
}
属性选择器适用于任何标准 HTML 属性和自定义属性,即数据属性。属性选择器语法还支持模式匹配,因此我们可以使用这种技术为无法编辑的 HTML 文档(例如,为第三方 HTML 文档或 CMS 页面模板设置样式)编写广义样式的简写选择器:
<div>
<button class="ok-btn">确定</button>
<button class="re-try-btn">重试</button>
<button class="cancel-btn">取消</button>
</div>
<style>
button[class$="-btn"] {
min-width: 6em;
}
</style>
上述选择器为所有类名以 -btn
结尾的按钮元素添加样式。
以下是另一个示例,使用属性模式匹配为维基百科超链接添加不同样式:
a[href*=".wikipedia.org"] {
color: darkcyan;
}
7. 创建自定义列表样式类型HTML 标准提供了 <ol>
和 <ul>
语义标签,用于在网页上创建列表。这些标签带有默认的列表样式,但您可以使用 list-style-type
属性覆盖这些默认列表样式。例如,以下 CSS 定义激活了小写罗马数字编号系统:
ol {
list-style-type: lower-roman;
}
@counter-style
at-rule 允许您通过使用预先包含的列表样式或从头开始创建新样式来为 list-style-type
属性创建自定义样式定义。以下 HTML 文档使用了一个使用表情符号创建的自定义列表样式:
<div>
<ul>
<li>React</li>
<li>Angular</li>
<li>Svelte</li>
<li>Vue</li>
<li>Lit</li>
</ul>
</div>
<style>
@counter-style emojis {
system: cyclic;
symbols: "\1F449\1F3FD";
suffix: " ";
}
ul { list-style-type: emojis }
</style>
这个 CSS at-rule 允许您扩展现有的列表计数器并创建自定义计数器。例如,以下样式定义在每个有序列表项之前使用连字符 (-
) 渲染数字周围的括号:
@counter-style custom-roman {
system: extends lower-roman;
prefix: "[";
suffix: "] - ";
}
ol { list-style-type: custom-roman }
现代网站设计包含一个称为主要部分的大型介绍部分,介绍网站并放置几个主要操作按钮。网页开发人员通常使用创意背景图像创建这些主要部分。现在,由于内置的 CSS 滤镜和混合模式,我们无需编辑原始源图像即可为主要部分创建创意背景图像。
我们可以通过使用 ::after
伪元素并对其背景图像应用各种滤镜来创建一个主要部分,如下所示:
<div>
<h1>主要部分</h1>
</div>
<style>
div {
height: calc(100vh - 16px);
position: relative;
display: grid;
place-items: center;
color: white;
overflow: auto;
}
div::after {
content: "";
position: absolute;
inset: 0;
background-image: url(https://raw.githubusercontent.com/codezri/static-media/main/unsplash-img1.jpg);
background-size: cover;
background-position: center;
z-index: -1;
filter: blur(4px) brightness(0.65) sepia(90%);
}
</style>
同时,mix-blend-mode
属性帮助我们通过基于背景颜色为背景图像添加颜色混合效果来创建创意主要部分,如下例所示:
div {
background-image: url(https://raw.githubusercontent.com/codezri/static-media/main/unsplash-img1.jpg);
background-size: cover;
background-position: center;
isolation: isolate;
height: calc(100vh - 16px);
position: relative;
display: grid;
place-items: center;
color: white;
}
div::after {
content: "";
position: absolute;
background: #594100;
inset: 0;
z-index: -1;
mix-blend-mode: multiply;
}
您还可以使用 backdrop-filter
CSS 属性创建艺术主要部分,但并非所有流行的标准浏览器都支持该属性。
您还记得过去 JQuery 时代我们如何使用 .scrollTo()
函数来实现平滑滚动动画吗?现在,网页开发人员可以通过纯 CSS 更改滚动行为并激活平滑滚动!
看看以下激活平滑滚动的 CSS 定义:
<a href="#target1">[1]</a>
<a href="#target2">[2]</a>
<div id="target1"></div>
<div id="target2"></div>
<style>
div {
height: 100vh;
border-bottom: solid 40px #aaa;
background-color: #ccc;
}
:root { scroll-behavior: smooth }
</style>
通过这个 CSS 定义,浏览器甚至对返回按钮激活平滑滚动,如下预览所示:
CSS 滚动捕捉模块提供了一组 CSS 属性,以改善可滚动容器的可用性和可访问性因素。例如,以下代码片段自动停止在主要部分处滚动,并避免在部分部分停止:
<section style="background: #ccc">1</section>
<section style="background: #aaa">2</section>
<section style="background: #ccc">3</section>
<section style="background: #aaa">4</section>
<style>
section {
height: 100vh;
scroll-snap-align: start;
display: grid;
place-items: center;
font-size: 7em;
}
:root {
background-color: #eee;
scroll-snap-type: y mandatory;
}
</style>
CSS 滚动捕捉功能帮助我们在移动应用程序中实现无需 JavaScript 的、最小纯 CSS 解决方案,用于支持滑动功能。从 官方 MDN 文档 了解更多关于滚动捕捉模块的信息。
每个网页开发人员都有一个使用类开始样式的惯例。使用组织良好的类无疑是创建干净、易管理的网页的良好实践。然而,为创建最小的网页并不一定需要创建类 - 无类网页设计概念鼓励我们使用语义 HTML 标签编写 CSS:
nav {}
ul {}
ul li {}
summary {}
功能选择器(作为 伪类 实现)如 :not()
、:has()
和 :is()
帮助我们通过避免在无类样式表中重复选择器段来编写清晰的代码。例如,以下代码片段使用 :not()
为导航菜单项添加颜色样式,除了最后一个项:
<nav>
<ul>
<li>主页</li>
<li>服务</li>
<li>关于</li>
<li>联系</li>
</ul>
</nav>
<style>
nav ul {
display: flex;
list-style: none;
gap: 1em;
background: #eee;
padding: 1em;
:not(li:last-child) {
color: darkcyan;
}
}
</style>
假设您应该为呈现 SVG 图标的菜单项添加自定义样式。然后,您可以使用 :has()
功能选择器选择这些菜单项,如下所示:
li:has(svg) {
/* ... */
}
:has()
伪类可以与属性选择器和 CSS 变量结合使用,以实现交互式主题更改:
<div>
<label><input type="radio" value="t1" name="t" checked>主题 1</label>
<label><input type="radio" value="t2" name="t">主题 2</label>
</div>
<style>
body {
background-color: var(--background-color);
color: var(--text-color);
transition: all 0.5s;
}
:root:has(input[value="t1"]:checked) {
--background-color: darkcyan;
--text-color: white;
}
:root:has(input[value="t2"]:checked) {
--background-color: skyblue;
--text-color: black;
}
</style>
:is()
功能选择器帮助我们为逗号分隔的长选择器编写替代简写选择器:
/* 传统方式 */
section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
color: darkcyan;
}
/* 现代方式 */
section :is(h1, h2, h3, h4, h5, h6) {
color: darkcyan;
}
感谢阅读。