tydo.css 使用探究

简介

tydo.css 的用途就是让网页上的中文内容从排版的角度看起来好看，舒服。

原理

什么原理呢？首先，它重设了很多 html 标签的样式，这样只要你在网页中引入了 tydo.css 这个样式表文件，网页上中文的排版就会有一定改善。但仅仅这样还不够，它还定义了一些 CSS 类，根据情况使用合适的 CSS 类后，网页上中文的排版才算完善。这些 CSS 类根据其使用方式可以分为两种：tydo 和 其他。

使用

1. tydo
   tydo 类的使用方式很简单，就是对于想要排版的内容，给包含这些内容的标签，添加一个 typo 类，那么排版就完成了。比如下面这样，只需要给 div 添加 tydo 类，排版就结束了。

   <div class="typo"><h3 id="section2-1">例1：论语学而篇第一</h3><p>  <small><b>作者：</b><abbr title="名丘，字仲尼">孔子</abbr>（    <time>前551年9月28日－前479年4月11日</time>    ）  </small></p><h4>本篇引语</h4><p>  《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等道德范畴。 </p><h4>原文</h4><p>子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」 </p><h4>译文</h4><p>孔子说：「学了又时常温习和练习，不是很愉快吗？有志同道合的人从远方来，不是很令人高兴的吗？人家不了解我，我也不怨恨、恼怒，不也是一个有德的君子吗？」 </p><h4>评析</h4><p>宋代著名学者<u class="typo-u">朱熹</u>对此章评价极高，说它是「入道之门，积德之基」。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的「学」不是指学习，而是指学说或主张；「时」不能解为时常，而是时代或社会的意思，「习」不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同<abbr  title="张燕婴">我</abbr>的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见《齐鲁学刊》1986年第6期文）这种解释可以自圆其说，而且也有一定的道理，供读者在理解本章内容时参考。</p><p>此外，在对「人不知，而不愠」一句的解释中，也有人认为，「人不知」的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，「人不知」就是「人家不知道我所讲述的」了。这样的解释似乎有些牵强。</p><p>总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。</p></div>

2. 其他类
   这些类的格式如下：

   typo-标签

   如 typo-ul，它们的作用就是为特定的标签中包含的内容实现排版。如果说 tydo 类针对的是面，typo-标签 类针对的就是点。

其实说了怎么多，最有用的还是实际使用下，比较下。可以针对同一网页比较下下列三种情况的网页视觉效果：

1. 不引入 tydo.css
2. 引入 tydo.css，但不使用 .tydo 类或者其他类
3. 引入 tydo.css，并且使用 .tydo 类

参考文档

1. typo.css - 优化阅读体验而设计的网页排版样式表