CSS設(shè)計(jì)指南（第3版）作品目錄

時(shí)間：2023-02-15 03:45:02 | 來(lái)源：營(yíng)銷百科

時(shí)間：2023-02-15 03:45:02 來(lái)源：營(yíng)銷百科

CSS設(shè)計(jì)指南（第3版）作品目錄：版權(quán)聲明

Authorized translation from the English language edition,entitled Stylin' with CSS:A Designer's Guide,Third Edition by Charles Wyke-Smith,publishe……

內(nèi)容提要

本書是一本面向初中級(jí)讀者的經(jīng)典設(shè)計(jì)指南。全書共分8章，前4章分別介紹了HTML標(biāo)記和文檔結(jié)構(gòu)、CSS工作原理、定位元素、字體和文本，對(duì)規(guī)則、聲明、層疊、特指度、選擇符等基本概念進(jìn)行了詳細(xì)解讀。隨后4章介紹了頁(yè)面布局、界面組件，CSS3圓角、陰影、漸變、多背景等視覺(jué)設(shè)計(jì)技巧，最后還對(duì)如何實(shí)現(xiàn)最前沿的響……

兩個(gè)'之最'（譯者序）

或許你不敢相信，這本書創(chuàng)下了不少'之最'。雖然只能說(shuō)是我自己經(jīng)歷過(guò)的'之最'，但說(shuō)不定它們也是'中國(guó)之最'，甚至'世界之最'。首先，這是翻譯遍數(shù)最多的一本書。2006年，我翻譯了本書第1版。當(dāng)時(shí)是為了學(xué)習(xí)翻譯而翻譯，并沒(méi)有出版（也沒(méi)有出版社引進(jìn)），翻譯稿至今仍靜靜地躺在電腦硬盤的'翻譯檔案'里。2……

前言

前言對(duì)網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，這是一個(gè)激動(dòng)人心的時(shí)刻！互聯(lián)網(wǎng)已經(jīng)囊括了幾乎所有媒體，有線電視、CD和DVD已經(jīng)被Hulu、Netflix、Pandora和Spotify等這些按需取用的在線服務(wù)取代。當(dāng)然，訪問(wèn)這些媒體的設(shè)備同樣異彩紛呈。有傳統(tǒng)的臺(tái)式電腦、筆記本電腦，還有平板電腦、智能手機(jī)，甚至60英寸……

致謝

致謝首先感謝Peachpit的出版團(tuán)隊(duì)。感謝Micheal Nolan鼓勵(lì)我寫這個(gè)版本并保證選題通過(guò)，感謝項(xiàng)目編輯Nancy Peterson的指導(dǎo)、見(jiàn)解和耐心，還要感謝出版人Nance Ruenzel在7年間連續(xù)出版我的書。對(duì)于編輯團(tuán)隊(duì)，我要感謝對(duì)語(yǔ)法較真兒的校對(duì)編輯Darren Meiss……

第1章HTML標(biāo)記與文檔結(jié)構(gòu)

這是一本講CSS的書，所以，第1章要先講講HTML（Hypertext Markup Language，超文本標(biāo)記語(yǔ)言）。之所以從HTML講起，是因?yàn)镃SS的用途就是為HTML標(biāo)記添加樣式。所以，你首先得知道怎么編寫和構(gòu)造HTML標(biāo)記，才能讓CSS更方便地為它添加樣式。每個(gè)網(wǎng)頁(yè)在呱呱墜地時(shí)都只包含……

1.1HTML標(biāo)記基礎(chǔ)

1.1.1文本用閉合標(biāo)簽

1.1.2引用內(nèi)容用自閉合標(biāo)簽

1.1.3屬性

1.1.4標(biāo)題與段落

1.1.5復(fù)合元素

1.1.6嵌套標(biāo)簽

1.2HTML文檔剖析

1.2.1HTML模板

1.2.2塊級(jí)元素和行內(nèi)元素

1.2.3嵌套的元素

1.3文檔對(duì)象模型

1.4小結(jié)

第2章CSS工作原理

第1章我們了解了怎么通過(guò)HTML來(lái)創(chuàng)建文檔結(jié)構(gòu)。本章，我們來(lái)說(shuō)一說(shuō)CSS規(guī)則怎么為HTML添加樣式，并解釋層疊的工作機(jī)制——當(dāng)元素的同一個(gè)樣式屬性有多種樣式值的時(shí)候，CSS就要靠層疊機(jī)制來(lái)決定最終應(yīng)用哪種樣式。每個(gè)HTML元素都有一組樣式屬性，可以通過(guò)CSS來(lái)設(shè)定。這些屬性涉及元素在屏幕上顯示時(shí)的……

