全域樣式

我們的全域 CSS 包含實用的重設，以確保在不同電子郵件用戶端中維持一致的樣式。

字體大小

預設字體大小設定為瀏覽器樣式表的 100%，通常為 16 像素。這可確保與瀏覽器文字縮放或使用者設定的預設值相容。如果您使用的是 Foundation 的 Sass 版本，請編輯 $global-font-size 變數以變更基本字體大小。這可以是百分比值或像素值。

顏色

Foundation 中的所有互動元素，例如連結和按鈕，都使用相同的顏色。您在 Foundation 中看到的預設藍色色調來自 $primary-color Sass 變數。

許多元件也可以使用其他四種顏色：次要、警示、成功和警告。使用這些顏色為 UI 元素和動作提供更多背景。

主要

次要

成功

警告

警示

白色

淺灰色

中灰色

深灰色

黑色

顏色類別

有些元件，例如按鈕和標題，具有著色類別，可讓您透過將顏色的名稱新增為 CSS 類別，來變更元素的顏色。

HTML

<button class="button" href="#">Primary Action</button>
<button class="secondary button" href="#">Secondary Action</button>

<html>

<head></head>

<body>
  <table class="button button">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Primary Action</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="button secondary button">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Secondary Action</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

HTML

<callout class="success">
  <p>Created a new folder. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</callout>
<callout class="alert">
  <p>Error fetching stick. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</callout>

<html>

<head></head>

<body>
  <table class="callout">
    <tbody>
      <tr>
        <th class="callout-inner success">
          <p>Created a new folder. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </th>
        <th class="expander"></th>
      </tr>
    </tbody>
  </table>
  <table class="callout">
    <tbody>
      <tr>
        <th class="callout-inner alert">
          <p>Error fetching stick. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </th>
        <th class="expander"></th>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

回應式中斷點

與 Foundation for Sites 不同，Foundation for Emails CSS 是以桌面優先撰寫。這是因為許多較舊的桌面電子郵件用戶端不支援媒體查詢或 <style> 標籤。

您的電子郵件版面會在 596 像素時從桌面切換至行動裝置。這是容器的寬度，加上容器周圍間距的寬度。在 Foundation 的 Sass 版本中，您可以透過修改下列變數來變更中斷點

$global-width：容器的寬度。預設為 580px。
$global-gutter：格狀間距的寬度。這是用於將欄位彼此隔開或與容器邊緣隔開的內距。
$global-breakpoint：版面切換的中斷點。這是將 $global-width 和 $global-gutter 加總的變數。

Sass 參考

變數

此元件的預設樣式可以使用專案設定檔中的下列 Sass 變數進行自訂。

名稱	類型	預設值	說明
`$primary-color`	顏色	`#2199e8`	連結和按鈕等互動式元件的主要顏色。
`$secondary-color`	顏色	`#777777`	次要顏色，用於支援 `.secondary` 類別的元件。
`$success-color`	顏色	`#3adb76`	表示正面狀態或動作的顏色，用於 `.success` 類別。
`$warning-color`	顏色	`#ffae00`	表示警告狀態或動作的顏色，用於 `.warning` 類別。
`$alert-color`	顏色	`#ec5840`	表示負面狀態或動作的顏色，用於 `.alert` 類別。
`$light-gray`	顏色	`#f3f3f3`	Foundation 中淺灰色 UI 項目使用的顏色。
`$medium-gray`	顏色	`#cacaca`	Foundation 中中灰色 UI 項目使用的顏色。
`$dark-gray`	顏色	`#8a8a8a`	Foundation 中深灰色 UI 項目使用的顏色。
`$black`	顏色	`#0a0a0a`	Foundation 中黑色 UI 項目使用的顏色
`$white`	顏色	`#fefefe`	Foundation 中用於白色使用者介面項目的顏色
`$pre-color`	顏色	`#ff6908`	用於程式碼的顏色。
`$global-width`	數字	`580px`	容器的寬度。
`$global-width-small`	長度	`95%`	小螢幕上容器的寬度。
`$global-gutter`	長度	`16px`	格線元素的間距。
`$global-gutter-small`	長度	`$global-gutter`	小螢幕上格線元素的間距。
`$body-background`	長度	`$light-gray`	主體背景顏色。
`$container-background`	顏色	`$white`	容器背景顏色
`$global-padding`	數字	`16px`	全域內距。
`$global-margin`	數字	`16px`	全域外距。外距需要大寫「M」才能在 Outlook.com 中運作。
`$global-radius`	數字	`3px`	圓角的全域半徑。
`$global-rounded`	數字	`500px`	圓角的全球圓角半徑。
`$global-breakpoint`	字串	`$global-width + $global-gutter`	從桌面樣式切換到行動裝置樣式的全域媒體查詢。

全域樣式

字體大小

顏色

顏色類別

回應式中斷點

Sass 參考

變數

ZURB 大師課程回應式電子郵件

電子郵件基礎

想要更多嗎？

與我們交談

保持最新資訊