Web前端開發(fā)案例教程（HTML5+CSS3）（項目式）全套教學(xué)課件

上傳人：b*** IP屬地：浙江上傳時間：2024-02-17 格式：PPTX 頁數(shù)：513 大小：43.86MB 積分：35 舉報 版權(quán)申訴

Web前端開發(fā)案例教程（HTML5+CSS3）（項目式）全套教學(xué)課件_第2頁

Web前端開發(fā)案例教程（HTML5+CSS3）（項目式）全套教學(xué)課件_第3頁

Web前端開發(fā)案例教程（HTML5+CSS3）（項目式）全套教學(xué)課件_第4頁

Web前端開發(fā)案例教程（HTML5+CSS3）（項目式）全套教學(xué)課件_第5頁

已閱讀5頁，還剩508頁未讀，繼續(xù)免費(fèi)閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

任務(wù)1創(chuàng)建第一個HTML5網(wǎng)頁Web前端開發(fā)案例教程HTML5+CSS3項目式微課版任務(wù)1創(chuàng)建第1個HTML5網(wǎng)頁.pptx任務(wù)2搭建簡單學(xué)院網(wǎng)站.pptx任務(wù)3美化簡單學(xué)院網(wǎng)站.pptx任務(wù)4制作學(xué)院介紹頁面.pptx任務(wù)5制作學(xué)院網(wǎng)站導(dǎo)航條.pptx任務(wù)6制作學(xué)院新聞塊.pptx任務(wù)7制作學(xué)生信息表.pptx任務(wù)8制作學(xué)生問卷調(diào)查表單.pptx任務(wù)9制作學(xué)院風(fēng)景墻.pptx任務(wù)10布局學(xué)院網(wǎng)站主頁.pptx任務(wù)11完整項目：制作學(xué)院網(wǎng)站.pptx全套可編輯PPT課件Web前端開發(fā)是從創(chuàng)建網(wǎng)頁開始的，本任務(wù)運(yùn)用HBuilderX網(wǎng)頁編輯軟件創(chuàng)建一個簡單的HTML5網(wǎng)頁。通過該任務(wù)的實現(xiàn)，熟悉HBuilderX網(wǎng)頁編輯軟件，了解網(wǎng)頁文件的基本結(jié)構(gòu)和網(wǎng)頁相關(guān)概念等。創(chuàng)建第一個HTML5網(wǎng)頁任務(wù)1任務(wù)效果圖1-1第一個網(wǎng)頁啟動HBuilderX，創(chuàng)建項目，在該項目中新建一個HTML文件，在網(wǎng)頁上顯示：“只爭朝夕，不負(fù)韶華?！?。瀏覽效果如圖1-1所示。知識點認(rèn)識Web前端開發(fā)01Web相關(guān)概念02HTML5概述03

常用的瀏覽器04

網(wǎng)頁編輯軟件05創(chuàng)建第一個HTML5網(wǎng)頁任務(wù)11.2.1認(rèn)識Web前端開發(fā)Web前端開發(fā)是創(chuàng)建Web頁面或App界面等前端界面并將其呈現(xiàn)給用戶的過程，通過超文本標(biāo)記語言（Hyper-TextMarkupLanguage，HTML）、層疊樣式表（CascadingStyleSheets，CSS）、JavaScript以及衍生出來的各種技術(shù)、框架、解決方案，來實現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。1.2.1認(rèn)識Web前端開發(fā)前端開發(fā)從網(wǎng)頁設(shè)計演變而來，名稱上有很明顯的時代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁設(shè)計是Web1.0時代的產(chǎn)物，早期網(wǎng)站的主要內(nèi)容都是靜態(tài)的，以圖片和文字為主，用戶使用網(wǎng)站的行為也以瀏覽為主。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5、CSS3的應(yīng)用，現(xiàn)在的網(wǎng)頁更加美觀，交互效果顯著，功能更加強(qiáng)大。1.2.1認(rèn)識Web前端開發(fā)

與前端開發(fā)對應(yīng)的是后端開發(fā)。后端開發(fā)通過編寫程序代碼與后臺服務(wù)器交互，來動態(tài)更新網(wǎng)站的內(nèi)容。頁面超文本預(yù)處理器（PageHypertextPreprocessor，PHP）、Java服務(wù)器頁面（JavaServerPages，JSP）和活動服務(wù)器頁面（ActiveServerPages，ASP）.NET等后臺開發(fā)技術(shù)，結(jié)合后臺數(shù)據(jù)庫技術(shù)，可以使網(wǎng)站具有后臺存儲和處理數(shù)據(jù)等功能。IP地址（InternetProtocolAddress）用于確定互聯(lián)網(wǎng)上的每臺主機(jī)，它是每臺主機(jī)唯一的標(biāo)識。在互聯(lián)網(wǎng)上，每臺計算機(jī)或網(wǎng)絡(luò)設(shè)備的IP地址都是全世界唯一的。

IP地址的格式是xxx.xxx.xxx.xxx，其中xxx是0～255的任意整數(shù)。IP地址1.2.2Web相關(guān)概念由于IP地址是數(shù)字編碼的，不易記憶，所以我們平時上網(wǎng)使用的大多是諸如的地址，即域名。www表示萬維網(wǎng)（WorldWideWeb，WWW）。域名1.2.2Web相關(guān)概念統(tǒng)一資源定位符（UniformResourceLocator，URL）其實就是Web地址，俗稱“網(wǎng)址”。萬維網(wǎng)上的所有文件都有唯一的URL，只要知道資源的URL，就能夠?qū)ζ溥M(jìn)行訪問。URL的格式為“協(xié)議名://主機(jī)域名或IP地址/路徑/文件名稱”。URL1.2.2Web相關(guān)概念網(wǎng)站、網(wǎng)頁與主頁1.2.2Web相關(guān)概念HTML表示網(wǎng)頁的一種規(guī)范（或者說是一種標(biāo)準(zhǔn)），它通過標(biāo)記定義了網(wǎng)頁內(nèi)容的顯示。HTML提供了許多標(biāo)記，如段落標(biāo)記、標(biāo)題標(biāo)記、超鏈接標(biāo)記和圖像標(biāo)記等。網(wǎng)頁中需要顯示什么內(nèi)容，就用相應(yīng)的HTML標(biāo)記進(jìn)行描述。HTML1.2.2Web相關(guān)概念查看網(wǎng)頁源代碼的方法：在網(wǎng)頁上右擊，選擇“查看頁面源代碼”Web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合，主要包括結(jié)構(gòu)標(biāo)準(zhǔn)、表現(xiàn)標(biāo)準(zhǔn)和行為標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)1.2.2Web相關(guān)概念HTML5是超文本標(biāo)記語言的第5代版本。

2014年10月29日，W3C宣布HTML5標(biāo)準(zhǔn)規(guī)范制定完成，并公開發(fā)布。1.2.3HTML5概述1.2.4常用的瀏覽器

目前，常用的瀏覽器有Edge、火狐（Firefox）、Chrome、Safari和Opera等，如下圖所示。Edge瀏覽器是微軟新一代的瀏覽器，是IE的替代產(chǎn)品，其功能全面，支持?jǐn)U展程序，界面簡潔、注重實用，對HTML5有很好的支持。Edge瀏覽器1.2.4常用的瀏覽器

火狐瀏覽器是一個開源網(wǎng)頁瀏覽器?；鸷鼮g覽器由Mozilla資金會和開源開發(fā)者一起開發(fā)。由于是開源的，所以它可以集成很多小插件，具有可拓展等特點。該瀏覽器發(fā)布于2002年，它也是世界上使用較廣泛的瀏覽器，對HTML5也有很好的支持?；鸷鼮g覽器1.2.4常用的瀏覽器Chrome瀏覽器是由谷歌公司開發(fā)的開放源代碼的瀏覽器。該瀏覽器的目標(biāo)是提升網(wǎng)頁的穩(wěn)定性、傳輸速度和安全性，并創(chuàng)造出簡單有效的使用界面。Chrome瀏覽器完全支持HTML5的功能。Chrome瀏覽器1.2.4常用的瀏覽器本書所有頁面在瀏覽時一律采用Chrome瀏覽器。Safari瀏覽器是蘋果公司開發(fā)的瀏覽器，Opera瀏覽器是Opera軟件公司開發(fā)的一款瀏覽器，兩款瀏覽器都對HTML5有很好的支持。其它瀏覽器1.2.4常用的瀏覽器1.2.5網(wǎng)頁編輯軟件

