文本
文本为内容里的文字,是页面重要的重组部份,框架整理了常用的文本标签,同时也定义了标题、字号、字体等相关样式。
文本内联标签
在HTML中常用到的内联文本,是在块文本内不分行连接显示的标签,下表是常用的文本内联标签:
标签 | 样式 | 代码 |
---|---|---|
<a> | 链接 | <a>链接</a> |
<abbr> | 缩写 | <abbr title="...">缩写</abbr> |
<br /> | 换行 | <br /> |
<cite> | 引用 | <cite>斜体文本</cite> |
<code> | 代码 | <code>代码</code> |
<dfn> | 定义 | <dfn>定义</dfn> |
<del> | <del>删除</del> | |
<em> | 强调斜体文本 | <em>强调斜体文本</em> |
<i> | 斜体文本 | <i>斜体文本</i> |
<ins> | 插入文本 | <ins>插入文本</ins> |
<kbd> | 键盘文本 | <kbd>键盘文本</kbd> |
<mark> | 标记 | <mark>标记</mark> |
<small> | 小号 | <small>小号</small> |
<span> | 内容块 | <span>内容块</span> |
<strike> | <strike>内容块</strike> | |
<strong> | 加粗文本 | <strong>加粗文本</strong> |
<sub> | 下标文本:H2O | 下标文本:H<sub>2</sub>O |
<sup> | 上标文本:商标® | 上标文本:商标<sup>®</sup> |
<time> | <time>时间</time> | |
<u> | 下划线文本 | <u>下划线文本</u> |
<var> | 变量 | <var>变量</var> |
文本块标签
块文本标签为文本占据整行空间的标签,同时也可使用文本内联标签,常用的文本块标签有address、blockquote、p、pre和万能的div,以及下文的标题文本h1至h6等。
<address>地址</address> <blockquote>引用</blockquote> <div>分层</div> <p>段落</p> <pre>代码</pre>
标题文本
标题文本为文本块标签,放标题内容,按h1至h6主次等级。
<h1>大标题</h1> <h2>副标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6>
字号大小
文本默认大小继承body中定义的文字大小,在应用中,经常有需要改变文字大小的操作,可使用内联标签里的small为小号文本标签,同时也可以使用框架定义的从h1至h6同等大小的.h1
至.h6
样式;以及微小号文本.size-mini
、小号文本.size-small
、默认文本.size
、大号文本.size-big
及特大号文本.size-large
尺寸字号等样式定义文字大小。
小号文本
<small>小号文本</small>
标题字号
<p class="h1">大标题字号</p> <p class="h2">副标题字号</p> <p class="h3">3级标题字号</p> <p class="h4">4级标题字号</p> <p class="h5">5级标题字号</p> <p class="h6">6级标题字号</p>
尺寸字号
<p class="size-mini">微小号文本</p> <p class="size-small">小号文本</p> <p class="size">默认文本</p> <p class="size-big">大号文本</p> <p class="size-large">特大号文本</p>
字号说明:
- small为父元素文本字号的3/4大小,不同字号内的small大小不同;
.size-small
为默认文本大的3/4大小,是固定的值,不会随父标签字号大小改变;- h2、
.h2
及.size-large
字号大小相同; - h4、
.h4
及.size-big
字号大小相同; - h6、
.h6
、.size
及默认字号大小相同;
文本粗细
用weight定义正常的粗细,。
<p class="weight-mini">特细文本</p> <p class="weight-small">细文本</p> <p class="weight">默认文本</p> <p class="weight-big">粗文本</p> <p class="weight-large">特粗文本</p>
文本字体
框架默认使用“微软雅黑”字体,无"微软雅黑"字体系统则使用宋体;同时,也可以使用框架定义的字体样式改变文本字体。
.font-light
:微软雅黑 Light,中文显示为微软雅黑 Light,英文/数字/符号等为衬线字体。.font-sun
:宋体,中文显示为宋体,英文/数字/符号等为衬线字体。.font-kai
:楷体,中文显示为楷体,英文/数字/符号等为衬线字体。.font-monospace
:等宽字体,各个字符宽度相同。
<p class="font-light">微软雅黑 Light</p> <p class="font-sun">宋体</p> <p class="font-kai">楷体</p> <p class="font-monospace">等宽</p>
文本颜色的调整,请参考上一节的颜色。