CSS 参考手册
编辑教程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> 元素 |
Mos固件，小电视必刷固件
ES6 教程
Vue.js 教程
JSON 教程
jQuery 教程
HTML 教程
HTML 5 教程
CSS 教程
CSS3 教程
JavaScript 教程
DHTML 教程
JSON在线格式化工具
JS在线运行
JSON解析格式化
jsfiddle中国国内版本
JS代码在线运行
PHP代码在线运行
Java代码在线运行
C语言代码在线运行
C++代码在线运行
Python代码在线运行
Go语言代码在线运行
C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统， 所有工程师都可以参与共同维护的闪电教程，让知识的积累变得统一完整、自成体系。
大家可以一起参与进共编，让零散的知识点帮助更多的人。
X
选择支付方式：
立即支付
￥
9.99
无法付款，请点击这里
金额： 0 元
备注：
转账时请填写正确的金额和备注信息，到账由人工处理，可能需要较长时间
备注：
转账时请填写正确的金额和备注信息，到账由人工处理，可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码， 此过程可能需要15秒钟