網(wǎng)頁編輯軟件有很多種，比較常用的有HBuilderX、AdobeDreamweaver、VisualStudioCode、SublimeText等。任務(wù)3創(chuàng)建第一個HTML5網(wǎng)頁任務(wù)11.3.1啟動HBuilderX雙擊HBuilderX.exe文件或桌面上的HBuilderX快捷方式，啟動HBuilderX，如圖所示。1.3.2新建項目從菜單欄中選擇“文件”|“新建”｜“項目”選項，出現(xiàn)“新建項目”對話框，輸入項目名稱chapter01，項目存放位置為“E:/Web前端開發(fā)/源代碼”，選擇模板類型為“空項目”，單擊“創(chuàng)建”按鈕，如圖所示。項目用來存儲一個網(wǎng)站的所有文件，這些文件包括網(wǎng)頁文件、圖像及音視頻文件、腳本文件、樣式表文件等1.3.3在項目中創(chuàng)建網(wǎng)頁文件在左側(cè)視圖中右擊項目名稱，在彈出的快捷菜單中選擇“新建”｜“html文件”選項，出現(xiàn)“新建html文件”對話框，輸入文件名example01.html，單擊“創(chuàng)建”按鈕，如圖所示。1.3.4輸入網(wǎng)頁代碼在網(wǎng)頁文件代碼的<title>與</title>之間輸入HTML文檔的標(biāo)題，這里輸入“第一個網(wǎng)頁”，然后在<body>與</body>標(biāo)記之間添加網(wǎng)頁的主體內(nèi)容，如圖所示。文檔的標(biāo)題網(wǎng)頁的內(nèi)容在HBuilderX中單擊工具欄中的“瀏覽器運(yùn)行”按鈕，或按“Ctrl+R”組合鍵，選擇Chrome瀏覽器瀏覽網(wǎng)頁，效果如圖所示。1.3.5保存并瀏覽網(wǎng)頁瀏覽網(wǎng)頁時，也可在“此電腦”或“計算機(jī)”中雙擊文件名來瀏覽。小提示任務(wù)3創(chuàng)建第一個HTML5網(wǎng)頁任務(wù)1任務(wù)小結(jié)任務(wù)2搭建簡單學(xué)院網(wǎng)站W(wǎng)eb前端開發(fā)案例教程HTML5+CSS3微課版制作網(wǎng)站是從搭建網(wǎng)頁結(jié)構(gòu)開始的，本項目使用HTML5語言常用標(biāo)記構(gòu)建網(wǎng)頁內(nèi)容，分別創(chuàng)建網(wǎng)站主頁、學(xué)院簡介頁面、學(xué)院新聞頁面、新聞詳情頁面。使用文本標(biāo)記、圖像標(biāo)記、超鏈接標(biāo)記、列表標(biāo)記等知識點實現(xiàn)頁面的創(chuàng)建，通過該任務(wù)的實現(xiàn)，掌握HTML5網(wǎng)頁的基本結(jié)構(gòu)、HTML5的語法、常用的HTML5標(biāo)記等。任務(wù)3搭建簡單學(xué)院網(wǎng)站任務(wù)2任務(wù)效果圖2-1網(wǎng)站首頁圖2-2學(xué)院簡介頁面綜合利用HTML5標(biāo)記，搭建一個簡單的學(xué)院網(wǎng)站，頁面瀏覽效果如圖2-1～圖2-4所示。任務(wù)效果圖2-3學(xué)院新聞頁面圖2-4新聞詳情頁面知識點

HTML5文檔基本結(jié)構(gòu)01HTML標(biāo)記及屬性02HTML文本標(biāo)記03HTML列表標(biāo)記04

HTML超鏈接標(biāo)記05HTML圖像標(biāo)記06任務(wù)3搭建簡單學(xué)院網(wǎng)頁任務(wù)22.2.1HTML5文檔的基本結(jié)構(gòu)使用HBuilderX新建網(wǎng)頁文件時會自動生成一些源代碼，這些自帶的源代碼構(gòu)成了HTML5文檔的基本結(jié)構(gòu)。2.2.1HTML5文檔的基本結(jié)構(gòu)

京東網(wǎng)主頁

京東網(wǎng)主頁源代碼查看網(wǎng)頁文件源代碼的方法：在頁面上右擊，選擇“查看源代碼”。2.2.1HTML5文檔的基本結(jié)構(gòu)HTML5文檔類型聲明文檔的開始標(biāo)記頭部的開始標(biāo)記元數(shù)據(jù)標(biāo)記標(biāo)題標(biāo)記頭部結(jié)束標(biāo)記主體開始標(biāo)記主體結(jié)束標(biāo)記文檔的結(jié)束標(biāo)記文檔類型聲明，位于文檔的最前面，用于向瀏覽器說明當(dāng)前文檔使用哪種HTML標(biāo)準(zhǔn)規(guī)范。HTML5文檔中的文檔類型聲明代碼如下。<！DOCTYPE><!DOCTYPEhtml>2.2.1HTML5文檔的基本結(jié)構(gòu)<html>標(biāo)記標(biāo)志著HTML文檔的開始，</html>標(biāo)記標(biāo)志著HTML文檔的結(jié)束。在它們之間的是文檔的頭部和主體內(nèi)容。<html>標(biāo)記2.2.1HTML5文檔的基本結(jié)構(gòu)<head>標(biāo)記用于定義HTML文檔的頭部信息，也稱為頭部標(biāo)記。<head>標(biāo)記緊接在<html>標(biāo)記之后，主要用來封裝其他位于文檔頭部的標(biāo)記，例如，<title>、<meta>、<link>和<style>等用來描述文檔的標(biāo)題、作者以及樣式等。一個HTML文檔只能含有一對<head>標(biāo)記。<head>標(biāo)記2.2.1HTML5文檔的基本結(jié)構(gòu)<body>標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標(biāo)記內(nèi)。一個HTML文檔只能含有一對<body>標(biāo)記，且<body>標(biāo)記必須在<html>標(biāo)記內(nèi)，位于<head>標(biāo)記之后，與<head>標(biāo)記有并列關(guān)系。<body>標(biāo)記2.2.1HTML5文檔的基本結(jié)構(gòu)<html>標(biāo)記、<head>標(biāo)記和<body>標(biāo)記都是HTML文檔中的基本標(biāo)記，除了這些標(biāo)記之外，HTML5還提供了大量其他標(biāo)記，下面對標(biāo)記及標(biāo)記中的屬性進(jìn)行簡要說明。2.2.2HTML標(biāo)記及其屬性標(biāo)記2.2.2HTML標(biāo)記及其屬性標(biāo)記的屬性2.2.2HTML標(biāo)記及其屬性<標(biāo)記屬性1="屬性值1"屬性2="屬性值2"...>受標(biāo)記影響的內(nèi)容</標(biāo)記>標(biāo)記可以通過不同的屬性展現(xiàn)各種效果，屬性在標(biāo)記中的使用格式如下。例如，<ahref="">未來信息學(xué)院</a>標(biāo)記的屬性2.2.2HTML標(biāo)記及其屬性注釋標(biāo)記2.2.2HTML標(biāo)記及其屬性如果需要在HTML文檔中添加一些便于讀者閱讀和理解，但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)記。其基本語法格式如下。例如，<ahref="">未來信息學(xué)院</a>標(biāo)題標(biāo)記2.2.3HTML文本標(biāo)記<hn>標(biāo)題文字</hn>標(biāo)題標(biāo)記基本語法格式如下。用于設(shè)置文檔中的標(biāo)題，其中n表示1～6的數(shù)字，分別表示一～六級標(biāo)題，<h1>表示一級標(biāo)題，<h6>表示六級標(biāo)題。標(biāo)題標(biāo)記2.2.3HTML文本標(biāo)記例：example02.html段落標(biāo)記2.2.3HTML文本標(biāo)記<p>段落文字</p>段落標(biāo)記基本語法格式如下。“p”是英文“paragraph”（段落）的縮寫。<p>和</p>之間的文字表示一個段落，多個段落需要用多對<p>標(biāo)記。段落標(biāo)記2.2.3HTML文本標(biāo)記例：example03.html水平線標(biāo)記2.2.3HTML文本標(biāo)記<hr>水平線標(biāo)記基本語法格式如下?！癶r”是英文“horizontalrule”（水平線）的縮寫，其作用是繪制一條水平線。該標(biāo)記為單標(biāo)記。水平線標(biāo)記2.2.3HTML文本標(biāo)記例：example04.html換行標(biāo)記2.2.3HTML文本標(biāo)記<br>換行標(biāo)記基本語法格式如下?！癰r”是英文“break”的縮寫，其作用是強(qiáng)制換行。該標(biāo)記為單標(biāo)記。換行標(biāo)記2.2.3HTML文本標(biāo)記例：example05.html字體樣式標(biāo)記2.2.3HTML文本標(biāo)記字體樣式標(biāo)記可以設(shè)置文字的粗體、斜體、刪除線和下畫線效果。字體樣式標(biāo)記2.2.3HTML文本標(biāo)記例：example06.html特殊字符2.2.3HTML文本標(biāo)記在網(wǎng)頁設(shè)計過程中，除了顯示文字以外，有時還需要插入一些特殊的字符，如版權(quán)符號、注冊商標(biāo)、貨幣符號等。這些字符需要用一些符號代碼來表示。特殊字符符號代碼備注空格

