Foundation CSS 參考手冊 · W3School Foundation 教程

# Foundation CSS 參考手冊 ## Foundation 默認設置 Foundation 使用瀏覽器默認字體大小 (`font-size:100%`)。對于大多數桌面設備的瀏覽器來說，字體大小默認為 16px。對于移動設備的瀏覽器，字體默認大小為 12px。默認的字體為 `"Helvetica Neue"`， line-height 默認為 `1.5`。這些設置是適用于 `<body>` 元素內的元素。此外， `<p>` 元素與底部的外邊距(margin-bottom) 為 1.25rem , line-height 為 1.6。 ## 文本以下的 HTML 元素，Foundation 設置了獨立的樣式渲染它，不會采用瀏覽器默認樣式。點擊 "嘗試一下" 查看在線實例。 | 元素 | 描述 | 在線實例 | | --- | --- | --- | | <h1> - <h6> | h1 - h6 標題 | | <a> | 淺藍色的鏈接，鼠標移動到鏈接會有下劃線 | | <small> | 淺灰色的副標題文本 | | <blockquote> | 引用內容模塊 | | <strong> | 加粗文本 | | <em> | 斜體 | | <abbr> | 指定單詞的縮寫，使用該元素文本出現虛線下劃線，鼠標移動上去會有提示信息 | | <kbd> | 接收鍵盤輸入指令: <kbd>CTRL + P</kbd> | | <hr> | 水平線 | | <code> | 代碼片段 | | <ul> | 無序列表 | | <ol> | 有序列表 | | <dl> | 描述性列表 | ## 文本對齊使用 CSS 類來修改文本的對齊方式： | 類 | 描述 | 實例 | | --- | --- | --- | | .text-left | 左對齊文本 | | .text-right | 右對齊文本 | | .text-center | 居中 | | .text-justify | 兩端對齊 | ## 不同尺寸屏幕的對齊使用 CSS 類來修改文本的不同尺寸屏幕的對齊方式： | 類 | 描述 | 實例 | | --- | --- | --- | | **左對齊** | | .small-text-left | 所有尺寸屏幕左對齊 | | .small-only-text-left | 小尺寸屏幕左對齊(寬度小于 40em ) | | .medium-text-left | 寬度大于 40.0625em 尺寸屏幕左對齊 | | .medium-only-text-left | 寬度在 40.0625em 到 64em 尺寸的屏幕左對齊 | | .large-text-left | 寬度大于 64.0625em 尺寸屏幕左對齊 | | .large-only-text-left | 寬度在 64.0625em 到 90em 尺寸的屏幕左對齊 | | .xlarge-text-left | 寬度大于 90.0625em 尺寸屏幕左對齊 | | .xlarge-only-text-left | 寬度在 90.0625em 到 120em 尺寸的屏幕左對齊 | | .xxlarge-text-left | 寬度大于 120em 尺寸屏幕左對齊 | | **右對齊** | | .small-text-right | 所有尺寸屏幕右對齊 | | .small-only-text-right | 小尺寸屏幕右對齊(寬度小于 40em ) | | .medium-text-right | 寬度大于 40.0625em 尺寸屏幕右對齊 | | .medium-only-text-right | 寬度在 40.0625em 到 64em 尺寸的屏幕右對齊 | | .large-text-right | 寬度大于 64.0625em 尺寸屏幕右對齊 | | .large-only-text-right | 寬度在 64.0625em 到 90em 尺寸的屏幕右對齊 | | .xlarge-text-right | 寬度大于 90.0625em 尺寸屏幕右對齊 | | .xlarge-only-text-right | 寬度在 90.0625em 到 120em 尺寸的屏幕右對齊 | | .xxlarge-text-right | 寬度大于 120em 尺寸屏幕右對齊 | | **居中對齊** | | .small-text-center | 所有尺寸屏幕居中對齊 | | .small-only-text-center | 小尺寸屏幕居中對齊(寬度小于 40em ) | | .medium-text-center | 寬度大于 40.0625em 尺寸屏幕居中對齊 | | .medium-only-text-center | 寬度在 40.0625em 到 64em 尺寸的屏幕居中對齊 | | .large-text-center | 寬度大于 64.0625em 尺寸屏幕居中對齊 | | .large-only-text-center | 寬度在 64.0625em 到 90em 尺寸的屏幕居中對齊 | | .xlarge-text-center | 寬度大于 90.0625em 尺寸屏幕居中對齊 | | .xlarge-only-text-center | 寬度在 90.0625em 到 120em 尺寸的屏幕居中對齊 | | .xxlarge-text-center | 寬度大于 120em 尺寸屏幕居中對齊 | | **兩端對齊** | | .small-text-justify | 所有尺寸屏幕都兩端對齊 | | .small-only-text-justify | 小尺寸屏幕兩端對齊(寬度小于 40em ) | | .medium-text-justify | 寬度大于 40.0625em 尺寸屏幕兩端對齊 | | .medium-only-text-justify | 寬度在 40.0625em 到 64em 尺寸的屏幕兩端對齊 | | .large-text-justify | 寬度大于 64.0625em 尺寸屏幕兩端對齊 | | .large-only-text-justify | 寬度在 64.0625em 到 90em 尺寸的屏幕兩端對齊 | | .xlarge-text-justify | 寬度大于 90.0625em 尺寸屏幕兩端對齊 | | .xlarge-only-text-justify | 寬度在 90.0625em 到 120em 尺寸的屏幕兩端對齊 | | .xxlarge-text-justify | 寬度大于 120em 尺寸屏幕兩端對齊 | ## 其他 | 類 | 描述 | 實例 | | --- | --- | --- | | .left | 元素向左浮動 | | .right | 元素向右浮動 | | .clearfix | 清除浮動 - 必須添加在浮動元素的父元素上 | | .hide | 隱藏元素 (CSS `display: none`) | | .list-inline | 將所有元素設置在同一行 | | .lead | 讓 <p> 元素更突出 | | .subheader | 設置淺色的 <h1> - <h6> 元素 |