让css的权重变得更友好的小技巧-css教程-PHP中文网

首页

web前端

css教程

让css的权重变得更友好的小技巧

青灯夜游

Sep 07, 2018 pm 04:49 PM

在这篇文章中，我将通过一些示例来向大家展示一些CSS的小技巧，让你知道如何使用CSS的级联(cascade)能变得更友好，也减少一些不必要的需求，从而也减少权重上遇到的麻烦。

技巧一：样式总是作为特定属性组合出现

一个很好的例子就是color和bakground-color的组合。除非你只做小调整，不然你需要一起调整他们。当给一个元素添加背景颜色时，它可能不包含任何文本，但可能会有一些子元素。因此，我们一起设置前景色(color)和背景色(background-color)，我们总是可以确定这些元素不会遇到任何易读性和对比问题。下次我们改变背景色时，不需要到处寻找需要修改的文本颜色，因为他们都以一个组合的形式出现在一起。

技巧二：使用动态值，比如currentColor和em等

有时候文本颜色也会使用在其他属性上。比如说border、box-shadow或者SVG图标中的fill上。定义相同颜色有一个替代方案，可以直接使用currentColor。默认情况下，color是可以继承的，你只需要在一个地方修改就可以改变其他属性的颜色。

同样的，给font-size属性使用em单位，允许你只修改:root的font-size就可以改变元素的盒模型大小。

技巧三：使用inherit属性值继承其父元素样式来覆盖UA自带样式。

像button、input这样的表单控件，不同的浏览器都会有自己的样式风格(UA样式)。我们可以使用inherit继承其父元素样式，从而覆盖浏览器的UA样式。

button,
input,
select,
textarea {
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
}

登录后复制

上面示例代码取自sanitize.css、 normalize.css也是这样使用的。如果你不是这样使用，说明你已经...

你也可以尝试在input[type="range"]、input[type="radio"]和input[type="checkbox"]等元素上直接使用前面介绍的currentColor属性自动匹配颜色。或许你不需要改变什么，可以将一个亮色系变成一个暗色系。

技巧四：每当你写CSS时，你想尽可能的回到树形顶部。换句话说，回到:root。

例如，我们的网站有一个侧边栏，希望在这个侧边栏上添加一个简短的个人介绍。其HTML的结构看起来可能会像这样：

<body>
    <main class=“Posts”>
    <aside class=“SideBar”>
        <nav class=“Nav”>
        <p class=“Bio”>

登录后复制

CSS是这样写的：

.Bio {
    font-size: .8em;
    line-height: 1.5;
    color: #888;
}

登录后复制

这样写是能正常工作的，并不存在样式上的问题。但是，侧边栏还有一个导航nav，很有可能他们有一些样式是相同的。在我们这个示例中font-size和color都是相同的。让我们把这些属性从nav和.Bio中提取出来，并且将它们添加到其父元素.SideBar中：

.SideBar {
    font-size: .8em;
    color: #888;
}

登录后复制

事实证明，在.Posts中已经设置了line-height:1.5;。似乎整个页面都使用了相同的行高，那么我们可以将.Bio和.Posts中的line-height移到根元素中：

:root {
    line-height: 1.5;
}

登录后复制

这看起来是一个CSS常识，但他也不会太关注兄弟元素定义同样的事情。这也让你发现，有一些代码产生重复。其实这并不可怕，因为我们只需要花点时间重新重构代码，但这样保持了CSS的代码处理健康状态。

在树支上写样式，而不应该在树叶上写样式

以上是让css的权重变得更友好的小技巧的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7536

CakePHP 教程

1379

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。