表示一個英文字符的空格>>大于號<<小于號??版權(quán)符號??注冊商標(biāo)￥￥人民幣符號特殊字符2.2.3HTML文本標(biāo)記例：example07.html無序列表2.2.4HTML列表標(biāo)記無序列表的基本語法格式如下。<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li>...</ul>ul是英文“unorderedlist”（無序列表）的縮寫。瀏覽器在顯示無序列表時，會以特定的項目符號對列表項進(jìn)行排列。無序列表2.2.4HTML列表標(biāo)記例：example08.html有序列表2.2.4HTML列表標(biāo)記有序列表的基本語法格式如下。<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li>...</ol>ol是英文“orderedlist”（有序列表）的縮寫。瀏覽器在顯示有序列表時，會用數(shù)字對列表項進(jìn)行排列。有序列表2.2.4HTML列表標(biāo)記例：example09.html。列表嵌套2.2.4HTML列表標(biāo)記在HTML中可以實現(xiàn)列表的嵌套，也就是說，無序列表或有序列表的列表項中還可以包含有序列表或無序列表。列表嵌套2.2.4HTML列表標(biāo)記例：example10.html。自定義列表2.2.4HTML列表標(biāo)記自定義列表用于對條目或術(shù)語進(jìn)行解釋或描述。與無序列表和有序列表的列表項不同，自定義列表的列表項前沒有任何項目符號或數(shù)字。自定義列表2.2.4HTML列表標(biāo)記自定義列表的基本語法格式如下。<dl><dt>條目1</dt><dd>數(shù)據(jù)</dd><dd>數(shù)據(jù)</dd>...<dt>條目2</dt><dd>數(shù)據(jù)</dd><dd>數(shù)據(jù)</dd>...</dl>dl是英文“definitionlist”（定義列表）的縮寫。dt是“definitionterm”（定義項）的縮

寫，表示條目名稱；dd是“definitiondata”（定義數(shù)據(jù)）的縮寫，表示條目的數(shù)據(jù)內(nèi)容。自定義列表2.2.4HTML列表標(biāo)記<dl>標(biāo)記中可以有多對<dt>標(biāo)記，每對<dt>標(biāo)記下可以有多對<dd>標(biāo)記。自定義列表在顯示時，條目的數(shù)據(jù)內(nèi)容會自動縮進(jìn)，使列表結(jié)構(gòu)更加清晰。自定義列表2.2.4HTML列表標(biāo)記例：example11.html超鏈接一般有以下幾種形式2.2.5HTML超鏈接標(biāo)記2.2.5HTML超鏈接標(biāo)記超鏈接的語法格式如下。<ahref="目標(biāo)地址"target="目標(biāo)窗口"title="提示文本">熱點文字</a>說明：（1）href：定義超鏈接指向的文檔的

URL，URL

可以是絕對

URL，也可以是相對URL。①

絕對URL：也稱絕對路徑，是指資源的完整地址，包含協(xié)議名稱、計算機(jī)域名以及路徑等。代碼如下。<ahref="">百度</a>2.2.5HTML超鏈接標(biāo)記②

相對URL：也稱相對路徑，是指目標(biāo)地址相對當(dāng)前頁面的路徑。代碼如下。<ahref="webs/page1.html">熱點文字</a>webs/page1.html表示page1.html是在當(dāng)前目錄下webs子目錄中的文件。若目標(biāo)文件在當(dāng)前目錄的上一級目錄中，則應(yīng)該寫成下面的格式。<ahref="../page1.html">熱點文字</a>其中，..表示當(dāng)前目錄的上一級目錄。2.2.5HTML超鏈接標(biāo)記（2）target：定義超鏈接的目標(biāo)文件在哪個窗口打開。其常用取值有_blank和_self。_blank表示在新的瀏覽器窗口打開；_self表示在原來的窗口打開，_self是默認(rèn)取值。（3）title：定義鼠標(biāo)指針指向超鏈接文字時顯示的提示文字。例如，<ahref="news1.html"title="學(xué)院2023年新年賀詞：風(fēng)正勁帆高揚(yáng)提質(zhì)培優(yōu)譜新篇">學(xué)院2021年新年賀詞…</a>

頁面間的超鏈接2.2.5HTML超鏈接標(biāo)記例：example12_1.html和example12_2.html，通過超鏈接實現(xiàn)兩個頁面的相互跳轉(zhuǎn)。代碼略。錨點鏈接2.2.5HTML超鏈接標(biāo)記當(dāng)同一頁面中內(nèi)容較多，瀏覽時需要不斷拖動滾動條來查看內(nèi)容時，為了提高信息檢索速度，可以在頁面上創(chuàng)建錨點鏈接來快速定位到要查看的內(nèi)容。創(chuàng)建錨點鏈接需要以下兩步。第一步：定義錨點的位置，使用id="錨點名稱"來標(biāo)注。第二步：創(chuàng)建指向錨點的鏈接，使用格式<ahref="#錨點名稱">熱點文字</a>。錨點鏈接2.2.5HTML超鏈接標(biāo)記例：example13.html代碼略?？真溄?.2.5HTML超鏈接標(biāo)記空鏈接的語法格式如下。<ahref="#">熱點文字</a>單擊空鏈接時不進(jìn)行任何跳轉(zhuǎn)。在制作網(wǎng)頁時，如果暫時無法確定超鏈接的目標(biāo)文件，就可以將其建立為空鏈接。說明：常用的Web圖像格式2.2.6HTML圖像標(biāo)記常用的Web圖像格式2.2.6HTML圖像標(biāo)記顯示顏色豐富特別為照片設(shè)計的的文件格式

有損壓縮的圖像格式JPG格式常用的Web圖像格式2.2.6HTML圖像標(biāo)記支持動畫制作LOGO、小圖標(biāo)等相對單一的圖像支持透明無損壓縮GIF格式常用的Web圖像格式2.2.6HTML圖像標(biāo)記體積更小不支持動畫顏色過渡更光滑支持alpha透明PNG格式圖像標(biāo)記2.2.6HTML圖像標(biāo)記<imgsrc="圖像路徑"alt="替換文本"title="提示文本"width="圖像寬度"height="圖像高度">語法格式：說明：height屬性設(shè)置圖像的高度。src屬性設(shè)置圖像的來源，必需屬性。alt屬性圖像不能顯示時的替換文本，必需屬性。width屬性設(shè)置圖像的寬度。title屬性鼠標(biāo)指向圖像時顯示的文本。圖像標(biāo)記2.2.6HTML圖像標(biāo)記例：example14.html給圖像創(chuàng)建超鏈接2.2.6HTML圖像標(biāo)記例：example15.html給圖像創(chuàng)建超鏈接2.2.6HTML圖像標(biāo)記效果如圖所示。

單擊百度Logo跳轉(zhuǎn)到百度網(wǎng)站單擊第二個圖像跳轉(zhuǎn)到圖像本身任務(wù)3搭建簡單學(xué)院網(wǎng)站任務(wù)22.3.1創(chuàng)建項目簡單學(xué)院網(wǎng)站由多個頁面構(gòu)成，而且用到了圖像，為了便于操作和組織這些文件，先創(chuàng)建網(wǎng)站項目。打開HBuilderX工具，右擊項目名稱chapter02，選擇“新建”|“目錄”選項，創(chuàng)建目錄school。2.3.1創(chuàng)建項目右擊目錄名稱school，選擇“新建”|“目錄”選項，創(chuàng)建目錄images，用于存放圖像文件，把本任務(wù)提供的素材中的圖像復(fù)制到該目錄中。2.3.2創(chuàng)建網(wǎng)站首頁下面對首頁的結(jié)構(gòu)進(jìn)行分析，然后在項目中創(chuàng)建頁面文件，使用HTML相應(yīng)標(biāo)記添加頁面的內(nèi)容。頁面分析2.3.2創(chuàng)建網(wǎng)站首頁標(biāo)題水平線段落（包含換行）圖像超鏈接版權(quán)信息創(chuàng)建首頁2.3.2創(chuàng)建網(wǎng)站首頁右擊目錄名稱school，選擇“新建”|“html文件”選項，將文件命名為index.html,并添加代碼如下。頁面分析2.3.3創(chuàng)建學(xué)院簡介頁面標(biāo)題水平線段落水平線超鏈接版權(quán)信息創(chuàng)建學(xué)院簡介頁面2.3.3創(chuàng)建學(xué)院簡介頁面右擊目錄名稱school，選擇“新建”|“html文件”選項，將文件命名為intr.html,并添加代碼如下。頁面分析2.3.4創(chuàng)建學(xué)院新聞頁面標(biāo)題水平線

