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 - 优化阅读体验而设计的网页排版样式表
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值