HTML5 CSS3網(wǎng)頁設(shè)計與制作 課件全套 呂麥絲 第1-11章 網(wǎng)頁設(shè)計基礎(chǔ)- CSS 中的動畫與特效

第1章網(wǎng)頁設(shè)計基礎(chǔ)了解網(wǎng)頁設(shè)計的基本流程了解網(wǎng)頁的主要組成部分熟悉網(wǎng)頁開發(fā)工具學習目標010203本章任務(wù)任務(wù)1網(wǎng)頁設(shè)計概念任務(wù)2網(wǎng)頁開發(fā)工具簡介任務(wù)1網(wǎng)頁設(shè)計概念網(wǎng)頁設(shè)計概念在互聯(lián)網(wǎng)盛行的現(xiàn)代，網(wǎng)頁成了信息展示的一種流行方式之一，它的設(shè)計理念和功能隨著時代的發(fā)展不斷變化，網(wǎng)頁設(shè)計(webdesign)，可以根據(jù)企業(yè)向瀏覽者傳遞的信息(包括產(chǎn)品、服務(wù)、理念、文化)，進行網(wǎng)站功能策劃，然后進行的頁面設(shè)計美化工作。作為企業(yè)對外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計，對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。網(wǎng)頁設(shè)計一般分為三種大類:功能型網(wǎng)頁設(shè)計(服務(wù)網(wǎng)站&B/S軟件用戶端)形象型網(wǎng)頁設(shè)計(品牌形象站)信息型網(wǎng)頁設(shè)計(門戶站)設(shè)計網(wǎng)頁的目的不同，應(yīng)選擇不同的網(wǎng)頁策劃與設(shè)計方案。網(wǎng)頁設(shè)計的基本流程設(shè)計一個精美、實用的網(wǎng)頁是所有網(wǎng)頁設(shè)計初學者的夢想，制作網(wǎng)頁并不困難，但要制作出出色的網(wǎng)頁，尤其是制作復雜的網(wǎng)頁時就必須全面考慮各種因素，包括文字、圖像、動畫和聲音等。如同其他的計算機應(yīng)用系統(tǒng)一樣，網(wǎng)頁的設(shè)計需要認真地規(guī)劃和系統(tǒng)分析，然后才可以設(shè)計出高質(zhì)量的網(wǎng)頁。通常網(wǎng)頁的制作包括分析、設(shè)計、制作、測試和發(fā)布五個環(huán)節(jié)?；玖鞒叹W(wǎng)頁設(shè)計的基本流程網(wǎng)頁制作的五個環(huán)節(jié)分析分析主要指認識網(wǎng)頁將要服務(wù)的目標群體如群體特征、可能的需求等，以此確定網(wǎng)頁信息內(nèi)容及其功能設(shè)計設(shè)計設(shè)計是網(wǎng)頁設(shè)計與制作的關(guān)鍵環(huán)節(jié)，關(guān)系用戶對網(wǎng)頁的接受和利用程度主要內(nèi)容包括收集網(wǎng)頁中用到的素材、確定網(wǎng)頁的內(nèi)容結(jié)構(gòu)、鏈接方式和網(wǎng)頁模型的可視化設(shè)計三個內(nèi)容。制作在完成設(shè)計后，只要選擇一種自己熟悉的網(wǎng)頁制作工具，就可以制作網(wǎng)頁了說制作網(wǎng)頁就是將文字、圖片、動畫、聲音、視頻、程序等素材按照設(shè)計的要求合成起來測試制作完網(wǎng)頁之后，應(yīng)該對網(wǎng)頁做全面的檢測，包括檢查網(wǎng)頁內(nèi)容的科學性、版面編排的合理性、超鏈接的正確性以及對網(wǎng)頁內(nèi)容做適當?shù)脑鰷p等發(fā)布制作網(wǎng)頁的目的是要將網(wǎng)頁發(fā)布到網(wǎng)上，讓更多的瀏覽者來訪問發(fā)布的站點，因此發(fā)布網(wǎng)頁這一環(huán)節(jié)必不可少，否則失去了制作網(wǎng)頁的意義。網(wǎng)頁的主要組成部分層次結(jié)構(gòu)結(jié)構(gòu)層HTML/HTML5樣式層CSS/CSS3行為層Javascript一個完整的網(wǎng)頁按照層次結(jié)構(gòu)組成來說，主要由：結(jié)構(gòu)層、樣式層、行為層三個部分組成。一、層次結(jié)構(gòu)CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣，比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等，所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果。如：鼠標滑過彈出下拉菜單、鼠標滑過表格的背景顏色改變，或者焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的、有交互的一般都是用JavaScript來實現(xiàn)的。網(wǎng)頁的骨架，HTML是網(wǎng)頁內(nèi)容的載體，內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖像、視頻等。網(wǎng)頁的主要組成部分一個網(wǎng)頁按布局結(jié)構(gòu)組成來說，通常由頁頭、正文、頁尾組成。網(wǎng)頁的頁面布局如圖1-1-1所示。二、布局結(jié)構(gòu)網(wǎng)頁的主要組成部分一個網(wǎng)頁按內(nèi)容元素組成來說，通常由文字、圖像、動畫、鏈接、導航條、表格、表單等元素組成，如圖1-1-2所示。三、內(nèi)容元素網(wǎng)頁的主要組成部分三、內(nèi)容元素文本是網(wǎng)頁中敘述性的文字，是最理想的網(wǎng)頁信息載體與交流工具，網(wǎng)頁信息一般主要是以文本為主的，與圖像網(wǎng)頁元素相比，文字雖然不如圖像那樣容易被瀏覽者注意，但卻能簡明扼要地表達出主題。在網(wǎng)頁中，用戶可以根據(jù)需要通過字體、大小、顏色、底紋、框等選項來設(shè)置文本的屬性。1、文本圖像是指網(wǎng)頁中插入的具有