無序列表水平線超鏈接版權(quán)信息創(chuàng)建學(xué)院新聞頁面2.3.4創(chuàng)建學(xué)院新聞頁面右擊目錄名稱school，選擇“新建”|“html文件”選項，將文件命名為news.html,并添加代碼如下。頁面分析2.3.5創(chuàng)建新聞詳情頁面標(biāo)題水平線段落圖像超鏈接版權(quán)信息創(chuàng)建新聞詳情頁面2.3.5創(chuàng)建新聞詳情頁面右擊目錄名稱school，選擇“新建”|“html文件”選項，將文件命名為news1.html,并添加代碼如下。任務(wù)3搭建簡單學(xué)院網(wǎng)站任務(wù)2任務(wù)小結(jié)本任務(wù)圍繞簡單學(xué)院網(wǎng)站項目的制作，介紹了HTML5文檔的基本結(jié)構(gòu)，以及段落標(biāo)記、字體樣式標(biāo)記、列表標(biāo)記、超鏈接標(biāo)記和圖像標(biāo)記等的使用方法，并綜合利用這些標(biāo)記完成了簡單學(xué)院網(wǎng)站項目的制作。本任務(wù)介紹的主要知識點如下表所示。任務(wù)小結(jié)任務(wù)3美化簡單學(xué)院網(wǎng)站W(wǎng)eb前端開發(fā)案例教程HTML5+CSS3微課版在任務(wù)2中使用HTML標(biāo)記和相應(yīng)的屬性搭建了簡單學(xué)院網(wǎng)站，可以看出，只使用HTML標(biāo)記創(chuàng)建的網(wǎng)站并不美觀，本任務(wù)對簡單學(xué)院網(wǎng)站進(jìn)行美化，設(shè)置文字的顏色和對齊方式等。通過本任務(wù)的實現(xiàn)，掌握CSS3的基本語法、使用方式、選擇器以及常用的文本樣式屬性等。任務(wù)3美化簡單學(xué)院網(wǎng)站任務(wù)3任務(wù)效果圖3-1網(wǎng)站首頁圖3-2

學(xué)院簡介頁面對任務(wù)2中搭建的簡單學(xué)院網(wǎng)站進(jìn)行美化，頁面瀏覽效果如圖3-1~3-4所示任務(wù)效果圖3-3學(xué)院新聞頁面圖3-4新聞詳情頁面知識點

CSS基本概念01CSS使用方式02常用CSS選擇器03CSS常用文本屬性04CSS高級特性05任務(wù)3美化簡單學(xué)院網(wǎng)站任務(wù)33.2.1什么是CSS在任務(wù)2中搭建了簡單學(xué)院網(wǎng)站如果希望網(wǎng)頁美觀、大方，并且升級輕松、維護(hù)方便有什么好辦法嗎?3.2.1什么是CSS

這就好比我們有了一間房子，我們需要進(jìn)行裝修，我們來選擇裝修材料。我們在完成了首頁的HTML代碼后，需要對網(wǎng)頁進(jìn)行美化，使用的裝飾材料是CSS。3.2.1什么是CSSCSS（CascadingStyleSheet），稱為層疊樣式表不需要編譯、可直接由瀏覽器執(zhí)行的標(biāo)記性語言，是用于格式化網(wǎng)頁的標(biāo)準(zhǔn)格式擴(kuò)展了HTML的功能，使網(wǎng)頁設(shè)計者能夠以更有效的方式設(shè)置網(wǎng)頁格式由W3C工作組組織負(fù)責(zé)制定和發(fā)布CSS3.2.1什么是CSSCSS3.2.1什么是CSS樣式就是格式。對于網(wǎng)頁來說，像網(wǎng)頁顯示的文字的大小和顏色、圖片位置、段落和列表等，都是網(wǎng)頁顯示的樣式層疊是指當(dāng)HTML文件引用多個CSS樣式時，如果CSS的定義發(fā)生沖突，瀏覽器就按照CSS的樣式優(yōu)先級來應(yīng)用樣式。對于由幾百個網(wǎng)頁組成的大型網(wǎng)站來說，要使所有的網(wǎng)頁樣式風(fēng)格統(tǒng)一，可以定義一個CSS樣式表文件，這樣幾百個網(wǎng)頁都調(diào)用這個樣式表文件即可CSS將樣式的定義與HTML文件結(jié)構(gòu)分離如果要修改網(wǎng)頁的樣式，只需修改CSS樣式表文件就可以3.2.1什么是CSSCSS的特點CSS的發(fā)展歷程1994年提出了CSS的想法2005年12月開始CSS3標(biāo)準(zhǔn)的制定1996年12月發(fā)布了CSS1.0規(guī)范開始CSS3標(biāo)準(zhǔn)的制定可向網(wǎng)頁添加字體、顏色等屬性1998年5月發(fā)布了CSS2.0規(guī)范添加了用于定位的屬性還擴(kuò)展了對其他媒體的顯示控制3.2.1什么是CSSCSS樣式，用于控制文字的顏色、對齊方式等HTML內(nèi)容CSS嵌入在HTML文檔中，雖然與HTML在同一個文檔中，但CSS集中寫在HTML文檔的頭部，符合結(jié)構(gòu)與表現(xiàn)相分離的。3.2.1什么是CSS3.2.2引入CSS樣式

行內(nèi)式也稱為內(nèi)聯(lián)樣式，是通過標(biāo)記的style屬性設(shè)置元素的樣式，其基本語法格式如下：

<標(biāo)記style="屬性：屬性值；屬性：屬性值；……">內(nèi)容</標(biāo)記名>標(biāo)記的屬性，實際上任何HTML標(biāo)記都擁有style屬性，通過該屬性可以設(shè)置標(biāo)記的樣式。CSS屬性，不同于HTML標(biāo)記的屬性。屬性和屬性值書寫時不區(qū)分大小寫，按照書寫習(xí)慣一般采用小寫的形式屬性和屬性值之間用英文狀態(tài)下的冒號分隔多個屬性之間必須用英文狀態(tài)下的分號隔開最后一個屬性值后的分號可以省略行內(nèi)樣式3.2.2引入CSS樣式例3-1使用行內(nèi)式設(shè)置元素樣式在HBuilderX中新建項目chapter03，選擇模板類型：“基本HTML項目”，該項目下包含css、img和js目錄，分別用于存放樣式表文件、圖像文件和腳本文件。在項目內(nèi)新建html文件example01.html行內(nèi)樣式3.2.2引入CSS樣式行內(nèi)式由于將表現(xiàn)和內(nèi)容混在一起，不符合Web標(biāo)準(zhǔn)，所以很少使用。一般需要臨時修改某個樣式規(guī)則時使用。行內(nèi)樣式3.2.2引入CSS樣式

內(nèi)部樣式表是將所有CSS樣式代碼寫在HTML文檔的<head>頭部標(biāo)記中，使用<style>標(biāo)記定義，其語法格式如下：

選擇器1{屬性：屬性值；屬性：屬性值；……}/*注釋內(nèi)容*/

選擇器2{屬性：屬性值；屬性：屬性值；……}

