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> | 接收鍵盤輸入指令: CTRL + P | 嘗試一下 |
<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> 元素 | 嘗試一下 |