說明性的圖片。圖像擁有豐富的色彩和表現(xiàn)形式，能夠表達更加豐富的內(nèi)容和含義，并且具有文本無法達到的視覺效果。添加適量的圖像可以使制作的網(wǎng)頁圖文并茂，具有更好的活力和表現(xiàn)力，但如果在網(wǎng)頁中加入過多的圖像，反而會影響網(wǎng)頁的整體視覺效果，并會明顯降低網(wǎng)頁的下載速度。2、圖像在網(wǎng)頁中常使用JPG、GIF、BMP、PNG等格式的圖像文件，例如：Logo圖標，代表網(wǎng)站形象或欄目內(nèi)容的標志性圖片；背景圖，用來裝飾和美化網(wǎng)頁；圖標，主要用于導航，在網(wǎng)頁中具有重要的作用，相當于路標；Banner廣告，用于宣傳站內(nèi)活動等的廣告。網(wǎng)頁的主要組成部分三、內(nèi)容元素網(wǎng)頁中的動畫能夠活躍網(wǎng)頁氣氛，增加網(wǎng)頁包含的信息量。網(wǎng)頁動畫包含很多類型，常用的如GIF動畫、腳本動畫等，簡單說明如下：GIF動畫，實際也是圖像，不過顯示為動態(tài)效果，一般用來制作各種動態(tài)圖標，對網(wǎng)頁進行修飾。腳本動畫，一般使用JavaScript語言編寫的特效，如鼠標特效、欄目切換、變形動畫、移動動畫、漸隱漸顯動畫等。3、動畫超鏈接是網(wǎng)站的靈魂，它是從一個網(wǎng)頁指向另一個目的端的鏈接，如指向另一網(wǎng)頁或者相同網(wǎng)頁上的不同位置，超鏈接可以指向一幅圖片、一個電子郵件地址、一個文件、一個程序或者也可以是本頁中的其他位置。超鏈接的載體可以是文本、圖片或者動畫等。超鏈接廣泛地存在于網(wǎng)頁的圖片和文字中，提供與圖片和文字相關(guān)內(nèi)容的鏈接，在超鏈接上單擊鼠標左鍵，即可鏈接到相應(yīng)地址（URL）的網(wǎng)頁，可以說超鏈接是網(wǎng)頁的最大特色。4、鏈接網(wǎng)頁的主要組成部分三、內(nèi)容元素導航條是一組超鏈接，方便用戶訪問網(wǎng)站內(nèi)部各個欄目。導航條可以是文字，也可以是圖片，還可以是動畫。導航條可以顯示多級菜單和下拉菜單效果。5、導航條表格在網(wǎng)頁中的作用非常大，它可以用來布局網(wǎng)頁，設(shè)計各種精美的網(wǎng)頁效果，也可以用來組織和顯示數(shù)據(jù)。6、表格表單主要用來收集用戶信息，實現(xiàn)瀏覽器與服務(wù)器之間的信息交互。7、表單除了上面的網(wǎng)頁常用基本元素，在頁面中可能還包括音頻、視頻、框架等各種構(gòu)成元素。8、其他元素任務(wù)2網(wǎng)頁開發(fā)工具導入我們應(yīng)該用什么寫網(wǎng)頁代碼？我們可以通過文本編輯器，如：記事本，完全可以編寫網(wǎng)頁源代碼但是效率……不忍直視實際開發(fā)中，注重開發(fā)的效率和便捷性，因此我們會使用一些開發(fā)工具開發(fā)工具有很多：VisualStudioCode、Webstorm、Sublime、Dreamweaver、Hbuilder我們這里介紹VisualStudioCode和Hbuilder兩個工具HBuilderX開發(fā)工具HBuilderX，H是HTML的首字母，Builder是構(gòu)造者，X是HBuilder的下一代版本，我們也簡稱HX。HBuilderX是HBuilder的升級版，它也是DCloud（數(shù)字天堂）推出為前端開發(fā)者服務(wù)的通用IDE，或者稱為編輯器。1.下載HBuilderX工具https://www.dcloud.io/hbuilderx.html，下圖所示。2.下載后將壓縮包解壓，找到HbuilderX.exe文件，雙擊即可啟動程序，如右圖。什么是HBuilderX

？HBuilderX開發(fā)工具1.使用“文件”菜單→“新建”→“html文件”,可以新建一個html文件，如圖1-2-3、1-2-4。HBuilderX

的使用HBuilderX開發(fā)工具2.編輯網(wǎng)頁，如圖1-2-5。3.當編輯完成后，點擊“保存”按鈕，就可以點擊右側(cè)的“預覽”按鈕看效果（若是第一次使用“預覽”，需選擇內(nèi)置瀏覽器插件，安裝之），如圖1-2-6。HBuilderX

的使用提示：輸入關(guān)鍵字時，具有智能提示列表，可以加快輸入速度，也可以用上下鍵移動到需要的條目再用Ctrl+回車確定，如圖1-2-7。VisualStudioCode開發(fā)工具什么是VisualStudioCode

？VisualStudioCode(簡稱VSCode/VSC)是一款免費開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比Diff、GIT等特性，支持插件擴展，并針對網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。軟件跨平臺支持Win、Mac以及Linux。下載地址：/VisualStudioCode開發(fā)工具VisualStudioCode

安裝1.下載VisualStudioCode工具/，圖1-2-8所示。VisualStudioCode開發(fā)工具VisualStudioCode

安裝2.下載后雙擊安裝文件，啟動安裝程序，如圖1-2-9。3.安裝步驟，如圖1-2-10至1-2-16。VisualStudioCode開發(fā)工具VisualStudioCode

安裝VisualStudioCode開發(fā)工具VisualStudioCode

安裝VisualStudioCode開發(fā)工具VisualStudioCode

安裝4.雙擊桌面圖標啟動程序，如圖1-2-17。5.打開VSCode軟件，可以看到剛剛安裝的VSCode軟件默認使用的是英文語言環(huán)境，如圖1-2-18。VisualStudioCode開發(fā)工具6.使用快捷鍵Ctrl+Shift+P,在彈出的搜索框中輸入configurelanguage，然后選擇搜索出來的ConfigureDisplayLanguage，如圖1-2-19。VisualStudioCode

安裝VisualStudioCode開發(fā)工具7.單擊installadditionallanguages，如圖1-2-20。VisualStudioCode

安裝VisualStudioCode開發(fā)工具9.安裝后在圖右下角單擊changelanguageandrestart，如圖1-2-22。VisualStudioCode

安裝VisualStudioCode開發(fā)工具10.這時，界面變成了中文字體，如圖1-2-23。VisualStudioCode

安裝HBuilderX開發(fā)工具創(chuàng)建一個網(wǎng)頁文件1.在電腦某個目錄下面創(chuàng)建一個文件夾，例如：VSCODEXM2.在文件菜單下找到“打開文件夾”命令，然后選擇第一步創(chuàng)建的文件夾，如圖1-2-24。VisualStudioCode

使用HBuilderX開發(fā)工具3.在資源管理器面板可以看到創(chuàng)建的文件夾（相當于一個項目），并且右邊有新建文件、新建文件夾等按鈕，如圖1-2-25。VisualStudioCode

使用HBuilderX開發(fā)工具4.點擊新建文件按鈕，創(chuàng)建一個hello.html文件，如圖1-2-26。VisualStudioCode

使用HBuilderX開發(fā)工具5.編輯該文件，如圖1-2-27。VisualStudioCode

使用HBuilderX開發(fā)工具6.編輯好了之后，點擊進入“擴展商店”，搜索并安裝兩個插件“openinbrowser”和“viewinbrowser”，如圖1-2-28。VisualStudioCode

使用HBuilderX開發(fā)工具7.找到想運行的html文件，點擊選擇默認的瀏覽器即可，如圖1-2-29。VisualStudioCode

使用總結(jié)了解網(wǎng)頁設(shè)計的基本流程了解網(wǎng)頁的主要組成部分下載安裝開發(fā)工具熟悉網(wǎng)頁開發(fā)工具千里之行始于足下第2章HTML基礎(chǔ)學習目標認識HTML，了解HTML發(fā)展歷史01掌握HTML文檔的基本結(jié)構(gòu)02掌握文本標題、段落、換行等其他標記的使用03簡單網(wǎng)頁的設(shè)計與應(yīng)用04本章任務(wù)任務(wù)1HTML概念任務(wù)2HTML文檔基本結(jié)構(gòu)任務(wù)3HTML文檔標簽屬性任務(wù)4案例實戰(zhàn)——第一個HTML網(wǎng)頁設(shè)計文檔任務(wù)1HTML概念HTML簡介

什么是HTML？HTML是HyperTextMarkupLanguage的英文縮寫，即超文本標記語言，它是用來描述網(wǎng)頁的一種語言。HTML不是一種編程語言，而是一種標記語言，標記語言是一套標記標簽，使用標記標簽構(gòu)成HTML文檔，并用來描述網(wǎng)頁，所以HTML文檔也被稱為網(wǎng)頁。所謂超文本，有兩層含義：1、超越文本限制

