岩石教程

Normalize.css

2024-06-26 20:10:20 477
Normalize.css 是一个现代的 CSS 重置库，旨在让不同浏览器呈现的元素更一致，并符合现代标准。与传统的 CSS 重置不同，Normalize.css 保留了有用的默认值，只修复了需要统一的样式。

特点

  • 一致性：使不同浏览器对 HTML 元素的渲染更加一致。
  • 模块化：可以选择性地包含或排除某些模块。
  • 现代化：针对现代浏览器进行优化，同时兼容老旧浏览器。
  • 可定制：易于定制和扩展，适应项目需求。
  • 小巧高效：体积小，不会显著增加页面加载时间。

安装方式

使用 npm 安装

npm install normalize.css

或者通过 CDN 引入

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

使用示例

在 HTML 文件中引入 Normalize.css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Normalize.css Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>
<body>
  <h1>Hello, Normalize.css!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

更多用法

  • 定制化：下载源码，根据项目需求定制样式。
  • 模块化使用：选择性地包含或排除某些样式规则。

例如，假如只需要特定部分的样式，可以从源文件中摘取相关部分：

/* Example: Only include the normalize.css styles for form elements */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
}

官方资料