圖像、CSS樣式定義與應(yīng)用、浮動(dòng)窗體

1、圖像、圖像、CSSCSS樣式定義與樣式定義與應(yīng)用、應(yīng)用、浮動(dòng)窗體浮動(dòng)窗體回顧回顧n設(shè)置標(biāo)題用哪個(gè)標(biāo)簽？設(shè)置標(biāo)題用哪個(gè)標(biāo)簽？n段落的設(shè)置用哪個(gè)標(biāo)簽段落的設(shè)置用哪個(gè)標(biāo)簽? ?n文本字體的設(shè)置用那個(gè)標(biāo)簽文本字體的設(shè)置用那個(gè)標(biāo)簽? ?列舉出列舉出2 2個(gè)屬個(gè)屬性性n滾動(dòng)字符有那個(gè)標(biāo)簽來(lái)控制？默認(rèn)的滾動(dòng)滾動(dòng)字符有那個(gè)標(biāo)簽來(lái)控制？默認(rèn)的滾動(dòng)方向是怎么樣的？方向是怎么樣的？n清單的分類(lèi)清單的分類(lèi)預(yù)習(xí)檢查預(yù)習(xí)檢查控制圖片顯示的標(biāo)簽是什么？控制圖片顯示的標(biāo)簽是什么？CSS樣式表的引入有幾種方式？樣式表的引入有幾種方式？本講目標(biāo)本講目標(biāo)n理解在頁(yè)面中如何插入圖像理解在頁(yè)面中如何插入圖像n掌握掌握CSSCSS樣式定

2、義及應(yīng)用樣式定義及應(yīng)用n掌握掌握HTMLHTML頁(yè)面的浮動(dòng)窗體頁(yè)面的浮動(dòng)窗體在網(wǎng)頁(yè)中插入圖像在網(wǎng)頁(yè)中插入圖像 HTML采用的圖像格式有采用的圖像格式有g(shù)if、jpg、png 3種種 在網(wǎng)頁(yè)中插入圖像時(shí)，必須使用在網(wǎng)頁(yè)中插入圖像時(shí)，必須使用HTML的的標(biāo)記標(biāo)記 這個(gè)圖形文件可以是本地機(jī)上的圖形，也可以是位于遠(yuǎn)程主機(jī)上的圖形 2設(shè)置圖像布局設(shè)置圖像布局 q“width=# 、height=# ”屬性。此屬性用來(lái)設(shè)定圖屬性。此屬性用來(lái)設(shè)定圖片大小，此寬度及高度一般采用像素作單位片大小，此寬度及高度一般采用像素作單位 通常只設(shè)為圖片的真實(shí)大小，以免失真，若需要改圖片大小最好使用圖像編輯工具 圖片邊框厚

3、度圖片邊框厚度“border=# ” 屬性用來(lái)設(shè)定圖片邊框?qū)傩杂脕?lái)設(shè)定圖片邊框厚度厚度 align=# 屬性屬性此屬性用來(lái)調(diào)整圖片旁邊文字的位置，你可以控此屬性用來(lái)調(diào)整圖片旁邊文字的位置，你可以控制文字出現(xiàn)在圖片的偏上方、中間、底部、制文字出現(xiàn)在圖片的偏上方、中間、底部、 左右左右等，可選值：等，可選值：top, middle, bottom, left, right，內(nèi)，內(nèi)定為定為bottom q qq定風(fēng)波定風(fēng)波-蘇軾蘇軾qq莫聽(tīng)穿林打葉聲，何妨吟嘯且徐行。竹杖芒鞋輕勝馬，誰(shuí)怕？一莫聽(tīng)穿林打葉聲，何妨吟嘯且徐行。竹杖芒鞋輕勝馬，誰(shuí)怕？一蓑煙雨任平生。料峭春風(fēng)吹酒醒，微冷，山頭斜照卻相迎?；?/p>

4、首蓑煙雨任平生。料峭春風(fēng)吹酒醒，微冷，山頭斜照卻相迎。回首向來(lái)蕭瑟處，歸去，也無(wú)風(fēng)雨也無(wú)晴。向來(lái)蕭瑟處，歸去，也無(wú)風(fēng)雨也無(wú)晴。qq alt=屬性屬性 此屬性是用以描述該圖形的文字，若用戶(hù)使用文字瀏此屬性是用以描述該圖形的文字，若用戶(hù)使用文字瀏覽器，由于不支持圖片，這些文字會(huì)代替圖片而被顯示。覽器，由于不支持圖片，這些文字會(huì)代替圖片而被顯示。若在支持圖片顯示的瀏覽器，當(dāng)鼠標(biāo)移至圖片上該些文字若在支持圖片顯示的瀏覽器，當(dāng)鼠標(biāo)移至圖片上該些文字亦會(huì)顯示亦會(huì)顯示 小結(jié)小結(jié)q在在HTML中插入圖片用什么標(biāo)簽？中插入圖片用什么標(biāo)簽？q圖片標(biāo)簽中的常用屬性有那些圖片標(biāo)簽中的常用屬性有那些?CSSqCSS就是