網(wǎng)頁中可以加入圖片、聲音、動畫、多媒體等內(nèi)容。2、超級鏈接文本

網(wǎng)頁中的文件可以跳轉(zhuǎn)到另一個文件，甚至可以與世界各地主機上的文件相連接。常用的瀏覽器HTML文檔能獨立于各種操作系統(tǒng)平臺，訪問它只需要一個web瀏覽器。Web瀏覽器的作用是讀取HTML文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會顯示HTML標簽，而是使用標簽來解釋頁面的內(nèi)容。因此，我們所看到的網(wǎng)頁，是瀏覽器對HTML文檔進行解釋的結(jié)果。同樣，我們也可以通過瀏覽器直接查看一個網(wǎng)頁的HTML源代碼，在瀏覽器菜單欄上選擇“查看源文件”即可。常用的瀏覽器有IE（新版本的Windows操作系統(tǒng)改為Edge）、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平時稱為五大瀏覽器，瀏覽器圖標如下：HTML發(fā)展歷史1990年，由于對Web未來發(fā)展的遠見，TimBerners-Lee提出了超文本的概念，并于第二年在SGML(en-US)的基礎(chǔ)上將其正式定義為一個標記語言。IETF(en-US)于1993年正式開始制定HTML規(guī)范，并在經(jīng)歷了幾個版本的草案后于1995年發(fā)布了HTML2.0版本。1994年，Berners-Lee為了Web發(fā)展而成立了W3C(en-US)。1996年，W3C接管了HTML的標準化工作，并在1年后發(fā)布了HTML3.2推薦標準。1999年，HTML4.0發(fā)布，并在2000年成為ISO(en-US)標準。2014年發(fā)布了HTML5標準的最終版。任務(wù)2HTML文檔基本結(jié)構(gòu)任務(wù)描述設(shè)計“HelloHTML”頁面，效果圖如圖2-2-1所示：圖2-2-1任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路主體包含一級標題顯示文字內(nèi)容‘“HelloHTML”頁面’。網(wǎng)頁title包含文字內(nèi)容“HTML基礎(chǔ)”。meta關(guān)鍵字設(shè)置屬性值為“網(wǎng)頁，計算機”。任務(wù)實現(xiàn)頁面基本結(jié)構(gòu)HTML的每個頁面都包含一些基本的結(jié)構(gòu)標簽，頁面內(nèi)容也就是在這些基本標簽中書寫的，下面我們通過一個示例來看看一個頁面的基本結(jié)構(gòu)有哪些。示例內(nèi)容：第一個HTML網(wǎng)頁示例參考代碼如下：上面這段代碼表示了HTML文檔的基本結(jié)構(gòu)，主要使用了<!DOCTYPE>、<html>、<head>、<title>以及<body>等標簽。頁面基本結(jié)構(gòu)標簽說明<!DOCTYPE>標簽用法：文檔聲明標簽，為單標簽，告知web瀏覽器當前頁面使用了哪種HTML版本編寫代碼，此處使用的是HTML5版本。聲明文檔必不可少，而且必須位于HTML文檔的第一行。語法格式如下：<!DOCTYPEhtml><html>標簽用法：表示頁面編寫的代碼都是HTML代碼。該標簽為雙標簽，直到</html>結(jié)束。除了文檔聲明標簽外的所有標簽都必須寫在<html></html>中間。語法格式如下：<html></html>頭部標簽用法：<head>是HTML文檔的頭部標簽,表示頁面的“頭部”，該標簽也為雙標簽，到</head>結(jié)束。在此標簽中可以插入用以說明文件的標題和一些公共屬性的標簽，如title、meta等。語法格式如下：<head></head>主體標簽用法：<body>用來定義主體標簽，表示頁面的“身體”，它也是雙標簽，到</body>結(jié)束，頁面中要展示的絕大部分內(nèi)容都寫在<body></body>之間。語法格式如下：<body>

<h1></h1></body><title>標簽：表示頁面的標題，該標簽為雙標簽，如要指定HTML文檔的網(wǎng)頁標題（它將顯示在瀏覽器窗口頂部標題欄），就要在頭部內(nèi)容中提供有關(guān)信息。用title元素來指定網(wǎng)頁標題，即在<title></title>之間寫上網(wǎng)頁標題，如“標題：我的第一個網(wǎng)站”。<meta>標簽：一般用來定義頁面信息的名稱、關(guān)鍵字等，可提供有關(guān)頁面的元信息（meta-information），該標簽為單標簽，并且一個頭部中可以有多個<meta>標簽。META標簽分兩大部分：HTTP標題信息(HTTP-EQUIV)和頁面描述信息(NAME)。例如加入關(guān)鍵字Keywords會自動被大型搜索網(wǎng)站自動搜集，也可以設(shè)定頁面格式及刷新等等。這些定義的內(nèi)容并不在網(wǎng)頁頁面中顯示。但他們會有一些特殊的作用。如：<metaname="Keywords"content="網(wǎng)頁,計算機">可以定義在網(wǎng)頁發(fā)布后，如在網(wǎng)站搜索“網(wǎng)頁，計算機”等文字內(nèi)容時，搜索到該頁面。任務(wù)實現(xiàn)“HelloHTML”頁面實現(xiàn)<!DOCTYPEhtml><html><head><title>HTML基礎(chǔ)</title>/*標題定義*/<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><metaname="Keywords"content="網(wǎng)頁,計算機">/*關(guān)鍵字定義*/</head><body><h1>“HelloHTML”頁面</h1>/*頁面文字定義*/</body></html>任務(wù)描述任務(wù)分析任務(wù)3HTML文檔標簽屬性任務(wù)描述

