資源簡(jiǎn)介

(共18張PPT)
信息科技
七年級(jí)上冊(cè)
浙江教育出版社（2023）
目錄
學(xué)習(xí)目標(biāo)
01
新知學(xué)習(xí)
02
課后小結(jié)
03
練習(xí)一下
04
第8課 網(wǎng)頁(yè)的數(shù)據(jù)呈現(xiàn)
學(xué)習(xí)目標(biāo)
01
通過體驗(yàn)CSS樣式設(shè)置的效果，認(rèn)識(shí)CSS樣式表，了解樣式表的作用；
通過網(wǎng)頁(yè)中添加樣式，掌握樣式表的基本結(jié)構(gòu)；
能理解使用CSS降低網(wǎng)頁(yè)代碼耦合度所帶來的便捷。
新知學(xué)習(xí)
02
你瀏覽過的網(wǎng)頁(yè)中，看到過哪些網(wǎng)頁(yè)效果
你知道網(wǎng)頁(yè)中的文字效果是如何實(shí)現(xiàn)的？
網(wǎng)站為了保證網(wǎng)頁(yè)風(fēng)格的整體性，在制作過程中往往要求文本、色彩等樣式要協(xié)調(diào)統(tǒng)一，可以對(duì)網(wǎng)頁(yè)數(shù)據(jù)各種呈現(xiàn)的效果進(jìn)行樣式的設(shè)置。
網(wǎng)頁(yè)的數(shù)據(jù)呈現(xiàn)
更聰明
更網(wǎng)絡(luò)化
一、網(wǎng)頁(yè)數(shù)據(jù)呈現(xiàn)的方式
更仿生
二、CSS樣式
三、樣式表的基本結(jié)構(gòu)
一、網(wǎng)頁(yè)數(shù)據(jù)呈現(xiàn)的方式
HTML定義了網(wǎng)頁(yè)的內(nèi)容結(jié)構(gòu)，即網(wǎng)頁(yè)呈現(xiàn)的文字、圖文、視頻等內(nèi)容，用HTML設(shè)計(jì)網(wǎng)頁(yè)外觀樣式時(shí)需要使用大量的標(biāo)記，代碼相對(duì)多而復(fù)雜，使用CSS可以有效地對(duì)網(wǎng)頁(yè)中數(shù)據(jù)的布局、字體和背景等效果實(shí)現(xiàn)更精確的控制，同時(shí)可以將網(wǎng)頁(yè)的結(jié)構(gòu)和格式分離，實(shí)現(xiàn)解耦。
比如對(duì)網(wǎng)站所有頁(yè)面的風(fēng)格可以應(yīng)用一個(gè)CSS，只要修改這個(gè)CSS文件就可以更新所有頁(yè)面的風(fēng)格樣式，既提高了更新和維護(hù)的效率，同時(shí)又縮減了網(wǎng)頁(yè)的代碼，提高了網(wǎng)頁(yè)的瀏覽速度。
二、 CSS樣式
CSS全稱為層疊樣式表(Cascading Style Sheets)，也是一種標(biāo)識(shí)語(yǔ)言，CSS樣式可以方便地設(shè)置網(wǎng)頁(yè)效果。如網(wǎng)頁(yè)中文字的字號(hào)、字體、顏色、位置以及圖片的大小等，都涉及網(wǎng)頁(yè)顯示信息的樣式。如圖8-1和圖8-2所示，是添加了樣式表的網(wǎng)頁(yè)效果的前后對(duì)比圖。
圖8-2所示的網(wǎng)頁(yè)是在標(biāo)簽之 以下CSS字體、顏色等樣式的代碼。

修改樣式表里的屬性和屬性參數(shù)，觀察網(wǎng)頁(yè)外觀變化，嘗試其他樣式的設(shè)置。
三、樣式表的基本結(jié)構(gòu)

級(jí)聯(lián)樣式表
級(jí)聯(lián)樣式表（CascadingStyle Sheel，簡(jiǎn)稱CSS）是由國(guó)際組織制定的一套延伸HTML樣式的新標(biāo)準(zhǔn)，用來控制網(wǎng)頁(yè)內(nèi)容的外觀格式，包括版面的精確位置、特定字體和格式，___________甚至圖像、表格和圖層等的位置和格式，稱為“級(jí)聯(lián)”的主要原因是支持應(yīng)用多個(gè)樣式表到同一張網(wǎng)頁(yè)中。
課后小結(jié)
03
小結(jié)
練習(xí)一下
04
1.用CSS樣式表美化網(wǎng)頁(yè).
2.嘗試使用圖像標(biāo)簽，在網(wǎng)頁(yè)里加入一張平鋪模式的背景圖。
感謝聆聽！
Thank you for listening

展開更多......

收起↑