HTML5 教程之Foundation CSS 参考手册

当前位置:

首页 > 网站开发 > HTML >

HTML5 教程之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> 元素	实例预览

栏目列表