本任務(wù)主要講解屬性和屬性值的設(shè)置。通過對水平線的屬性和屬性值進行不同的設(shè)置，呈現(xiàn)出形態(tài)各異的水平分隔線。通過本案例，同學們可以熟悉頁面的文檔結(jié)構(gòu)，并且對標簽的屬性和屬性值的設(shè)置，有一個初步的了解。任務(wù)3：設(shè)計水平分隔線效果圖任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路1.在頁面里面寫入文字和水平線。2.對水平線的屬性和屬性值進行設(shè)置，使其呈現(xiàn)出案例效果。任務(wù)實現(xiàn)基本語法1、HTML標簽HTML中由左尖角號（<）、內(nèi)容以及右尖角號（>）組成的用于描述功能的符號稱為“標記”。使用<>包圍的目的是將HTML文檔標記與普通文本進行區(qū)分。如常用的<html>、<head>、<body>等都是標記。標記通常分為單標記和雙標記兩種類型。2、屬性和屬性值HTML通過標記告訴瀏覽器如何展示網(wǎng)頁，如<br>告訴瀏覽器顯示一個換行。另外還可以為某些元素附加一些信息，這些附加信息被稱為屬性（attribute）。基礎(chǔ)案例操作1.單標記和雙標記示例（1）單標記單標記僅單獨使用就可以表達完整的意思。語法格式：<標記名稱>語法說明：最常用的單標記是<br>,它表示換行。（2）雙標記雙標記由首標記和尾標記兩部分構(gòu)成，它必須成對使用。首標記告訴Web瀏覽器從此處開始執(zhí)行該標記所表示的功能。尾標記告訴Web瀏覽器在這里結(jié)束該標記。語法格式：<標記名稱>內(nèi)容</標記名稱>參考代碼如下：<B><I>文字加粗和傾斜演示</I></B>注意：這里的“b”是“粗體（bold）”的意思標記可以包含標記，即標記可以成對嵌套，但是不能交叉地嵌套?；A(chǔ)案例操作2.屬性語法示例給頁面插入一條粗細為5px，顏色為紅色的水平線參考代碼如下：<hrsize="5px"color=red>如上面案例所示，通過標簽的屬性和屬性值的設(shè)置，可以對標簽進行一些個性化設(shè)計，屬性基本語法：<標記名稱屬性名1="屬性值"屬性名2="屬性值">語法說明：屬性應(yīng)寫在首標記內(nèi)，并且和標記名之間有一個空格分隔。例如，上例中hr標記中，size為屬性，5px為屬性值，屬性值可以直接書寫，也可以使用""括起來。以下寫法也是正確的：<hrsize=5px>基礎(chǔ)案例操作3.注釋注釋標簽用于在HTML源碼中插入注釋。注釋會被瀏覽器忽略?？梢允褂米⑨寣Τ绦虼a進行解釋，適當?shù)淖⑨寣σ院蟠a的閱讀和維護產(chǎn)生很大的幫助。語法格式：<!--注釋內(nèi)容-->語法說明：左括號后需要寫一個驚嘆號，右括號前就不需要了。基礎(chǔ)案例操作4.編寫HTML文件的注意事項“<”和“>”是任何標記的開始和結(jié)束。元素的標記要用這對尖括號括起來，并且結(jié)束的標記總是在開始的標記前加一個斜杠“/”；元素必須被關(guān)閉。標記可以嵌套使用，但不能嵌套標記。任何回車符和空格在HTML代碼中都不起作用。為了代碼清晰，建議不同的標記都單獨占一行；標記中可以放置各種屬性，屬性值都用“"”括起來；標簽名和屬性建議都用小寫字母。編寫代碼，一般應(yīng)該使用縮進風格，以便更好的理解頁面的結(jié)構(gòu)，便于閱讀和維護?；A(chǔ)案例操作4.編寫HTML文件的注意事項為了使瀏覽器能正常瀏覽網(wǎng)頁，在用記事本或別的HTML開發(fā)工具編寫好HTML文檔后，在保存HTML時，對HTML文件的命名要注意以下幾點：（1）文件的擴展名為.htm或.html結(jié)束，建議統(tǒng)一使用html作為文件名的后綴；（2）文件名中只可由英文字母、數(shù)字或下劃線組成；（3）文件名中不要包含特殊符號，比如空格、$等；（4）文件名區(qū)分大小寫；（5）網(wǎng)站首頁文件名一般是index.html或default.html。任務(wù)實現(xiàn)<!DOCTYPEhtml><html><metacharset="UTF-8"><head><title>水平分隔線</title></head><body><center>關(guān)于我們<hr>五十個不同的分子，<hrsize="6">/*設(shè)置水平線粗細*/在不同狀態(tài)下進入了同一容器，<hrwidth="40%">/*設(shè)置水平線長度*/這就組成了我們的家——多媒體專業(yè)。<hrwidth="60"align="left">/*設(shè)置水平線長度和對齊方式*/在這個容器里，我們碰撞著，摩擦著，產(chǎn)生了各色各樣的靈感，活力與情緒。<hrsize="6"width="30%"align="center"noshadecolor="red">/*設(shè)置水平線粗細、長度、對齊方式、陰影形式和顏色*/</center></body></html>任務(wù)描述任務(wù)分析任務(wù)4案例實戰(zhàn)——第一個HTML網(wǎng)頁設(shè)計文檔案例描述根據(jù)提供的圖片，實現(xiàn)一個簡單的圖文混排頁面，要求圖片和文字居中顯示，并且圖片和文字由水平線分隔，最終效果參考圖2-4-1圖2-4-1案例分析實現(xiàn)思路根據(jù)效果圖，可以看出最終效果就是圖片和文字在頁面中居中顯示的效果。應(yīng)該首先把圖片、水平線、文字添加進去，再通過屬性和屬性值的設(shè)置將其水平居中。案例實現(xiàn)<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><center><imgsrc="img/b.png"/></center>/*圖片設(shè)置居中*/<hr>/*水平標記*/<palign="center">HTML是HyperTextMarkupLanguage的英文縮寫，即超文本標記語言，它是用來描述網(wǎng)頁的一種語言。HTML不是一種編程語言，而是一種標記語言，標記語言是一套標記標簽，使用標記標簽構(gòu)成HTML文檔，并用來描述網(wǎng)頁，所以HTML文檔也被稱為網(wǎng)頁。</p>/*設(shè)置<p>標簽文字居中*/</body></html>總結(jié)認識HTML了解HTML發(fā)展歷史使用ss-Menu固定側(cè)邊欄插件掌握文本標題、段落、換行等其他標記的使用簡單網(wǎng)頁的設(shè)計與應(yīng)用獨立完成案例實戰(zhàn)千里之行始于足下第3章CSS基礎(chǔ)了解CSS的概念掌握CSS的語法掌握CSS選擇器的種類以及用各種選擇器的應(yīng)用學習目標010203本章任務(wù)任務(wù)1CSS的語法和用法任務(wù)2基本選擇器任務(wù)3復合選擇器任務(wù)4屬性選擇器任務(wù)5偽元素選擇器和偽類選擇器任務(wù)6案例實戰(zhàn)—再讀火焰山任務(wù)1CSS的語法和用法任務(wù)描述