</style></head><style>標(biāo)記一般位于<head>標(biāo)記中的<title>標(biāo)記之后指定CSS樣式作用的HTML對象，有標(biāo)記選擇器、類選擇器和ID選擇器等CSS的注釋符號，用于說明該行代碼的作用，注釋內(nèi)容不會顯示在網(wǎng)頁上內(nèi)部樣式表3.2.2引入CSS樣式例3-2使用內(nèi)部樣式表設(shè)置網(wǎng)頁內(nèi)容的樣式（1）在項目chapter03中新建網(wǎng)頁文件example02.html。內(nèi)部樣式表3.2.2引入CSS樣式內(nèi)部樣式表（2）使用<style>標(biāo)記創(chuàng)建內(nèi)部樣式3.2.2引入CSS樣式內(nèi)部樣式表只對其所在的HTML頁面有效網(wǎng)站只有一個頁面時，使用內(nèi)嵌式有多個頁面且多個頁面使用相同風(fēng)格的樣式時，則應(yīng)使用外部樣式表3.2.2引入CSS樣式將所有的CSS樣式放入外部樣式表文件（擴(kuò)展名為css），通常使用<link>標(biāo)記將外部樣式表文件鏈接到HTML文件中。其語法格式如下：<head><linkhref="外部樣式表文件路徑"rel="stylesheet"type="text/css"></head><link>標(biāo)記一般位于<head>標(biāo)記中的<title>標(biāo)記之后定義被鏈接的文件是樣式表文件定義所鏈接的外部樣式表文件的URL定義所鏈接文檔的類型為text/css，即CSS文檔外部樣式表3.2.2引入CSS樣式外部樣式表例3-3將例3-2實現(xiàn)的效果用外部樣式表實現(xiàn)（1）在項目chapter03中新建網(wǎng)頁文件example03.html3.2.2引入CSS樣式外部樣式表（2）創(chuàng)建外部樣式表文件

在項目chapter03中的css目錄上右擊，選擇“新建”|“css文件”命令，在“新建CSS文件”對話框中輸入文件名稱：“style.css”，單擊“創(chuàng)建”按鈕。3.2.2引入CSS樣式外部樣式表（3）編寫CSS樣式表代碼3.2.2引入CSS樣式外部樣式表（4）鏈接CSS外部樣式表

在例3-3的example03.html中<title>標(biāo)記后，添加<link>語句。<linkhref="css/style.css"rel="stylesheet"type="text/css">

3.2.2引入CSS樣式外部樣式表同一個CSS樣式表可以被多個HTML頁面鏈接使用實際網(wǎng)站制作時一般都是用此種方式該種方式實現(xiàn)了結(jié)構(gòu)與表現(xiàn)的分離，使得網(wǎng)頁的前期制作和后期維護(hù)都十分方便。3.2.3CSS常用選擇器標(biāo)記選擇器標(biāo)記選擇器是指用HTML標(biāo)記名稱作為選擇器，為頁面中的該類標(biāo)記指定統(tǒng)一的CSS樣式，其語法格式如下標(biāo)記名稱{屬性：屬性值；屬性：屬性值；……}所有的HTML標(biāo)記都可以作為標(biāo)記選擇器，如body、h1~h6、p、ul、li、strong等3.2.3CSS常用選擇器標(biāo)記選擇器例，使用p選擇器定義HTML頁面中所有段落的樣式。標(biāo)簽名稱屬性屬性值3.2.3CSS常用選擇器標(biāo)記選擇器標(biāo)記選擇器最大的優(yōu)點是能快速統(tǒng)一頁面中同類型標(biāo)記的樣式，同時這也是它的缺點，不能設(shè)計差異化樣式。3.2.3CSS常用選擇器類選擇器類選擇器指定的樣式可以被網(wǎng)頁上的多個標(biāo)記元素選用。類選擇器以“.”開始，其后跟類名稱。其語法格式如下類名稱{屬性：屬性值；屬性：屬性值；……}說明使用類選擇器定義的CSS樣式，需要設(shè)置元素的class屬性值為其指定樣式類選擇器的最大優(yōu)勢是可以為元素定義相同或單獨(dú)的樣式3.2.3CSS常用選擇器類選擇器例3-4使用類選擇器定義網(wǎng)頁元素的樣式（1）在項目chapter03中網(wǎng)頁文件example04.html3.2.3CSS常用選擇器類選擇器（2）定義類選擇器.text3.2.3CSS常用選擇器類選擇器多個標(biāo)記可以使用同一個類名，使不同的標(biāo)記指定相同的樣式類名的第一個字符不能使用數(shù)字，并且嚴(yán)格區(qū)分大小寫，一般采用小寫英文字母表示3.2.3CSS常用選擇器

ID選擇器用于對某個元素定義單獨(dú)的樣式，ID選擇器以“#”開始，其語法格式如下#ID名稱{屬性：屬性值；屬性：屬性值；……}說明ID名稱即為HTML元素的ID屬性值，ID名稱在一個文檔中是唯一的，只對應(yīng)于頁面中的某一個具體元素ID選擇器定義的樣式能自動應(yīng)用到網(wǎng)頁中的某一個元素上ID選擇器3.2.3CSS常用選擇器ID選擇器

例3-5使用ID選擇器定義網(wǎng)頁元素的樣式（1）在項目chapter03中新建網(wǎng)頁文件example05.html3.2.3CSS常用選擇器ID選擇器（2）定義ID選擇器#p1和#p23.2.3CSS常用選擇器ID選擇器ID選擇器只能用在唯一元素上3.2.3CSS常用選擇器交集選擇器交集選擇器表示兩個選擇器的交集，其語法格式如下選擇器1選擇器2{屬性：屬性值；屬性：屬性值；……}說明選擇器1是標(biāo)記選擇器選擇器2是類選擇器兩個選擇器之間不能有空格3.2.3CSS常用選擇器交集選擇器

例3-6使用交集選擇器定義網(wǎng)頁元素的樣式（1）在項目chapter03中新建網(wǎng)頁文件example06.html3.2.3CSS常用選擇器交集選擇器（2）定義標(biāo)記選擇器p和類選擇器.special3.2.3CSS常用選擇器交集選擇器（3）給元素設(shè)置類選擇器.special3.2.3CSS常用選擇器交集選擇器（4）添加交集選擇器3.2.3CSS常用選擇器交集選擇器交集選擇器是為了簡化樣式表代碼的編寫而采用的選擇器初學(xué)者如果不能熟練應(yīng)用此選擇器，完全可以創(chuàng)建一個類選擇器來代替交集選擇器3.2.3CSS常用選擇器并集選擇器并集選擇器表示兩個選擇器的并集，其語法格式如下選擇器1,選擇器2{屬性：屬性值；屬性：屬性值；……}說明選擇器1和2是任何形式的選擇器（標(biāo)記選擇器、類選擇器、ID選擇器等）兩個選擇器之間是逗號3.2.3CSS常用選擇器并集選擇器例3-7使用并集選擇器定義網(wǎng)頁元素的樣式。（1）例3-7在項目chapter03中新建網(wǎng)頁文件example07.html，3.2.3CSS常用選擇器并集選擇器（2）定義并集選擇器3.2.3CSS常用選擇器并集選擇器使用并集選擇器定義樣式與各個選擇器分別定義樣式作用相同，但并集選擇器的樣式代碼更簡捷。3.2.3CSS常用選擇器后代選擇器

后代選擇器也叫包含選擇器，用于控制容器對象中的子對象，使其他容器對象中的同名子對象不受影響，其語法格式如下選擇器1選擇器2{屬性：屬性值；屬性：屬性值；……}說明選擇器1是容器對象選擇器2是子對象兩個選擇器之間用空格分隔3.2.3CSS常用選擇器后代選擇器

例3-8使用后代選擇器控制頁面元素的樣式。（1）在項目chapter03中新建網(wǎng)頁文件example08.html3.2.3CSS常用選擇器后代選擇器（2）定義后代選擇器3.2.3CSS常用選擇器后代選擇器后代選擇器使其他容器對象中的同名子對象不受影響3.2.3CSS常用選擇器通配符選擇器

