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

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

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

导读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 函数及其应用

标签：

热门焦点

CSS单标签实现转转logo

转转品牌升级后更新了全新的Logo，今天我们用纯CSS来实现转转的新Logo，为了有一定的挑战性，这里我们只使用一个标签实现，将最大化的使用CSS能力完成Logo的绘制与动画效果。新logo
一篇聊聊Go错误封装机制

%w 是用于错误包装（Error Wrapping）的格式化动词。它是用于 fmt.Errorf 和 fmt.Sprintf 函数中的一个特殊格式化动词，用于将一个错误（或其他可打印的值）包装在一个新的错误中。使
一文搞定Java NIO，以及各种奇葩流

大家好，我是哪吒。很多朋友问我，如何才能学好IO流，对各种流的概念，云里雾里的，不求甚解。用到的时候，现百度，功能虽然实现了，但是为什么用这个？不知道。更别说效率问题了~下次再遇到，
为什么你不应该使用Div作为可点击元素

按钮是为任何网络应用程序提供交互性的最常见方式。但我们经常倾向于使用其他HTML元素，如 div span 等作为 clickable 元素。但通过这样做，我们错过了许多内置浏览器的功能。
消费结构调整丨巨头低价博弈，拼多多还卷得动吗？

来源：征探财经作者：陈香羽随着流量红利的退潮，电商的存量博弈越来越明显。曾经主攻中高端与品质的淘宝天猫、京东重拾“低价”口号。而过去与他们错位竞争的拼多多，靠
一条抖音4亿人围观 ! 这家MCN比无忧传媒还野

作者：Hiu 来源：互联网品牌官01 擦边少女空降热搜，幕后推手曝光被网友誉为“纯欲天花板”的女网红井川里予，近期因为一组哥特风照片登上热搜，引发了一场互联网世界关于
郭明錤称华为和江淮汽车合作开发问界MPV，定价100万左右、计划明年量产

8 月 1 日消息，郭明錤今天在 Medium 平台发布博文，称华为正在和江淮汽车合作，开发售价在 100 万元的问界 MPV，预计在 2024 年第 2 季度量产，销量目标为
三星电子Q2营收60万亿韩元存储业务营收同比仍下滑超过50%

7月27日消息，据外媒报道，从三星电子所发布的财报来看，他们主要利润来源的存储芯片业务在今年二季度仍不乐观，营收同比仍在大幅下滑，所在的设备解决方案
英特尔Xe HPG游戏显卡：拥有512EU，单风扇版本

据10 月 30 日外媒 TheVerge 消息报道，英特尔 Xe HPG Arc Alchemist 的正面实被曝光，不仅拥有 512 EU 版显卡，还拥有 128EU 的单风扇版本。另外，这款显卡 PCB

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

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

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

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

10. 无类 CSS 样式技术

总结

CSS单标签实现转转logo

一篇聊聊Go错误封装机制

一文搞定Java NIO，以及各种奇葩流

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

消费结构调整丨巨头低价博弈，拼多多还卷得动吗？

一条抖音4亿人围观 ! 这家MCN比无忧传媒还野

郭明錤称华为和江淮汽车合作开发问界MPV，定价100万左右、计划明年量产

三星电子Q2营收60万亿韩元存储业务营收同比仍下滑超过50%

英特尔Xe HPG游戏显卡：拥有512EU，单风扇版本

最新推荐

猜你喜欢

热门推荐

相关资讯