70–480 Training Guid Chapter.4 CSS

Ilandy Chiu
Feb 23, 2017 · 13 min read
本篇是讀書筆記，若有說明錯誤的地方請不吝指正 @@;-
慎入 !! 對 CSS 的背景有興趣比較適合看，謝謝。 -.-||

你已經學習 HTML 提供架構、 Javascript 提供行為。這個章節你會學習在 HTML 文件上 CSS (層疊式樣式表) 如何呈現。 CSS 有可重複使用的特性，提供設計和製作好看的網站或是 Win8 應用程式 。

如果你只是使用 HTML 來提供架構，CSS 小且迅速，提供更多的選擇來渲染文件。 CSS還簡化了網站更新，因此您可以修改樣式以更改 Web 或 Win 8 應用程式中所有 HTML 文件的外觀。
這個章節簡短介紹 CSS 歷史然後深入討論 CSS 選擇器和屬性。

Lesson 1 - 介紹 CSS3

—
CSS 的源於標準化通用標記語言SGML ( Standardized Generalized Markup Language 來自 20 世紀80年代 )，其目地是在許多網頁上創建一致的外觀，並將呈現與結構各自獨立，所以你可以為列印、瀏覽或是其他不同的情境提供不同的樣式表。

全球資訊網聯盟（W3C）於1996年12月正式釋出了CSS 1，然後開始製作 CSS 2 。於1998年5月出版了CSS 2 W3C 並開始製作 Css 3 的各種模組，W3C 將 CSS3 分為可以獨立發布的模組，而不是為他建立一個版本。
…

在2005年，W3C 變得更加嚴格執行標準的要求，並且已經發布的標準。如CSS 2.1 修訂版，CSS3 選擇器和 CSS3 文本從待釋出被推回工作草案。直到 2011 年 6 月，CSS 2.1 版本才發布。

因為 CSS3 是模組化的，每個模塊的穩定性不同，其狀態不同。 W3C 的 CSS 工作組發布了 50 多個模組。在撰寫本文時，以下四個模塊已達到推薦狀態。

MediaQuery — 根據螢幕解析度和方向等條件調整 HTML 文檔的呈現，以適應智慧型手機和平板電腦等不同設備。

Namespace — 基於 XML 的格式，可以使用 Namespaces(命名空間) 來區分同一文檔中同一元素名稱的多個用途。這個版本說明 CSS 如何透過它們的命名空間和本地名稱來選擇這些元素選擇器。

Selector Level 3 — 描述使用選擇器在 HTML 或 XML 文檔中選擇要附加樣式屬性的元素時在 CSS 中使用的元素選擇器。

Color — 指定 CSS 的與顏色相關的方面，包括透明度和<color>值類型的各種表示形式。

CSS 2.1 包含在 CSS3 中，因為 CSS3 設計為向後兼容 CSS 2.1。本章介紹 CSS3 涵蓋 CSS 2.1 的許多部分 。
CSS 提供透過定義 HTML 架構的方式，呈現 HTML 元素如何顯示。通過使用 CSS，您可以設置背景和前景的顏色，邊距，邊框，字體，位置等。您可以對 HTML 元素進行控制，因此您可以決定元素的顯示方式以及它們在螢幕上的顯示位置。

如果您使用過文字處理應用程序（如 Microsoft Word），則可能應用了一種樣式來更改單詞或段落的字體大小。這與 CSS 類似，您可以在其中將應用樣式於元素，讓他以不同方式呈現。樣式是描述如何格式化 HTML 的特定部分的規則。樣式表是一組樣式規則。
您可以建立一個樣式，並將其應用於選擇器的許多元素。您可以使用選擇器去標記和選擇元素，根據 Tag Name，Class Name，ID 等。您可以創建與圖像共用的樣式，並且可以創建僅適用於超鏈接的樣式。您還可以創建可應用於任何元素的命名樣式。可重複使用的特性是非常強大的。

CSS 最強大的功能是層疊(cascading)。要理解層疊，試想瀏覽器在處理元素有效樣式方面的過程。
瀏覽器可能正在為 HTML 頁面讀取多個樣式表，其中每個樣式表可能具有影響元素的有效樣式的樣式規則。當每個樣式被讀取時，它會修改元素的有效樣式。樣式表應用的樣式設置能夠被隨後的樣式覆蓋。有效的樣式從一個樣式表到下一個樣式表，可能被沿途覆蓋。
層疊會在下一個 Lesson 「Understanding selectors, specificity, and cascading」有更詳細的說明。

Defining and applying style — 定義與應用樣式

