Rio
一个简洁的文字排版样式库
展示
这里有提供一些正式文章用以展示 Rio 的排版效果：说明
块级元素
标题 （h1, h2, h3, h4, h5, h6）
h1. 标题级别 1 （次级标题）
h2. 标题级别 2 （次级标题）
h3. 标题级别 3 （次级标题）
h4. 标题级别 4 （次级标题）
h5. 标题级别 5 （次级标题）
h6. 标题级别 6 （次级标题）
标题内的链接做了一些特殊处理：取消了链接颜色，并用下划线进行标识：
带有链接的标题
另外，标题中行内代码的样式将被重置，除了依然应用等宽字体之外，其样式与其它标题文本并无二致：
JavaScript 函数的特性
段落 （p）
凡是有钱的单身汉，总想娶位太太，这已经成了一条举世公认的真理。 这样的单身汉，每逢新搬到一个地方，四邻八舍虽然完全不了解他的性情如何， 见解如何，可是，既然这样的一条真理早已在人们心目中根深蒂固， 因此人们总是把他看作自己某一个女儿理所应得的一笔财产。
有一天班纳特太太对她的丈夫说：“我的好老爷，尼日斐花园终于租出去了，你听说过没有？”
班纳特先生回答道，他没有听说过。
It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.
"My dear Mr. Bennet," said his lady to him one day, "have you heard that Netherfield Park is let at last?"
Mr. Bennet replied that he had not.
列表
无序列表 （ul）
- 无序列表 1
-
无序列表 2
- 无序列表 2.1
- 无序列表 2.3
-
无序列表 3
- 无序列表 3.2
- 无序列表 3.3
有序列表 （ol）
- 有序列表 1
-
有序列表 2
- 有序列表 2.1
- 有序列表 2.3
-
有序列表 3
- 有序列表 3.2
- 有序列表 3.3
定义列表 （dl）
- 定义列表 - 标题
- 定义列表 - 内容
- 定义列表 - 标题
- 定义列表 - 内容
表格 （table）
所有单元格文本左对齐，标题单元格文字加粗，表头使用边框色作为背景色，表和行设置上下边框（没有单元格边框），表尾文字缩小并减淡。鼠标移到某一行上时高亮该行。
| 标题 1 | 标题 2 | 标题 3 | 标题 4 |
|---|---|---|---|
| 标题单元格 1.1 | 单元格 2.1 | 单元格 3.1 | 单元格 4.1 |
| 标题单元格 1.2 | 单元格 2.2 | 单元格 3.2 | 单元格 4.2 |
| 标题单元格 1.3 | 单元格 2.3 | 单元格 3.3 | 单元格 4.3 |
| * 表格脚注 | |||
代码块 （pre/code）
代码块中文本使用比正文文本小一点的字号。
/**
* Use the input name to say hello.
* @param {string} name - a name;
*/
function say_hellow(name) {
alert("Hello, " + name + "!");
}
say_hellow("World");引用 （blockquote）
凡是有钱的单身汉，总想娶位太太，这已经成了一条举世公认的真理。 这样的单身汉，每逢新搬到一个地方，四邻八舍虽然完全不了解他的性情如何， 见解如何，可是，既然这样的一条真理早已在人们心目中根深蒂固， 因此人们总是把他看作自己某一个女儿理所应得的一笔财产。
分割线 （hr）
1.
2.
3.
行内元素
强调 （em, i）
<em> 表示强调内容，按惯例将其设为斜体，另外相应地，<i> 元素也被设置为相同样式：
C 语言的很多重要概念来源于由 Martin Richards 开发的 BCPL 语言 。
重要 （strong, b）
<strong> 表示重要内容，按惯例将其设为粗体，同样 <b> 元素也被设置为相同样式：
C 语言 的很多重要概念来源于由 Martin Richards 开发的 BCPL 语言 。
链接 （a）
Rio 设置链接默认状态下没有下划线，只有当鼠标移上时才会出现，另外通过 CSS3 属性优化了下划线的样式。
C 语言的很多重要概念来源于由 Martin Richards 开发的 BCPL 语言。
上/下标 （sup, sub）
统一了上下标在各浏览器下的样式（文字大小，偏移）
C 语言高级语言的很多重要概念来源于由 Martin Richards[1] 开发的 BCPL 语言[2]。
引用 （q）
C 语言
的很多重要概念来源于由 Martin Richards
开发的 BCPL 语言
。
代码 （code）
C 语言 的很多重要概念来源于由 Martin Richards 开发的 BCPL 语言 。
小号文字 （small）
普通文字的 90% 大小，并设置为较浅的颜色。
C 语言的很多重要概念来源于由 Martin Richards 开发的 BCPL 语言。
标记 （mark）
C 语言的很多重要概念来源于由 Martin Richards 开发的 BCPL 语言。
缩写 （abbr）
C 语言的很多重要概念来源于由 Martin Richards 开发的 BCPL 语言。
删除 （del）
C 语言 的很多重要概念来源于由 Martin Richards 开发的 BCPL 语言。
图片 （image）
最后
Rio 仅仅只是一个纯 CSS 的样式库，它只能为使用者提供一个经过大量调整后在各种常见客户端环境下都还不错的排版结构， 因为限于文字渲染等一些无法控制的因素，使得 Rio 无法保证所有客户端都能呈现一致的效果。
该样式库以 HTML5 为兼容标准，一切在 HTML5 中已废弃的标签都已不再支持。