Foundation CSS 参考手册

🌙
手机阅读
本文目录结构
axihe

Foundation CSS 参考手册


Foundation 默认设置

Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说,字体大小默认为 16px。对于移动设备的浏览器,字体默认大小为 12px。 默认的字体为 "Helvetica Neue", line-height 默认为 1.5

这些设置是适用于 元素内的元素。

此外, <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> 元素尝试一下

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

Bilibili(B站)

朱安邦

Anbang