—
樣式規則由兩個部分組成：
選擇器 (Selector)— 位於 HTML 文件上的元素將會被加上樣式。
需告區域 (declaration block) — 含有樣式的宣告。
每個 CSS 的宣告式都是獨立的，並在結尾會有分號，表示宣告完成。
一個宣告式由一個 CSS 屬性搭配分號後面再加上一個值，範例如下。

body {  /* body -> selector 選擇器 */   background-color: white; /* CSS 宣告式以分號結尾  */
   color: gray;} /* -> curly braces (宣告區域) */

Adding comments within a style sheet — 在樣式表上加上註解

—
/* 註解 */ → 註解的內容放在 /* 開頭，*/ 結尾的中間，註解可以包含多行。
範例如下：

/* This is the style 
   for the body element */
body {    background-color: white; /* The rgb value is #fff */
   color: gray; /* This is the font color */}

Creating an inline style — 建立行內樣式

—
所有的 HTML Tag 都有共有的其中一個屬性，稱為 style，他提供行內樣式的撰寫。因為行內樣式是被定義在元素上的，因此如果你想要加上樣式你不需要選擇器；你只需要一個宣告區域。範例如下：

<body style="background-color: white; color: gray;"></body>

這個範例裡，你不需要一個對外的樣式，因為你定義個樣是在實際的 <body> 元素。
但你應該嘗試避免這樣的技巧，因為這種方式違反結構與呈現樣式各自獨立的宗旨，而且並沒有建立任何的可重複使用的特性。因為你可能會不斷地複製貼上這樣的程式碼，在你的應用程式上。這樣特定的用可解決一些問題，例如你的 CSS 是一個外連的 CSS 樣式表，但其中一個元素區要和其他的樣式不同。儘管如此，最好保持結構和呈現樣式各自獨立，所以你應該避免這種方法。

Creating an embedded style — 建立嵌入式的樣式

—
你可以建立 <style> 這個元素建立一個遷入在你的 HTML 文件中的樣式表。在這個頁面中，你必須使用 CSS 選擇器去指派這些被定義的樣式給元素。
範例如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
      body {
          background-color: white;
          color: gray;
      } 
  </style>
</head>
<body></body>
</html>

注意：嵌入是的樣式是被放在 <head> 標籤中的。
在 <style> 這個標籤中，可以增加許多你需要的樣式規則。
這個方式可以在 HTML 文件中分離結構與樣式呈現，也可以在這個檔案建立可以重複使用的樣式，但你應該避免這種技巧，因為這種方式不能讓檔案分離，也無法促進全 HTML 文件重複使用的特性。當你想讓一個單獨的 HTML 文件可以單獨渲染所需的內容時，你能夠用這個方法。

Creating an external style sheet — 建立連外樣式

—
最好的方式是建立一個連外的樣式表檔案，你可以透過 <link> 連到你的頁面，儘管你可以建立一樣的嵌入樣式。

範例如下：

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
 <title></title>
 <link rel='stylesheet' type='text/css' href='Content/default.css' />
</head>
<body></body>
</html>

範例中的 <link> 元素包含幾個屬性，「rel」屬性是定義該 HTML 頁面與連外樣式表檔案之間關係。「type」屬性則是定義此檔案的格式的 MIME Type 為文字格式的 CSS 的連外檔案。「href」屬性定義連外 CSS 檔案 default.css 位於 Content 資料夾的相對路徑，如果你想為 <body> 加上樣式只要打開 default.css 加上 CSS 樣式即可。

範例如下：

/* 發揮想像力，我在 default.css 中 */body {
          background-color: white;
          color: gray;
}

使用連外的 CSS 樣式檔案是最佳置入的方式，你也可以連結多個連外的樣式。

MIME : 多用途網際網路郵件擴展- 參考資料 -https://zh.wikipedia.org/wiki/%E5%A4%9A%E7%94%A8%E9%80%94%E4%BA%92%E8%81%AF%E7%B6%B2%E9%83%B5%E4%BB%B6%E6%93%B4%E5%B1%95

Using media to specify the target device — 使用 media 定義目標裝置

—

<link> 元素也有 media 的屬性，他可以定義目標裝置。透過 media 這個屬性，你可以為每一種裝置類型建立 CSS 檔案並將他們連至你的網頁。當這個 HTML 文件被渲染，瀏覽器會判斷媒體類型與適合的 CSS。瀏覽器只能選擇一種媒體類型去渲染你的 HTML 文件，跟著下表的媒體類型你就能獲得使用 media 的能力。

  • all — 所有裝置
  • braille — 盲文顯示機
  • embossed — 盲文打字機
  • handheld — 手持式裝置低解析的螢幕
  • print — 預覽列印時會在顯示的文件和資料
  • screen — 所有電腦螢幕
  • speech — 語音合成器
  • tty — 打字机以及类似的等宽字符网格的媒介
  • tv — 電視機類型