本案例是應(yīng)用CSS樣式改變標題、段落中的文字大小和顏色，以及設(shè)置層的大小和背景顏色。圖4-1-1：設(shè)計元素顏色布局代碼樣式代碼任務(wù)分析1.用h標簽、p標簽、span標簽和div標簽添加網(wǎng)頁內(nèi)容。2.通過CSS樣式改變文本的大小和顏色、背景顏色。實現(xiàn)思路1.熟悉CSS顏色的多種表示方式以及設(shè)置字體大小的絕對單位和相對單位布局代碼樣式代碼CSS語法語法：選擇器{聲明1；聲明2；...聲明n}CSS規(guī)則由選擇器和聲明兩部分構(gòu)成，選擇器是指需要改變樣式的HTML元素；聲明使用花括號界定起來，用來設(shè)置元素的樣式，可以是一條或多條，使用多條聲明時用分號分隔，最后一個可不加分號。每條聲明由屬性和值組成。屬性是將要設(shè)置的樣式屬性，每個屬性有一個值，屬性和值用冒號分開。屬性值不加雙引號，但是當屬性值為若干個單詞時，需要加上雙引號。具體寫法如下所示：選擇器{屬性1:值1；屬性2:值2；...屬性n:值n；}示例：h1｛font-size:16px;color:red｝其中，font-size和color是屬性，分別表示設(shè)置文字的大小和顏色，red和14px是屬性值，分別表示將文字的大小設(shè)置為14px，顏色設(shè)置為紅色。書寫CSS樣式時是否包含空格不會影響CSS在瀏覽器在的解析效果，CSS對大小寫也不敏感，但是調(diào)用CSS的class和id時，對名稱的大小寫是敏感的。方式描述及優(yōu)缺點用英文單詞表示優(yōu)點：方便快捷而且特定顏色比較準確。缺點：表示顏色的數(shù)量有限，不容易記住，不支持透明度的表示。用十六進制表示以“#”開頭的六位十六進制數(shù)表示，前兩位表示紅色的比例，中間兩位表示綠色的比例，后兩位表示藍色的比例。優(yōu)點：方便快捷而且特定顏色比較準確缺點：表示顏色數(shù)量有限，英文不好的不容易記住，不支持透明度的表示用RGB表示語法格式為：rgb(num1,num2,num3)num1,num2,num3三個參數(shù)的取值范圍為0～255或0%～100%，其中num1表示紅色，num2表示綠色，num3表示藍色。顏色的表示方式方式描述及優(yōu)缺點用RGBA表示語法格式為：rgba(num1,num2,num3,num4)與rgb(num1,num2,num3)相比，多了一個參數(shù)表示顏色透明度的參數(shù)num4，取值范圍為0～1。用HSL表示語法格式為：hsl(num1,a%,b%)num1表示色調(diào)，取值范圍為0～360，取值0或360表示紅色，120表示綠色，240表示藍色；a%表示飽和度，取值范圍為0%～100%；b%表示亮度，取值范圍為0%～100%。HSLA表示語法格式為：hsla(num1,a%,b%,num2)與hsl(num1,a%,b%)相比，多了一個參數(shù)表示顏色透明度的參數(shù)num2，取值范圍為0～1。顏色的表示方式單位描述in英寸cm厘米mm毫米pt磅(1pt等于1/72英寸)pc12點活字(1pc等于12點)1.絕對單位CSS屬性中使用的度量單位絕對單位在網(wǎng)頁中很少使用，一般多用在傳統(tǒng)平面印刷中，但在特殊場合使用絕對單位還是很必要的。單位描述px像素，計算機屏幕上的一個點，根據(jù)顯示器屏幕分辨率而定。%百分比em1em等于當前的字體尺寸；2em等于當前字體尺寸的兩倍；例如，如果某元素以12pt顯示，那么2em是24pt。在CSS中，em是非常有用的單位，因為它可以自動適應(yīng)用戶所使用的字體。ex一個ex是一個字體的x-height。(x-height通常是字體尺寸的一半。)2.相對單位CSS屬性中使用的度量單位相對單位與絕對單位相比顯示大小不是固定的，它所設(shè)置的對象受屏幕分辨率、可視區(qū)域、瀏覽器設(shè)置以及相關(guān)元素的大小等多種因素影響。任務(wù)實現(xiàn)<body><h3>CSS規(guī)則由選擇器和聲明兩部分構(gòu)成。</h3><p>CSS屬性中使用的度量單位有<span>絕對單位(如：mm)和相對單位(如：px)</span></p><p>CSS表示顏色的方法有多種，英文單詞表示是方法之一。</p><div></div></body>布局參考代碼如下：任務(wù)描述任務(wù)分析任務(wù)實現(xiàn)<styletype="text/css">h3{font-size:20px;color:#ff0000;}p{font-size:16px;color:rgb(100,200,0);}CSS參考代碼如下：span{font-size:7mm;color:blue;}div{width:100px;height:100px;background:rgba(0,0,255,0.5);}</style>任務(wù)描述任務(wù)分析任務(wù)2基本選擇器任務(wù)描述本案例是將網(wǎng)頁頁面制作成信紙的樣式，信紙是粉紅色的，有橫線，左上角和右下角均有插圖。圖4-2-1：設(shè)計信稿任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路插入層，設(shè)置層的大小和邊框。將左上角、右下角、橫線的圖片設(shè)置成層的背景，調(diào)整圖片的大小與信紙相適應(yīng)。橫線和圖片包括4行，因此橫線圖片的高度設(shè)置成4倍文本的高度，讓每一行文字正好寫在橫線上。1.練習CSS外部文件樣式表的應(yīng)用任務(wù)實現(xiàn)1．通用選擇器基本選擇器“*”表示通用選擇器，適用于文檔中所有的元素。示例參考代碼如下：<styletype="text/css">*{color:red;}</style><body><h1>網(wǎng)頁設(shè)計與制作</h1><P>文本樣式</P><p>列表樣式</p></body>2.元素選擇器基本選擇器以HTML標簽作為選擇器，重新定義標簽的樣式。示例參考代碼如下：<styletype="text/css">h1{color:red;}p{color:pink;}</style><body><h1>文字顏色為紅色</h1><P>文字顏色為粉紅色</P><p>文字顏色為粉紅色</p></body>如下圖將h1標簽的文字顏色設(shè)置為紅色，p標簽的文字顏色設(shè)置為粉紅色。3.類別選擇器基本選擇器自定義的樣式，可以為不同元素多次套用。類別選擇器以“.”作為前綴，元素套用格式為class=“類別選擇器”。示例參考代碼如下：<styletype="text/css">.layout{font-family:"方正舒體";font-size:24px;color:red;}.layout11{font-size:36px;font-style:italic;color:blue;}</style><body><pclass="layout">套用layout樣式</p><h1class="layout">套用layout樣式</h1><h2class="layout11">套用layout1樣式</p></body>如下圖所示：類別選擇器layout分別被p標簽和h標簽套用，類別選擇器layout11被h2標簽套用。類別選擇器的命名規(guī)則：要以小寫字母開頭，不能以數(shù)字開頭，不能使用中文命名，要見名知意。4.ID選擇器基本選擇器為標有特定id的HTML元素指定特定的樣式，ID選擇器以“#”作為前綴。示例參考代碼如下：<styletype="text/css">#page{margin:0auto;width:1000px;height:100px;line-height:100px;text-align:center;border:3pxsolidblue;}</style><body><divid="page">盒子套用page樣式，在頁面居中，寬為1000px，高為1600px，1px藍色邊框</div></body>如下圖所示：ID選擇器page，被div標簽套用?；具x擇器不同點類別選擇器ID選擇器語法選擇器前綴為“.”選擇器前綴為“#”（棋盤號）使用方法用class屬性套用<h1class=“important”>用ID屬性套用<h1id=“important”>套用語法多個類別選擇器可以同時被套用語法：class=“選擇器1選擇器2”選擇器之間用空格分隔不能結(jié)合使用使用次數(shù)在一個HTML文檔中，可以多次使用ID選擇器一般使用一次何時使用同一個頁面要多次用到時使用在同一個頁面只會出現(xiàn)一次的，如網(wǎng)頁的頁頭、頁體、頁腳制作說明：類別選擇器和ID選擇器的區(qū)別表在文檔中的位置和調(diào)用方法擇器使用標簽的style屬性，將樣式表定義在<html>標簽內(nèi)。示例：<pstyle="font-family:Verdana;font-size:3;color:red;">行內(nèi)調(diào)用</p>1.行內(nèi)調(diào)用如果樣式表中只有少數(shù)幾行代碼，可以直接用<style>元素，放在頁面的<head>區(qū)段中，稱為內(nèi)嵌樣式表。示例：2.內(nèi)部調(diào)用內(nèi)部調(diào)用示例參考代碼如下：<styletype="text/css">p{color:red;font-size:16px;}h1{color:blue;}.style1{font-size:18px;color:#00f;}</style><body><p>網(wǎng)頁設(shè)計與與制作</p><pclass="style1">內(nèi)部調(diào)用</p></body>3.外部文件調(diào)用基本選擇器（1）外部樣式表調(diào)用方法外部樣式表用link語句調(diào)用。<link>必須放在<head>區(qū)段中指定，且必須有rel,type,href三個屬性。rel屬性指定文件的類型，type標示出連接文件的形式，href指向文件的位置。示例：（2）外部樣式表文件外部樣式表文件是將多個CSS樣式寫在一個擴展名為.css的文件中，可以用記事本等文本編輯器編寫，文件中不包含html的任何標簽。如右所示<linkrel=“stylesheet”type=“text/css”href=“example.css”>.mylayout{font-size:36px;color:#6699FF;}hr{color:#ff0000;height:5px;width:500;}.yy{font-size:36px;color:#6699FF;}任務(wù)實現(xiàn)布局代碼CSS代碼任務(wù)描述任務(wù)分析任務(wù)3復合選擇器任務(wù)描述本案例通過復合選擇器的應(yīng)用實現(xiàn)元素的樣式。圖4-3-1：設(shè)計元素樣式任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路不同級別的關(guān)系，選擇“空格”、“>”、“+”、“～”、“逗號”來實現(xiàn)元素的樣式。掌握復合選擇器的應(yīng)用實現(xiàn)元素的樣式任務(wù)實現(xiàn)知識點導入一、后代選擇器（包含選擇器）語法：元素之間添加空格功能：給元素的后代元素添加樣式示例：ulli{color:red;border:1pxsolidblue;}給ul所有的后代元素（包括孫元素）li添加樣式二、子元素選擇器語法：父元素和子元素之間用“>”聯(lián)接功能：給元素的直接后代添加樣式示例：ul>li{color:red}給ul的直接子元素li添加樣式，不包括孫元素（但是字體、顏色樣式會繼承）知識點導入三、相鄰選擇器語法：元素之間用“+”聯(lián)接功能：給緊貼在E元素后面的F元素添加樣式示例：h2+p{color:green}給緊跟在h2標簽后面的p元素添加樣式四、兄弟選擇器語法：元素之間用“～”聯(lián)接功能：給E元素所有后面的兄弟元素F添加樣式示例：h3～p{color:red}給h3標簽后面的同級p元素添加樣式五、并列選擇器語法：元素之間用“，”聯(lián)接功能：同時對多個元素添加樣式示例：h1,p,a{color:red}給h1、p、a元素同時添加樣式任務(wù)實現(xiàn)<body><p>不在盒子中的P</p><!--文字大小為30px--><divclass="sec1"><!--300*200，藍色邊框--><h3>在sec1盒子中的h3標題</h3><p>在sec1盒子中的p1</p><!--文字大小為25px--><p>在sec1盒子中的p2</p><!--文字大小為25px--><p>在sec1盒子中的p3</p><!--文字大小為25px--></div><divclass="sec2"><!--300*200，藍色邊框--><h3>在sec2盒子中的h3標題</h3><p>在sec2盒子中的p1</p><!--文字大小為20px--><p>在sec2盒子中的p2</p><!--文字大小為15px--><p>在sec2盒子中的p3</p><!--文字大小為20px--><divclass="sec21"><h3>在sec21盒子中的h3標題</h3><p>在sec21盒子中的p3</p><!--文字大小為15px--><p>在sec21盒子中的p2</p><!--文字大小為20px--></div></div>布局代碼<divclass="sec3"><!--300*200，藍色邊框--><h3>在sec3盒子中的h3標題</h3><p>在sec3盒子中的p1</p><!--文字大小為10px--><p>在sec3盒子中的p2</p><!--文字大小為10px--><p>在sec3盒子中的p3</p><!--文字大小為10px--><divclass="sec31"><h3>在sec31盒子中的h3標題</h3><p>在sec31盒子中的p3</p><!--文字大小為30px--><p>在sec31盒子中的p2</p><!--文字大小為30px--></div></div></body><styletype="text/css">.sec1,.sec2,.sec3{width:600px;height:250px;border:2pxsolidblue;}/*并列選擇器*/p{font-size:30px;line-height:0.6;}.sec1>p{font-size:25px;}/*子元素選擇器*/.sec2p{font-size:20px;}/*后代選擇器*/.sec2>h3+p{font-size:15px;}/*相鄰選擇器*/.sec3>h3~p{font-size:10px;;}/*兄弟選擇器*/</style>CSS代碼任務(wù)描述任務(wù)分析任務(wù)4屬性選擇器任務(wù)描述本案例通過屬性選擇器來設(shè)置表單控件、提交按鈕和重置按鈕的樣式。圖4-4-1：設(shè)計注冊信息表單任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路插入表單元素。用“input[type="submit"],input[type="reset"]”屬性選擇器寫按鈕的樣式。掌握通過屬性選擇器來設(shè)置表單控件、提交按鈕和重置按鈕的樣式任務(wù)實現(xiàn)一、element[attibute]知識點導入功能：給具有attibute屬性的element元素添加樣式。示例：給有value屬性或style屬性的input元素添加綠色的背景顏色input[value][style]{background:green}二、element[attibute=“val”]功能：給attibute屬性等于val的element元素添加樣式示例：給value=“vip”的E元素添加紅色的背景input[value=“vip1”]{background:red}三、element[attibute～=“val”]知識點導入功能：當attibute屬性有多個值時，給值等val的element元素添加樣式示例：當input元素的style有多個屬性值，只給style屬性值為15px的input元素添加藍色背景。input[style～=“15px”]{background:blue}四、element[attibute|=“val”]功能：當attibute屬性值中有“-”連接符時，給element元素添加樣式示例：如果html代碼為：<plang=“en-us”>，則給該P元素添加文字顏色為紅色的樣式p[lang|=“en”]{color:red}五、element[attibute^=“val”]知識點導入功能：給attibute屬性值以“val”開頭的element元素添加屬性示例：給val屬性值以vip開頭的input元素添加綠色背景input[value^=“vip”]{background:green}六、element[attibute$=“val”]功能：給attibute屬性值以“val“結(jié)尾的E元素添加屬性示例：給href屬性值以.cn結(jié)尾的a元素設(shè)置紅色字體a[href$=“.cn”]{color:red}知識點導入七、element[attibute*=“val”]功能：給attibute屬性值包含“val”的element元素添加屬性；示例：給val屬性值包含“vip”的input元素添加紅色背景input[value*=“vip”]{background:red}CSS代碼任務(wù)實現(xiàn)部分布局代碼任務(wù)描述任務(wù)分析任務(wù)5偽元素選擇器和

