前面編寫了介紹科技節(jié)某個(gè)項(xiàng)目的簡(jiǎn)單網(wǎng)頁(yè),這好似用HTML搭建好了“新房屋”的結(jié)構(gòu),接下來(lái)該怎樣將“新房屋”“裝修”得漂亮?xí)r尚?
一 用HTML代碼美化網(wǎng)頁(yè)
二 用CSS美化網(wǎng)頁(yè)
請(qǐng)打開(kāi)之前完成的科技節(jié)網(wǎng)頁(yè),使用HTML標(biāo)簽及屬性對(duì)網(wǎng)頁(yè)進(jìn)行美化,如設(shè)置字體、設(shè)置背景等,然后交流討論這種方式是否便捷,美化效果好不好。
一、用HTML代碼美化網(wǎng)頁(yè)
左表是常用的控制網(wǎng)頁(yè)顯示效果的代碼。
用HTML代碼進(jìn)行美化,美化效果往往很有限,但操作卻非常煩瑣。在實(shí)際應(yīng)用中,人們經(jīng)常用CSS來(lái)美化網(wǎng)頁(yè)。 CSS(cascading style sheets,串聯(lián)樣式表),生活中也經(jīng)常被稱為級(jí)聯(lián)樣式表或?qū)盈B樣式表。
如果將HTML代碼比作建造房屋的“建筑師”,那么CSS就是裝飾這間房屋的“裝潢設(shè)計(jì)師”。CSS可以描述網(wǎng)頁(yè)等文檔的外觀和格式,控制某類HTML標(biāo)簽內(nèi)容的顏色、字體、寬度、高度等。
寫CSS代碼時(shí),需要先指定網(wǎng)頁(yè)中的元素,然后對(duì)元素的顏色、字體等進(jìn)行描述。瀏覽時(shí),瀏覽器會(huì)按照CSS的描述顯示相應(yīng)的元素。
CSS的基本語(yǔ)法結(jié)構(gòu)(選擇器、聲明)
選擇器(需要改變樣式的HTML元素)
聲明(屬性和值被: 分開(kāi),以; 結(jié)束)
fnt-size: 14px;
clr : #606266;
1.用HTML代碼可以美化網(wǎng)頁(yè)。2. CSS可以讓網(wǎng)頁(yè)呈現(xiàn)出效果一致的美化風(fēng)格。3.使用CSS美化網(wǎng)頁(yè),效果更好。
bdy{ backgrund-clr: #191970;}h1{ text-align: center;}……
1.請(qǐng)參考右側(cè)代碼,嘗試用CSS對(duì)科技節(jié)網(wǎng)頁(yè)文本、標(biāo)題、背景等進(jìn)行美化。2.觀察修改后網(wǎng)頁(yè)顯示效果的變化。3.交流討論使用 CSS美化網(wǎng)頁(yè)的心得。
校園科技節(jié)bdy{ backgrund-clr:#87CEFA;}h2{ fnt-family:黑體; fnt-size:50px; clr:#DB7093;}h1{ fnt-family:黑體; fnt-size:40px; clr:#DB7093;}p{ fnt-family:隸書; fnt-size:24px; text-indent:2em;}

相關(guān)課件

初中信息技術(shù)人教版(2024)七年級(jí)全一冊(cè)第18課 美化網(wǎng)頁(yè)方法多一等獎(jiǎng)ppt課件:

這是一份初中信息技術(shù)人教版(2024)七年級(jí)全一冊(cè)第18課 美化網(wǎng)頁(yè)方法多一等獎(jiǎng)ppt課件,共15頁(yè)。PPT課件主要包含了學(xué)習(xí)目標(biāo),問(wèn)題情境,第18課學(xué)習(xí)內(nèi)容,聲明開(kāi)始大括號(hào),聲明結(jié)束大括號(hào),內(nèi)部樣式等內(nèi)容,歡迎下載使用。

初中第18課 美化網(wǎng)頁(yè)方法多精品課件ppt:

這是一份初中第18課 美化網(wǎng)頁(yè)方法多精品課件ppt,共15頁(yè)。PPT課件主要包含了學(xué)習(xí)目標(biāo),問(wèn)題情境,第18課學(xué)習(xí)內(nèi)容,聲明開(kāi)始大括號(hào),聲明結(jié)束大括號(hào),內(nèi)部樣式等內(nèi)容,歡迎下載使用。

義務(wù)教育版(2024)八年級(jí)全一冊(cè)第6課 數(shù)據(jù)傳輸方式多教學(xué)免費(fèi)ppt課件:

這是一份義務(wù)教育版(2024)八年級(jí)全一冊(cè)第6課 數(shù)據(jù)傳輸方式多教學(xué)免費(fèi)ppt課件,共23頁(yè)。PPT課件主要包含了學(xué)習(xí)目標(biāo),第6課學(xué)習(xí)目標(biāo),第6課課堂導(dǎo)入,問(wèn)題情境,學(xué)習(xí)內(nèi)容,第6課學(xué)習(xí)內(nèi)容,有線傳輸?shù)牧觿?shì),無(wú)線傳輸?shù)牧觿?shì),第6課課堂總結(jié),第6課拓展與提升等內(nèi)容,歡迎下載使用。

