# @exampledev/new\.css 中文文档

规范地址：https://npmcn.com/package/%40exampledev/new.css/

版本：1\.1\.3
npm 元数据更新时间：2026-09-04T00:41:46.437Z
中文译文更新时间：2026-11-14T07:00:55.733Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40exampledev/new.css
原文对照：https://npmcn.com/package/%40exampledev/new.css/?lang=original
项目主页：https://newcss.net/
源码仓库：https://github.com/xz/new.css

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：36.5 kB，12 个文件
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2020-05-18T15:25:05.891Z
- 最新版本发布：2020-05-20T02:22:06.220Z
- 近 30 天下载量：2180（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）

## 中文简介

一个仅使用 HTML 写入现代网站的无级 CSS 框架 .

## 安装

```sh
npm install @exampledev/new.css
```

也可以使用：`pnpm add @exampledev/new.css`、`yarn add @exampledev/new.css`、`bun add @exampledev/new.css`

## README

# 新编

**[newcs.net (英语)](https://newcss.net/) 编号 : [xz 迪斯科尔](https://discord.gg/hhuuC4w)** 编号 : **[微博](https://twitter.com/example_dev)**

一个仅使用 HTML 写入现代网站的无级 CSS 框架 。 它的重量 **~4.5克b 宽度**。 。 。 .

看看这个演示 [newcs.net (英语)](https://newcss.net/),或快速启动指南 [新cs.net/用户](https://newcss.net/usage/)它在npm作为 `@exampledev/new.css`。 。 。 .

[维塞尔](https://vercel.com/?utm_source=xz&utm_campaign=new.css)无法快速的 CDN 发送字体 [间](https://rsms.me/inter) 使用 [xz/吨数](https://github.com/xz/fonts),所以实际上没有增加 在你的页面.

当然,有一个黑暗模式。 它根据浏览器的偏好自动应用了光/暗主题.

它支持使用 CSS 变量的自定义色彩主题和字体. 例如,检查终端主题: [newcs.net/主题/终点/](https://newcss.net/theme/terminal/)

new.css是一个来自 [页:1](https://xz.style/)。 。 。 .

## 目录

-   [使用量](https://npmcn.com/package/%40exampledev/new.css/#readme-usage)
-   [使用大小写](https://npmcn.com/package/%40exampledev/new.css/#readme-use-cases)
-   [细节](https://npmcn.com/package/%40exampledev/new.css/#readme-details)
-   [主题](https://npmcn.com/package/%40exampledev/new.css/#readme-themes)
    -   [自定义](https://npmcn.com/package/%40exampledev/new.css/#readme-customizing)
    -   [图例](https://npmcn.com/package/%40exampledev/new.css/#readme-legend)
    -   [使用量](https://npmcn.com/package/%40exampledev/new.css/#readme-usage)
-   [预制主题](https://npmcn.com/package/%40exampledev/new.css/#readme-pre-made-themes)
    -   [夜间](https://npmcn.com/package/%40exampledev/new.css/#readme-night)
    -   [终端](https://npmcn.com/package/%40exampledev/new.css/#readme-terminal)
-   [特别 谢谢](https://npmcn.com/package/%40exampledev/new.css/#readme-special-thanks)

## 使用量

这是您的配置 :

### HTML 语言

将此代码添加到您的末尾 `<head>`数字 :

```html
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
```

  

> qq new.css 最适合字体 [间](https://rsms.me/inter),该行上方的进口。 如果您不喜欢添加字体, 请使用此行 :

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
```

### 无

或者,如果你喜欢npm:

1.  `npm -i @exampledev/new.css`

## 使用大小写

-   一个枯萎的博客
-   正在收集您最常用的链接
-   制作一个简单的"关于我的"网站
-   渲染标记下生成的 HTML

## 细节

### 元素指南

如何使用一些新.css的语义HTML功能.

-   `button`
    -   将按钮包入一个 `<a>` 标记以使其成为链接.
-   代码
    -   对于内置代码, 使用 `<code>`。 。 。 .
    -   对于代码块, 使用 `<pre>`。 。 。 .
    -   对于键盘输入, 使用 `<kbd>`, (中文(简体) ),
    -   但是,没有理由 巢代码标记在对方内部, `<code>` 财务报告和审定财务报表 `<pre>` 如果你把它们嵌入其中,它们会重置它们.
-   `header`
    -   **只使用一个 `<header>` 在你的顶上 `<body>`来啊!**
    -   创建一个大而稍暗的页眉.

以下是对您浏览器基本 HTML 添加的改进 new.css .

全部更改

-   **全球**
    -   略微增加所有文本大小
    -   使用较轻的颜色方案
    -   使用 Inter 字体,如果没有可能,则使用系统字体
    -   将所有边距重新定义为更合理的默认
-   `body`
    -   设置一个合理的最大宽度
    -   将身体元素置于中心,保持左向排列
-   `abbr`
    -   悬浮时的提问标记光标
-   `blockquote`
    -   差值增加
    -   添加了背景颜色
-   `button`
    -   浏览器之间统一显示
    -   看起来像一个真正的按钮
-   `code`
    -   添加了背景颜色
    -   已添加大纲中风
-   `details`
    -   更像按键,背景颜色,并在悬浮时链接光标
-   `h1`– 说吧 –`h6`
    -   统一差值和垫地
    -   已调整字体大小
-   `h1-h3`
    -   添加了薄的底边框线
-   `hr`
    -   已更改为单 1px 线
-   `kbd`
    -   看起来像真的键盘键
-   `mark`
    -   添加补丁
    -   跟着主题的颜色
-   `nav`
    -   元素间添加边距
-   `samp`
    -   含混元素,与 `code`
-   `table`
    -   使细胞更容易辨识的基本造型
        -   横跨所有单元格的边框中风
        -   替换行背景颜色

## 主题

new.css使用10color调色板,可以轻松定制. 这些变量在 `:root` 属性.

### 自定义

通过在您 HTML 的新.css 后加载一个二级样式工作表,您可以覆盖这些变量。 以下是默认主题:

默认主题

```css
@import url('https://fonts.xz.style/serve/inter.css');

:root {
    --nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --nc-font-mono: 'Courier New', Courier, 'Ubuntu Mono', 'Liberation Mono', monospace;
    --nc-tx-1: #000000;
    --nc-tx-2: #1A1A1A;
    --nc-bg-1: #FFFFFF;
    --nc-bg-2: #F6F8FA;
    --nc-bg-3: #E5E7EB;
    --nc-lk-1: #0070F3;
    --nc-lk-2: #0366D6;
    --nc-lk-tx: #FFFFFF;
    --nc-ac-1: #79FFE1;
    --nc-ac-tx: #0C4047;
}
```

### 图例

-   `--nc-font-sans`: 除代码或格式化前所有文字的字体
-   `--nc-font-mono`: 字体为 `<code>`, (中文(简体) ), `<pre>`, (中文(简体) ), `<kbd>`, (中文(简体) ), `<samp>`
-   `--nc-tx-1`: 标题文本颜色
-   `--nc-tx-2`: 正文文本颜色
-   `--nc-bg-1`: 基准背景颜色
-   `--nc-bg-2`: 稍暗的背景颜色
-   `--nc-bg-3`: 即使背景颜色稍暗
-   `--nc-lk-1`: 链接和按钮的动作颜色
-   `--nc-lk-2`: 鼠标徘徊和活动的链接和按钮
-   `--nc-ac-1`: 中央颜色 `<mark>` 和文本选择背景

### 使用量

1.  在 `:root`。这里有示例主题文件: [锅炉板.css](https://newcss.net/theme/boilerplate.css)
2.  如果您想要导入自定义字体, 请将 `@import` 标记在 `:root` 键。 许多开源字体可用于 [xz/吨数](https://github.com/xz/fonts)。 。 。 .
3.  引用您的新样式表 **之后** 新的. cs 在您的 `<head>`。这里有一个例子 `<head>`数字 :

```html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.3/new.min.css">">
    <link rel="stylesheet" href="https://example.com/MY-CUSTOM-THEME.css">
</head>
```

## 移动前主题

这里有两个带有CDN链接的额外主题. 可以随意使用或编辑它们!

### 夜间

```html
<link rel="stylesheet" href="https://newcss.net/theme/night.css">
```

预览时间 [newcs.net/主题/夜间/](https://newcss.net/theme/night/)

![Night theme](https://newcss.net/_assets/night.png)

### 终端

```html
<link rel="stylesheet" href="https://newcss.net/theme/terminal.css">
```

预览时间 [newcs.net/主题/终点/](https://newcss.net/theme/terminal/)

![Terminal theme](https://newcss.net/_assets/terminal.png)

## 发起人

-   [域名](https://domaincord.org/?utm_source=xz&utm_campaign=new.css) (亦为域名讨论组 [这里](https://discord.gg/239EP7G)) (中文(简体) )
-   [维塞尔](https://vercel.com/?utm_source=xz&utm_campaign=new.css)

## 特别 谢谢

-   [牛的樱花](https://github.com/oxalorg/sakura) 介绍我到无阶级CSS
-   [我的黑暗之星](https://mydarkstar.net/) 对于无价建议
-   [维塞尔](https://vercel.com/?utm_source=xz&utm_campaign=new.css) 提名事宜 [页:1](https://xz.style/) 和他们惊人的调色板

  

* * *

  

[![Powered by Vercel](https://vercel-badges.now.sh/powered-by-vercel.svg)](https://vercel.com/?utm_source=xz&utm_campaign=new.css)

## 常见问题

### @exampledev/new\.css 是什么？

一个仅使用 HTML 写入现代网站的无级 CSS 框架 \.

### 如何安装 @exampledev/new\.css？

在项目目录运行 npm install @exampledev/new\.css，或使用 pnpm add / yarn add / bun add。

### @exampledev/new\.css 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/exampledev\_\_new\.css 是否存在。

### @exampledev/new\.css 可以商用吗？

@exampledev/new\.css 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @exampledev/new\.css 的下载量有多少？

根据 npm 官方下载统计，@exampledev/new\.css 在 2026/10/14 – 2026/11/12 这 30 天内被下载 2,180 次，日均约 73 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @exampledev/new\.css 还在维护吗？

最新版本 1\.1\.3 发布于 2020/05/20（6 年前）；至今共发布 6 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/05/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。