
前面編寫了介紹科技節(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;}
這是一份初中信息技術(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,共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課件,共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)容,歡迎下載使用。
微信掃碼,快速注冊(cè)
注冊(cè)成功