CSS完全自學(xué)手冊

寫給自學(xué)編程的人員
前言
第一篇 CSS零基礎(chǔ)入門
第1章 CSS概述
1.1 CSS是什么
1.1.1 什么是Cascade
1.1.2 層疊的樣式
1.1.3 表的作用
1.2 CSS的發(fā)展歷程
1.2.1 關(guān)于HTML
1.2.2 設(shè)計HTML的目的
1.2.3 HTML的特點
1.2.4 CSS的傳奇歷程
1.3 建立網(wǎng)站和瀏覽網(wǎng)站
1.3.1 什么是服務(wù)
1.3.2 服務(wù)的場所
1.3.3 創(chuàng)建服務(wù)場所-建立網(wǎng)站
1.3.4 創(chuàng)建服務(wù)內(nèi)容-網(wǎng)頁的上傳
1.3.5 開啟網(wǎng)頁發(fā)布服務(wù)
1.3.6 用戶瀏覽網(wǎng)站的過程
1.4 CSS在網(wǎng)站開發(fā)框架中的地位
1.5 制作CSS需要考慮的問題
1.5.1 對于不同用戶的照顧
1.5.2 對于不同瀏覽器的照顧
1.5.3 對于網(wǎng)站瀏覽速度的關(guān)注
1.6 小結(jié)

第2章 CSS初體驗
2.1 實驗一：尋找CSS
2.1.1 瀏覽器與網(wǎng)頁的外觀
2.1.2 找到樣式表
2.1.3 先模仿后進(jìn)步
2.2 CSS分類及其創(chuàng)建方法
2.2.1 CSS的3個種類
2.2.2 在Dreamweaver中創(chuàng)建CSS-利用Dreamweaver提供的模板
2.2.3 在Dreamweaver中創(chuàng)建CSS-自定義創(chuàng)建
2.3 實驗二：你的第1個樣式表
2.3.1 使用行內(nèi)樣式表
2.3.2 使用內(nèi)部樣式表
2.3.3 使用外部樣式表
2.3.4 各種樣式表的優(yōu)先級
2.4 小結(jié)

第3章 開啟CSS的大門
3.1 背景讓HTML頁面更漂亮
3.1.1 控制網(wǎng)頁的背景
3.1.2 HTML的顏色表示方法
3.1.3 如何獲取屏幕顏色
3.1.4 網(wǎng)頁文件的路徑
3.1.5 控制頁面上的文字
3.1.6 給文字增加更多效果
3.2 文本的排版
3.2.1 文本的縮進(jìn)
3.2.2 文本的對齊
3.2.3 改變文本字符間距
3.2.4 文字的其他設(shè)置
3.3 關(guān)于HTML的鏈接
3.3.1 鏈接和A標(biāo)簽
3.3.2 A標(biāo)簽的實例
3.3.3 A標(biāo)簽的幾種狀態(tài)
3.4 利用圖片豐富HTML外觀
3.4.1 在網(wǎng)頁中插入圖片
3.4.2 網(wǎng)頁中能顯示所有圖片嗎
3.4.3 改進(jìn)圖片的顯示-給圖片鑲邊
3.4.4 防止圖片被盜用的一個技巧
3.4.5 實驗：制作一頁包含圖文的電子簡歷
3.5 小結(jié)

第4章 學(xué)習(xí)一點CSS的語法
4.1 再訪HTML
4.1.1 組成HTML頁面的細(xì)胞-標(biāo)簽
4.1.2 CSS規(guī)則的具體寫法
4.1.3 標(biāo)簽應(yīng)用CSS規(guī)則的具體寫法
4.1.4 CSS選擇器的種類-8種武器
4.1.5 偽類
4.1.6 偽類的排列順序
4.2 盒模型
4.2.1 塊元素、內(nèi)聯(lián)元素和可變元素
4.2.2 盒模型概述
4.3 文檔類型
4.4 小結(jié)

