基礎 - 全域性樣式

本章我們將學習全域性樣式。Foundation 框架的全域性 CSS 包含了有用的重置，確保樣式在不同瀏覽器中保持一致。

字型大小

瀏覽器樣式表中的字型大小預設設定為 100%。預設字型大小設定為 16 畫素。網格大小根據字型大小計算。為了擁有不同的基礎字型大小且網格斷點不受影響，請將$rem-base設定為$global-font-size的值，該值必須以畫素為單位。

顏色

連結和按鈕等互動元素使用來自 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

列印頁面