全套課件：CSS網(wǎng)頁設(shè)計標(biāo)準(zhǔn)教程

1、CSS網(wǎng)頁設(shè)計標(biāo)準(zhǔn)教程第1部分 CSS核心原理 網(wǎng)頁的基礎(chǔ)概念網(wǎng)頁的基礎(chǔ)概念1.1Web標(biāo)準(zhǔn)標(biāo)準(zhǔn)1.2 HTML與與XHTML 1.3（X）HTML與與CSS1.4 制作網(wǎng)頁的基礎(chǔ)是使用HTML（Hyper Text Markup Language），其核心思想是需要設(shè)置什么樣式，就使用相應(yīng)的HTML標(biāo)記或者屬性。 然而僅僅依靠HTML會遇到很多不可解決的問題，為此，HTML逐步地發(fā)展到了XHTML，與此同時，CSS也應(yīng)運(yùn)而生。 本章簡單介紹HTML、XHTML和CSS三者之間的關(guān)系，以及CSS的基礎(chǔ)；重點(diǎn)理解使用CSS的核心原理。1.1 網(wǎng)頁的基礎(chǔ)概念圖圖1.1 使用瀏覽器軟件顯示網(wǎng)頁使用瀏

2、覽器軟件顯示網(wǎng)頁1.2 Web標(biāo)準(zhǔn) 網(wǎng)頁相關(guān)的技術(shù)走入實用階段僅短短十幾年的時間，就發(fā)生了很多重要的變化。 其中最重要的一點(diǎn)是“Web標(biāo)準(zhǔn)”這一理念被廣泛地接受。1.2.1 標(biāo)準(zhǔn)的重要性1.2.2 “Web標(biāo)準(zhǔn)”概述 下面介紹關(guān)于網(wǎng)頁的標(biāo)準(zhǔn)“Web標(biāo)準(zhǔn)”。 網(wǎng)頁主要由3個部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。 用一本書來比喻，一本書分為篇、章、節(jié)和段落等部分，這就構(gòu)成了一本書的“結(jié)構(gòu)”，而每個組成部分用什么字體、什么字號、什么顏色等，就稱為這本書的“表現(xiàn)”。 由于傳統(tǒng)的圖書是固定的，不能變化的，因此它不存在“行為”。 在一個網(wǎng)頁中，同

3、樣可以分為若干個組成部分，包括各級標(biāo)題、正文段落、各種列表結(jié)構(gòu)等，這就構(gòu)成了一個網(wǎng)頁的“結(jié)構(gòu)”。 每種組成部分的字號、字體和顏色等屬性就構(gòu)成了它的“表現(xiàn)”。 網(wǎng)頁和傳統(tǒng)媒體不同的一點(diǎn)是，它是可以隨時變化的，而且可以和讀者互動，因此如何變化以及如何交互，就稱為它的“行為”。 因此，概括來說，“結(jié)構(gòu)”決定了網(wǎng)頁“是什么”，“表現(xiàn)”決定了網(wǎng)頁看起來是“什么樣子”，而“行為”決定了網(wǎng)頁“做什么”。 “結(jié)構(gòu)”、“表現(xiàn)”和“行為”分別對應(yīng)于3種非常常用的技術(shù)，即 (X) HTML、CSS和JavaScript。 也就是說，(X) HTML用來決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，CSS用來設(shè)定網(wǎng)頁的表現(xiàn)樣式，JavaSc

