- Foundation 常规
- Foundation - 全局样式
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript 工具
- Foundation - 媒体查询
- Foundation - 网格
- Foundation - Flex 网格
- Foundation - 表单
- Foundation - 可见性类
- 基础 - 基本排版
- Foundation - 排版辅助
- Foundation - 基本控件
- Foundation - 导航
- Foundation - 容器
- Foundation - 媒体
- Foundation - 插件
- Foundation Sass
- Foundation - Sass 函数
- Foundation - Sass 混合器
- Foundation 库
- Foundation - Motion UI
- Foundation 有用资源
- Foundation - 快速指南
- Foundation - 有用资源
- Foundation - 讨论
基础 - 基本排版
描述
Foundation 中的排版定义了标题、段落、列表和其他内联元素，这些元素为元素创建了具有吸引力且简单的默认样式。
下表列出了 Foundation 中使用的不同类型的排版 -
| 序号 | 排版及描述 |
|---|---|
| 1 | 段落
段落是由不同字体大小、突出显示的单词、行高等定义的一组句子。 |
| 2 | 标题
它定义了从 h1 到 h6 的 HTML 标题。 |
| 3 | 链接
它创建一个超链接，当您点击文本或图像时会打开另一个文档。 |
| 4 | 分隔线
它使用 <hr> 标签在各部分之间进行分隔。 |
| 5 | 有序和无序列表
Foundation 支持有序列表、无序列表来列出内容。 |
| 6 | 定义列表
定义列表用于显示名称值对。 |
| 7 | 块引用
它表示一段文本，定义比普通文本大得多。 |
| 8 | 缩写和代码
缩写定义单词或短语的缩写形式，代码表示一段代码。 |
| 9 | 击键
它用于执行特定功能。 |
| 10 | 可访问性
Foundation 提供了一些访问页面内容的指南。 |
Sass 参考
您可以使用下表中列出的以下 SASS 变量来更改组件的样式。
| 序号 | 名称及描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$header-font-family 指定标题元素的字体系列。 |
字符串或列表 | $body-font-family |
| 2 |
$header-font-weight 指定标题的字体粗细。 |
字符串 | $global-weight-normal |
| 3 |
$header-font-style 提供标题的字体样式。 |
字符串 | normal |
| 4 |
$font-family-monospace 用于使用等宽类型的元素（例如代码示例）的字体堆栈。 |
字符串或列表 | Consolas, 'Liberation Mono', Courier, monospace |
| 5 | $header-sizes 定义标题的屏幕尺寸，每个键都是一个断点，每个值都是标题尺寸的映射。 |
映射 |
small: ( 'h1': 24 'h2': 20 'h3': 19 'h4': 18 'h5': 17 'h6': 16 ) medium: ( 'h1': 48 'h2': 40 'h3': 31 'h4': 25 'h5': 20 'h6': 16 ) |
| 6 |
$header-color 提供标题的颜色。 |
颜色 | inherit |
| 7 |
$header-lineheight 定义标题的行高。 |
数字 | 1.4 |
| 8 |
$header-margin-bottom 提供标题的下边距。 |
数字 | 0.5rem |
| 9 |
$header-text-rendering 定义文本渲染方法。 |
字符串 | optimizeLegibility |
| 10 |
$small-font-size 指定 <small> 元素的字体大小。 |
数字 | 80% |
| 11 |
$paragraph-margin-bottom 指定段落的下边距。 |
数字 | 1rem |
| 12 |
$paragraph-text-rendering 段落文本渲染方法。 |
字符串 | optimizeLegibility |
| 13 |
$code-color 为代码示例提供文本颜色。 |
颜色 | $black |
| 14 |
$code-font-family 为代码示例提供字体系列。 |
字符串或列表 | $font-family-monospace |
| 15 |
$code-border 指定代码周围的边框。 |
列表 | 1px solid $medium-gray |
| 16 |
$code-padding 指定文本周围的填充。 |
数字或列表 | rem-calc(2 5 1) |
| 17 |
$anchor-color 链接的默认颜色。 |
颜色 | $primary-color |
| 18 |
$anchor-color-hover 指定链接悬停时的默认颜色。 |
颜色 | scale-color($anchor-color, $lightness: -14%) |
| 19 |
$anchor-text-decoration 链接的默认文本装饰。 |
字符串 | none |
| 20 |
$anchor-text-decoration-hover 链接悬停时的默认文本装饰。 |
字符串 | none |
| 21 |
$hr-width 定义分隔线的最大宽度。 |
数字 | $global-width |
| 22 |
$hr-border 指定分隔线的默认边框。 |
列表 | 1px solid $medium-gray |
| 23 |
$hr-margin 分隔线的默认边距。 |
数字或列表 | rem-calc(20) auto |
| 24 |
$list-lineheight 它定义列表中项目的行高。 |
数字 | $paragraph-lineheight |
| 25 |
$list-style-type 为无序列表提供项目符号类型。 |
字符串 | disc |
| 26 |
$list-style-position 它定义无序列表中项目符号的位置。 |
字符串 | outside |
| 27 |
$list-side-margin 定义左侧（或右侧）边距。 |
数字 | 1.25rem |
| 28 |
$defnlist-term-weight 为 <dt> 元素提供字体粗细。 |
字符串 | $global-weight-bold |
| 29 |
$defnlist-term-margin-bottom 提供 <dt> 和 <dd> 元素之间的间距。 |
数字 | 0.3rem |
| 30 |
$blockquote-color 它应用 <blockquote> 元素的文本颜色。 |
颜色 | $dark-gray |
| 31 |
$blockquote-padding 提供 <blockquote> 元素内部的填充。 |
数字或列表 | rem-calc(9 20 0 19) |
| 32 |
$blockquote-border 它为 <blockquote> 元素提供侧边框。 |
列表 | 1px solid $medium-gray |
| 33 |
$cite-font-size 定义 <cite> 元素的字体大小。 |
数字 | rem-calc(13) |
| 34 |
$cite-color 为 |
颜色 | $dark-gray |
| 35 |
$keystroke-font 定义 <kbd> 元素的字体系列。 |
字符串或列表 | $font-family-monospace |
| 36 |
$keystroke-color 定义 <kbd> 元素的文本颜色。 |
颜色 | $black |
| 37 |
$keystroke-background 为 <kbd> 元素提供背景颜色。 |
颜色 | $light-gray |
| 38 |
$keystroke-padding 指定 <kbd> 元素的填充。 |
数字或列表 | rem-calc(2 4 0) |
| 39 |
$keystroke-radius 显示 <kbd> 元素的边框半径。 |
数字或列表 | $global-radius |
| 40 |
$abbr-underline 为 <abbr> 元素提供底部边框样式。 |
列表 | 1px dotted $black |