Textretty

轻量级文字布局方案

GitHub Download

起步

进入仓库,Git or Download 仓库,引入Textretty.min.css

html<link rel="stylesheet" href="textretty.css">

Textretty 的 Link 标签应该在你自己的 css 文件的 Link 标签的前面。

给一个元素设置.tp-container类,它将成为 Textretty 容器,只有在这个容器内,Textretty 才会生效。

html<div class="tp-container">
  <-- content -->
</div>

变量

这里列出了 Textretty 的所有变量,你可以根据注释,在你自己的 css 文件写入,并覆盖它们。

css.tp-container {
    --theme-color: /* 主题色,一些元素会用这个作为前景色或者背景色 */;
    --bg-color: /* 容器背景色 */
}

Google Fonts

为了获得更好的阅读体验,我们建议你引入 GoogleFonts 提供的字体,只需将这个 Link 标签加入 head 标签中。

html<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:300|Noto+Serif+SC:300|ZCOOL+KuaiLe|ZCOOL+XiaoWei&display=swap" rel="stylesheet">

从这里,你会了解 Textretty 的书写规范以及一些你可能会用到的拓展或组件。

标题

如果你了解 html ,h1,h2,h3,h4,h5,h6应该不用我多讲,只要记住,正文内容的小标题应该是从二级标题(h2)开始的。

主标题

给元素加上.tp-maintitle类,使其成为主标题,作为整篇文档的总标题。主标题可以是h1,h2,h3,h4,h5,h6中的任何一个,但主标题永远都是 40px 的大小,并且会有一条下划线。

主标题


<h1 class="tp-maintitle">主标题</h1>

副标题

在标题中写入一个<small>标签,将其作为该标题的副标题。

标题副标题


<h1>标题<small>副标题</small></h1>

块引用

你应该按照下面的方法书写块引用。

我是一段被引用的文本。


<blockquote><p>我是一段被引用的文本。</p></blockquote>

代码块

代码块分为行内代码块与块级代码块

我是一段行内代码块,字体颜色随主题色(--theme-color)
<!DOCTYPE html>
<!-- 我想我就是块级代码块了吧 -->
<html>
  <head>
    <title>Just a Test</title>
    <meta charset="utf-8">
  </head>
  <body>
    <!-- Nothing -->
  </body>
</html>

<code>行内代码块</code>
<pre><code>行内代码块</code><pre>

语言角标

这样给块级代码块加上一个角标,悬停时显示,来表示代码的语言。


html<!DOCTYPE html>
<!-- 我想我就是块级代码块了吧 -->
<html>
  <head>
    <title>Just a Test</title>
    <meta charset="utf-8">
  </head>
  <body>
    <!-- Nothing -->
  </body>
</html>

<pre><code><span class="tp-codelang">Language</span></code></pre>

列表

Textretty 目前只定义了无序列表和有序列表的样式。

无序列表

有序列表

  1. 列表项目
  2. 列表项目
  3. 列表项目
    1. 嵌套列表项目
    2. 嵌套列表项目
    3. 嵌套列表项目
  4. 列表项目
  5. 列表项目

表格

表头 表头 表头
表项 表项 表项
表项 表项 表项
表项 表项 表项

<table>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>表项</td>
<td>表项</td>
<td>表项</td>
</tr>
<tr>
<td>表项</td>
<td>表项</td>
<td>表项</td>
</tr>
<tr>
<td>表项</td>
<td>表项</td>
<td>表项</td>
</tr>
</tbody>
</table>

给 table 加上.tp-table-bordered类,可以给表格的所有单元格都加上边框。

表头 表头 表头
表项 表项 表项
表项 表项 表项
表项 表项 表项

<table class="tp-table-bordered"></table>

给 table 加上.tp-table-striped类,可以让表格的表头和序数为偶数的 td 背景色变为浅灰色。

表头 表头 表头
表项 表项 表项
表项 表项 表项
表项 表项 表项

<table class="tp-table-striped"></table>
浏览器兼容性问题:IE 8及以下版本并不支持此功能。

信息提示

颜色真是传递情感的好工具。

一段普通消息或信息
一段错误提示或警告
一段操作成功的提示

<div class="tp-alert-normal">一段普通消息或信息</div>
<div class="tp-alert-danger">一段错误提示或警告</div>
<div class="tp-alert-success">一段操作成功的提示</div>

说明

目前 Textretty 还在开发中,并不完善,欢迎 Star 支持,同时也欢迎各种 Pull Requests,如果有 BUG 或者建议,请及时到 issue 提出,方便我修复,谢谢!

同时请使用者不要删除 css 文件中的版权信息,就 6 行注释不删也死不了人对吧?😁