1、第六章,層疊樣式表,回顧 2-1, 我的表格 1 2 3 4 5 ,代碼閱讀,回顧 2-2,要求密碼文本框不超過10個(gè)字符，請(qǐng)補(bǔ)全HTML代碼。 密碼 下面有關(guān)單選按鈕的HTML代碼正確嗎？女 按鈕分為哪三類，類型(type)分別是？ 下拉列表框中顯示的超級(jí)女生是？ 最佳超級(jí)女生是 1號(hào) 2號(hào) 3號(hào) ,目標(biāo),掌握樣式表的語法規(guī)則 樣式表的分類： 行內(nèi)樣式表 內(nèi)嵌樣式表 外部樣式表 掌握常用的樣式 了解層和標(biāo)簽,DHTML 簡(jiǎn)介,DHTML,=,HTML,腳本語言 JavaScript,+,+,層疊樣式表 CSS,指定一個(gè)網(wǎng)頁的元素,決定元素的大小 顏色和位置,操縱網(wǎng)頁的元素,DHTML 是制作

2、動(dòng)態(tài) HTML 頁面的技術(shù)！,DHTML 的功能,設(shè)計(jì)人員可以隨著與用戶的交互操作而改變文本的顏色、字體和大小,設(shè)計(jì)人員可以隨用戶的輸入或事件（如單擊鼠標(biāo)）而更改頁面的內(nèi)容,設(shè)計(jì)人員可以用 x 座標(biāo)和 y 座標(biāo)來指定網(wǎng)頁元素的確切位置（絕對(duì)位置或相對(duì)位置）,設(shè)計(jì)人員可以將網(wǎng)頁中的表格綁定到數(shù)據(jù)庫,設(shè)計(jì)人員可以將選擇的字體和網(wǎng)頁一起封裝,Web 程序員可以編寫腳本以更改網(wǎng)頁的樣式和內(nèi)容,在 DHTML 中，每個(gè)元素都被視為一個(gè)對(duì)象?？梢元?dú)立地對(duì)每個(gè)對(duì)象進(jìn)行訪問和編程,動(dòng)態(tài)樣式,動(dòng)態(tài)內(nèi)容,定位,數(shù)據(jù)綁定,可下載字體,腳本,對(duì)象結(jié)構(gòu),DHTML 示例,閃爍文本,移動(dòng)文本,消隱文本, 設(shè)置屬性 這個(gè)段

3、落應(yīng)用了樣式 這個(gè)段落按默認(rèn)樣式顯示 ,什么是樣式？,指定顯示樣式,常用的樣式屬性,根據(jù)樣式代碼的位置，分為三類： 行內(nèi)樣式 內(nèi)嵌樣式 外部樣式,樣式的分類,在最后一個(gè)聲明后面加上一個(gè)分號(hào) (;) 是一個(gè)好習(xí)慣,行內(nèi)樣式,您如果希望某段文字和其他段落的文字顯示風(fēng)格不一樣，那么請(qǐng)采用“行內(nèi)樣式”。行內(nèi)樣式使用元素標(biāo)簽的 STYLE 屬性定義。,/*關(guān)鍵代碼-*/ 剩余時(shí)間：成交結(jié)束 新舊程度：全新 所 在 地：北京 寶貝數(shù)量：5 件 瀏 覽 量：220 次 另送價(jià)值50元的充電器套裝！(一個(gè)充電器，兩節(jié)充電電池)可使用半年以 , 應(yīng)用樣式 P font-size:20px; color:blue

4、; text-align:center 我是段落 1 我是段落 2 我是段落 3 我們的樣式絕對(duì)統(tǒng)一 ,內(nèi)嵌樣式-1,所有的段落都采用 P 樣式，保證樣式統(tǒng)一,行內(nèi)樣式表局限于某個(gè)標(biāo)簽，如果希望本網(wǎng)頁內(nèi)的所以同類標(biāo)簽都采用統(tǒng)一樣式，這時(shí)應(yīng)采用內(nèi)嵌樣式。,用分號(hào)隔開,內(nèi)嵌樣式-2 選擇器,根據(jù)選擇器的不同，內(nèi)嵌樣式又分為： HTML 選擇器 CLASS 類選擇器 ID 選擇器,/*-關(guān)鍵代碼-*/ P /*設(shè)置樣式：字體和背景色*/ font-family: System; font-size: 18px; color: #3333CC; H2 background-color: #CCFF33

