npm 包 reset-this 使用教程

在 Web 开发中，处理浏览器默认样式是很烦恼的一件事情，这个时候 reset 样式就派上了用场，reset-this 作为一款 reset 样式的 npm 包，它提供了轻量、简单、易用的 CSS reset 方案，可以快速规避浏览器默认样式的影响。本文将介绍如何安装和使用 reset-this。

安装 reset-this

通过 npm 命令进行安装：

--- ------- ----------

使用 reset-this

在页面中引用 reset-this，可以选择将 reset-this 中的样式直接复制到项目的 CSS 文件中，也可以直接引用 reset-this 提供的 CSS 文件。

复制 reset-this 的样式到项目中

将 reset-this/src/reset.css 文件的样式复制到项目中的 CSS 文件中。

在 HTML 中直接引入 reset-this 提供的 CSS 文件

在 HTML 的 head 中引用 reset.css 文件：

------
    ----- ---------------- --------------- ------------------------------------------------
-------

代码示例

在代码中使用 reset-this 将会让我们的开发更加高效快捷：

--------- -----
------
    ------
        ----- ----------------
        ----- --------------- ---------------------------- -----------------
        ----------------- ----------
        ----- ---------------- --------------- ------------------------------------------------
        -------
            -- ------- --
            ---- -
                ----------------- --------
            -
            -- -
                ----------- -------
                ---------- -----
            -
        --------
    -------
    ------
        -------------- -------
        -------------
        ----
            ----------------
            ----------------
            ----------------
        -----
        ---- ---------------- --- ------
    -------
-------

最终效果如下：

总结

reset-this 是一款非常好用的 reset 样式工具，其提供了简单易用的 CSS reset 方案，能够快速规避浏览器默认样式的影响。在前端开发过程中，使用 reset-this 将会极大地提高开发效率和开发质量。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005566781e8991b448d33bc

阅读全文

猜你喜欢

  • npm 包 angular-2-daterange-picker 使用教程

    简介 angular-2-daterange-picker 是一个基于 Angular 2 框架的日期选择器控件，支持选择日期范围。使用该控件可以方便地在 Angular 2 项目中实现日期选择的功能...

    2 年前
  • npm 包 article-parser-zic 使用教程

    简介 在前端开发中，我们经常需要从页面中提取出文章内容，通常需要使用正则表达式进行匹配提取。而 npm 包 article-parser-zic 的出现，使得文章内容的提取变得更加简便。

    2 年前
  • npm 包 deferral.js 使用教程

    什么是 deferral.js？ Deferral.js 是一个用来支持 Node.js 异步编程的 npm 包。它允许你将异步调用添加到队列中，并且根据需要执行它们。

    2 年前
  • npm 包 flitwick 使用教程

    在前端开发中，我们通常会使用各种 npm 包来辅助我们的开发。其中一个非常有用的 npm 包就是 flitwick。flitwick 是一个可以帮助我们在前端代码中实现面向接口编程的工具。

    2 年前
  • npm 包 iview-unfazed 使用教程

    在前端开发中，我们经常需要使用一些现成的组件库来简化开发流程。iview 是一个非常流行的 Vue 组件库，而 iview-unfazed 是一个基于 iview 的前端组件库。

    2 年前
  • NPM 包 react-combo-box 使用教程

    React Combo Box 是一个 React UI 组件，用于创建带有自动完成搜索功能的下拉列表。在本文中，我们将学习如何使用 NPM 包 react-combo-box 并了解其主要功能。

    2 年前
  • npm 包 social-share-magnolia 使用教程

    社交媒体分享是现代网站必要的一部分，让用户可以方便地分享他们喜欢的内容。而 npm 包 social-share-magnolia 是一款轻量级的社交媒体分享插件，可以帮助前端开发者快速地实现社交媒体...

    2 年前
  • npm 包 angular-yii2-model 使用教程

    在前端开发中，我们经常使用一些框架和库来提高开发效率。其中，Angular 和 Yii2 都是比较流行的前端和后端框架。而 npm 包 angular-yii2-model 正是将两者结合起来的一个工...

    2 年前
  • npm 包 compressed-map 使用教程

    在前端开发工作中，我们通常需要处理大量的数据信息。为了更加高效地管理这些数据，我们使用了各种数据结构来进行存储和维护。其中，Map 是一种非常常用的存储数据的结构。

    2 年前
  • npm 包 cu-ng2-dragula 使用教程

    介绍 cu-ng2-dragula 是一个基于 drag and drop 的 Angular 2+ 拖放库。它是开源项目 ng2-dragula 的一个扩展，它提供了更多的功能和自定义选项。

    2 年前
  • npm 包 manifest-validator 使用教程

    npm 是 Node.js 的包管理工具，它的强大之处在于可以轻松地安装和管理大量的第三方模块。然而，由于每个模块的依赖关系和版本不同，使用 npm 安装模块并不总是易如反掌。

    2 年前
  • npm 包 sinjs 使用教程

    前言 npm 正是如火如荼的发展，成为了前端开发中必不可少的资源库。在这个时代背景下，各种优秀的 npm 包层出不穷。本文我们将带大家了解一款常用于数学运算的 npm 包 -- sinjs。

    2 年前
  • npm包db-dump使用教程

    前言 在前端开发中，我们经常需要使用到数据库。对于一些小型的应用程序，使用 SQLite 或者 IndexedDB 等本地数据库就可以满足需求。但是对于一些大型的应用程序，我们需要使用一些更加强大的数...

    2 年前
  • npm 包 module-hot-downloader 使用教程

    什么是 module-hot-downloader module-hot-downloader 是一个用于前端代码热更新的 npm 包。它基于 webpack 的 HMR（Hot Module Rep...

    2 年前
  • npm 包 react-simple-theme 使用教程

    简介 react-simple-theme 是一个小型的 npm 包，致力于为 React 应用程序提供一种简单且易于使用的主题定制方案。该包包含了多个预置的主题，既可以直接使用，也可以进行自定义调整...

    2 年前
  • npm 包 hyper-monochrome 使用教程

    在前端开发过程中，经常需要使用各种 npm 包来加快开发效率，其中一个常用的包是 hyper-monochrome。这个包提供了一种简单的方式来更改终端颜色，让终端输出更加美观。

    2 年前
  • npm 包 @spectre.js/spectre.js 使用教程

    随着前端技术的发展，越来越多的前端框架和库被开发出来，为我们开发网站应用带来了极大的便利。其中，@spectre.js/spectre.js 是一个非常实用的 npm 包，它提供了一套优秀的前端 UI...

    2 年前
  • npm 包 @galeanne-thorn/gemini-stage 使用教程

    简介 @galeanne-thorn/gemini-stage 是一款前端自动化测试工具。它基于 gemini 开发，专注于解决 gemini 配置和使用上的痛点问题。

    2 年前
  • npm 包 @galeanne-thorn/gemini-core 使用教程

    在前端开发中，我们经常会使用各种 npm 包来提高我们工作效率和代码质量。本文介绍的 npm 包 @galeanne-thorn/gemini-core 就是一个能够帮助开发者快速开发 web 应用的...

    2 年前
  • npm 包 dukgyp 使用教程

    引言 在前端开发领域，npm 是一个非常重要的工具和资源库。npm 提供了许多的包，可以帮助我们简化前端开发的流程。在本文中，我们会详细介绍一个非常有用的 npm 包 dukgyp，并提供它的使用教程...

    2 年前

相关推荐

    暂无文章