5、就是Cascading Style Sheets，中文翻譯，中文翻譯為為“層疊樣式表層疊樣式表”，簡(jiǎn)稱(chēng)樣式表，它是一，簡(jiǎn)稱(chēng)樣式表，它是一種制作網(wǎng)頁(yè)的新技術(shù)種制作網(wǎng)頁(yè)的新技術(shù)qCSS是一種用來(lái)裝飾是一種用來(lái)裝飾HTML的標(biāo)記集合，的標(biāo)記集合，是對(duì)是對(duì)HTML標(biāo)記的一種擴(kuò)展，可以進(jìn)一步標(biāo)記的一種擴(kuò)展，可以進(jìn)一步美化美化HTML頁(yè)面頁(yè)面 樣式表的作用樣式表的作用q覆蓋瀏覽器覆蓋瀏覽器q頁(yè)面布局頁(yè)面布局q可以重用可以重用q多個(gè)文檔可以鏈接到一個(gè)樣式表多個(gè)文檔可以鏈接到一個(gè)樣式表樣式表規(guī)則樣式表規(guī)則q樣式規(guī)則樣式規(guī)則q樣式表樣式表q規(guī)則規(guī)則RuleSelector property:value;prop

6、erty: value; . 規(guī)則選擇器規(guī)則選擇器聲明聲明屬性屬性屬性值屬性值樣式表中的選擇器樣式表中的選擇器q簡(jiǎn)單選擇器簡(jiǎn)單選擇器(僅描述元素，而不考慮該元素僅描述元素，而不考慮該元素在文檔結(jié)構(gòu)中的位置在文檔結(jié)構(gòu)中的位置)qHTML選擇器選擇器-選擇器是選擇器是HTML標(biāo)記的名稱(chēng)標(biāo)記的名稱(chēng)q類(lèi)選擇器類(lèi)選擇器使用使用HTML元素的元素的CLASS屬性屬性qID選擇器選擇器使用使用HTML元素的元素的ID屬性屬性q上下文選擇器上下文選擇器(引用元素的上下文引用元素的上下文)HTML選擇器示例選擇器示例Pfont-style:italic; font-weight:bold; color:lime

7、green 這些選擇器使用這些選擇器使用HTML元素的名稱(chēng)唯一的區(qū)別是刪除了尖括元素的名稱(chēng)唯一的區(qū)別是刪除了尖括號(hào)。號(hào)。HTML選擇器示例選擇器示例類(lèi)選擇器示例類(lèi)選擇器示例.water color:blue .danger color:red 測(cè)試水測(cè)試水測(cè)試危險(xiǎn)測(cè)試危險(xiǎn)無(wú)樣式無(wú)樣式斜體斜體類(lèi)選擇器示例類(lèi)選擇器示例ID選擇器示例選擇器示例ID選擇器選擇器#control color:red這是火焰的顏色這是火焰的顏色本段沒(méi)有應(yīng)用樣式本段沒(méi)有應(yīng)用樣式ID選擇器示例選擇器示例上下文選擇器示例上下文選擇器示例上下文選擇器上下文選擇器 BODY color:blue;background:lavend

8、er;font-family:Arial; UL color:red 芒果芒果桔子桔子蘋(píng)果蘋(píng)果芒果芒果桔子桔子蘋(píng)果蘋(píng)果 上下文選擇器示例上下文選擇器示例在在HTML中引用樣式表中引用樣式表qStyle元素元素qStyle屬性屬性qLink元素元素使用使用Style元素元素qSTYLE元素應(yīng)插入文檔的元素應(yīng)插入文檔的元素部元素部分中，所有規(guī)則都放置在開(kāi)始標(biāo)記和結(jié)束分中，所有規(guī)則都放置在開(kāi)始標(biāo)記和結(jié)束標(biāo)記之間。顯示頁(yè)面時(shí)，只有嵌入了標(biāo)記之間。顯示頁(yè)面時(shí)，只有嵌入了STYLE元素的文檔會(huì)受到影響元素的文檔會(huì)受到影響 H1 color:maroon; P color:hotpink; font-fam

9、ily:Arial; import sheet1.css 導(dǎo)入外部樣式表導(dǎo)入外部樣式表使用使用Style屬性?xún)?nèi)嵌樣式表屬性?xún)?nèi)嵌樣式表q style屬性用于將樣式表應(yīng)用于單個(gè)元素。直接將在屬性用于將樣式表應(yīng)用于單個(gè)元素。直接將在HTML標(biāo)記里加入標(biāo)記里加入style參數(shù)，而參數(shù)，而style參數(shù)的內(nèi)容就是參數(shù)的內(nèi)容就是CSS的屬性的屬性和值。樣式表可以只有一條規(guī)則。使用和值。樣式表可以只有一條規(guī)則。使用Style屬性，可以繞屬性，可以繞過(guò)過(guò)Style元素，而將聲明直接放入單個(gè)的開(kāi)始標(biāo)記中。元素，而將聲明直接放入單個(gè)的開(kāi)始標(biāo)記中。 設(shè)置屬性設(shè)置屬性本段應(yīng)用了內(nèi)嵌樣式本段應(yīng)用了內(nèi)嵌樣式本段以默認(rèn)樣式