4、ript用來控制網(wǎng)頁的行為。 本書將重點(diǎn)介紹前兩者，對于JavaScript僅在少數(shù)案例中用到，進(jìn)行一些簡單介紹。 “結(jié)構(gòu)”、“表現(xiàn)”和“行為”的關(guān)系，如圖1.3所示。 圖圖1.3 “結(jié)構(gòu)結(jié)構(gòu)”、“表現(xiàn)表現(xiàn)”和和“行為行為”的關(guān)系的關(guān)系 圖圖1.4 僅使用僅使用HTML定定“結(jié)構(gòu)結(jié)構(gòu)”的頁面效果的頁面效果 圖圖1.5 使用使用CSS設(shè)定樣式之后的效果設(shè)定樣式之后的效果1.3 HTML與XHTML 1.3.1 追根溯源 1.3.2 文檔類型的含義與選擇1.3.3 XHTML與HTML的重要區(qū)別 1在XHTML中標(biāo)記名稱必須小寫 這是一個文字段落 2在XHTML中屬性名稱必須小寫 3在XHTML中

5、標(biāo)記必須嚴(yán)格嵌套 這行文字以粗體傾斜顯示4在XHTML中標(biāo)記必須封閉 text line 1 text line 2 5在XHTML中即使是空元素的標(biāo)記也必須封閉1.4 (X) HTML與CSS 1.4.1 CSS標(biāo)準(zhǔn) 1.4.2 傳統(tǒng)HTML的缺點(diǎn) 1.4.3 CSS的引入 1.4.4 如何編輯CSS 1.4.5 瀏覽器與CSSCSS網(wǎng)頁設(shè)計標(biāo)準(zhǔn)教程第1部分 CSS核心原理 構(gòu)造構(gòu)造CSS規(guī)則規(guī)則2.1基本基本CSS選擇器選擇器2.2在在HTML中使用中使用CSS的方法的方法2.3復(fù)合選擇器復(fù)合選擇器2.4CSS的繼承特性的繼承特性2.5 通過上一章的學(xué)習(xí)，了解了在網(wǎng)頁設(shè)計中引入CSS的意義

6、。 引入CSS的核心目的就是實現(xiàn)網(wǎng)頁結(jié)構(gòu)內(nèi)容和表現(xiàn)形式的分離，將原來由HTML語言所承擔(dān)的一些與結(jié)構(gòu)無關(guān)的功能剝離出來，改由CSS來完成。 本章介紹CSS是如何工作的。 重點(diǎn)介紹CSS的“選擇器”這一核心概念，以及相關(guān)的兩個特性“繼承”和“層疊”。2.1 構(gòu)造CSS規(guī)則 在具體介紹CSS之前，先思考一個生活中的問題。 張飛 身高:185cm; 體重:105kg; 性別:男; 性格:暴躁; 民族:漢族; 這個表實際上是由3個要素組成的，即姓名、屬性和屬性值。 CSS的作用就是設(shè)置網(wǎng)頁的各個組成部分的表現(xiàn)形式。 因此，如果把上面的表格換成描述網(wǎng)頁上一個標(biāo)題的屬性表，可以設(shè)想應(yīng)該大致如下： 2級標(biāo)題

7、 字體:宋體; 大小:15像素; 顏色:紅色; 裝飾:下劃線 再進(jìn)一步，如果把上面的表格用英語寫出來： h2 font-family: 宋體; font-size:15px; color: red; text-decoration: underline; CSS的思想就是首先指定對什么“對象”進(jìn)行設(shè)置，然后指定對該對象的哪個方面的“屬性”進(jìn)行設(shè)置，最后給出該設(shè)置的“值”。 因此，概括來說，CSS就是由3個基本部分“對象”、“屬性”和“值”組成的。2.2 基本CSS選擇器 在CSS的3個組成部分中，“對象”是很重要的，它指定了對哪些網(wǎng)頁元素進(jìn)行設(shè)置，因此，它有一個專門的名稱選擇器（selecto

8、r）。2.2.1 標(biāo)記選擇器 h1 color: red; font-size: 25px; h1 color: red; font-size: 25px; 選擇器 屬性 值 屬性 值 聲明 聲明 圖圖2.1 CSS標(biāo)記選擇器標(biāo)記選擇器2.2.2 類別選擇器.class color: green; font-size: 20px; 類別選擇器 屬性 值 屬性 值 聲明 聲明 類別名稱 圖圖2.2 類別選擇器類別選擇器 class選擇器 .red color:red;/* 紅色 */ font-size:18px; /* 文字大小 */ .green color:green;/* 綠色 */ f

