css的基本概念ppt課件(參考版)
2025-05-08 12:06本頁(yè)面
【正文】 } 。 fontstyle:italic。 /* 頂端間隔 50px */ color: 0000 FF。 } /style link href= type=text/css rel=stylesheet /head body h3 style=textdecoration:underline。 h3{ backgroundcolor:000000。樣式如果沖突，則采用高優(yōu)先級(jí)樣式；如果不沖突，則采用疊加的樣式效果。textalign:center。textalign:center。 43 導(dǎo)入樣式 HTML HEAD TITLE 在 STYLE標(biāo)記符中定義樣式信息 /TITLE style ! import url()。 import ―‖。 import url(?‘)。 import url()。textalign:center} 41 演示效果： 42 導(dǎo)入樣式 ? 導(dǎo)入樣式表與鏈接樣式表的功能基本相同，只是語法和運(yùn)作上略有不同。textalign:center“} H1{style=fontfamily。 ? 格式：在 HTML文件的 head和 /head標(biāo)記之間加上 LINK rel=“stylesheet” type=“text/css” href=“” 40 演示 ——鏈接外部樣式表文件 ? 主要代碼： 網(wǎng)頁(yè)源文件 HTML HEAD TITLE鏈接外部樣式表文件 〈 /TITLE〉 LINK rel=stylesheet type=text/css herf= /HEAD BODY H1 一代人 /H1 p黑夜給了我黑色的眼睛 BR我卻用它尋找光明 /P /BODY 〈 /HTML〉 與網(wǎng)頁(yè)源文件同一目錄下的 文件 P{style=fontsize。textalign:center} H1{fontfamily:黑體； textalign:center} /STYLE /HEAD BODY H1 一代人 /H1 p 黑夜給了我黑色的眼睛 BR我卻用它尋找光明 /P /BODY 〈 /HTML〉 39 鏈接式樣式 ? 鏈接式 CSS樣式表將 HTML頁(yè)面本身與 CSS樣式分離為兩個(gè)或者多個(gè)文件，實(shí)現(xiàn)了頁(yè)面框架 HTML代碼與美工 CSS代碼的完全分離，使得前期制作和后期維護(hù)都十分方便，網(wǎng)站后臺(tái)的技術(shù)人員與美工設(shè)計(jì)者也可以很好的分工合作。樣式表。但如果是一個(gè)網(wǎng)站，擁有很多的頁(yè)面，對(duì)于不同頁(yè)面上的相同標(biāo)記都希望采用同樣的風(fēng)格時(shí)，該方法顯得有些麻煩，維護(hù)成本也不低。 37 內(nèi)嵌式樣式 ? 內(nèi)嵌式樣式表就是將 CSS寫在 head與/head之間，并且用 style和 /style標(biāo)記進(jìn)行聲明。 fontweight:bold。正文內(nèi)容 2/p p style=color:FF00FF。 正文內(nèi)容 1/p p style=color:000000。 fontsize:20px。 /* 下劃線 */ } /style /head 34 body ul li class=li1關(guān)系 1 ul li頁(yè)面父子關(guān)系復(fù)雜時(shí) /li li頁(yè)面父子關(guān)系復(fù)雜時(shí) /li li這里省略 20個(gè)嵌套 .../li /ul ol li頁(yè)面父子關(guān)系復(fù)雜時(shí) /li li頁(yè)面父子關(guān)系復(fù)雜時(shí) /li li這里省略 20個(gè)嵌套 .../li /ol /li li class=li2關(guān)系 2 ul li頁(yè)面父子關(guān)系復(fù)雜時(shí) /li li頁(yè)面父子關(guān)系復(fù)雜時(shí) /li li這里省略 20個(gè)嵌套 .../li /ul ol li頁(yè)面父子關(guān)系復(fù)雜時(shí) /li li頁(yè)面父子關(guān)系復(fù)雜時(shí) /li li這里省略 20個(gè)嵌套 .../li /ol /li /ul /body /html 35 CSS控制頁(yè)面 一般說來，可以通過四種不同的方法將樣式表添加到頁(yè)面中。 } .li1 ol li{ /* 利用 CSS繼承關(guān)系 */ fontweight:bold。 ? 父標(biāo)記和子標(biāo)記的概念 ? 包含在外面的標(biāo)記為父標(biāo)記 ? 被包含在里面的標(biāo)記為子標(biāo)記 33 html head title父子關(guān)系 /title style ! .li1{ color:r
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1