2.1剖析CSS規(guī)則

CSS規(guī)則命名慣例

2.2上下文選擇符

2.3特殊的上下文選擇符

2.3.1子選擇符

2.3.2緊鄰?fù)x擇符

2.3.3一般同胞選擇符~

2.3.4通用選擇符

2.4ID和類選擇符

2.4.1類屬性

2.4.2ID屬性

2.4.3什么時(shí)候用ID，什么時(shí)候用類

2.4.4ID和類的小結(jié)

2.5屬性選擇符

2.5.1屬性名選擇符

2.5.2屬性值選擇符

2.5.3屬性選擇符的小結(jié)

2.6偽類

2.6.1UI偽類

2.6.2結(jié)構(gòu)化偽類

2.7偽元素

2.8繼承

2.9層疊

2.9.1樣式來(lái)源

2.9.2層疊規(guī)則

2.9.3計(jì)算特指度

2.10規(guī)則聲明

2.10.1文本值

2.10.2數(shù)字值

2.10.3顏色值

2.11小結(jié)

第3章定位元素

本章，我們?cè)搶W(xué)習(xí)盒模型了。當(dāng)然，還有position和display屬性，以及如何浮動(dòng)（float）和清除（clear）元素。這么說(shuō)吧，要掌握CSS技術(shù)，核心就是要掌握元素定位，只有這樣才能用CSS創(chuàng)造出專業(yè)水準(zhǔn)的頁(yè)面布局。所謂盒模型，就是瀏覽器為頁(yè)面中的每個(gè)HTML元素生成的矩形盒子。這些盒子們……

3.1理解盒模型

3.1.1盒子邊框

3.1.2盒子內(nèi)邊距

3.1.3盒子外邊距

3.1.4疊加外邊距

3.1.5外邊距的單位

3.2盒子有多大

3.3浮動(dòng)與清除

3.3.1浮動(dòng)

3.3.2圍住浮動(dòng)元素的三種方法

3.4定位

3.4.1靜態(tài)定位

3.4.2相對(duì)定位

3.4.3絕對(duì)定位

3.4.4固定定位

3.4.5定位上下文

3.5顯示屬性

3.6背景

3.6.1CSS背景屬性

3.6.2背景顏色

3.6.3背景圖片

3.6.4背景重復(fù)

3.6.5背景位置

3.6.6背景尺寸

3.6.7背景粘附

3.6.8簡(jiǎn)寫背景屬性

3.6.9其他CSS3背景屬性

3.6.10多背景圖片

3.6.11背景漸變

3.7小結(jié)

第4章字體和文本

網(wǎng)頁(yè)設(shè)計(jì)中很多時(shí)候都要處理文本，包括段落、標(biāo)題、列表、菜單和表單中的文本。因此，理解本章要講的字體和文本屬性，對(duì)于創(chuàng)造出專業(yè)水準(zhǔn)的網(wǎng)頁(yè)排版非常重要。一個(gè)網(wǎng)站的品質(zhì)如何，有時(shí)候只要看看它用的字體就能一目了然。如果說(shuō)圖片只是蛋糕上的糖衣，那么排版才是卓越設(shè)計(jì)的根本。這一章主要介紹字體和文本，以及與它們……

4.1字體

4.1.1字體族

4.1.2字體大小

4.1.3字體樣式

4.1.4字體粗細(xì)

4.1.5字體變化

4.1.6簡(jiǎn)寫字體屬性

4.2文本屬性

4.2.1文本縮進(jìn)

4.2.2字符間距

4.2.3單詞間距

4.2.4文本裝飾

4.2.5文本對(duì)齊

4.2.6行高

4.2.7文本轉(zhuǎn)換

4.2.8垂直對(duì)齊

4.3Web字體大揭秘

4.3.1公共字體庫(kù)

4.3.2打包的@font-face包

4.3.3生成@font-face包

4.4文字版式

4.4.1簡(jiǎn)單的文本布局

4.4.2基于網(wǎng)格排版

4.4.3經(jīng)典的排版練習(xí)

4.5小結(jié)

第5章頁(yè)面布局

本章，我們來(lái)學(xué)習(xí)多欄頁(yè)面布局。很多網(wǎng)站為了在第一屏盡可能多地顯示信息，都采用了多欄布局。這里所說(shuō)的'第一屏'就是用戶無(wú)須滾動(dòng)就能看到的頁(yè)面區(qū)域，相當(dāng)于傳統(tǒng)報(bào)紙行業(yè)所說(shuō)的'折痕之上'的版面。一般來(lái)說(shuō)，兩欄、三欄，甚至四欄布局都很常見(jiàn)。但無(wú)論幾欄，每個(gè)頁(yè)面都要涉及一些關(guān)鍵技術(shù)和指導(dǎo)思想，這些內(nèi)容本章都將……

