新编
newcs.net (英语) 编号 : xz 迪斯科尔 编号 : 微博
一个仅使用 HTML 写入现代网站的无级 CSS 框架 。 它的重量 ~4.5克b 宽度。 。 。 .
看看这个演示 newcs.net (英语),或快速启动指南 新cs.net/用户它在npm作为 @exampledev/new.css。 。 。 .
维塞尔无法快速的 CDN 发送字体 间 使用 xz/吨数,所以实际上没有增加 在你的页面.
当然,有一个黑暗模式。 它根据浏览器的偏好自动应用了光/暗主题.
它支持使用 CSS 变量的自定义色彩主题和字体. 例如,检查终端主题: newcs.net/主题/终点/
new.css是一个来自 页:1。 。 。 .
目录
使用量
这是您的配置 :
HTML 语言
将此代码添加到您的末尾 <head>数字 :
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css">
qq new.css 最适合字体 间,该行上方的进口。 如果您不喜欢添加字体, 请使用此行 :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css">
无
或者,如果你喜欢npm:
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 后加载一个二级样式工作表,您可以覆盖这些变量。 以下是默认主题:
默认主题
@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>和文本选择背景
使用量
- 在
:root。这里有示例主题文件: 锅炉板.css - 如果您想要导入自定义字体, 请将
@import标记在:root键。 许多开源字体可用于 xz/吨数。 。 。 . - 引用您的新样式表 之后 新的. cs 在您的
<head>。这里有一个例子<head>数字 :
<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/[email protected]/new.min.css">">
<link rel="stylesheet" href="https://example.com/MY-CUSTOM-THEME.css">
</head>
移动前主题
这里有两个带有CDN链接的额外主题. 可以随意使用或编辑它们!
夜间
<link rel="stylesheet" href="https://newcss.net/theme/night.css">
预览时间 newcs.net/主题/夜间/
终端
<link rel="stylesheet" href="https://newcss.net/theme/terminal.css">
预览时间 newcs.net/主题/终点/
发起人
特别 谢谢