你也可以在 media 中同時指定多個媒體類型，透過逗號隔開。

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
 <title></title>
 <link rel='stylesheet' type='text/css' href='Content/screen.css' media='screen'/>
<link rel='stylesheet' type='text/css' href='Content/print.css' media='print'/>
<link rel='stylesheet' type='text/css' href='Content/default.css' media='print, tv'/></head>
<body></body>
</html>- 參考資料 -
http://www.w3school.com.cn/tags/att_link_media.asp

Specifying the character encoding of the style sheet — 定義樣式的編碼

—

可以在檔案頂端透過 ＠charset 設定 CSS 編碼方式，他可以讓所有的瀏覽保持一致，在範例中我們使用 UTF-8 作為編碼方式，萬國碼是最常見的編碼方式。

@charset 'UTF-8';body {
          background-color: white;
          color: gray;
}

若是你的 HTML 文件，有使用 meta 元素去設定編碼方式， meta 上的設定會複寫在你 CSS 檔案中所設定的編碼方式，如以下範例：

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
 <title></title>
 <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'>
 <link rel='stylesheet' type='text/css' href='Content/default.css' media='all'/></head>
<body></body>
</html>

如果 HTML 文件在 <meta> 元素具體定義 charset 的編碼方式 ，你就不需要在 CSS 檔案中寫上 charset 的規則。如果這份 CSS 會被共享，你想要確認這份樣式編碼方式是正確的，為此你應該為他定義 charset 規則。

Imported style sheets from other style sheets — 匯入其它樣式表

—
當你的 CSS 變得越來越多，你會想要將他們拆分的小一些，能夠更好管理檔案。 ＠import 這個規則讓你能夠匯入一個 CSS 檔案到當下的樣式表。你可以依照你的需求定義很多個 ＠import ，而＠import 這個規則必須在你的樣式之上除了 charset 以外，如果你甚至在 @import 規則之上有一個註釋，它們將無法正常執行。

在每個 ＠import 後的結尾分號可以加上媒體類型 就能為匯入的樣式分別定義媒體類型，若是沒有加上媒體類型，預設媒體類型為 all。範例如下：

@charset 'UTF-8';
@import url('/Content/header.css');screen /* 只有螢幕的時才使用的 CSS */
@import url('/Content/menu.css');
@import url('/Content/sidebar.css');
@import url('/Content/mainContent.css');
@import url('/Content/footer.css'); print /* 只有預覽列印才使用 */body {
  background-color: white;
  color: gray;
}

Using @font-face rule to import fonts — 使用 font-face 規則匯入字體

—
你或許講使用特定的字體，但你知道許多使用者在他們的電腦上不會有那些字體。為了解決這個問題，你可以在樣式中提供一個字體連結，讓它可以下載和使用字體。跟著以下的範例具體說明 `@font-face` 規則並定義 myFont 字體會載入透過這個檔案 Foncy_Light.ttf 或 Fancy_Light.eot。

@font-face {
   font-family: myFont;
   src: url('Fancy_Light.ttf'),
        url('Fancy_Light.eot'); /* IE9 */
}

從 IE 9 開始，添加了對 Microsoft 開發用於 Web 使用的嵌入式 Open Type（.eot）文件的支援。這些字體文件可以被創建，通過使用 Microsoft Web嵌入字體工具（WEFT）從現有的 TrueType 字體文件。 Firefox、Chrome、Safari 和Opera 支援 TrueType 文件（.ttf）文件，因此您必須指定兩種類型才能與大多數瀏覽器兼容。

Lesson summary — 總結

—

  1. 樣式的規則是由選擇器與宣告區塊這兩個部分組合而成。
  2. 選擇器在 HTML 文件中找出的元素將會被賦予樣式。
  3. 宣告區塊包含樣式指令
  4. 樣式可以是行內、嵌入或是連外。
  5. 使用連外樣式保持架構與呈現樣式各自獨立。
  6. 使用 <link> 的 media 屬性為樣式表具體定義目標裝置。

—

一個 Lesson 終於結束了！！

By 設計師的前端世界 — Ilandy

Write the first response

Discover Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Make Medium yours

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Become a member

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade
AboutHelpLegal