首页 > 其他 > 详细

icefield

时间:2021-05-28 09:40:35      阅读:25      评论:0      收藏:0      [点我收藏+]

这是我的第一个博文

一、TYPO.CSS 的设计和使用

TYPO.CSS 主要包括:

1、一般 reset.css 所需的内容

目前的设计是这样的,尽量保持完整的 reset,比如让 ul/ol 无样式并且无多余的 padding/margin,这是必须的,因为一个网可能需要很多自定义的的内容,在实践中我们并不希望像 ul/ol 有样式,这样我们得用优先级去覆盖,这是非常麻烦的事。所以 typo.css 并不像 normalize.css,后者给每一个元素都预先定义了样式,这样在自定义的时候将是非常痛苦的。要大保持干净的所有元素一致化的 reset 才是最佳实践。

2、class="typo" 阅读内容排版

在文章/文档阅读的页面,需添加 .typo 这个 class,这样 table/ol/ul 等都会有预定的样式,让你的排版像 http://typo.sofi.sh 一样,让用户阅读起来更舒服。

在父容器在没有添加 class="typo" 的时候,可以使用 class="typo-标签"(如 class="typo-ul")来实现像 .typo > ul 这样结构的样式。

3、增加类:

主要是一些需要中文日常排版需要的元素和语文对应样式的增强,目前包括:

(1) 专名号:使用标签 <u> 或者 .typo-u

(2) 着重号:使用 class .typo-em

(3) 清理浮动:与一般 reset.css 保持一致 .clearfix

(4) 强制换行:添加 .textwrap 到文本所在的容器,如果是 table 测还需要 .textwrap-table

(5) 衬线字体:添加 .serif

(6) 创建 border-box:在 html 中添加 .borderbox #why

二、开源许可

基于 MIT License 开源,使用代码只需说明来源,或者引用 license.txt 即可。

icefield

原文:https://www.cnblogs.com/icefield817/p/13405648.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!