当前位置：首页 > 科技 > 软件

聊一聊 CSS 的十个技巧和窍门

来源：责编：时间：2024-07-24 14:46:02 279观看

导读Web 开发人员使用 CSS 样式语言为语义 HTML 文档添加动态、富有创意且用户友好的样式。刚接触 CSS 的 Web 开发人员通过练习基本的 CSS 选择器语法、属性、@ 规则和伪类/元素来开始学习样式。了解这些 CSS 功能足以构

Web 开发人员使用 CSS 样式语言为语义 HTML 文档添加动态、富有创意且用户友好的样式。

刚接触 CSS 的 Web 开发人员通过练习基本的 CSS 选择器语法、属性、@ 规则和伪类/元素来开始学习样式。

了解这些 CSS 功能足以构建一个易于访问、美观、用户友好的现代网站，但要了解 CSS 的全部潜力，还有很多东西需要学习。

当 Web 开发人员广泛使用 CSS 设计网站前端并尝试使用 CSS 时，他们经常会发现新功能、解决方法和技术，这些功能、解决方法和技术可以帮助他们提高工作效率并提高 CSS 技能。

这些技巧和窍门可帮助每个人高效地实施快速、有吸引力的 CSS 纯解决方案来解决设计问题，而无需编写基于 JavaScript、SVG 和 HTML Canvas 的实现。例如，现在 Web 开发人员无需编写一行 JavaScript 代码即可创建快速、轻量级的倒计时器。

在本文中，我将介绍10个 CSS 技巧和窍门，帮助您充分利用 CSS，高效地构建现代 Web 界面，而无需使用 JavaScript、SVG、HTML Canvas 或集成繁重的第三方 UI 工具包和库。练习这些技巧可以扩展您的 CSS 掌握能力！

1. 让元素居中的最简单方法

正确放置 UI 元素是设计高质量界面的必备条件。在大多数情况下，Web 开发人员必须将子元素垂直和水平居中。由于布局系统和定位功能不同，CSS 无法提供单一属性来让任何元素居中。

在响应式设计流行之前，Web 开发人员使用负边距技巧来让 HTML 元素居中——现在，您会发现使用各种现代和旧 CSS 属性让元素居中的无数方法，但在 CSS 中让元素居中的最简单方法是什么？

现代 CSS 网格功能支持使用 place-items 简写属性让网格块居中，因此我们可以使用它来让子元素居中，如下所示：

您可以通过使用 calc() 和 mod() CSS 数学函数调整全局计时器变量的结束值来创建显示分钟、秒和毫秒的倒计时器。

4. 不使用 JavaScript 自定义原生表单控件

浏览器将 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 嵌入元素。

5. 使用渐变填充创建花式框角

众所周知的 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>

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 解决方案

10. 无类 CSS 样式技术

每个 Web 开发人员都有使用类开始样式的习惯。使用组织良好的类无疑是创建干净、易于管理的网页的良好做法。

但是，创建类对于创建极简网页来说并不是强制性的——无类 Web 设计概念激励我们使用语义 HTML 标签来编写 CSS：

nav {}ul {}ul li {}summary {}

:not()、:has() 和 :is() 等功能选择器（以伪类形式实现）可帮助我们避免在无类样式表中选择器中出现重复片段，从而编写简洁的代码。

例如，以下代码片段使用 :not() 为导航菜单项（最后一个除外）添加了颜色样式：

<nav>  <ul>    <li>Home</li>    <li>Services</li>    <li>About</li>    <li>Contact</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>Theme 1</label>  <label><input type="radio" value="t2" name="t">Theme 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() 功能选择器帮助我们为逗号分隔的长选择器编写替代的简写选择器：

/* old-fashioned */section h1, section h2, section h3, section h4, section h5, section h6 {  color: darkcyan;}/* modern */section :is(h1, h2, h3, h4, h5, h6) {  color: darkcyan;}

总结

以上就是我今天想与你分享的全部内容，希望这些技能可以帮助您编写更简洁、更高效的CSS代码。

本文链接：http://www.28at.com/showinfo-26-103165-0.html聊一聊 CSS 的十个技巧和窍门

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Lodash 的又一方法被替代了，探索 JS 新特性 Object.groupBy

下一篇：快速了解 CSS light-dark 函数及其应用

标签：

热门焦点

对标苹果的灵动岛华为带来实况窗功能

继苹果的灵动岛之后，华为也在今天正式推出了“实况窗”功能。据今天鸿蒙OS 4.0的现场演示显示，华为的实况窗可以更高效的展现出实时通知，比如锁屏上就能看到外卖、打车、银行
SpringBoot中使用Cache提升接口性能详解

环境：springboot2.3.12.RELEASE + JSR107 + Ehcache + JPASpring 框架从 3.1 开始，对 Spring 应用程序提供了透明式添加缓存的支持。和事务支持一样，抽象缓存允许一致地使用各
之家push系统迭代之路

前言在这个信息爆炸的互联网时代，能够及时准确获取信息是当今社会要解决的关键问题之一。随着之家用户体量和内容规模的不断增大，传统的靠"主动拉"获取信息的方式已不能满足用
三言两语说透柯里化和反柯里化

JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是两种很有用的技术，可以帮助我们写出更加优雅、泛用的函数。本文将首先介绍柯里化和反柯里化的概念、实现原理和应用
三分钟白话RocketMQ系列—— 如何发送消息

我们知道RocketMQ主要分为消息生产、存储（消息堆积）、消费三大块领域。那接下来，我们白话一下，RocketMQ是如何发送消息的，揭秘消息生产全过程。注意，如果白话中不小心提到相关代
为什么你不应该使用Div作为可点击元素

按钮是为任何网络应用程序提供交互性的最常见方式。但我们经常倾向于使用其他HTML元素，如 div span 等作为 clickable 元素。但通过这样做，我们错过了许多内置浏览器的功能。
猿辅导与新东方的两种“归途”

作者｜卓心月出品｜零态LT（ID：LingTai_LT）如何成为一家伟大企业？答案一定是对“势”的把握，这其中最关键的当属对企业战略的制定，且能够站在未来看现在，即使这其中的
东方甄选单飞：有些鸟注定是关不住的

文/彭宽鸿编辑/罗卿东方甄选创始人俞敏洪带队的“7天甘肃行”直播活动已在近日顺利收官。成立后一年多时间里，东方甄选要脱离抖音自立门户的传闻不绝于耳，“7
荣耀Magic4 至臻版首创智慧隐私通话强劲影音系统

2022年第一季度临近尾声，在该季度内，许多品牌陆续发布自己的最新产品，让大家从全新的角度来了解当今的手机技术。手机是电子设备中，更新迭代十分迅速的一款产品，基

聊一聊 CSS 的十个技巧和窍门

1. 让元素居中的最简单方法

4. 不使用 JavaScript 自定义原生表单控件

5. 使用渐变填充创建花式框角

10. 无类 CSS 样式技术

总结

对标苹果的灵动岛华为带来实况窗功能

SpringBoot中使用Cache提升接口性能详解

之家push系统迭代之路

三言两语说透柯里化和反柯里化

三分钟白话RocketMQ系列—— 如何发送消息

为什么你不应该使用Div作为可点击元素

猿辅导与新东方的两种“归途”

东方甄选单飞：有些鸟注定是关不住的

荣耀Magic4 至臻版首创智慧隐私通话强劲影音系统

最新推荐

猜你喜欢

热门推荐

相关资讯