5.1布局的基本概念

布局高度與布局寬度

5.2三欄-固定寬度布局

為欄設(shè)定內(nèi)邊距和邊框

5.3三欄-中欄流動(dòng)布局

5.3.1用負(fù)外邊距實(shí)現(xiàn)

5.3.2用CSS3單元格實(shí)現(xiàn)

5.4多行多欄布局

5.4.1CSS選擇符的實(shí)際應(yīng)用

5.4.2內(nèi)部DIV實(shí)戰(zhàn)

5.5小結(jié)

第6章界面組件

界面組件是我對(duì)HTML提供的常見(jiàn)用戶界面（UI，User Interface）元素的稱呼，包括列表和表單等。實(shí)際上，下拉菜單和彈出層也是很常用的界面組件，只不過(guò)HTML沒(méi)有提供對(duì)應(yīng)的原生標(biāo)簽而已，本章也將介紹如何通過(guò)標(biāo)記和樣式實(shí)現(xiàn)它們。除了介紹怎么實(shí)現(xiàn)這些界面組件，我還會(huì)告訴你怎么寫代碼才能更方便……

6.1導(dǎo)航菜單

6.1.1縱向菜單

6.1.2橫向菜單

6.1.3下拉菜單

6.2表單

6.2.1HTML表單元素

6.2.2表單標(biāo)記策略

6.2.3設(shè)定表單樣式

6.2.4設(shè)計(jì)搜索表單

6.3彈出層

6.3.1堆疊上下文和z-index

6.3.2用CSS創(chuàng)造三角形

6.4小結(jié)

第7章CSS3實(shí)戰(zhàn)

這一章我們要寫一個(gè)完整的網(wǎng)頁(yè)啦！這個(gè)網(wǎng)頁(yè)要用到第5章介紹的頁(yè)面布局技術(shù)，還有第6章講解的界面組件設(shè)計(jì)技術(shù)。不僅如此，我們還會(huì)展示很多CSS3的新屬性，涉及圓角、文字陰影、盒陰影、過(guò)渡和變換。這些CSS3樣式，可以為頁(yè)面的整體設(shè)計(jì)增添專業(yè)氣息。還是說(shuō)實(shí)話吧，本章這個(gè)網(wǎng)頁(yè)其實(shí)就是我在寫這本書的時(shí)候?qū)懙摹?br>
7.1規(guī)劃頁(yè)面結(jié)構(gòu)

HTML結(jié)構(gòu)

7.2頁(yè)眉

7.2.1頁(yè)面標(biāo)題

7.2.2搜索表單

7.2.3菜單

7.3專題區(qū)

7.3.1登錄表單

7.3.2博文鏈接

7.4圖書區(qū)

7.5頁(yè)腳

7.6小結(jié)

第8章響應(yīng)式設(shè)計(jì)

今天的網(wǎng)頁(yè)布局必須能根據(jù)它自己所處的不同環(huán)境作出響應(yīng)。大屏幕上的最佳體驗(yàn)和手機(jī)中的最佳體驗(yàn)有著天壤之別。在大屏幕上，可能使用多欄布局效果很不錯(cuò)，但多欄布局到了手機(jī)上，每一欄都會(huì)窄得沒(méi)法看。此時(shí)，所有內(nèi)容'魚貫而行'，即用一個(gè)欄來(lái)組織成了唯一可行的方案。這樣，用戶使用簡(jiǎn)單的掃屏手勢(shì)，就可以輕松自如地滾……

8.1小設(shè)備上的大布局

8.2媒體查詢

8.2.1@media規(guī)則

8.2.2標(biāo)簽的media屬性

8.2.3斷點(diǎn)

8.2.4用標(biāo)簽設(shè)定視口

8.3針對(duì)平板優(yōu)化布局

8.4針對(duì)智能手機(jī)優(yōu)化布局

針對(duì)豎屏進(jìn)一步優(yōu)化

8.5最后兩個(gè)問(wèn)題

8.5.1移動(dòng)Safari中的縮放bug

8.5.2讓下拉菜單支持觸摸

8.6小結(jié)

附錄技術(shù)提示

附錄技術(shù)提示編寫CSSCSS是HTML的排版語(yǔ)言。本書幾乎所有例子都是從HTML代碼塊開(kāi)始的，然后才是CSS代碼。HTML代碼類似如下所示。