sanitize.css 使用与技术文档

sanitize.css 是一个 CSS 库，为 HTML 元素提供跨浏览器的默认样式和有用的默认设置。本文档将详细介绍如何安装和使用 sanitize.css，以及如何使用其 API 和安装方式。

1. 安装指南

要安装 sanitize.css，可以使用 npm 包管理器。在命令行中运行以下命令：

npm install sanitize.css --save

确保在项目的 webpack.config.js 文件中配置了正确的加载器：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

2. 项目的使用说明

使用 sanitize.css 非常简单。只需在 HTML 文件中添加以下链接：

<link href="https://cdn.skypack.dev/sanitize.css" rel="stylesheet" />

此外，如果你需要针对表单、文档、排版、减少动画等特定需求，还可以分别引入以下样式表：

• Forms CSS:

  <link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
  

• Assets CSS:

  <link href="https://unpkg.com/sanitize.css/assets.css" rel="stylesheet" />
  

• Typography CSS:

  <link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
  

• Reduce Motion CSS:

  <link href="https://unpkg.com/sanitize.css/reduce-motion.css" rel="stylesheet" />
  

3. 项目API使用文档

sanitize.css 的 API 主要涉及 CSS 的样式定义。以下是一些主要的样式特性：

• 默认的 box-sizing 设置为 border-box:

  *, ::before, ::after {
    box-sizing: border-box;
  }
  

• 背景默认不重复:

  *, ::before, ::after {
    background-repeat: no-repeat;
  }
  

• 伪元素继承文本装饰和垂直对齐:

  ::before,
  ::after {
    text-decoration: inherit;
    vertical-align: inherit;
  }
  

• 等等。

具体使用时，根据项目需求引入相应的样式表，并按照 CSS 的标准语法进行编写。

4. 项目安装方式

除了使用 npm 安装外，你也可以从以下地址直接下载最新版本的 sanitize.css 文件：

https://csstools.github.io/sanitize.css/latest/sanitize.css

然后，在 HTML 文件中通过 <link> 标签引入下载的 CSS 文件。

以上是 sanitize.css 的安装、使用和 API 的基本介绍。通过本文档，用户可以更好地了解和使用这个 CSS 库，以实现更一致和美观的页面样式。