文章: 阅读:

Foundation 文本

CSSFoundation

前言

  • Foundation 文本。

1、Foundation 默认设置

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

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

2、< h1 > - < h6 >

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

  • 标题不同元素字体大小不一样。以下字体默认加粗，不同设备尺寸显示的字体也是不一样的。

  • 实例

    1
    2
    3
    4
    5
    6
    <h1>h1 标题 (<strong>2.125rem</strong> - 2.75rem)</h1>
    <h2>h2 标题 (<strong>1.6875rem</strong> - 2.3125rem)</h2>
    <h3>h3 标题 (<strong>1.375rem</strong> - 1.6875rem)</h3>
    <h4>h4 标题 (<strong>1.125rem</strong> - 1.4375rem)</h4>
    <h5>h5 标题 (1.125rem)</h5>
    <h6>h6 标题 (1rem)</h6>

  • 效果 🔗

2.1 浅色的标题

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

  • 实例

    1
    2
    3
    4
    5
    6
    <h1 class="subheader">h1.subheader</h1>
    <h2 class="subheader">h2.subheader</h2>
    <h3 class="subheader">h3.subheader</h3>
    <h4 class="subheader">h4.subheader</h4>
    <h5 class="subheader">h5.subheader</h5>
    <h6 class="subheader">h6.subheader</h6>

  • 效果 🔗

3、< small >

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

  • 实例

    1
    2
    3
    4
    5
    6
    <h1>h1 heading <small>secondary text</small></h1>
    <h2>h2 heading <small>secondary text</small></h2>
    <h3>h3 heading <small>secondary text</small></h3>
    <h4>h4 heading <small>secondary text</small></h4>
    <h5>h5 heading <small>secondary text</small></h5>
    <h6>h6 heading <small>secondary text</small></h6>

  • 效果 🔗

4、< a >

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

  • 实例

    1
    <p>Foundation 的 <a href="#">链接样式</a>。</p>

  • 效果 🔗

5、< abbr >

  • Foundation <abbr> 元素用于标签指示简称或缩写，样式如下所示：

  • 实例

    1
    <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

  • 效果 🔗

6、< blockquote >

  • Foundation <blockquote> 元素用于定义块引用，样式如下所示：

  • 实例

    1
    2
    3
    4
    <blockquote>
        <p>学的不仅是技术，更是梦想！</p>
        <cite>Qian Chia 工作室</cite>
    </blockquote>

  • 效果 🔗

7、< dl >

  • Foundation <dl> 元素用于定义一个描述性列表，样式如下所示：

  • 实例

    1
    2
    3
    4
    5
    6
    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>

  • 效果 🔗

8、< code >

  • Foundation <code> 元素用于代码片段展示，样式如下所示：

  • 实例

    1
    <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 是文档的一部分。</p>

  • 效果 🔗

9、< kbd >

  • Foundation <kbd> 元素用于接收键盘的输入指令，样式如下所示：

  • 实例

    1
    <p>按下 <kbd>ctrl + p</kbd> 键打开打印窗口。</p>

  • 效果 🔗

10、< hr >

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

  • Foundation 中 hr 水平线元素是灰色的。

  • 实例

    1
    <hr />

  • 效果 🔗

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-12 20:04


评论


文章目录
  1. 1. 前言
  2. 2. 1、Foundation 默认设置
  3. 3. 2、< h1 > - < h6 >
    1. 3.1. 2.1 浅色的标题
  4. 4. 3、< small >
  5. 5. 4、< a >
  6. 6. 5、< abbr >
  7. 7. 6、< blockquote >
  8. 8. 7、< dl >
  9. 9. 8、< code >
  10. 10. 9、< kbd >
  11. 11. 10、< hr >
隐藏目录