第5章 組織：熟悉Span與Div
5.1 屬性與事件
5.1.1 什么是屬性
5.1.2 屬性的種類：基本屬性、擴展屬性
5.1.3 什么是事件
5.1.4 特別的屬性：事件屬性
5.2 Span是什么
5.2.1 Span有名字-ID屬性
5.2.2 Span的所在班級-Class屬性
5.2.3 Span的職務(wù)-Title屬性
5.2.4 Span的外貌-Style屬性
5.2.5 Span的Dir屬性
5.2.6 Span能說方言-Lang屬性
5.2.7 鼠標(biāo)左鍵發(fā)生的事情-OnClick/OnDblClick
5.2.8 其他的事件
5.3 Div標(biāo)簽
5.3.1 Div標(biāo)簽與Span標(biāo)簽的區(qū)別
5.3.2 Div標(biāo)簽的屬性
5.4 小結(jié)

第6章 裝載數(shù)據(jù)的擎天柱-表格
6.1 表格的外觀與結(jié)構(gòu)
6.2 再訪盒模型：單元格
6.2.1 再訪盒模型
6.2.2 修改盒子的寬度
6.2.3 單元格的重要屬性
6.3 表格的邊框
6.3.1 表格邊框的兩種模式
6.3.2 設(shè)置邊框的顏色、類型、粗細(xì)
6.3.3 表格邊框的其他屬性
6.3.4 邊框樣式規(guī)則的沖突問題
6.4 表格的外邊距
6.5 表格家族的其他標(biāo)簽
6.5.1 行標(biāo)簽
6.5.2 表頭標(biāo)簽
6.5.3 表內(nèi)容標(biāo)簽
6.5.4 表格題目標(biāo)簽
6.6 實驗：設(shè)計并實現(xiàn)顏色交替的表格
6.6.1 簡單的需求分析
6.6.2 代碼實現(xiàn)
6.6.3 進(jìn)一步思考
6.7 小結(jié)

第7章 表單
7.1 表單家族介紹
7.1.1 form標(biāo)簽
7.1.2 表單如何提交
7.1.3 form標(biāo)簽在瀏覽器中的外觀
7.1.4 形形色色的輸入標(biāo)簽
7.1.5 表單家族各成員標(biāo)簽的特點
7.1.6 表單家族各成員標(biāo)簽的事件
7.2 表單與樣式表
7.2.1 清除form標(biāo)簽前后的空白
7.2.2 設(shè)置豐富背景色的選擇框
7.2.3 設(shè)置input標(biāo)簽的邊框
7.2.4 動態(tài)改變文本輸入框的背景
7.2.5 關(guān)于表單各標(biāo)簽的快捷鍵
7.3 小結(jié)

第8章 CSS與網(wǎng)頁打印
8.1 CSS樣式中的媒體
8.1.1 如何按照媒體類型區(qū)分樣式
8.1.2 不同媒體類型下的樣式是否可以共享
8.2 實驗：制作適合打印的在線報名網(wǎng)頁
8.2.1 案例背景
8.2.2 網(wǎng)頁總體設(shè)計
8.2.3 標(biāo)簽
8.2.4 實現(xiàn)報名網(wǎng)頁內(nèi)容的分區(qū)
8.2.5 實現(xiàn)平面按鈕和文本框
8.2.6 網(wǎng)頁代碼實現(xiàn)-打印報名部分
8.2.7 精簡含有@media設(shè)置的樣式表
8.3 小結(jié)

第二篇 CSS濾鏡、風(fēng)格與定位
第9章 CSS濾鏡介紹
9.1 CSS濾鏡概述
9.1.1 濾鏡的編寫規(guī)范與分類
9.1.2 在網(wǎng)頁中增加濾鏡
9.2 透明度的問題：Alpha通道
9.2.1 Alpha濾鏡的屬性設(shè)置
9.2.2 Alpha濾鏡的實際例子
9.3 朦朧的美：blur
9.4 增加透明色效果（Chroma）
9.5 下落的陰影（DropShadow）
9.6 浮雕紋理（Emboss和Engrave）
9.7 給元素增加一些翻轉(zhuǎn)變換（Flip）
9.8 關(guān)于灰度（Gray）
9.9 霓虹燈：設(shè)置光暈（Glow）
9.1 0獨特的效果：反色（Invert）
9.1 1面紗與遮罩（Mask）
9.1 2運動模糊(MotionBlur）
9.1 2.1 運動模糊濾鏡的主要參數(shù)
9.1 2.2 不同Blur效果的比較
9.1 3讓元素更立體：增加陰影（Shadow）
9.1 4X射線效果（XRay）
9.1 5給文字增加波浪（Wave）
9.1 6基本圖形濾鏡（BasicImage）
9.1 7動態(tài)濾鏡
9.1 7.1 轉(zhuǎn)移濾鏡的種類
9.1 7.2 Barn濾鏡
9.1 7.3 動態(tài)濾鏡的特別寫法
9.1 7.4 RevealTrans動態(tài)濾鏡
9.1 7.5 RevealTrans濾鏡在網(wǎng)頁切換中的應(yīng)用
9.1 8背景濾鏡
9.1 8.1 PNG圖片格式
9.1 8.2 AlphaImageLoader濾鏡
9.1 8.3 Gradient濾鏡
9.1 9小結(jié)

第10章 CSS風(fēng)格的繼承
10.1 有其父必有其子：繼承與面向?qū)ο?br />10.2 查看繼承關(guān)系的工具
10.3 CSS中的繼承
10.3.1 文字樣式的繼承
10.3.2 邊距的繼承
10.4 標(biāo)簽的繼承性
10.5 小結(jié)

