- 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 |