通配符選擇器用“*”表示，它是所有選擇器作用范圍最廣的，能匹配頁面中的所有元素，其語法格式如下。*{屬性：屬性值；屬性：屬性值；……}3.2.3CSS常用選擇器通配符選擇器例如，設(shè)置頁面中所有元素的外邊距和內(nèi)邊距屬性代碼如下*{margin:0;padding:0;}實際網(wǎng)頁開發(fā)中不建議使用通配符選擇器，因為它設(shè)置的樣式對所有的HTML標(biāo)記都生效，不管標(biāo)記是否需要該樣式，這樣反而降低了代碼的執(zhí)行速度。3.2.4CSS常用文本屬性在任務(wù)2中介紹了常用的HTML文本標(biāo)記。為了更好地控制文本標(biāo)記顯示的樣式，CSS提供了相應(yīng)的文本設(shè)置屬性。CSS常用文本屬性見表3-1所示。3.2.4CSS常用文本屬性屬性說明font-family設(shè)置字體font-size設(shè)置字號font-weight設(shè)置字體的粗細(xì)font-style設(shè)置字體的傾斜@font-face用于定義服務(wù)器字體，是CSS3新增屬性text-decoration設(shè)置文本是否添加下劃線、刪除線等color設(shè)置文本顏色text-align設(shè)置文本的水平對齊方式text-indent設(shè)置段落的首行縮進(jìn)line-height設(shè)置行高text-shadow設(shè)置文字的陰影效果，是CSS3新增屬性text-overflow設(shè)置元素內(nèi)溢出文本的處理，是CSS3新增屬性表3-1常用文本屬性3.2.4CSS常用文本屬性font-family用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等。例如：p{font-family:"微軟雅黑";}可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。例如：body{font-family:"華文彩云","宋體","黑體";}3.2.4CSS常用文本屬性font-family（1）各種字體之間必須使用英文狀態(tài)下的逗號隔開。（2）中文字體需要加英文狀態(tài)下的引號，英文字體一般不需要加引號。當(dāng)需要設(shè)置英文字體時，英文字體名必須位于中文字體名之前。（3）如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態(tài)下的單引號或雙引號，例如：p{font-family:"TimesNewRoman";}（4）盡量使用系統(tǒng)默認(rèn)字體，以保證在任何用戶的瀏覽器中都能正確顯示。3.2.4CSS常用文本屬性font-size用于設(shè)置字號，一般以像素（px）為單位表示字號大小。例如：p{font-size:12px;}最適合顯示網(wǎng)頁正文的字號大小一般為12px左右。對于標(biāo)題或其他需要強(qiáng)調(diào)的地方可以適當(dāng)設(shè)置較大的字號。頁腳和輔助信息可以用小一些的字號。3.2.4CSS常用文本屬性font-weight用于定義字體的粗細(xì)。常用的屬性值為normal和bold，用來表示正?；蚣哟诛@示的字體。例如：p{font-weight:bold;}/*設(shè)置段落文本為粗體顯示*/h2{font-weight:normal;}/*設(shè)置標(biāo)題文本為正常顯示*/3.2.4CSS常用文本屬性font-style定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下。（1）normal：默認(rèn)值，瀏覽器會顯示標(biāo)準(zhǔn)的字體樣式。（2）italic：瀏覽器會顯示斜體的字體樣式。（3）oblique：瀏覽器會顯示傾斜的字體樣式。例如：p{font-style:italic;}/*設(shè)置段落文本為斜體顯示*/h2{font-style:oblique;}/*設(shè)置標(biāo)題文本為傾斜顯示*/3.2.4CSS常用文本屬性text-decorationtext-decoration屬性用于設(shè)置文本的下劃線，上劃線，刪除線等裝飾效果，其可用屬性值如下：none：沒有裝飾（正常文本默認(rèn)值）。underline：下劃線。overline：上劃線。line-through：刪除線。a{text-decoration:none;}/*設(shè)置超鏈接文字不顯示下畫線*/a:hover{text-decoration:underline;}/*設(shè)置鼠標(biāo)懸停在超鏈接文字上時顯示下畫線*/3.2.4CSS常用文本屬性colorcolor屬性用于定義文本的顏色，常用的取值方式有如下4種：（1）預(yù)定義的顏色值表示：用相應(yīng)的顏色值表示。例如，black、red、green、blue等（2）十六進(jìn)制數(shù)表示：采用#RRGGBB的形式，RR表示紅色的分量值，GG表示綠色的分量值，BB表示藍(lán)色的分量值，每組分量值的取值范圍為：00~FF。例如，#FF0000，#FF6600，#29D794等。3.2.4CSS常用文本屬性color（3）rgb函數(shù)表示：例如，紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。（4）rgba函數(shù)表示：rgba函數(shù)是在rgb函數(shù)的基礎(chǔ)上增加了控制alpha透明度的參數(shù)。透明度的取值介于0~1之間。例如，h3{color:rgb(255,0,0,0.5);}表示采用半透明的紅色。3.2.4CSS常用文本屬性text-align用于設(shè)置文本內(nèi)容的水平對齊。其可用屬性值如下：left：左對齊（默認(rèn)值）。right：右對齊。center：居中對齊。justify：兩端對齊。h1{text-align:center;}3.2.4CSS常用文本屬性text-indenttext-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值。一般建議使用em（1em等于一個中文字符）作為設(shè)置單位。p{text-indent:2em;}/*設(shè)置段落縮進(jìn)2個中文字符*/3.2.4CSS常用文本屬性line-height段落中兩行文字之間的垂直距離稱為行高。在HTML中是無法控制行高的，在CSS樣式中，使用line-height屬性控制行與行之間的垂直間距，屬性值一般以px像素為單位。p{line-height:25px;}/*設(shè)置行高為25px*/3.2.4CSS常用文本屬性text-shadow設(shè)置文本的陰影效果。常用語法格式如下：說明：陰影距離可以是正值，也可以是負(fù)值，正負(fù)值表示陰影的方向不同。選擇器{text-shadow:水平陰影距離，垂直陰影距離，模糊半徑，陰影顏色;}3.2.4CSS常用文本屬性text-shadow

例3-9給文字設(shè)置陰影效果。（1）在項目chapter03中新建網(wǎng)頁文件example9.html3.2.4CSS常用文本屬性text-shadow（2）設(shè)置陰影效果樣式3.2.5CSS的高級特性CSS是層疊樣式表的簡稱，層疊性和繼承性是其基本特征。對于Web開發(fā)工程師來說，應(yīng)該深刻理解和靈活運(yùn)用這兩種特性。另外，當(dāng)對元素定義了多個樣式規(guī)則時，其樣式應(yīng)用的優(yōu)先級也遵循一定的規(guī)則，下面分別進(jìn)行介紹。3.2.5CSS的高級特性所謂層疊性是指多種CSS樣式的疊加。

例如，當(dāng)使用內(nèi)嵌式CSS樣式定義<p>標(biāo)記字號大小為12像素，外部樣式表定義<p>標(biāo)記顏色為紅色，那么段落文本將顯示為12像素紅色，即這兩種樣式產(chǎn)生了疊加。177層疊性3.2.5CSS的高級特性178層疊性

例3-10設(shè)置層疊樣式。（1）在項目chapter03中新建網(wǎng)頁文件example10.html3.2.5CSS的高級特性1791.層疊性（2）設(shè)置樣式3.2.5CSS的高級特性180層疊性（3）設(shè)置樣式第一行文本同時應(yīng)用了標(biāo)記p的樣式、類選擇器.special定義的樣式和id選擇器#one定義的樣式，顯示為微軟雅黑、24px和紅色，即三個選擇器定義的樣式進(jìn)行了疊加。3.2.5CSS的高級特性繼承性是指書寫CSS樣式表時，子元素會繼承父元素的某些樣式，如文本顏色和字號等。例如，定義頁面主體元素body的文本顏色為黑色，那么頁面中所有的文本都將顯示為黑色，這是因為其他元素都是body元素的子元素。恰當(dāng)?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復(fù)雜性。181繼承性3.2.5CSS的高級特性并不是所有的CSS屬性都可以繼承，譬如邊框?qū)傩?、外邊距屬性、?nèi)邊距屬性、背景屬性、定位屬性、布局屬性、元素寬高屬性等。182繼承性當(dāng)為body元素設(shè)置字號屬性時，標(biāo)題文本不會采用這個樣式，因為標(biāo)題標(biāo)記h1～h6有默認(rèn)的字號大小。3.2.5CSS的高級特性定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一元素上，這時就會出現(xiàn)優(yōu)先級問題。根據(jù)規(guī)定，樣式表的優(yōu)先級別從高到低為：行內(nèi)樣式>嵌入式>外部樣式表也就是最接近目標(biāo)元素的樣式優(yōu)先級越高，即就近原則。183CSS優(yōu)先級3.2.5CSS的高級特性CSS優(yōu)先級

例3-11優(yōu)先級練習(xí)（1）在項目chapter03中新建網(wǎng)頁文件example11.html3.2.5CSS的高級特性185CSS優(yōu)先級（2）定義樣式表3.2.5CSS的高級特性1863.CSS優(yōu)先級（3）使用樣式表若對同一個元素在行內(nèi)樣式或在內(nèi)部樣式表或在外部樣式表中定義了相同的選擇器的樣式，則此時的優(yōu)先級為：行內(nèi)樣式>內(nèi)部樣式表>外部樣式表，也就是越接近目標(biāo)元素的樣式，優(yōu)先級越高，即就近原則，同學(xué)們可自行練習(xí)一下。任務(wù)3美化簡單學(xué)院網(wǎng)站任務(wù)33.3.1美化首頁