第11章 浮動與定位
11.1 浮動屬性初探
11.1.1 設(shè)置Float屬性的語法
11.1.2 用Float屬性設(shè)置圖文環(huán)繞
11.2 浮動屬性詳解
11.2.1 文檔流
11.2.2 浮動屬性的特點與實現(xiàn)過程
11.2.3 浮動標(biāo)簽的折行顯示
11.2.4 Float屬性的影響范圍
11.2.5 多幅圖片與文字的環(huán)繞
11.2.6 利用Clear屬性清除浮動
11.2.7 Float標(biāo)簽的左右逢源
11.2.8 Float標(biāo)簽與寬度設(shè)定
11.2.9 背景邊框與Float標(biāo)簽
11.3 定位技術(shù)
11.3.1 定位技術(shù)以及它的分類
11.3.2 絕對定位
11.3.3 相對定位
11.3.4 固定定位
11.4 小結(jié)

第12章 層次堆疊與隱藏
12.1 使網(wǎng)頁變成三維立體的z-index
12.1.1 z-index屬性簡介
12.1.2 堆疊上下文（stackcontext）
12.1.3 代碼順序和顯示順序
12.1.4 層疊的應(yīng)用舉例
12.2 控制標(biāo)簽的顯示與隱藏
12.2.1 Display屬性
12.2.2 Visibility屬性
12.3 小結(jié)

第13章 利用CSS+Div進(jìn)行網(wǎng)頁布局和排版
13.1 表格還是Div
13.1.1 利用表格進(jìn)行網(wǎng)頁布局
13.1.2 利用Div+CSS進(jìn)行網(wǎng)頁布局
13.2 用Div+CSS創(chuàng)建一列式網(wǎng)頁布局
13.2.1 創(chuàng)建一列式布局
13.2.2 代碼解讀
13.2.3 觀察與思考：3個問題
13.2.4 解決Div內(nèi)容垂直居中的問題
13.2.5 解決IE7瀏覽器中底部Div突出的問題
13.2.6 設(shè)置Body居中的技巧
13.3 用Div+CSS創(chuàng)建兩列式網(wǎng)頁布局
13.3.1 創(chuàng)建基本的兩列式布局
13.3.2 設(shè)置固定寬度的兩列式布局
13.4 用Div+CSS創(chuàng)建多列式網(wǎng)頁布局
13.5 用Div+CSS創(chuàng)建不規(guī)則網(wǎng)頁布局
13.6 小結(jié)

第三篇 CSS實戰(zhàn)布局
第14章 利用Dreamweaver進(jìn)行CSS設(shè)計
14.1 Dreamweaver介紹
14.1.1 如何獲得DreamweaverCS3
14.1.2 DreamweaverCS3的安裝過程
14.1.3 DreamweaverCS3操作界面介紹
14.1.4 DreamweaverCS3的代碼編輯技巧
14.2 在Dreamweaver中創(chuàng)建CSS
14.2.1 創(chuàng)建樣式表
14.2.2 創(chuàng)建外部樣式表
14.2.3 創(chuàng)建內(nèi)部樣式表
14.2.4 創(chuàng)建行內(nèi)樣式表
14.3 在Dreamweaver中詳細(xì)設(shè)置CSS規(guī)則
14.3.1 設(shè)置字體類型
14.3.2 設(shè)置背景
14.3.3 設(shè)置塊元素樣式
14.3.4 設(shè)置盒模型標(biāo)簽樣式
14.3.5 設(shè)置邊框樣式
14.3.6 設(shè)置列表樣式
14.3.7 設(shè)置標(biāo)簽定位
14.3.8 設(shè)置擴展效果
14.3.9 完成CSS設(shè)置
14.3.1 0應(yīng)用CSS樣式規(guī)則
14.3.1 1使用CSS樣式范例
14.4 小結(jié)

