Foundation 使用瀏覽器默認(rèn)字體大小 (font-size:100%)。對(duì)于大多數(shù)桌面設(shè)備的瀏覽器來說，字體大小默認(rèn)為 16px。對(duì)于移動(dòng)設(shè)備的瀏覽器，字體默認(rèn)大小為 12px。默認(rèn)的字體為 "Helvetica Neue"， line-height 默認(rèn)為 1.5。
這些設(shè)置是適用于 <body> 元素內(nèi)的元素。
此外， <p> 元素與底部的外邊距(margin-bottom) 為 1.25rem , line-height 為 1.6。
以下的 HTML 元素，F(xiàn)oundation 設(shè)置了獨(dú)立的樣式渲染它，不會(huì)采用瀏覽器默認(rèn)樣式。點(diǎn)擊 "嘗試一下" 查看在線實(shí)例。
| 元素 | 描述 | 在線實(shí)例 |
|---|---|---|
| <h1> - <h6> | h1 - h6 標(biāo)題 | 嘗試一下 |
| <a> | 淺藍(lán)色的鏈接，鼠標(biāo)移動(dòng)到鏈接會(huì)有下劃線 | 嘗試一下 |
| <small> | 淺灰色的副標(biāo)題文本 | 嘗試一下 |
| <blockquote> | 引用內(nèi)容模塊 | 嘗試一下 |
| <strong> | 加粗文本 | 嘗試一下 |
| <em> | 斜體 | 嘗試一下 |
| <abbr> | 指定單詞的縮寫，使用該元素文本出現(xiàn)虛線下劃線，鼠標(biāo)移動(dòng)上去會(huì)有提示信息 | 嘗試一下 |
| <kbd> | 接收鍵盤輸入指令: CTRL + P | 嘗試一下 |
| <hr> | 水平線 | 嘗試一下 |
| <code> | 代碼片段 | 嘗試一下 |
| <ul> | 無序列表 | 嘗試一下 |
| <ol> | 有序列表 | 嘗試一下 |
| <dl> | 描述性列表 | 嘗試一下 |
使用 CSS 類來修改文本的對(duì)齊方式：
| 類 | 描述 | 實(shí)例 |
|---|---|---|
| .text-left | 左對(duì)齊文本 | 嘗試一下 |
| .text-right | 右對(duì)齊文本 | 嘗試一下 |
| .text-center | 居中 | 嘗試一下 |
| .text-justify | 兩端對(duì)齊 | 嘗試一下 |
使用 CSS 類來修改文本的不同尺寸屏幕的對(duì)齊方式：
| 類 | 描述 | 實(shí)例 |
|---|---|---|
| 左對(duì)齊 | ||
| .small-text-left | 所有尺寸屏幕左對(duì)齊 | 嘗試一下 |
| .small-only-text-left | 小尺寸屏幕左對(duì)齊(寬度小于 40em ) | 嘗試一下 |
| .medium-text-left | 寬度大于 40.0625em 尺寸屏幕左對(duì)齊 | 嘗試一下 |
| .medium-only-text-left | 寬度在 40.0625em 到 64em 尺寸的屏幕左對(duì)齊 | 嘗試一下 |
| .large-text-left | 寬度大于 64.0625em 尺寸屏幕左對(duì)齊 | 嘗試一下 |
| .large-only-text-left | 寬度在 64.0625em 到 90em 尺寸的屏幕左對(duì)齊 | 嘗試一下 |
| .xlarge-text-left | 寬度大于 90.0625em 尺寸屏幕左對(duì)齊 | 嘗試一下 |
| .xlarge-only-text-left | 寬度在 90.0625em 到 120em 尺寸的屏幕左對(duì)齊 | 嘗試一下 |
| .xxlarge-text-left | 寬度大于 120em 尺寸屏幕左對(duì)齊 | 嘗試一下 |
| 右對(duì)齊 | ||
| .small-text-right | 所有尺寸屏幕右對(duì)齊 | 嘗試一下 |
| .small-only-text-right | 小尺寸屏幕右對(duì)齊(寬度小于 40em ) | 嘗試一下 |
| .medium-text-right | 寬度大于 40.0625em 尺寸屏幕右對(duì)齊 | 嘗試一下 |
| .medium-only-text-right | 寬度在 40.0625em 到 64em 尺寸的屏幕右對(duì)齊 | 嘗試一下 |
| .large-text-right | 寬度大于 64.0625em 尺寸屏幕右對(duì)齊 | 嘗試一下 |
| .large-only-text-right | 寬度在 64.0625em 到 90em 尺寸的屏幕右對(duì)齊 | 嘗試一下 |
| .xlarge-text-right | 寬度大于 90.0625em 尺寸屏幕右對(duì)齊 | 嘗試一下 |
| .xlarge-only-text-right | 寬度在 90.0625em 到 120em 尺寸的屏幕右對(duì)齊 | 嘗試一下 |
| .xxlarge-text-right | 寬度大于 120em 尺寸屏幕右對(duì)齊 | 嘗試一下 |
| 居中對(duì)齊 | ||
| .small-text-center | 所有尺寸屏幕居中對(duì)齊 | 嘗試一下 |
| .small-only-text-center | 小尺寸屏幕居中對(duì)齊(寬度小于 40em ) | 嘗試一下 |
| .medium-text-center | 寬度大于 40.0625em 尺寸屏幕居中對(duì)齊 | 嘗試一下 |
| .medium-only-text-center | 寬度在 40.0625em 到 64em 尺寸的屏幕居中對(duì)齊 | 嘗試一下 |
| .large-text-center | 寬度大于 64.0625em 尺寸屏幕居中對(duì)齊 | 嘗試一下 |
| .large-only-text-center | 寬度在 64.0625em 到 90em 尺寸的屏幕居中對(duì)齊 | 嘗試一下 |
| .xlarge-text-center | 寬度大于 90.0625em 尺寸屏幕居中對(duì)齊 | 嘗試一下 |
| .xlarge-only-text-center | 寬度在 90.0625em 到 120em 尺寸的屏幕居中對(duì)齊 | 嘗試一下 |
| .xxlarge-text-center | 寬度大于 120em 尺寸屏幕居中對(duì)齊 | 嘗試一下 |
| 兩端對(duì)齊 | ||
| .small-text-justify | 所有尺寸屏幕都兩端對(duì)齊 | 嘗試一下 |
| .small-only-text-justify | 小尺寸屏幕兩端對(duì)齊(寬度小于 40em ) | 嘗試一下 |
| .medium-text-justify | 寬度大于 40.0625em 尺寸屏幕兩端對(duì)齊 | 嘗試一下 |
| .medium-only-text-justify | 寬度在 40.0625em 到 64em 尺寸的屏幕兩端對(duì)齊 | 嘗試一下 |
| .large-text-justify | 寬度大于 64.0625em 尺寸屏幕兩端對(duì)齊 | 嘗試一下 |
| .large-only-text-justify | 寬度在 64.0625em 到 90em 尺寸的屏幕兩端對(duì)齊 | 嘗試一下 |
| .xlarge-text-justify | 寬度大于 90.0625em 尺寸屏幕兩端對(duì)齊 | 嘗試一下 |
| .xlarge-only-text-justify | 寬度在 90.0625em 到 120em 尺寸的屏幕兩端對(duì)齊 | 嘗試一下 |
| .xxlarge-text-justify | 寬度大于 120em 尺寸屏幕兩端對(duì)齊 | 嘗試一下 |
| 類 | 描述 | 實(shí)例 |
|---|---|---|
| .left | 元素向左浮動(dòng) | 嘗試一下 |
| .right | 元素向右浮動(dòng) | 嘗試一下 |
| .clearfix | 清除浮動(dòng) - 必須添加在浮動(dòng)元素的父元素上 | |
| .hide | 隱藏元素 (CSS display: none) | 嘗試一下 |
| .list-inline | 將所有元素設(shè)置在同一行 | 嘗試一下 |
| .lead | 讓 <p> 元素更突出 | 嘗試一下 |
| .subheader | 設(shè)置淺色的 <h1> - <h6> 元素 | 嘗試一下 |
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