9、ont-size:20px; /* 文字大小 */ class選擇器1 class選擇器2 h3同樣適用 2.2.3 ID選擇器#id color: yellow; font-size: 30px; ID選擇器 屬性 值 屬性 值 聲明 聲明 圖圖2.6 ID選擇器選擇器 ID選擇器 #bold font-weight:bold;/* 粗體 */ #green font-size:30px;/* 字體大小 */ color:#009900;/* 顏色 */ ID選擇器1 ID選擇器2 ID選擇器3 ID選擇器4 2.3 在HTML中使用CSS的方法 2.3.1 行內(nèi)式 頁面標(biāo)題 正文內(nèi)容1 正

10、文內(nèi)容2 正文內(nèi)容3 2.3.2 內(nèi)嵌式 頁面標(biāo)題 p color:#0000FF; text-decoration:underline; font-weight:bold; font-size:25px; 這是第1行正文內(nèi)容 這是第2行正文內(nèi)容 這是第3行正文內(nèi)容 2.3.3 鏈接式 頁面標(biāo)題 CSS標(biāo)題 這是正文內(nèi)容 CSS標(biāo)題 這是正文內(nèi)容 h2 color:#0000FF; p color:#FF0000; text-decoration:underline; font-weight:bold; font-size:15px; 2.3.4 導(dǎo)入式 import url(sheet1.c

11、ss); import url(sheet1.css); import url(sheet1.css); import sheet1.css; import sheet1.css; import sheet1.css;2.4 復(fù)合選擇器 2.4.1 交集選擇器 h3.class color: red; font-size: 23px; 選擇器 屬性 值 屬性 值 聲明 聲明 標(biāo)記 類別名稱 圖圖2.13 標(biāo)記類別選擇器標(biāo)記類別選擇器 圖圖2.14 交集選擇器示意圖交集選擇器示意圖 選擇器.class p/* 標(biāo)記選擇器 */ color:blue;p.special/* 標(biāo)記.類別選擇器 */

12、 color:red;/* 紅色 */.special/* 類別選擇器 */ color:green; 普通段落文本（藍(lán)色） 普通標(biāo)題文本（黑色） 指定了.special類別的段落文本（紅色） 指定了.special類別的標(biāo)題文本（綠色）2.4.2 并集選擇器圖圖2.16 并集選擇器示意圖并集選擇器示意圖 并集選擇器h1, h2, h3, h4, h5, p/*并集選擇器*/ color:purple;/* 文字顏色 */ font-size:15px;/* 字體大小 */ h2.special, .special, #one/* 集體聲明 */ text-decoration:underli

13、ne; /* 下畫線 */ 示例文字h1 示例文字h2 示例文字h3 示例文字h4 示例文字h5 示例文字p1 示例文字p2 示例文字p32.4.3 后代選擇器 這是最外層的文字，這是中間層的文字，這是最內(nèi)層的文字， 最外層是標(biāo)記，里面嵌套了標(biāo)記，標(biāo)記中又嵌套了標(biāo)記，則稱是的子元素，是的子元素。 后代選擇器 p span/* 嵌套聲明 */ color:red;/* 顏色 */ span color:blue;/* 顏色 */ 嵌套使用CSS（紅色）標(biāo)記的方法 嵌套之外的標(biāo)記（藍(lán)色）不生效 后代選擇器的使用非常廣泛，不僅標(biāo)記選擇器可以以這種方式組合，類別選擇器和ID選擇器都可以進(jìn)行嵌套。 下面

