CSS3網頁設計優化：新手也能快速建立跨平台網頁

前言

你在一個振奮人心的時刻閱讀了此書。現在，網頁樣式的設定方式正在改變，而且隨著技術的持續進步，這變化似乎不會很快結束。網頁已是一個美麗世界，但當有了比以往更多的功能可妝點你的頁面時，創作的可能性就變得更無窮無盡。

誰適合閱讀此書？

本書主要是為那些完全沒接觸過網頁樣式的人所寫，但對於熟悉CSS 的人來說

這依舊是很棒的參考書籍－尤其是當你想多複習一些還記不太起來的最新CSS

功能時。

你最好對HTML（Hypertext Markup Language，超文本標記語言）有基本的

了解，不過這並非絕對必要。我將於第2 章為你介紹建構本書範例網頁所用的

HTML。因此不論你是選擇先學HTML 再學CSS，又或反之，都一定能夠漸漸

熟悉這兩種技術。

若你是個業餘愛好者、某個想轉行至美好網路產業的人、一個網站亟需修改樣式的站長，抑或是一個想提升自我並學會最新技術與現今所用方法的網頁設計/ 開發人員，本書正是為你而設計。

你將學到的內容

本書不僅能讓你起步，還要讓你能跑、能跳、能有大躍進！

你將從網頁樣式極基本的設定開始學習，包括更改背景色、文字尺寸⋯等等，接著進入較進階的主題如動畫和媒體查詢，而這些功能可讓你依據不同大小的裝置來變更頁面配置。

雖然全書各章基本上是由淺入深的，不過更重要的是，本書所呈現的編排方式

正是我和其他許多網路業界人士建立網站時所採取的工作流程。因此在你學習

CSS 的同時，還能學到可應用於實際專案的「最佳做法」，讓你的網頁不只是美觀而已，還便於更新，且可在各式各樣的裝置上檢視（例如桌上型電腦和手機）。

你還會學到一些未列在CSS 規格書（介紹CSS 的官方技術文件）中的特殊方法與技巧，而多年來，網頁設計師與開發人員們一直是靠著這規格書來運用CSS

的呢。

你將學到的內容

本書不僅能讓你起步，還要讓你能跑、能跳、能有大躍進！

你將從網頁樣式極基本的設定開始學習，包括更改背景色、文字尺寸⋯等等，接著進入較進階的主題如動畫和媒體查詢，而這些功能可讓你依據不同大小的裝置來變更頁面配置。

雖然全書各章基本上是由淺入深的，不過更重要的是，本書所呈現的編排方式

正是我和其他許多網路業界人士建立網站時所採取的工作流程。因此在你學習

CSS 的同時，還能學到可應用於實際專案的「最佳做法」，讓你的網頁不只是美觀而已，還便於更新，且可在各式各樣的裝置上檢視（例如桌上型電腦和手機）。

你還會學到一些未列在CSS 規格書（介紹CSS 的官方技術文件）中的特殊方法與技巧，而多年來，網頁設計師與開發人員們一直是靠著這規格書來運用CSS

的呢。

本書使用方法

在第2 章中，我將為你介紹一間虛構的公司，而該公司要求你替他們建立網頁－無酬勞，但經驗無價！你可下載專案所需的檔案以著手製作。這份下載資料包含各章所需的最新專案檔（有些較大章節還會分成幾個不同階段的檔案）。我會在書中標明不同階段該用的檔案，以便你比較這些專案檔和你自己的製作成果，或是若你沒有依據前面的步驟操作，那麼也可直接使用特定階段的專案檔來進行後續練習。

你可依據自己目前的CSS 運用經驗，來決定跳到某些讓你最感興趣的章節－別

擔心，各章開頭處都會標明該章節應使用的專案檔。

讀完本書後，它將成為你桌面上的最佳參考書，當你需要複習某些功能的用法，

或想解決特定問題時，本書都能派上用場。每個屬性的說明內容都包含了實用資訊，例如該屬性的初始值與瀏覽器的相容性⋯等等，有利於快速查詢。而若你並不熟悉這些術語，我也會為你說明喔！

閱讀本書時可搭配運用Treehouse 學習網站

你不須成為Treehouse 學習網站的會員，也一樣可以有效運用本書，但這兩者確實是相輔相成的。雖然兩者都以全面性的學習為目標，但總還是能學到一些額外的東西。

更重要的是，Treehouse 影片課程的最後往往帶著一些有趣、具互動性的挑戰

題，可讓你好好測試一下所學知識。你可以不斷反覆嘗試任一挑戰題，直到你覺得自己已經充分熟悉該主題為止。

Treehouse網站上也有個很棒的社群（身為其中一員我感到相當榮幸），每當你

有疑問或想炫耀你的CSS 技巧時，就來加入我們吧！

前言

你在一個振奮人心的時刻閱讀了此書。現在，網頁樣式的設定方式正在改變，而且隨著技術的持續進步，這變化似乎不會很快結束。網頁已是一個美麗世界，但當有了比以往更多的功能可妝點你的頁面時，創作的可能性就變得更無窮無盡。

誰適合閱讀此書？

本書主要是為那些完全沒接觸過網頁樣式的人所寫，但對於熟悉CSS 的人來說

這依舊是很棒的參考書籍－尤其是當你想多複習一些還記不太起來的最新CSS

功能時。

你最好對HTML（Hypertext Markup Language，超文本標記語言）有基本的

了解，不過這並非絕對必要。我將於第2 章為你介紹建...

PART 1 入門
CHAPTER 1 了解CSS 與現代網頁
CHAPTER 2 學習前的準備工作

PART 2 學習CSS 語法並加入外觀呈現類樣式
CHAPTER 3 掌控CSS 選擇器的威力
CHAPTER 4 利用屬性值來建立樣式
CHAPTER 5 加入外觀呈現類樣式

PART 3 建構穩固且適應力強的網頁結構
CHAPTER 6 建立基本的網頁結構
CHAPTER 7創造空間與理解區塊模型
CHAPTER 8 建立多欄式版面配置
CHAPTER 9 理解顯示、定位與文件流

PART 4 文字編排
CHAPTER 10 改變字型
CHAPTER 11 為字型及文字套用樣式

PART 5 利用變形與動畫功能將網頁帶入全新的層次
CHAPTER 12 加入2D 變形效果
CHAPTER 13 以3D 變形超群脫俗
CHAPTER 14 利用變形與動畫功能為你的網站帶來生命力

PART 6 為多種瀏覽器及裝置做準備
CHAPTER 15 進行跨瀏覽器測試
CHAPTER 16 讓你的網站能跨多種裝置完美呈現
CHAPTER 17 最後的處理與結論

PART 1 入門
CHAPTER 1 了解CSS 與現代網頁
CHAPTER 2 學習前的準備工作

PART 2 學習CSS 語法並加入外觀呈現類樣式
CHAPTER 3 掌控CSS 選擇器的威力
CHAPTER 4 利用屬性值來建立樣式
CHAPTER 5 加入外觀呈現類樣式

PART 3 建構穩固且適應力強的網頁結構
CHAPTER 6 建立基本的網頁結構
CHAPTER 7創造空間與理解區塊模型
CHAPTER 8 建立多欄式版面配置
CHAPTER 9 理解顯示、定位與文件流

PART 4 文字編排
CHAPTER 10 改變字型
CHAPTER 11 為字型及文字套用樣式

PART 5 利用變形與動畫功能將網頁帶入全新的層次
CHAP...