编程入门教程

Foundation 文本

Foundation 默认设置

Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说,字体默认为 16px。对于大多数移动端浏览器来说,字体默认为 12px。默认的字体为 "Helvetica Neue", line-height 默认为 1.5

以上默认的设置均是针对 <body> 元素。


Foundation 文字排列设计

本章节我们将讨论 Foundation 的文字排列设计。

以下实例的真实样式请通过点击"尝试一下"按钮查看。


<h1> - <h6>

Foundation 渲染的 HTML 标题 (<h1><h6>) 如下所示:

实例

h2 标题

h3 标题

h4 标题

h5 标题
h6 标题

提示: 如果需要创建一个浅色的标题,可以在元素上添加 .subheader 类:

实例

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader


<small>

在 Foundation 中, HTML <small> 元素用于创建一个浅色的副标题:

实例

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text


<a>

Foundation <a> 元素的样式如下所示:

实例

这是一个 链接



<abbr>

Foundation <abbr> 元素的样式如下所示:

实例

The WHO was founded in 1948.



<blockquote>

Foundation <blockquote> 元素的样式如下所示:

实例

编程其实很简单!

人人编程


<dl>

Foundation <dl> 元素的样式如下所示:

实例

Coffee
- black hot drink
Milk
- white cold drink


<code>

Foundation <code> 元素的样式如下所示:

实例

以下 HTML 元素: span, section, 和 div 是文档的一部分。



<kbd>

Foundation <kbd> 元素的样式如下所示:

实例

按下 ctrl + p 键打开打印窗口。



<hr>

Foundation <hr> 元素的样式如下所示:

实例