使用原生 HTML 样式设计你的下一个博客。无需 CSS。😵 new.css new.css

2025-06-10

用原生 HTML 来设计你的下一个博客。无需 CSS。😵

新的.css

新的.css

为了给您的网站添加样式，我们需要一种叫做 CSSHTML。

...从来没有人这么说过。

但如果我们实现了呢？当然，我们的浏览器能够理解层叠样式表 (CSS)，并能为 HTML 元素添加样式。它不能仅仅使用 HTML 来创建元素并同时为它们添加样式。

让我们来看一个极端的例子。你需要快速开发一篇简单的个人博客文章。你通常会寻找一个框架/库或一些模板来开始。但是，你会发现，在那些可以用最基本的框架完成的东西上添加越繁重的东西，你的实现和网站性能都会变得有点令人畏惧。所以，我们倾向于使用简单的 HTML 来构建内容/结构，并使用 CSS 来设置样式。

XZ的伙计们利用无类 CSS概念做了一些东西，通过这个概念，你只需要编写所需的 HTML 语法，你的样式就会自动应用。

这是什么黑魔法吗？不。这是一个大约 4.5kb 的框架……new.css。

而且，它不仅仅是一个 CSS 框架😌

那么，这到底是怎么回事？你每次在项目中做样式的时候都需要用到它吗？不，不，不！

new.css是一个无类 CSS 框架，仅使用 HTML即可编写现代网站。

这对于小型项目、作品集网站或个人博客文章等不需要大量 UI 定制的项目尤其有用。此外，即使你真的讨厌写 CSS（无论出于什么原因，因为理想情况下你不应该 ಠಿ_ಠ），你也会发现这个插件非常容易上手。

new.css 专注于语义化的 HTML，使其不再那么重要。您只需编写完整的 HTML 代码，就能得到一个美观的网页。

好了，介绍就到这里。我知道你对做东西很感兴趣，而不是读完我故意写得那么长的这句话。

让我们来设计一个没有任何样式的网页吧！🥷

写下上面的语句时，我感觉自己像个忍者。我们将代码如下（点击下方的 HTML 按钮查看完整结果）：

那么，谁准备好再次爱上 HTML 了？

忍者 GIF

你就是忍者！

在我们开始编写 HTML 代码之前，我们需要添加 new.css 样式表，它实际上就像我们博客样式的“大脑”。

在结束标签之前<head>，添加以下几行：



<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">
Enter fullscreen mode Exit fullscreen mode

第一个是默认字体（例如 Inter）的 CSS 文件。后者是用于添加相关样式的实际样式表。

如果你想获取我之前用来让它看起来有点呆板的终端主题，可以通过添加另一个<link>指向 的主题来实现https://newcss.net/theme/terminal.css。好的，现在我们准备好了。

-> 🐱‍💻 制作页眉和博客标题

博客标题

在您最喜欢的编辑器（或像CodePen这样的在线编辑器）中，使用emmet生成<header>.

接下来，我们来创建博客的标题部分。我们使用常规<h1>标签作为​​标题，使用<p>标签作为副标题。其他标签可以根据您的喜好使用。因此，我添加了<a>指向我的About.me页面的超链接。

要添加任何间距（我们在 CSS 中称为margin或padding空间），只需添加换行符标签<br>。

到目前为止的代码：



<header>Welcome to a webpage written entirely in Vanilla <strike>JS</strike> HTML.</header>

<!-- Heading -->
<h1>THE ROCKET BLOG FROM THE FUTURE 🚀</h1>
<p>My thoughts and ideas on rockets and the science behind them. <a href="https://about.me/vaibhav_khulbe" target="_blank">Learn more</a>.</p>
<br>
Enter fullscreen mode Exit fullscreen mode

-> 🐱‍💻 制作实际的文章卡片

文章卡片

这一切都取决于你的创造力以及你对 HTML 不同元素的了解程度。这绝不是一个完美的卡片布局。我们需要记住，我们在这里只使用 HTML 代码来创建它，因此我们对 CSS 没有任何控制权。

让我们来分解一下这张不太复杂的卡片。首先，我们有文章图片、标签、文章标题、描述，以及最后一个可以打开完整文章的按钮。

我们添加以下代码来实现这一点：