英語(yǔ)朗讀寶

相關(guān)課件 更多

七年級(jí)全一冊(cè)第25課 網(wǎng)絡(luò)創(chuàng)新云服務(wù)示范課課件ppt

七年級(jí)全一冊(cè)第25課 網(wǎng)絡(luò)創(chuàng)新云服務(wù)示范課課件ppt

初中信息技術(shù)義務(wù)教育版(2024)七年級(jí)全一冊(cè)第23課 在線生活創(chuàng)意多教學(xué)演示ppt課件

初中信息技術(shù)義務(wù)教育版(2024)七年級(jí)全一冊(cè)第23課 在線生活創(chuàng)意多教學(xué)演示ppt課件

初中信息技術(shù)義務(wù)教育版(2024)七年級(jí)全一冊(cè)第20課 組建網(wǎng)站跟我做示范課ppt課件

初中信息技術(shù)義務(wù)教育版(2024)七年級(jí)全一冊(cè)第20課 組建網(wǎng)站跟我做示范課ppt課件

義務(wù)教育版(2024)七年級(jí)全一冊(cè)第28課 數(shù)字版權(quán)要保護(hù)圖片課件ppt

義務(wù)教育版(2024)七年級(jí)全一冊(cè)第28課 數(shù)字版權(quán)要保護(hù)圖片課件ppt

資料下載及使用幫助
版權(quán)申訴
版權(quán)申訴
若您為此資料的原創(chuàng)作者,認(rèn)為該資料內(nèi)容侵犯了您的知識(shí)產(chǎn)權(quán),請(qǐng)掃碼添加我們的相關(guān)工作人員,我們盡可能的保護(hù)您的合法權(quán)益。
入駐教習(xí)網(wǎng),可獲得資源免費(fèi)推廣曝光,還可獲得多重現(xiàn)金獎(jiǎng)勵(lì),申請(qǐng) 精品資源制作, 工作室入駐。
版權(quán)申訴二維碼
初中信息技術(shù)義務(wù)教育版(2024)七年級(jí)全一冊(cè)電子課本

第18課 美化網(wǎng)頁(yè)方法多

版本: 義務(wù)教育版(2024)

年級(jí): 七年級(jí)全一冊(cè)

切換課文
所有DOC左下方推薦
歡迎來(lái)到教習(xí)網(wǎng)
  • 900萬(wàn)優(yōu)選資源,讓備課更輕松
  • 600萬(wàn)優(yōu)選試題,支持自由組卷
  • 高質(zhì)量可編輯,日均更新2000+
  • 百萬(wàn)教師選擇,專業(yè)更值得信賴
微信掃碼注冊(cè)
qrcode
二維碼已過(guò)期
刷新

微信掃碼,快速注冊(cè)

手機(jī)號(hào)注冊(cè)
手機(jī)號(hào)碼

手機(jī)號(hào)格式錯(cuò)誤

手機(jī)驗(yàn)證碼 獲取驗(yàn)證碼

手機(jī)驗(yàn)證碼已經(jīng)成功發(fā)送,5分鐘內(nèi)有效

設(shè)置密碼

6-20個(gè)字符,數(shù)字、字母或符號(hào)

注冊(cè)即視為同意教習(xí)網(wǎng)「注冊(cè)協(xié)議」「隱私條款」
QQ注冊(cè)
手機(jī)號(hào)注冊(cè)
微信注冊(cè)

注冊(cè)成功

返回
頂部