偽類選擇器任務(wù)描述本案例運用偽元素選擇器和偽類選擇器來進行頁面文字設(shè)置圖4-5-1：設(shè)計文字格式排版任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路設(shè)計兩個div盒子，設(shè)置寬高。對兩個盒子分別放入文字“改革”和“開放”兩段內(nèi)容，標題用h2標簽，其余文字用p標簽“在堅持社會主義制度的前提下”用兩個p標簽里。對“改革”內(nèi)容使用偽類選擇器進行設(shè)置文字樣式，對“開放”內(nèi)容使用偽元素選擇器進行文字設(shè)置，如何使用偽類和偽元素選擇器，我們來看一下相關(guān)的知識點。任務(wù)實現(xiàn)偽元素選擇器設(shè)置元素內(nèi)容第一個字符的樣式語法：示例：設(shè)置元素內(nèi)容第一行字符的樣式語法：示例：在每個element元素的內(nèi)容之前插入內(nèi)容，用來和content屬性一起使用語法：示例：element：first-letter/element：：first-letter；element：first-line/element：：first-line；p::first-line{color:green}element：before/element：：beforea::before{content:"點擊"

}p::first-letter{font-size:50px}偽元素選擇器在每個element元素的內(nèi)容之后插入內(nèi)容，用來和content屬性一起使用語法：示例：在a元素之后插入圖片設(shè)置對象被選擇時的樣式語法：示例：設(shè)置段落被選擇時的背景顏色element：after/element：：afterelement：：selectiona::after{

content:url(../img/ss.png)}p::selection{background:red}1.結(jié)構(gòu)偽類選擇器偽類選擇器（1）給父元素的第一個子元素element設(shè)置樣式語法：element：first-child（2）給父元素的最后一個子元素element設(shè)置樣式語法：element：last-child（3）給僅有的一個子元素element設(shè)置樣式語法：element：only-child（4）給元素的第n個子元素element設(shè)置樣式語法：element:nth-child(n):說明：n可以數(shù)字、奇數(shù)（odd）、偶數(shù)(even)或者用公式（5）給倒數(shù)第n個子元素element設(shè)置樣式語法：element:nth-last-child(n)：tr:nth-child(3)表示第三行tr:nth-child(odd)表示奇數(shù)行tr:nth-child(even)表示偶數(shù)行tr:nth-child(2n)表示2的倍數(shù)行2.UI偽類選擇器偽類選擇器（1）向被激活的元素添加樣式語法：element：active（2）當鼠標懸浮在元素止方時，向元素添加樣式語法：element：hover（3）向未被訪問的鏈接添加樣式語法：element：link（4）向已被訪問的鏈接添加樣式語法：element：visited（5）向擁有鍵盤輸入焦點的元素添加樣式語法：element：focus（6）向帶有指定lang屬性的元素添加樣式語法：element：lang（7）選擇每個被選中的input元素時的樣式語法：input:checked（8）選擇每個禁用的input元素時的樣式語法：input:disabled（9）選擇每個啟用的input元素時的樣式語法：input:enabled（10）選擇當前活動的錨點元素的樣式語法：#E:target（11）選擇element元素之外的每個元素的樣式語法：:not(element)1.就近原則CSS樣式的優(yōu)先級離要修飾目標越近的樣式優(yōu)先級越高。如以下示例中，h1標簽套用了離它更近的htmlh1樣式，因而文字的顏色是紫色的。示例：示例參考代碼如下：<styletype="text/css">bodyh1{color:green;}htmlh1{color:purple;}</style><body><h1>我是紫色的！</h1></body>注：如果調(diào)換htmlh1和bodyh1順序，那么文字顏色就是綠色了。2.作用范圍越小，優(yōu)先權(quán)越高CSS樣式的優(yōu)先級示例：3.內(nèi)聯(lián)>ID選擇器>偽類=屬性選擇器=類選擇器>元素選擇器>通用選擇器(*)>繼承的樣式4.誰指向精確誰的優(yōu)先級高，并列的話哪個在后面哪個優(yōu)先級高5.可以采用!important語法來提升重要性示例參考代碼如下：<styletype="text/css">bodyh1{color:green;}htmlh1{color:purple;}</style><body><h1>我是紫色的！</h1></body>任務(wù)實現(xiàn)布局代碼CSS代碼任務(wù)描述任務(wù)分析任務(wù)5案例實戰(zhàn)—再讀火焰山案例描述1.CSS樣式寫在外部樣式表文件中，HTML調(diào)用CSS文檔的方式應(yīng)用樣式。2.圖片加上虛線邊框修飾，居于文字的左邊，文字從右側(cè)環(huán)繞圖片。3.第一段開頭的三個文字“火焰山”跨越兩行，其它各段落的首行縮進兩個字符。圖4-6-1案例分析實現(xiàn)思路創(chuàng)建HTML文檔和CSS文檔，實現(xiàn)網(wǎng)頁的內(nèi)容和表現(xiàn)分開。在HTML文檔中使用h標簽、p標簽、img標簽在網(wǎng)頁中插入文本和圖片。在CSS文檔中寫標題、段落和圖片的樣式。案例實現(xiàn)<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><center><imgsrc="img/b.png"/></center>/*圖片設(shè)置居中*/<hr>/*水平標記*/<palign="center">HTML是HyperTextMarkupLanguage的英文縮寫，即超文本標記語言，它是用來描述網(wǎng)頁的一種語言。HTML不是一種編程語言，而是一種標記語言，標記語言是一套標記標簽，使用標記標簽構(gòu)成HTML文檔，并用來描述網(wǎng)頁，所以HTML文檔也被稱為網(wǎng)頁。</p>/*設(shè)置<p>標簽文字居中*/</body></html>總結(jié)了解CSS的概念掌握CSS的語法使用CSS選擇器的種類以及用各種選擇器的應(yīng)用獨立完成案例實戰(zhàn)千里之行始于足下第4章設(shè)計文本樣式掌握使用CSS設(shè)置文本顏色、字型、大小、大小寫、粗體和斜體等樣式掌握使用CSS設(shè)置文本行高、縮進和對齊方式等掌握使用CSS設(shè)置字符間距和單詞間距學習目標010203本章任務(wù)任務(wù)1：設(shè)計字體樣式任務(wù)2：設(shè)計文本樣式任務(wù)3：案例實戰(zhàn)——文本頁面的排版任務(wù)1設(shè)計字體樣式任務(wù)描述本案例我們通過設(shè)計字體樣式在網(wǎng)頁中展示這首李白的《靜夜思》，效果如圖5-1-1。圖5-1-1：《靜夜思》文字排版任務(wù)實現(xiàn)任務(wù)分析1.標題文字居中顯示，設(shè)置字體類型。2.正文內(nèi)容設(shè)置字體類型、字體大小和字體顏色。3.各部分內(nèi)容之間用水平線分隔。實現(xiàn)思路本案例主要內(nèi)容包括：突出顯示的標題、字體類型、字體大小、字體顏色等。任務(wù)實現(xiàn)如何定義字體？使用font-family屬性來定義字體類型使用font屬性也可以定義字體類型font-family用法：font-family：namename表示字體名稱，可指定多種字體，多個字體將按優(yōu)先順序排列，以逗號隔開，如果字體名稱包含空格，則應(yīng)使用引號括起。定義字體類型font是一個復合屬性，該屬性能夠設(shè)置多種字體屬性，用法如下：font：font-style||font-variant||font-weight||font-size||line-height||font-family屬性值之間以空格分割。font屬性至少應(yīng)設(shè)置字體大小和字體類型，且必須放在后面，否則無效。案例設(shè)置字型：部分代碼如下：.font2{font-family:隸書,華文行楷,宋體;}.font3{font-family:Calibri,"TimesNewRoman",Arial;}</style></head><body><h2>設(shè)置字型</h2><pclass="font1">設(shè)置文本為微軟雅黑</p><pclass="font2">文本按照隸書、華文行楷、宋體的順序設(shè)置</p><pclass="font3">TheorderoffontisCalibri,TimesNewRoman,Arial</p></body>定義字體類型案例<head><title>設(shè)置字型</title><styletype="text/css">.font1{font-family:微軟雅黑;}如何定義字體大??？HTML5之前：使用<font>標記，它有大小7個級別的字號，具有很大的局限性HTML5之中：使用font-size屬性設(shè)置字體大小font-size語法：font-size:長度|絕對尺寸|相對尺寸|百分比定義字體大小長度：用長度值指定文字大小，不允許負值。長度單位有px（像素）、pt（點）、pc（皮卡）、in（英寸）、cm（厘米）、mm（毫米）、em（字體高）和ex（字符X的高度），其中px、em和ex是CSS相對長度單位，in、cm、mm、pt（1pt=1/72in）和pc（1pc=12pt）是css絕對長度單位。絕對尺寸：每一個值都對應(yīng)一個固定尺寸，可以取值為xx-small（最小）、x_x0002_small（較?。?、small（小）、medium（正常）、large（大）、x-large（較大）和xx-large（最大）。相對尺寸：相對于父對象中字體尺寸進行相對調(diào)節(jié)，可選參數(shù)值為smaller和