<img src="https://images.pexels.com/photos/796206/pexels-photo-796206.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Space shuttle"/>
<kbd>FEATURED</kbd>
<h4><a href="#">Lorem ipsum dolor sit, amet consectetur adipisicing elit</a></h4>
<p>Optio, beatae! Aut quis id voluptate ullam repellendus. Et sit, ipsa, non consequuntur magnam quaerat temporibus at officiis ab, expedita molestiae liber...</p>
<a href="#"><button><b>READ MORE</b></button></a>
Enter fullscreen mode Exit fullscreen mode

我使用了来自Pexels的图片，这是一个非常棒的图片素材资源，我们可以免费使用。为了添加标签，我使用了<kbd>代表键盘输入元素的标签。它通常用于表示键盘按键，例如shift。

<a>注意，我们在 里面添加了一个锚标签<h4>，这样文章标题就可以点击并重定向到新位置。在演示中，它只是#。 也一样<button>。

我们的第一张文章卡片应该已经启动并运行了！🕺

-> 🐱‍💻 添加卡片破坏元素

卡牌破损元素

这两个元素周围都有红色边框。

第一个是表示的详细信息披露元素<details>。当您最初需要隐藏信息，并且只有点击该<summary>元素才能查看完整信息时，这个元素非常有用。您可以将任何其他 HTML 元素与 放在一起<summary>。为了好玩，我使用了 GIF :')



<details>
    <summary>What was the secret behind this mission?</summary>
    <img src="https://media.giphy.com/media/NdKVEei95yvIY/giphy.gif" alt="Secret GIF">
    <p>Okay, go watch The Office.</p>
</details>
Enter fullscreen mode Exit fullscreen mode

下一个是 所代表的常规引号元素<blockquote>。



<blockquote>
  “The Earth is the cradle of humanity, but mankind cannot stay in the cradle forever.” <i> - Konstantin Tsiolkovsky</i>
</blockquote>
Enter fullscreen mode Exit fullscreen mode

这仅包含来自某个来源的一句话。请注意使用 来<i>将名称格式化为斜体。

搞定了！不用写 CSS 感觉怎么样？😜

下一步去哪里？🤔

如果你问我，我会说这可以用来快速轻松地制作网页。但我不会在个人或专业项目中经常使用它，因为首先，我热爱 CSS；其次，我需要大量的样式自定义。谁不喜欢居中元素呢！😉

  • 继续吧，如果你可以为这个出色的框架做出贡献：

GitHub 徽标 xz / new.css

一个无类 CSS 框架，仅使用 HTML 编写现代网站。

新的.css

不和谐 GitHub 星标

新的.css

一个无类 CSS 框架，仅使用 HTML 编写现代网站。它的大小为4.8kb。

它所做的就是设置一些合理的默认值，并让你的 HTML 代码看起来更合理。它非常适合：

  • 一个极其简单的博客
  • 收集您最常用的链接
  • 制作一个简单的“关于我”网站
  • 渲染 markdown 生成的 HTML

演示：newcss.net

目录

  • 用法
  • 主题
    • 主题库
    • 自定义主题
  • 常问问题
  • 使用 new.css 制作
  • 赞助商
  • 支持

用法

HTML

将此行添加到 HTML 的末尾<head>：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">
Enter fullscreen mode Exit fullscreen mode

如果您也喜欢Inter字体（推荐），请添加以下行：

<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
Enter fullscreen mode Exit fullscreen mode

npm

npm i @exampledev/new.css
Enter fullscreen mode Exit fullscreen mode

纱

yarn add @exampledev/new.css
Enter fullscreen mode Exit fullscreen mode

主题

new.css 使用了一个可以轻松自定义的调色板。这些调色板在 :root 属性中声明为 CSS 变量。

主题库

…
在 GitHub 上查看

我们建议您清理一下风扇？或者耳塞。😭

来源：https://t.co/qrge5lELZL #DevHumour #Developer #Programming pic.twitter.com/VJrehlTc4t

— 英国微软开发者 (@msdevUK) 2020 年 6 月 9 日

📫 订阅我的每周开发者新闻通讯 📫

附言：从今年开始，我决定在 DEV Community 上写作。之前，我在 Medium 上写作。如果有人想看看我的文章，可以看看我的 Medium 个人资料。
鏂囩珷鏉ユ簮锛�https://dev.to/vaibhavkhulbe/style-your-next-blog-with-vanilla-html-no-css-dc8
Devto 翻译
PREV
Tailwind CSS 从零到精通 - 启动并运行（第 1 部分，共 4 部分）🚀
NEXT
使用 JavaScript 从网页获取操作系统详细信息。👷‍♂️