基础 - 全局样式

本章我们将学习全局样式。Foundation 框架的全局 CSS 包含了有用的重置，确保样式在不同浏览器中保持一致。

颜色

链接和按钮等交互元素使用来自 Sass 变量$primary-color的默认蓝色阴影。组件还可以具有其他颜色，例如：secondary（次要）、alert（警示）、success（成功）和warning（警告）。更多信息请查看此处。

Sass 参考

变量

下表列出了 Sass 变量，这些变量用于自定义项目_settings.scss中组件的默认样式。

序号	名称及描述	类型	默认值
1	$global-width 表示网站的全局宽度。用于确定网格的行宽。	数值	rem-calc(1200)
2	$global-font-size 表示应用于<html>和<body>的字体大小。默认设置为 100%，将继承用户的浏览器设置值。	数值	100%
3	$global-lineheight 表示所有类型的默认行高。当$global-font-size设置为 16px 时，$global-lineheight为 24px。	数值	1.5
4	$primary-color 为链接和按钮等交互组件提供颜色。	颜色	#2199e8
5	$secondary-color 用于支持.secondary类的组件。	颜色	#777
6	$success-color 与.success类一起使用时，表示积极的状态或操作。	颜色	#3adb76
7	$warning-color 与.warning类一起使用时，表示警告的状态或操作。	颜色	#ffae00
8	$alert-color 与.alert类一起使用时，表示负面的状态或操作。	颜色	#ec5840
9	$light-gray 用于浅灰色 UI 元素。	颜色	#e6e6e6
10	$medium-gray 用于中等灰色 UI 元素。	颜色	#cacaca
11	$dark-gray 用于深灰色 UI 元素。	颜色	#8a8a8a
12	$black 用于黑色 UI 元素。	颜色	#0a0a0a
13	$white 用于白色 UI 元素。	颜色	#fefefe
14	$body-background 表示正文的背景颜色。	颜色	$white
15	$body-font-color 表示正文的文本颜色。	颜色	$black
16	$body-font-family 表示正文的字体列表。	列表	'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif
17	$body-antialiased 通过使用 CSS 属性-webkit-font-smoothing和-moz-osx-font-smoothing将此属性设置为true来启用抗锯齿类型。	布尔值	true
18	$global-margin 表示组件上的全局边距值。	数值	1rem
19	$global-padding 表示组件上的全局填充值。	数值	1rem
20	$global-margin 表示组件之间使用的全局边距值。	数值	1rem
21	$global-weight-normal 表示普通类型的全局字体粗细。	关键词或数值	normal
22	$global-weight-bold 表示粗体的全局字体粗细。	关键词或数值	bold
23	$global-radius 表示所有具有圆角边框的元素的全局值。	数值	0
24	$global-text-direction 将 CSS 的文本方向设置为ltr或rtl		ltr

打印页面

基础 - 全局样式

字体大小

颜色

Sass 参考

变量