5、; text-align: center; 品種特征方面： 1、蛋魚：蛋魚.。 2、龍睛：龍睛.。 3、高頭：高頭.。,內(nèi)嵌樣式-3 HTML選擇器,應(yīng)用H2樣式,應(yīng)用P樣式,內(nèi)嵌樣式-4 class類選擇器, .myinput border: 1px solid; border-color:#D4BFFF; color:#2A00FF 用戶名 密 碼 ,CLASS類選擇器,應(yīng)用類選擇器： class”類名“,類選擇器的定義格式為： .類名 樣式規(guī)則; , #fire color:red; font-size: 24px; 我是二級(jí)標(biāo)題，火是這樣的 我是段落，火是這樣的 ,內(nèi)嵌樣式-5 ID選

6、擇器,ID選擇器,ID選擇器的定義格式為： ID名 樣式規(guī)則; ,應(yīng)用ID選擇器：ID”ID名“, A /*設(shè)置超鏈接不帶下劃線*/ color: blue; text-decoration: none; /*文本修飾：無*/ A:hover /*鼠標(biāo)在超鏈接上方停留時(shí)，帶下劃線 */ color: red; text-decoration:underline; /*文本修飾：下劃線*/ HEAD 俺是超鏈接，移過來我就顯示下劃線 ,內(nèi)嵌樣式-6 特殊的選擇器,HTML選擇器,特殊的偽類：A代表超鏈接，hover代表鼠標(biāo)懸停,外部樣式,根據(jù)樣式文件與網(wǎng)頁的關(guān)聯(lián)方式又分為： 鏈接（LINK ）外

7、部樣式表 導(dǎo)入（import）外部樣式表,樣式文件 P . ,網(wǎng)頁2,網(wǎng)頁3,網(wǎng)頁1,鏈接外部樣式表,使用LINK（鏈接）標(biāo)簽 ，語法： ,第一步：創(chuàng)建樣式表文件newstyle.css,第二步：把樣式文件和網(wǎng)頁關(guān)聯(lián),樣式文件： newstyle.css P . ,Onel.htm,another.htm,第三步：瀏覽查看各網(wǎng)頁,演示：鏈接樣式表示例,導(dǎo)入外部樣式表,使用import導(dǎo)入 ，語法： import 樣式表文件.css; ,操作步驟同鏈接樣式表,外部樣式文件,樣式的混合使用,行內(nèi)樣式表、內(nèi)嵌樣式表、外部樣式表各有優(yōu)勢(shì)，實(shí)際的開發(fā)中常常 需要混合使用： 有關(guān)整個(gè)網(wǎng)站統(tǒng)一風(fēng)格的樣式代碼

8、，放置在獨(dú)立的樣式文件*.css 某些樣式不同的頁面，除了鏈接外部樣式文件，還需定義內(nèi)嵌樣式 某張網(wǎng)頁內(nèi)，部分內(nèi)容”與眾不同“，采用行內(nèi)樣式,對(duì)于某個(gè)HTML標(biāo)簽： 1）如果有多種樣式，如果規(guī)定的樣式?jīng)]有沖突，則疊加； 2）如果有沖突，則最先考慮行內(nèi)樣式表顯示，如果沒有，再考慮內(nèi)嵌樣式顯示，如果還沒有，最后采用外面樣式表顯示，否則就按HTML的默認(rèn)樣式顯示；,內(nèi)嵌樣式,行內(nèi)樣式,某個(gè)HTML標(biāo)簽, 層標(biāo)簽,關(guān)鍵代碼 Z-index=1，我是第一層，我是容器，包含圖片段落 Z-index=2，我是第二層，包含圖片和段落 ,使用 Z index指定是哪一層,是塊級(jí)容器標(biāo)簽，可以包含圖片、標(biāo)題、段落、文字等,圖片,段落,top,left, 標(biāo)簽, 所有韓款童裝10元/件起拍嘍 ,是行級(jí)容器標(biāo)簽，不可以包含圖片、標(biāo)題、段落等，只能包含文字內(nèi)容,CSS 的優(yōu)點(diǎn),改變?yōu)g覽器的默認(rèn)顯示風(fēng)格 頁面內(nèi)容和顯示樣式分離 可以重用樣式表 方便網(wǎng)站維護(hù),總結(jié),DHTML 是網(wǎng)頁中 HTML、樣式表和腳