Web技術(shù)應(yīng)用基礎(chǔ)css

1、第5章 CSS1CSS5.1 CSS簡(jiǎn)介5.1.1 CSS作用 網(wǎng)頁展現(xiàn)的樣式從網(wǎng)頁中獨(dú)立出來集中管理 2CSS5.1.2樣式表的使用結(jié)構(gòu) 多個(gè)網(wǎng)頁文件共享樣式文件 多個(gè)樣式文件套用在一個(gè)網(wǎng)頁文件上 HTML文件1HTML文件NCSS樣式文件HTMLCSS樣式文件NCSS樣式文件13CSS5.2 定義樣式格式 選擇器 規(guī)則 選擇器(Selector) 規(guī)則(Rule) 例5.14 選擇符的應(yīng)用 /*定義樣式*/5顯示楷體綠色 顯示華文彩云紅色 顯示隸書藍(lán)色顯示楷體橄欖綠顯示仿宋體紫色6CSS5.3 應(yīng)用CSS樣式的4種方式 直接定義style屬性 在HTML文檔內(nèi)定義內(nèi)部樣式表 嵌入式樣式單

2、外部(鏈接)樣式單 75.4 樣式表應(yīng)用案例使用用CSS樣式的4種方式顯示界面 8CSS1.直接定義style屬性例5.2 直接定義HTML標(biāo)記中的style屬性 用四種方式將樣式表功能應(yīng)用到Web頁面中 例5.29CSS2.定義內(nèi)部樣式表 定義內(nèi)部樣式表 /*定義樣式*/用四種方式將樣式表功能應(yīng)用到Web頁面中 例5.310CSS3.嵌入外部樣式表 11CSS style1.css 保存文字的其它樣式 h1 text-align:center; font-style:italic; font-family:隸書; font-size:x-large; style2.css 保存文字的顏色 h

3、1 color:green;12CSS嵌入外部樣式表 /*定義樣式*/!- import url(style1.css); import url(style2.css);用四種方式將樣式表功能應(yīng)用到Web頁面中例5.413CSS4.鏈接外部樣式表鏈接外部樣式表 用四種方式將樣式表功能應(yīng)用到Web頁面中 例5.514練習(xí)115HTML/DHTML 頁面定位功能 精確地將網(wǎng)頁元素定位在頁面的某一個(gè)位置。定位元素： position三種設(shè)定方式：absolute/relative/static (絕對(duì)位置/相對(duì)位置/靜態(tài)位置)。 Absolute：對(duì)象絕對(duì)位置，原點(diǎn)窗口左上角 Relative：對(duì)象

4、與代碼中上一個(gè)對(duì)象相對(duì)位置 Static：靜態(tài)位置，默認(rèn)值，根據(jù)源代碼位置順序顯示。16HTML/DHTML left:元素的左邊距。 top:元素的頂邊距。 width：元素的寬度。 height：元素的高度。 z-index：定義頁面元素在Z軸上的位置， Z軸的定義從后到前。17CSS定位技術(shù)的應(yīng)用 spanfont-size:28pt;font-family:隸書 span.level2position:absolute;z-index:2;left:100; top:100;color:green span.level1position:absolute;z- index:1;left

5、:103; top:103;color:red span.level0position:absolute;z-index:0;left:106; top:106;color:yellow p.lev1position:absolute;z-index:2;left:50; top:50;font-size:20pt;color:blue p.lev2position:absolute;z-index:-2;left:52; top:52;font-size:20pt;color:darkred span div標(biāo)記例5.618Web技術(shù)應(yīng)用基礎(chǔ) Web技術(shù)應(yīng)用基礎(chǔ)Web技術(shù)應(yīng)用基礎(chǔ)歡迎學(xué)習(xí)歡迎學(xué)習(xí) ex5-7.html19 練習(xí)220實(shí)驗(yàn)報(bào)告1課程名稱：網(wǎng)站設(shè)計(jì)基礎(chǔ)實(shí)驗(yàn)題目：css技術(shù)的應(yīng)用實(shí)驗(yàn)?zāi)康模赫莆者\(yùn)用HTML制作頁面，并使用CSS技術(shù)對(duì)頁面進(jìn)行風(fēng)格和樣式的統(tǒng)一。實(shí)驗(yàn)環(huán)境：windows xp