《Universal CSS 安装与配置指南》

陈予恬Keene

于 2025-04-16 10:32:35 发布

阅读量821

点赞数 28

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00898/article/details/147271051

《Universal CSS 安装与配置指南》

universal.css The only CSS you will ever need 项目地址: https://gitcode.com/gh_mirrors/un/universal.css

1. 项目基础介绍

Universal CSS 是一个旨在通过提供一组通用的 CSS 类来简化网页样式设计的开源项目。它的核心思想是摒弃传统的 CSS 预处理器和复杂的命名规则，使用自文档化的类名来直接应用于 HTML 元素上。这样做的目的是减少开发者的工作负担，提高开发效率。

该项目主要使用的编程语言是 CSS，辅以 JavaScript 来实现一些动态生成样式表的功能。

2. 项目使用的关键技术和框架

CSS: 作为网页样式设计的主要技术，Universal CSS 提供了丰富的 CSS 类，这些类覆盖了常见的样式属性。
JavaScript: Universal CSS 的 universalCssGenerator.js 脚本使用 JavaScript 实现在浏览器中动态生成样式表的功能。
CDN: 项目利用 CDN（内容分发网络）来分发其 CSS 文件，确保了快速加载和全球访问。

3. 项目安装和配置

准备工作

在开始安装之前，请确保你的环境中已经安装了以下基础工具：

HTML 文档编辑器（如：Visual Studio Code, Sublime Text 等）
网络连接，用于下载 CDN 链接中的资源

安装步骤

创建 HTML 文档

首先，创建一个新的 HTML 文档，或者使用现有的文档。
引入 Universal CSS

在 HTML 文档的 <head> 部分添加以下代码，以引入 Universal CSS 的 CDN 链接：
```
<link rel="stylesheet" href="https://cdn.rawgit.com/marmelab/universal.css/master/universal.css" />
```

使用 Universal CSS 类

在 HTML 文档中，将元素的类名替换为 Universal CSS 提供的通用类名。例如，如果你之前使用了以下 CSS：

.sidebar {
    border-top: 1.04em dotted lightgrey;
    border-bottom: 12px solid cornflowerblue;
    border-top-right-radius: 1.60em;
    padding: 5px;
    margin-left: 10px;
    background-color: fuchsia;
}

则可以替换为：

<div class="border-top-width-1-dot-04em border-top-style-dotted border-top-color-lightgrey border-bottom-width-12px border-bottom-style-solid border-bottom-color-cornflowerblue border-top-right-radius-1-dot-60em padding-5px margin-left-10px background-color-fuchsia">
    <!-- sidebar content -->
</div>

使用 JavaScript 生成器（可选）

如果不希望用户下载较大的 CSS 文件，可以使用 JavaScript 生成器。在 HTML 文档的 <body> 部分底部添加以下代码：
```
<script src="https://cdn.rawgit.com/marmelab/universal.css/master/universalCssGenerator.js"></script>
```
这将在浏览器中动态生成所需的样式。