前端設(shè)計(jì)與開發(fā) 課件 模塊4 CSS基礎(chǔ)_第1頁(yè)
前端設(shè)計(jì)與開發(fā) 課件 模塊4 CSS基礎(chǔ)_第2頁(yè)
前端設(shè)計(jì)與開發(fā) 課件 模塊4 CSS基礎(chǔ)_第3頁(yè)
前端設(shè)計(jì)與開發(fā) 課件 模塊4 CSS基礎(chǔ)_第4頁(yè)
前端設(shè)計(jì)與開發(fā) 課件 模塊4 CSS基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩40頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

模塊4CSS基礎(chǔ)制作“美文賞析”網(wǎng)頁(yè)任務(wù)4.1任務(wù)描述優(yōu)秀的美文常常以其深刻的思想內(nèi)涵、豐富的情感表達(dá)和精湛的藝術(shù)形式觸動(dòng)人心，啟迪智慧。在賞析這些作品時(shí)，我們不僅要學(xué)會(huì)欣賞其文學(xué)價(jià)值，還要深入挖掘其思想內(nèi)涵，從而在現(xiàn)實(shí)生活中樹立正確的世界觀、人生觀和價(jià)值觀。任務(wù)分析通過(guò)對(duì)本任務(wù)的學(xué)習(xí)，了解CSS的概念、作用，掌握CSS的基本語(yǔ)法和基本屬性，學(xué)會(huì)CSS的3種樣式，能夠利用所學(xué)知識(shí)制作“美文賞析”網(wǎng)頁(yè)。相關(guān)知識(shí)4.1.1CSS簡(jiǎn)介CSS（CascadingStyleSheets，層疊樣式表）是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)中的各個(gè)元素進(jìn)行格式化。CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體、字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。CSS的樣式定義了如何顯示HTML元素，主要包括文字、盒模型、定位等。CSS的規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器、一條或多條聲明。選擇器通常是用戶需要改變樣式的HTML元素，每條聲明由一個(gè)屬性和一個(gè)值組成。4.1.2CSS的基本語(yǔ)法CSS的規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器、一條或多條聲明。其基本語(yǔ)法如下：選擇器{屬性1:值1;屬性2:值2;…屬性x:值x;}4.1.3CSS基本屬性CSS的屬性按照相關(guān)功能進(jìn)行了分組，包括字體、文本、背景、列表、動(dòng)畫等1.字體屬性字體屬性用于設(shè)置字體的尺寸、樣式、粗細(xì)等2.文本屬性文本屬性用于設(shè)置文本的顏色、方向、陰影、大小寫、縮進(jìn)、水平對(duì)齊方式等3.背景屬性背景屬性用于設(shè)置元素的背景顏色、背景圖片、背景圖片的重復(fù)性、背景圖片的位置等4.邊框?qū)傩赃吙驅(qū)傩钥梢栽O(shè)置元素邊框的顏色、樣式、寬度等5.列表屬性列表屬性用于設(shè)置列表項(xiàng)標(biāo)記的圖像、位置、樣式等6.尺寸屬性尺寸屬性用于設(shè)置元素的高度、最大高度、最小高度、寬度、最大高度、最小高度4.1.4CSS樣式分類根據(jù)CSS在HTML中的使用方法和作用范圍不同，CSS樣式類型分為內(nèi)聯(lián)式、嵌入式和外鏈?zhǔn)饺?.內(nèi)聯(lián)式內(nèi)聯(lián)式樣式也被稱為“行內(nèi)樣式”，是CSS使用中最直接的一種方法。內(nèi)聯(lián)式樣式通過(guò)在HTML標(biāo)簽中使用全局屬性style，將CSS代碼直接寫入其中來(lái)實(shí)現(xiàn)。2.嵌入式嵌入式樣式也被稱為“內(nèi)部樣式表”，是一種將樣式放置在HTML文檔的<head></head>標(biāo)簽對(duì)中，并使用<style>標(biāo)簽進(jìn)行定義的方法。3.外鏈?zhǔn)酵怄準(zhǔn)綐邮揭脖环Q為“外部樣式表”，是一種將所有樣式放置在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，并通過(guò)<link/>標(biāo)簽將外部樣式表文件鏈接到HTML文檔中的方法。任務(wù)規(guī)劃通過(guò)HTML5和CSS創(chuàng)建一個(gè)結(jié)構(gòu)合理、樣式優(yōu)美、響應(yīng)靈敏且具有一定交互性的“美文賞析”網(wǎng)頁(yè)，以此來(lái)提升用戶在閱讀過(guò)程中的舒適度和沉浸感。同時(shí)，通過(guò)靈活運(yùn)用不同的CSS樣式引入方法，保證網(wǎng)頁(yè)的擴(kuò)展性和可維護(hù)性。任務(wù)實(shí)施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項(xiàng)目文件夾，并命名為bestArticles。（2）在VSCode中打開項(xiàng)目文件夾bestArticles，在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“l(fā)ist.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊list.html文件，進(jìn)入代碼編輯窗口。在<title></title>標(biāo)簽對(duì)中設(shè)置網(wǎng)頁(yè)的標(biāo)題為“美文賞析”，并引入外部樣式表文件。（4）在<body></body>標(biāo)簽對(duì)中添加<header></header>標(biāo)簽對(duì)，并在<header></header>標(biāo)簽對(duì)內(nèi)添加一級(jí)標(biāo)題和<nav></nav>標(biāo)簽對(duì)，然后在添加的<nav></nav>標(biāo)簽對(duì)中添加導(dǎo)航鏈接。這里通過(guò)內(nèi)聯(lián)式樣式的方法設(shè)置一級(jí)標(biāo)題的顏色和字體大小。（5）在<body></body>標(biāo)簽中添加一組<main></main>標(biāo)簽對(duì)，并在<main></main>標(biāo)簽對(duì)中添加一組<section></section>標(biāo)簽對(duì)。（6）在步驟（5）中添加的<section></section>標(biāo)簽對(duì)中添加一組<article></article>標(biāo)簽對(duì)，用來(lái)放置第一篇美文，并在<article></article>標(biāo)簽對(duì)中設(shè)置文章的標(biāo)題、內(nèi)容、作者、圖片等信息。任務(wù)實(shí)施（7）在<body></body>標(biāo)簽對(duì)中添加一組<footer></footer>標(biāo)簽對(duì)，然后在添加的<footer></footer>標(biāo)簽對(duì)中添加版權(quán)相關(guān)內(nèi)容。（8）在項(xiàng)目文件夾bestArticles上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“css”，然后按Tab鍵或Enter鍵，在css文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“style.css”，然后按Tab鍵或Enter鍵。（9）單擊步驟（8）中新建的styles.css文件進(jìn)入代碼編輯窗口，設(shè)置頁(yè)面的基礎(chǔ)樣式和頁(yè)頭樣式。（10）繼續(xù)在styles.css文件中設(shè)置頁(yè)面的其他樣式，如主題內(nèi)容區(qū)域樣式、文章樣式、底部樣式。制作“大學(xué)生身高體重標(biāo)準(zhǔn)表”網(wǎng)頁(yè)任務(wù)4.2任務(wù)描述在當(dāng)今社會(huì)，健康意識(shí)日益增強(qiáng)，大學(xué)生作為國(guó)家未來(lái)的棟梁之才，他們的身體健康狀況尤為重要。身高與體重是衡量人體發(fā)育水平和健康狀況的重要指標(biāo)?；诖?，教育部等相關(guān)部門發(fā)布了大學(xué)生身高與體重標(biāo)準(zhǔn)，旨在指導(dǎo)大學(xué)生樹立正確的健康觀念，合理安排膳食，養(yǎng)成良好的生活習(xí)慣。任務(wù)分析通過(guò)對(duì)本任務(wù)的學(xué)習(xí)，掌握id選擇器、標(biāo)簽選擇器、類選擇器及偽類選擇器的基本語(yǔ)法，并利用CSS中的表格屬性對(duì)表格樣式進(jìn)行修改，最后利用所學(xué)知識(shí)制作“大學(xué)生身高體重標(biāo)準(zhǔn)表”網(wǎng)頁(yè)。相關(guān)知識(shí)4.2.1id選擇器id選擇器是一種用于選擇特定標(biāo)簽的唯一性選擇器。與標(biāo)簽選擇器和類選擇器不同，id選擇器僅適用于一個(gè)具體的標(biāo)簽，不能同時(shí)應(yīng)用于多個(gè)標(biāo)簽。4.2.1標(biāo)簽選擇器和類選擇器在HTML文檔中，最基本的構(gòu)成單位是HTML標(biāo)簽。如果要對(duì)HTML文檔中的所有相同類型的標(biāo)簽應(yīng)用相同的CSS樣式，則可以使用標(biāo)簽選擇器。標(biāo)簽選擇器是一種基本的選擇器，它通過(guò)選擇HTML標(biāo)簽名來(lái)指定要應(yīng)用樣式的標(biāo)簽。通過(guò)使用標(biāo)簽選擇器，可以一次性對(duì)所有相同類型的標(biāo)簽應(yīng)用相同的樣式。1．標(biāo)簽選擇器2．類選擇器類選擇器用于描述一組標(biāo)簽的樣式，一個(gè)類選擇器可以在多個(gè)標(biāo)簽上使用。4.2.3偽類選擇器偽類選擇器用于向特定元素添加特殊的效果，例如為鏈接設(shè)置不同狀態(tài)的樣式，或者選擇特定的元素位置，如第1個(gè)或第n個(gè)元素。偽類選擇器依據(jù)是當(dāng)前元素所處的狀態(tài)或特性，而非其靜態(tài)標(biāo)識(shí)如id、class或?qū)傩?。由于元素狀態(tài)的動(dòng)態(tài)性，當(dāng)元素進(jìn)入某一特定狀態(tài)時(shí)，可能會(huì)獲得相應(yīng)的偽類樣式；而一旦狀態(tài)發(fā)生變化，該樣式便會(huì)隨之消失。偽類選擇器的功能和class有些類似，但由于它基于文檔之外的抽象，因此被稱為偽類。偽類的名稱不區(qū)分大小寫，但需要以冒號(hào)（:）開頭。另外，偽類需要與CSS中的選擇器結(jié)合使用4.2.4表格表格是由一行或多行組成的，而每行又是由一個(gè)或多個(gè)單元格組成的。在網(wǎng)頁(yè)中，通常使用表格來(lái)展示一些數(shù)據(jù)，如成績(jī)表、財(cái)務(wù)報(bào)表等。HTML5中的表格類似于Excel表格，一般由行、列和單元格組成在CSS中，通過(guò)table-layout屬性來(lái)設(shè)置表格布局時(shí)所用的布局算法1.表格布局2.設(shè)置表格邊框在CSS中，通過(guò)border-collapse屬性來(lái)設(shè)置是否合并表格中相鄰的邊框3.設(shè)置表格間距在CSS中，通過(guò)border-spacing屬性來(lái)設(shè)置相鄰單元格的邊框之間的距離4.設(shè)置表格標(biāo)題在CSS中，通過(guò)caption-side屬性來(lái)設(shè)置表格標(biāo)題的位置任務(wù)規(guī)劃通過(guò)HTML5創(chuàng)建一個(gè)帶有身高與體重?cái)?shù)據(jù)的標(biāo)準(zhǔn)表格，使用id選擇器對(duì)整個(gè)表格進(jìn)行樣式設(shè)置，然后使用標(biāo)簽選擇器對(duì)表格的單元格進(jìn)行統(tǒng)一樣式設(shè)置，并通過(guò)類選擇器分別設(shè)置男性、女性數(shù)據(jù)行的不同背景顏色，使網(wǎng)頁(yè)具有良好的可讀性。任務(wù)實(shí)施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項(xiàng)目文件夾，并命名為standard。（2）在VSCode中打開項(xiàng)目文件夾standard，在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“bmi.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊bmi.html文件，進(jìn)入代碼編輯窗口。在<title></title>標(biāo)簽對(duì)中設(shè)置網(wǎng)頁(yè)的標(biāo)題為“大學(xué)生身高體重標(biāo)準(zhǔn)表”，并引入外部樣式表文件。（4）在<body></body>標(biāo)簽對(duì)中添加<header></header>標(biāo)簽對(duì)，并在<header></header>標(biāo)簽對(duì)內(nèi)添加一級(jí)標(biāo)題“大學(xué)生身高體重標(biāo)準(zhǔn)表”（5）在<body></body>標(biāo)簽對(duì)中添加<main></main>標(biāo)簽對(duì)，并在<main></main>標(biāo)簽對(duì)中添加一組<table></table>標(biāo)簽，設(shè)置<table>標(biāo)簽的id屬性的值為“height-weight-table”（6）在步驟（5）中添加的<table></table>標(biāo)簽對(duì)中添加一組<caption></caption>標(biāo)簽對(duì)，并設(shè)置表格的標(biāo)題為“大學(xué)生身高體重參照表”；繼續(xù)添加一組<thead></thead>標(biāo)簽對(duì)，并在<thead></thead>標(biāo)簽對(duì)中添加一組<tr></tr>標(biāo)簽對(duì)，用來(lái)設(shè)置表頭。任務(wù)實(shí)施（7）在<table></table>標(biāo)簽對(duì)中添加一組<tbody></tbody>標(biāo)簽對(duì)，用來(lái)放置表格的核心內(nèi)容，在<tbody></tbody>標(biāo)簽對(duì)中添加兩行數(shù)據(jù)，每行數(shù)據(jù)使用類選擇器設(shè)置樣式。（8）在<body></body>標(biāo)簽對(duì)中添加一組<footer></footer>標(biāo)簽對(duì)，然后在添加的<footer></footer>標(biāo)簽對(duì)中添加相關(guān)內(nèi)容。（9）在VSCode中打開項(xiàng)目文件夾standard，并在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“css”，然后按Tab鍵或Enter鍵，在css文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“style.css”，然后按Tab鍵或Enter鍵。（10）單擊步驟（9）中新建的style.css文件，進(jìn)入代碼編輯窗口，使用id選擇器對(duì)表格的整體樣式進(jìn)行設(shè)置。（11）繼續(xù)在style.css文件中使用標(biāo)簽選擇器對(duì)表格的單元格樣式進(jìn)行設(shè)置，使用類選擇器對(duì)男性、女性數(shù)據(jù)行進(jìn)行特殊樣式設(shè)置。制作“名人故事”網(wǎng)頁(yè)任務(wù)4.3任務(wù)描述在信息化高速發(fā)展的今天，互聯(lián)網(wǎng)已經(jīng)成為人們獲取信息、學(xué)習(xí)知識(shí)的重要渠道。名人故事作為一種富有教育意義和激勵(lì)作用的內(nèi)容，能夠引導(dǎo)青少年和廣大網(wǎng)友積極向上、汲取正能量?！懊斯适隆本W(wǎng)頁(yè)不僅能有效地傳播有價(jià)值的人物故事，還能提升用戶在網(wǎng)站的停留時(shí)間和滿意度，從而達(dá)到教育、啟迪和傳播正能量的目的。任務(wù)分析通過(guò)對(duì)本任務(wù)的學(xué)習(xí)，掌握復(fù)合選擇器中各個(gè)選擇器的基本語(yǔ)法和屬性，掌握通配符選擇器的基本語(yǔ)法和用法，最后利用所學(xué)知識(shí)制作“名人故事”網(wǎng)頁(yè)。相關(guān)知識(shí)4.3.1復(fù)合選擇器在CSS中，可以根據(jù)選擇器的類型把選擇器分為基礎(chǔ)選擇器和復(fù)合選擇器。復(fù)合選擇器是建立在基礎(chǔ)選擇器之上，對(duì)基本選擇器進(jìn)行組合形成的。復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器通過(guò)不同的組合而形成的，包括后代選擇器、子選擇器、并集選擇器等。1.后代選擇器后代選擇器又被稱為“包含選擇器”，可以選擇父元素中的子元素。其寫法就是外層標(biāo)簽寫在前面，內(nèi)標(biāo)簽寫在后面，中間用空格分隔。2.子選擇器子選擇器僅能選取某個(gè)元素直接的下一級(jí)子元素3.并集選擇器并集選擇器是各類選擇器通過(guò)英文逗號(hào)（，）連接而成的，任何形式的選擇器都可以作為并集選擇器的一部分基本語(yǔ)法：元素1,元素2{屬性1:值1;屬性2:值2;…}，逗號(hào)代表并集，用于集體聲明樣式4.3.2通配符選擇器在CSS中，一個(gè)星號(hào)（*）就是一個(gè)通配選擇器。它可以匹配任意類型的HTML元素。在配合其他基本選擇器時(shí)，省略掉通配選擇器會(huì)有同樣的效果。任務(wù)規(guī)劃為了讓更多的人便捷地在線閱讀和學(xué)習(xí)名人故事，我們計(jì)劃通過(guò)HTML5技術(shù)制作一個(gè)專門展示名人故事的網(wǎng)頁(yè)。通過(guò)HTML5創(chuàng)建一個(gè)“名人故事”網(wǎng)頁(yè)，運(yùn)用CSS對(duì)網(wǎng)頁(yè)進(jìn)行視覺(jué)設(shè)計(jì)，包括但不限于字體、顏色、布局等，使用復(fù)合選擇器、通配符選擇器等對(duì)不同元素進(jìn)行精細(xì)樣式控制，使網(wǎng)頁(yè)看起來(lái)美觀、大方，并且符合閱讀習(xí)慣。任務(wù)實(shí)施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項(xiàng)目文件夾，并命名為story。（2）在VSCode中打開項(xiàng)目文件夾story，在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“mingrengushi.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊mingrengu

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論