分析首頁效果圖，可以為body元素統(tǒng)一設(shè)置字體、顏色等樣式，標(biāo)題、段落文字的對齊方式等信息分別設(shè)置即可。樣式分析3.3.1美化首頁

搭建結(jié)構(gòu)3.3.1美化首頁定義CSS樣式3.3.2美化學(xué)院簡介頁面

分析學(xué)院簡介頁面效果圖，可以為body元素統(tǒng)一設(shè)置字體、顏色等樣式，標(biāo)題、段落和版權(quán)信息的樣式須分別設(shè)置。樣式分析3.3.2美化學(xué)院簡介頁面

搭建結(jié)構(gòu)3.3.2美化學(xué)院簡介頁面定義CSS樣式3.3.3美化學(xué)院新聞頁面樣式分析分析學(xué)院簡介頁面效果圖，可以為body元素統(tǒng)一設(shè)置字體、顏色等樣式，標(biāo)題、列表項和版權(quán)信息的樣式須分別設(shè)置。3.3.3美化學(xué)院新聞頁面搭建結(jié)構(gòu)3.3.3美化學(xué)院新聞頁面定義CSS樣式3.3.4美化新聞詳情頁面樣式分析分析新聞詳情頁面效果圖，可以為body元素統(tǒng)一設(shè)置字體、顏色等樣式，標(biāo)題、副標(biāo)題、正文和版版信息的樣式須分別設(shè)置。3.3.4美化新聞詳情頁面搭建結(jié)構(gòu)3.3.4美化新聞詳情頁面定義CSS樣式任務(wù)3美化簡單學(xué)院網(wǎng)站任務(wù)3任務(wù)小結(jié)本任務(wù)圍繞簡單學(xué)院網(wǎng)站頁面的美化，介紹了CSS在網(wǎng)頁中的引用方式、CSS選擇器的類型、CSS常用的屬性，以及CSS的層疊性、繼承性及優(yōu)先級等內(nèi)容。通過本任務(wù)的學(xué)習(xí)，讀者可以掌握CSS在網(wǎng)頁中的使用方法，學(xué)會靈活使用CSS最常用的屬性。本任務(wù)介紹的主要知識點如表所示。任務(wù)小結(jié)任務(wù)4制作學(xué)院介紹頁面Web前端開發(fā)案例教程HTML5+CSS3項目式微課版制作學(xué)院介紹頁面任務(wù)4任務(wù)3制作的頁面內(nèi)容都是在瀏覽器中直接呈現(xiàn)的，實際上網(wǎng)頁中的內(nèi)容是由一個個的塊組成的，這些塊也叫盒子。本任務(wù)制作學(xué)院介紹頁面，將介紹的內(nèi)容放入盒子中，并設(shè)置盒子的各種屬性。通過本任務(wù)的實現(xiàn)，掌握盒子模型的概念和盒子的各種屬性設(shè)置。任務(wù)效果使用盒子模型制作學(xué)院介紹頁面。

學(xué)院介紹頁面知識點盒子模型的概念01盒子模型的相關(guān)屬性02知識準(zhǔn)備任務(wù)3制作學(xué)院介紹頁面任務(wù)44.2.1盒子模型的概念

盒子模型就是把HTML頁面中的元素看作一個矩形的盒子，也就是一個盛裝內(nèi)容的容器。每個矩形都由元素的內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。例4-1使用div標(biāo)記定義盒子。example01.html4.2.1盒子模型的概念div標(biāo)記是區(qū)塊容器標(biāo)記，簡稱塊標(biāo)記，塊通稱為盒子塊標(biāo)記可以容納段落、標(biāo)題、表格、圖像等各種網(wǎng)頁元素div標(biāo)記中還可以包含多層div標(biāo)記DIV+CSS布局網(wǎng)頁就是將網(wǎng)頁內(nèi)容放入若干div標(biāo)記中，并使用CSS設(shè)置這些塊的屬性4.2.1盒子模型的概念4.2.1盒子模型的概念一個盒子實際占有的寬度（或高度）是由“內(nèi)容+內(nèi)邊距+邊框+外邊距”組成的例4-1中定義的盒子box的實際寬度和高度均是310px在網(wǎng)頁排版時，要非常精確地計算盒子實際占有的寬度和高度4.2.1盒子模型的概念大部分網(wǎng)頁元素本質(zhì)上都是以盒子的形式存在的。例如，body、p、h1～h6、ul、li等元素都是盒子給盒子添加背景色或背景圖像時，該元素的背景色或背景圖像也將出現(xiàn)在內(nèi)邊距中4.2.1盒子模型的概念不要求每個元素都必須定義這些屬性(內(nèi)邊距、邊框、外邊距、寬和高)div標(biāo)記定義的盒子默認(rèn)寬度是瀏覽器寬度，默認(rèn)高度由盒子中內(nèi)容決定，默認(rèn)的邊框、內(nèi)邊距、外邊距都為0body、p、h1～h6、ul、li等都有默認(rèn)外邊距和內(nèi)邊距設(shè)計網(wǎng)頁時，一般要將這些元素的外邊距和內(nèi)邊距都先設(shè)為0，需要時再設(shè)置為非零的值。要精確描述盒子的外觀，需要設(shè)置盒子的邊框?qū)傩裕╞order）、內(nèi)邊距屬性（padding）、外邊距屬性（margin）、盒子陰影屬性（box-shadow）等。4.2.2盒子模型的相關(guān)屬性1.邊框?qū)傩詁order邊框（border）屬性設(shè)置方式如下：border-top：上邊框?qū)挾?、樣式、顏色。border-right：右邊框?qū)挾?、樣式、顏色。border-bottom：下邊框?qū)挾取邮?、顏色。border-left：左邊框?qū)挾取邮?、顏色?.2.2盒子模型的相關(guān)屬性將背景顏色為灰色的盒子下邊框設(shè)置為2px、實線、紅色border-bottom:2pxsolid#f00;4.2.2盒子模型的相關(guān)屬性1.邊框?qū)傩詁order若4個邊框具有相同的寬度、樣式和顏色，使用如下方式表示。若將盒子box的4個邊框均設(shè)置為5px、實線、紅色格式：border：邊框?qū)挾葮邮筋伾玝order:5pxsolid#f00;4.2.2盒子模型的相關(guān)屬性1.邊框?qū)傩詁orderborder：邊框?qū)挾葮邮筋伾玸olid：邊框樣式為單實線dashed：邊框樣式為虛線dotted：邊框樣式為點線double：邊框樣式為雙實線none：沒有邊框4.2.2盒子模型的相關(guān)屬性1.邊框?qū)傩詁order若將盒子box的4個邊框均設(shè)置為2px、虛線、紅色.box{border:2pxdashed#f00;}4.2.2盒子模型的相關(guān)屬性1.邊框?qū)傩詁orderCSS3中新增的border-radius屬性可以給元素設(shè)置圓角邊框。border-radius:圓角半徑屬性值可以是長度或百分比，表示圓角的半徑4.2.2盒子模型的相關(guān)屬性2.圓角邊框?qū)傩詁order-radius在例4-1中對盒子添加圓角半徑的設(shè)置4.2.2盒子模型的相關(guān)屬性2.圓角邊框?qū)傩詁order-radius4.2.2盒子模型的相關(guān)屬性2.圓角邊框?qū)傩詁order-radius設(shè)置圓角半徑時，也可以分別為4個角的圓角半徑設(shè)置不同的值。盒子的樣式代碼改為如下4.2.2盒子模型的相關(guān)屬性2.圓角邊框?qū)傩詁order-radius左上圓角半徑依次為左上、右上、右下、左下4.2.2盒子模型的相關(guān)屬性2.圓角邊框?qū)傩詁order-radius

若盒子設(shè)置了背景顏色或背景圖像，那么在不設(shè)置邊框時，也可以使用border-radius屬性顯示出圓角的效果4.2.2盒子模型的相關(guān)屬性2.圓角邊框?qū)傩詁order-radiuspadding-top：上內(nèi)邊距大小padding-right：右內(nèi)邊距大小padding-bottom：下內(nèi)邊距大小

padding-left：左內(nèi)邊距大小

內(nèi)邊距用于設(shè)置盒子中內(nèi)容與邊框之間的距離，也常常稱為內(nèi)填充。內(nèi)邊距（padding）屬性設(shè)置方式如下：若4個內(nèi)邊距具有相同的大小，則可以用一行代碼設(shè)置。格式：padding：內(nèi)邊距大小4.2.2盒子模型的相關(guān)屬性3.內(nèi)邊距屬性padding內(nèi)邊距屬性padding上右下左上右下左上右下左上下左右內(nèi)邊距均為10px3.內(nèi)邊距屬性paddingmargin-top：上外邊距大小margin-right：右外邊距大小margin-bottom：下外邊距大小