14、是一些典型的代碼： .special i color: red; /* 使用了屬性special的標(biāo)記里面包含的 */#one li padding-left:5px; /* ID為one的標(biāo)記里面包含的 */td.out .inside strong font-size: 16px; /* 多層嵌套，同樣實用 */ 上面的第3行使用了3層嵌套，實際上更多層的嵌套在語法上都是允許的。 2.5 CSS的繼承特性 2.5.1 繼承關(guān)系 圖圖2.20 包含多層列表的頁面包含多層列表的頁面 圖圖2.21 繼承關(guān)系樹型圖繼承關(guān)系樹型圖CSS網(wǎng)頁設(shè)計標(biāo)準(zhǔn)教程第1部分 CSS核心原理 手工方式編寫頁面手工方

15、式編寫頁面3.1使用使用Dreamweaver進(jìn)行進(jìn)行CSS設(shè)置設(shè)置3.2 上一章介紹了CSS的基本思想和基本使用方法。 在繼續(xù)深入講解各種CSS屬性之前，在本章先進(jìn)行一些實際的操作，實際編寫一個比較完整的使用CSS的網(wǎng)頁，為后面繼續(xù)深入學(xué)習(xí)HTML和CSS打下基礎(chǔ)。 本章將分別介紹如何使用手工代碼方式，以及使用Dreamweaver軟件可視化的方式分別完成同一個頁面。3.1 手工方式編寫頁面圖圖3.1 體驗體驗CSS3.1.1 構(gòu)建頁面框架 考慮到單純的文字顯得貧乏，因此加入一幅圖片作為簡單的插圖。 圖片所在的位置與正文一樣，使用HTML語言中的標(biāo)記，此時，部分修改后的代碼如下，源文件參見實

16、例文件“03-02.html”。 部分代碼省略 互聯(lián)網(wǎng)發(fā)展的起源 1969年，為了保障通信聯(lián)絡(luò)，美國國防部高級研究計劃署ARPA資助建立了世界上第一個分組交換試驗網(wǎng)ARPANET，連接美國四個大學(xué)。ARPANET的建成和不斷發(fā)展標(biāo)志著計算機(jī)網(wǎng)絡(luò)發(fā)展的新紀(jì)元。部分代碼省略 圖圖3.3 加入圖片加入圖片 3.1.2 設(shè)置標(biāo)題 體驗CSS h1 color:white; /* 文字顏色*/ background-color:#0000FF; /* 背景色 */ text-align:center; /* 居中 */ padding:15px; /* 邊距 */ 省略 圖圖3.4 修改標(biāo)題樣式修改標(biāo)題

17、樣式3.1.3 控制圖片img float:left; border:1px #9999CC dashed; margin:5px; 圖圖3.5 圖文混排圖文混排3.1.4 設(shè)置正文p font-size:12px; text-indent:2em; line-height:1.5; padding:5px; 圖圖3.6 修改正文樣式修改正文樣式3.1.5 設(shè)置整體頁面body margin:0px; background-color:#CCCCFF; 圖圖3.7 設(shè)置頁面的整體效果設(shè)置頁面的整體效果3.1.6 對段落進(jìn)行分別設(shè)置 上面設(shè)置CSS樣式使用的都是標(biāo)記選擇器，為了驗證一下其他的選擇器的用法，這里為兩個文本段落分別設(shè)置不同的效果。 首先，分別給兩個段落的標(biāo)記設(shè)置一個id屬性，代碼如下： 1969年，為了保障通信聯(lián)絡(luò)，美國國防部高級研究計劃署ARPA資助建立了世界上第一個分組交換試驗網(wǎng)ARPANET，連接美國四個大學(xué)。 ARPANET的建成和不斷發(fā)展標(biāo)志著計算機(jī)網(wǎng)絡(luò)發(fā)展的新紀(jì)元。 20世紀(jì)70年代末到80年代初，計算機(jī)網(wǎng)絡(luò)蓬勃發(fā)展，各種各樣的計算機(jī)網(wǎng)絡(luò)應(yīng)運(yùn)而生，如MILNET、USENET、BITNET、CSNET等，在網(wǎng)絡(luò)的規(guī)模和數(shù)量上都得到了