css的基本概念ppt課件-資料下載頁
2025-05-05 12:06本頁面
【正文】 ，方便了后期的維護(hù)，頁面本身也大大瘦身。但如果是一個(gè)網(wǎng)站，擁有很多的頁面，對于不同頁面上的相同標(biāo)記都希望采用同樣的風(fēng)格時(shí)，該方法顯得有些麻煩，維護(hù)成本也不低。因此僅使用于特殊的頁面設(shè)置單獨(dú)的樣式風(fēng)格。樣式表。 38 演示 ——用 STYLE 定義樣式 HTML HEAD TITLE在 STYLE標(biāo)記符中定義樣式信息 〈 /TITLE〉 style ! P{fontsize:24。textalign:center} H1{fontfamily:黑體； textalign:center} /STYLE /HEAD BODY H1 一代人 /H1 p 黑夜給了我黑色的眼睛 BR我卻用它尋找光明 /P /BODY 〈 /HTML〉 39 鏈接式樣式 ? 鏈接式 CSS樣式表將 HTML頁面本身與 CSS樣式分離為兩個(gè)或者多個(gè)文件，實(shí)現(xiàn)了頁面框架 HTML代碼與美工 CSS代碼的完全分離，使得前期制作和后期維護(hù)都十分方便，網(wǎng)站后臺的技術(shù)人員與美工設(shè)計(jì)者也可以很好的分工合作。 ? 而且對于同一個(gè) CSS文件可以鏈接到多個(gè) HTML文件中，甚至可以鏈接到整個(gè)網(wǎng)站的所有頁面中，使得網(wǎng)站整體風(fēng)格統(tǒng)一、協(xié)調(diào)，并且后期維護(hù)的工作量大大減少。 ? 格式：在 HTML文件的 head和 /head標(biāo)記之間加上 LINK rel=“stylesheet” type=“text/css” href=“” 40 演示 ——鏈接外部樣式表文件 ? 主要代碼： 網(wǎng)頁源文件 HTML HEAD TITLE鏈接外部樣式表文件 〈 /TITLE〉 LINK rel=stylesheet type=text/css herf= /HEAD BODY H1 一代人 /H1 p黑夜給了我黑色的眼睛 BR我卻用它尋找光明 /P /BODY 〈 /HTML〉 與網(wǎng)頁源文件同一目錄下的 文件 P{style=fontsize。24px。textalign:center“} H1{style=fontfamily。黑體 。textalign:center} 41 演示效果： 42 導(dǎo)入樣式 ? 導(dǎo)入樣式表與鏈接樣式表的功能基本相同，只是語法和運(yùn)作上略有不同。在 HTML文件中導(dǎo)入樣式表，常用如下幾種@import語句，可以選擇任意一種放在 style和 /style標(biāo)記之間。 @import url()。 @import url(―‖)。 @import url(?‘)。 @import 。 @import ―‖。 @import ?‘。 43 導(dǎo)入樣式 HTML HEAD TITLE 在 STYLE標(biāo)記符中定義樣式信息 /TITLE style ! @import url()。 /STYLE /HEAD BODY H1 一代人 /H1 p 黑夜給了我黑色的眼睛 BR我卻用它尋找光明 /P /BODY /HTML 樣式表 P{fontsize:24。textalign:center。} H1{fontfamily:黑體 。textalign:center。} 44 ? 如果將四種 CSS控制頁面的方法同時(shí)用到同一個(gè) HTML文件的同一個(gè)標(biāo)記上時(shí)，將會出現(xiàn)優(yōu)先級問題。樣式如果沖突，則采用高優(yōu)先級樣式；如果不沖突，則采用疊加的樣式效果。 ? 行內(nèi)樣式優(yōu)先級最高，其次是采用 link標(biāo)記的鏈接式，再次是位于 style和 /style之間的內(nèi)嵌式，最后才是上面提到的 @import導(dǎo)入式 45 舉例如下： html head title樣式優(yōu)先級問題 /title style type=text/css ! @import url()。 h3{ backgroundcolor:000000。 color:FF0000。 } /style link href= type=text/css rel=stylesheet /head body h3 style=textdecoration:underline。 color:666666CSS標(biāo)題測試 /h3 /body /html 文件 : h3{ paddingtop: 50px。 /* 頂端間隔 50px */ color: 0000 FF。 } 文件 h3{ color:00FF00。 fontstyle:italic。 fontsize:40px。 }
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1