前端設計與開發 課件 模塊4 CSS基礎_第1頁
前端設計與開發 課件 模塊4 CSS基礎_第2頁
前端設計與開發 課件 模塊4 CSS基礎_第3頁
前端設計與開發 課件 模塊4 CSS基礎_第4頁
前端設計與開發 課件 模塊4 CSS基礎_第5頁
已閱讀5頁，還剩40頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

溫馨提示

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

評論

0/150

提交評論