10、顯示。本段以默認(rèn)樣式顯示。您能發(fā)現(xiàn)本行中的您能發(fā)現(xiàn)本行中的不同之處不同之處嗎？嗎？使用使用Link元素鏈入外部樣式表元素鏈入外部樣式表鏈入外部樣式表是把樣式表保存為一個(gè)樣式表鏈入外部樣式表是把樣式表保存為一個(gè)樣式表文件，然后在頁(yè)面中用文件，然后在頁(yè)面中用標(biāo)記鏈接到這個(gè)標(biāo)記鏈接到這個(gè)樣式表文件，這個(gè)樣式表文件，這個(gè)標(biāo)記必須放到頁(yè)面的標(biāo)記必須放到頁(yè)面的區(qū)內(nèi)區(qū)內(nèi) 設(shè)置屬性設(shè)置屬性。樣式表屬性樣式表屬性 2-1類(lèi)型類(lèi)型CSS屬性屬性值值字體字體屬性屬性font-familyArial，serif，宋體宋體font-sizeSmall，medium，large或直接指定字體大小或直接指定字體大小font

11、-stylenormal, italicfont-weightnormal, bold, lighter, 100, 200文本文本屬性屬性text-alignleft, right, center, justifytext-indent度量或度量或%text-decoration none, blink, underline, overline, line-throughtext-transformnone, capitalize, uppercase, lowercasevertical-alignBaseline, super, sub, top, text-top, middle-bo

12、ttom, text-bottomword-spacing度量度量letter-spacing度量度量樣式表屬性樣式表屬性 2-2類(lèi)型類(lèi)型CSS屬性屬性值值框框?qū)賹傩孕詁orderNone, solid, double, ridge, inset, outset, groove, dotted dashedborder-style同上同上border-width度量，度量，thick，medium，thinborder-color#RRGGBB，顏色名稱(chēng)，顏色名稱(chēng)margin-top度量或度量或%Margin-left度量或度量或%定位定位屬性屬性top度量度量width度量或度量或%heig

13、ht度量或度量或%left度量度量顏色顏色屬性屬性color#RRGGBB，顏色名稱(chēng)，顏色名稱(chēng)background-color#RRGGBB，顏色名稱(chēng)，顏色名稱(chēng)，transparentbackground-image urlbackground-repeat repeat, repeat-x, repeat-y, no-repeat小結(jié)小結(jié)qCSS樣式表有什么用途？樣式表有什么用途？q頁(yè)面引入樣式表有幾種方式頁(yè)面引入樣式表有幾種方式?浮動(dòng)窗口浮動(dòng)窗口 q Iframe標(biāo)記，又叫浮動(dòng)幀標(biāo)記，你可以用它將一個(gè)標(biāo)記，又叫浮動(dòng)幀標(biāo)記，你可以用它將一個(gè)HTML文檔嵌入在一個(gè)文檔嵌入在一個(gè)HTML中顯示中

14、顯示 如同如同“畫(huà)中畫(huà)畫(huà)中畫(huà)“電視電視 Iframe標(biāo)記的使用標(biāo)記的使用 文件的路徑，既可是HTML文件，也可以是文本、ASP、JSP等 畫(huà)中畫(huà)區(qū)域的寬與高 是否出現(xiàn)滾動(dòng)條區(qū)域邊框的寬度 另外，在中還可以添加name=#屬性，屬性后面的文字將出現(xiàn)在不支持FRAMES的瀏覽器中 浮動(dòng)窗口實(shí)例浮動(dòng)窗口實(shí)例q我們先創(chuàng)建一個(gè)文件名叫我們先創(chuàng)建一個(gè)文件名叫iframe.html文件，文件，其代碼如下：其代碼如下： 登鸛雀樓登鸛雀樓白日依山盡，黃河入海流。欲窮千里目，更上一層樓。效果如圖所示 主頁(yè)面代碼主頁(yè)面代碼浮動(dòng)窗口 效果如圖所示 設(shè)置浮動(dòng)窗口區(qū)域的寬與高設(shè)置浮動(dòng)窗口區(qū)域的寬與高浮動(dòng)窗口 效果如圖所示 設(shè)置浮動(dòng)窗口區(qū)域邊框設(shè)置浮動(dòng)窗口區(qū)域邊框浮動(dòng)窗口 效果如圖 小結(jié)小結(jié)