larger。百分比：用百分比指定文字大小，相對于父對象中字體的尺寸。設(shè)置字體尺寸：部分代碼如下：.fs3{font-size:14px;}.fs4{font-size:12pt;}.fs5{font-size:larger;}.fs6{font-size:150%;}</style></head><body><h2>字體尺寸（h2標題），父對象為瀏覽器窗口</h2><pclass="fs1">x-large大小的文字</p><pclass="fs2">medium大小的文字</p><p>未使用樣式，默認大小的文字</p><pclass="fs3">14px大小的文字</p><pclass="fs4">12pt大小的文字</p><pclass="fs5">larger大小的文字</p><pclass="fs6">150%大小的文字</p></body>定義字體大小案例<head><title>設(shè)置字體尺寸</title><styletype="text/css">.fs1{font-size:x-large;}.fs2{font-size:medium;}如何定義字體顏色？使用color屬性來設(shè)置color還會應(yīng)用到元素的所有邊框，除非被其它邊框顏色屬性覆蓋color語法：color:color_name|HEX|RGB|RGBA|HSL|HSLA|transparent常用：color:color_name|RGB|

transparent定義字體顏色color_name是顏色英文名稱，例如green表示綠色、red表示紅色、gold表示金色。RGB是指用RGB函數(shù)表示顏色，所有瀏覽器都支持該方法，RGB顏色值規(guī)定形式為RGB(red,green,blue)，red、green和blue分別表示紅、綠、藍光源的強度，可以為0-255之間的整數(shù)，或者是0%-100%之間的百分比值，例如RGB(255,0,0)和RGB(100%,0%,0%)都表示紅色。表示透明。設(shè)置字體顏色：部分代碼如下：font-size:18px;/*字體大小*/}.hex1{color:#808000;}/*HEX#RRGGBB形式*/.hex2{color:#F0F;}.rgb1{color:RGB(0,145,153);}/*RGB*/.rgba1{color:RGBA(0,145,153,0.5);}/*RGBA*/.rgb2{color:RGB(80%,50%,50%);}/*RGB*/.rgba2{color:RGBA(80%,50%,50%,0.5);}/*RGBA*/.hsl{color:HSL(159,100%,69%);}/*HSL*/.hsla{color:HSLA(159,100%,69%,0.8);}/*HSLA*/.trans{color:transparent;}/*transparent*/</style></head>定義字體顏色案例<head><styletype="text/css">body{color:orange;/*color_name*/font-weight:bold;/*字體加粗*/<body><pclass="hex1">顏色為HEX形式，橄欖綠#808000</p><pclass="hex2">顏色為HEX形式，紫紅色#F0F</p><pclass="rgb1">顏色為RGB形式，RGB(0,145,153)</p><pclass="rgba1">顏色為RGBA形式，RGBA(0,145,153,0.5)</p><pclass="rgb2">顏色為RGB形式，RGB(80%,50%,50%)</p><pclass="rgba2">顏色為RGBA形式，RGBA(80%,50%,50%,0.5)</p><pclass="hsl">顏色為HSL形式，HSL(159,100%,69%)</p><pclass="hsla">顏色為HSLA形式，顏色為HSLA(159,100%,69%,0.8)</p><pclass="trans">顏色為transparent完全透明</p><p>顏色繼承body的顏色，橙色orange</p></body>如何定義字體粗細？使用font-weight屬性來定義字體粗細語法：font-weight:normal|bold|bolder|lighter|100|200900語法說明normal：正常的字體。相當于數(shù)字值400bold：粗體。相當于數(shù)字值700。bolder：定義比繼承值更重的值lighter：定義比繼承值更輕的值100-900：用數(shù)字表示字體粗細定義字體粗細設(shè)置字體粗細效果：部分代碼如下：.fw4{font-weight:400;}.fw5{font-weight:500;}.fw6{font-weight:600;}.fw7{font-weight:700;}.fw8{font-weight:800;}.fw9{font-weight:900;}.fw10{font-weight:normal;}.fw11{font-weight:bold;}.fw12{font-weight:bolder;}.fw13{font-weight:lighter;}</style></head><p><spanclass="fw1">100</span><spanclass="fw2">200</span><spanclass="fw3">300</span>定義字體粗細案例<head><styletype="text/css">.fw1{font-weight:100;}.fw2{font-weight:200;}.fw3{font-weight:300;}<spanclass="fw4">400</span><spanclass="fw5">500</span><spanclass="fw6">600</span><spanclass="fw7">700</span><spanclass="fw8">800</span><spanclass="fw9">900</span></p><p><spanclass="fw10">normal</span><spanclass="fw11">bold</span><spanclass="fw12">bolder</span><spanclass="fw13">lighter</span></p><pclass="fw10">這段文字是normal文字，但有時我們會對其中某些文字進行強調(diào)，可將其設(shè)置為<spanclass="fw11">粗體bold</span>，這時它明顯比其它文字粗一些。</p><pclass="fw11">這段文字是bold文字，整段文字都是粗體，但有時我們需要其中某些文字恢復正常粗細，可將其設(shè)置為<spanclass="fw13">正常normal</span>，這時其它文字明顯比它粗一些。</p>如何定義斜體字體？使用font-style屬性來定義字體粗細語法：font-style：normal|italic|oblique語法說明normal表示默認值，即正常的字體italic表示斜體oblique表示傾斜的字體定義斜體字體設(shè)置字體尺寸：部分代碼如下：<styletype="text/css">.fs1{font-style:normal;}.fs2{font-style:italic;}.fs3{font-style:oblique;}</style></head><body><ul><liclass="fs1">正常字體normal</li><liclass="fs2">斜體italic</li><liclass="fs3">傾斜的字體oblique</li></ul></body></html>定義斜體字體案例<!DOCTYPEhtml><html><head><title>字體風格</title>如何定義字體大小寫？使用font-variant屬性來定義字大小寫語法：font-variant：normal|small-caps語法說明normal表示默認值，即正常的字體small-caps表示小型的大寫字母字體定義字體大小寫使用小型大寫字母：部分代碼如下：<styletype="text/css">.fv1{font-variant:normal;}.fv2{font-variant:small-caps;}</style></head><body><pclass="fv1">GonewiththeWind</p><pclass="fv2">GonewiththeWind</p></body>定義斜體字體案例<!DOCTYPEhtml><html><head><title>小型大寫字母</title>任務(wù)實現(xiàn)參考代碼任務(wù)描述任務(wù)分析任務(wù)2設(shè)計文本樣式任務(wù)描述本案例主要內(nèi)容包括：突出顯示的標題、導航條、正文內(nèi)容以及被文字環(huán)繞的圖像、頁腳等，設(shè)計文本樣式來完成如下圖5-2-1的頁面效果。