margin-left：左外邊距大小

外邊距用于設(shè)置盒子與其他盒子之間的距離。外邊距（margin）屬性設(shè)置方式如下：4.2.2盒子模型的相關(guān)屬性4.外邊距屬性marginmargin：0auto水平居中若4個外邊距具有相同的大小，則可以用一行代碼設(shè)置。格式：margin：外邊距大小4.2.2盒子模型的相關(guān)屬性4.外邊距屬性marginbox-shadow用于給盒子添加周邊陰影效果。語法格式：box-shadow:水平偏移量垂直偏移量模糊半徑擴(kuò)展半徑顏色陰影類型；說明陰影水平偏移量：必選項，可以為負(fù)值，正值表示向右偏移，負(fù)值表示向左偏移。陰影垂直偏移量：必選項，可以為負(fù)值，正值表示向下偏移，負(fù)值表示向上偏移。陰影模糊半徑：可選項，不能為負(fù)值，值越大陰影就越模糊，默認(rèn)值為0，表示不模糊。陰影擴(kuò)展半徑：可選項，可以為負(fù)值。正值表示在所有方向擴(kuò)展，負(fù)值表示在所有方向上消減，默認(rèn)值為0。陰影顏色：可選項，省略時為黑色。陰影類型：可選項，內(nèi)陰影的值為inset，省略時為外陰影。4.2.2盒子模型的相關(guān)屬性5.盒子陰影屬性box-shadow陰影水平偏移量陰影垂直偏移量陰影模糊半徑陰影顏色示例4.2.2盒子模型的相關(guān)屬性5.盒子陰影屬性box-shadow例4-2在項目chapter04中新建一個網(wǎng)頁文件，定義一個盒子，盒子中包括圖像和文本等，盒子和圖像都設(shè)置了陰影效果，文件名為example02.html。4.2.2盒子模型的相關(guān)屬性5.盒子陰影屬性box-shadow網(wǎng)頁能通過背景顏色或背景圖像給人留下深刻的第一印象，如節(jié)日題材的網(wǎng)站一般采用應(yīng)景的圖片來營造節(jié)日氛圍，所以在網(wǎng)頁設(shè)計中，控制背景顏色和背景圖像是很重要的。設(shè)置背景顏色或背景圖像時可使用綜合屬性background，通過該屬性可以設(shè)置與背景相關(guān)的所有值。4.2.3背景屬性屬性

作用備注background-color設(shè)置要使用的背景顏色

background-image設(shè)置要使用的背景圖像

background-repeat設(shè)置如何重復(fù)背景圖像

background-position設(shè)置背景圖像的位置

與background屬性相關(guān)的屬性如下表所示。4.2.3背景屬性語法格式：background-color：#RRGGBB或#rgb(r,g,b)或預(yù)定義的顏色值示例1.背景顏色（background-color）屬性4.2.3背景屬性語法格式：background-image：URL（圖像來源）示例4.2.3背景屬性1.背景圖像（background-image）屬性語法格式：

利用背景圖像的各種屬性設(shè)置元素的背景顏色和背景圖像。5.綜合設(shè)置背景（background）屬性

語法格式：background:背景顏色url("圖像")是否重復(fù)位置是否固定大小裁剪方式參考原點;所有屬性在書寫時順序任意。如果同時設(shè)置了“position”和“size”兩個屬性，應(yīng)該用左斜杠“/”分隔，如“position/size”，而不是用空格把兩個參數(shù)值隔開。設(shè)置元素的背景顏色和背景圖像時建議使用綜合屬性background一次性設(shè)置。4.2.3背景屬性4.2.3背景屬性例4-6修改例4-5，使用background綜合設(shè)置背景顏色和圖像。5.綜合設(shè)置背景（background）屬性

background:#cccurl(images/logo.png)no-repeatleftcenter;background:url(images/binhai.jpg)no-repeatcenterbottom;background-image:url(images/binhai.jpg); background-repeat:no-repeat;

background-position:centerbottom;background-color:#ccc; background-image:url(images/logo.png); background-repeat:no-repeat; background-position:leftcenter;4.2.4不透明度屬性

顏色的不透明度可以使用rgba(r,g,b,alpha)模式設(shè)置。也可以使用元素的opacity屬性為任何元素設(shè)置不透明效果。格式如下。格式：opacity:不透明度值;不透明值是0-1間的浮點數(shù)值。其中，0表示完全透明，1表示完全不透明，0.5表示半透明。4.2.4不透明度屬性例4-7：在項目chapter04中新建一個網(wǎng)頁文件，使用opacity屬性設(shè)置圖像的不透明度，文件名為example07.html。圖像的不透明度為0.3鼠標(biāo)指針移動到圖像上圖像的不透明度為1任務(wù)實現(xiàn)任務(wù)3制作學(xué)院介紹頁面任務(wù)44.3任務(wù)實現(xiàn)學(xué)院介紹頁面首先用div標(biāo)記作盒子，存放標(biāo)題和段落內(nèi)容。再為盒子、標(biāo)題和段落定義CSS樣式。任務(wù)分析4.3任務(wù)實現(xiàn)頁面結(jié)構(gòu)代碼：4.3.1搭建學(xué)院介紹頁面結(jié)構(gòu)4.3.2定義學(xué)院介紹頁面CSS樣式

制作學(xué)院介紹頁面任務(wù)4任務(wù)小結(jié)本任務(wù)圍繞學(xué)院介紹頁面的實現(xiàn)，首先介紹了盒子模型的概念、盒子相關(guān)屬性、CSS背景設(shè)置等知識點及其運(yùn)用方法，最后綜合利用所學(xué)知識對學(xué)院介紹頁面的結(jié)構(gòu)重新布局，并對文本內(nèi)容的樣式進(jìn)行美化。任務(wù)小結(jié)任務(wù)5制作學(xué)院網(wǎng)站導(dǎo)航條Web前端開發(fā)案例教程HTML5+CSS3微課版導(dǎo)航條是網(wǎng)頁的重要組成元素，導(dǎo)航條可以將網(wǎng)站的信息分類處理，幫助瀏覽者快速查找所需信息。本任務(wù)使用HTML的無序列表標(biāo)記構(gòu)建導(dǎo)航條的結(jié)構(gòu)，使用CSS

完成導(dǎo)航條樣式設(shè)計，實現(xiàn)學(xué)院網(wǎng)站導(dǎo)航條。通過本任務(wù)的實現(xiàn)，掌握導(dǎo)航條的構(gòu)建及導(dǎo)航條樣式設(shè)置等。任務(wù)3制作學(xué)院網(wǎng)站導(dǎo)航條任務(wù)5任務(wù)效果創(chuàng)建學(xué)院網(wǎng)站導(dǎo)航條，瀏覽效果如圖所示。（1）導(dǎo)航條的寬度為100%，高度為42px。（2）導(dǎo)航條的背景顏色為藍(lán)色RGB(28,75,169)。（3）每個導(dǎo)航項的寬度為120px，高度為42px，文字水平和垂直方向都居中。（4）每個導(dǎo)航項為超鏈接，文字采用微軟雅黑體，文字大小為14px，文字顏色為白色，無下劃線。（5）鼠標(biāo)指針懸停到主菜單項上時，顯示白底藍(lán)字。任務(wù)效果創(chuàng)建學(xué)院網(wǎng)站導(dǎo)航條，要求如下。知識點無序列表樣式設(shè)置01

超鏈接樣式設(shè)置02

元素的類型與轉(zhuǎn)換03任務(wù)3制作學(xué)院網(wǎng)站導(dǎo)航條任務(wù)55.2.1無序列表樣式設(shè)置列表有無序列表、有序列表和自定義列表等，對應(yīng)的標(biāo)記分別是<ul>、<ol>和<dl>等。在實際應(yīng)用中，無序列表是使用最頻繁的列表之一，例如，本任務(wù)中的導(dǎo)航條就是用無序列表來構(gòu)建的。無序列表樣式設(shè)置5.2.1無序列表樣式設(shè)置（1）list-style-type屬性：控制無序或有序列表的項目符號。例如，無序列表的取值有disc、circle、square。（2）

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

Web前端開發(fā)案例教程（HTML5+CSS3）（項目式）全套教學(xué)課件

文檔簡介

溫馨提示

最新文檔

評論

Web前端開發(fā)案例教程（HTML5+CSS3）（項目式）全套教學(xué)課件

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