第15章 頁面CSS技巧運用實例
15.1 修改滾動條顯示效果
15.1.1 滾動條的結(jié)構(gòu)
15.1.2 通過樣式表來修改滾動條的外觀
15.2 利用Clip屬性進(jìn)行剪裁
15.2.1 Clip屬性
15.2.2 利用Clip屬性裁剪圖片
15.2.3 利用Clip屬性創(chuàng)建多彩文字
15.2.4 Clip屬性值的進(jìn)一步思考
15.2.5 Dreamweaver設(shè)置Clip屬性的小問題
15.3 改變列表的樣式
15.3.1 列表標(biāo)簽介紹
15.3.2 修改列表項的項目符號
15.3.3 列表項添加分隔符
15.4 實驗：利用列表標(biāo)簽創(chuàng)建導(dǎo)航菜單
15.4.1 面包屑路徑
15.4.2 將列表標(biāo)簽轉(zhuǎn)化為行內(nèi)元素
15.4.3 目標(biāo)導(dǎo)航條的外觀
15.4.4 目標(biāo)導(dǎo)航條的要求
15.4.5 代碼實現(xiàn)I：加入鏈接與邊框
15.4.6 代碼實現(xiàn)II：增加鼠標(biāo)劃過效果
15.5 小結(jié)

第16章 CSS與JavaScript
16.1 JavaScript簡介
16.1.1 JavaScript的分類
16.1.2 一個簡單的包含JavaScript的網(wǎng)頁
16.1.3 JavaScript的作用概述
16.2 JavaScript范例
16.2.1 利用JavaScript控制瀏覽器
16.2.2 利用JavaScript實現(xiàn)事件處理
16.2.3 JavaScript控制瀏覽器與網(wǎng)頁行為
16.2.4 利用JavaScript獲得系統(tǒng)信息
16.2.5 JavaScript通過Cookie記錄用戶狀態(tài)
16.3 利用JavaScript動態(tài)改變頁面樣式
16.3.1 JavaScript間接修改樣式
16.3.2 JavaScript直接修改樣式
16.3.3 JavaScript動態(tài)修改樣式小結(jié)
16.4 使用JavaScript需要注意的一些問題
16.4.1 開啟瀏覽器的JavaScript功能
16.4.2 JavaScript在網(wǎng)頁中的位置
16.4.3 在Dreamweaver中編輯JavaScript
16.4.4 深入學(xué)習(xí)JavaScript的建議
16.5 小結(jié)

第17章 項目學(xué)習(xí)：SmoothGallery相冊剖析
17.1 SmoothGallery簡介
17.1.1 SmoothGallery簡介
17.1.2 SmoothGallery下載與安裝
17.1.3 SmoothGallery效果演示
17.2 剖析SG2.0的CSS樣式
17.2.1 演示頁面的結(jié)構(gòu)
17.2.2 控制頁面總體外觀-layout.css
17.2.3 控制相片的外觀-jd.gallery.css
17.2.4 SG2.0樣式表剖析小結(jié)
17.3 小結(jié)

第18章 未來的CSS
18.1 現(xiàn)有CSS的不足
18.2 CSS3介紹
18.2.1 CSS3預(yù)覽-漸變效果邊框
18.2.2 CSS3預(yù)覽-圓角效果
18.2.3 CSS3預(yù)覽-多重背景
18.2.4 CSS3預(yù)覽-文本溢出處理
18.2.5 CSS3預(yù)覽-改變標(biāo)簽大小
18.2.6 瀏覽器與ACID測試
18.2.7 發(fā)展中的CSS3
18.3 小結(jié)

附錄A HTML4.0快速參考
附錄B 字符實體表
附錄C HTML顏色表
附錄D CSS快速參考
附錄E DOM快速參