1、層疊樣式表,2,目標,掌握樣式表的語法規(guī)則 樣式表的分類： 行內樣式表 內嵌樣式表 外部樣式表 掌握常用的樣式 了解層和標簽,3,DHTML 簡介,DHTML,=,HTML,腳本語言 JavaScript,+,+,層疊樣式表 CSS,指定一個網頁的元素,決定元素的大小 顏色和位置,操縱網頁的元素,DHTML 是制作動態(tài) HTML 頁面的技術！,4,DHTML 的功能,設計人員可以隨著與用戶的交互操作而改變文本的顏色、字體和大小,設計人員可以隨用戶的輸入或事件（如單擊鼠標）而更改頁面的內容,設計人員可以用 x 座標和 y 座標來指定網頁元素的確切位置（絕對位置或相對位置）,設計人員可以將網頁中的

2、表格綁定到數據庫,設計人員可以將選擇的字體和網頁一起封裝,Web 程序員可以編寫腳本以更改網頁的樣式和內容,在 DHTML 中，每個元素都被視為一個對象?？梢元毩⒌貙γ總€對象進行訪問和編程,動態(tài)樣式,動態(tài)內容,定位,數據綁定,可下載字體,腳本,對象結構,5,DHTML 示例,閃爍文本,移動文本,消隱文本,6, 設置屬性 這個段落應用了樣式 這個段落按默認樣式顯示 ,什么是樣式？,指定顯示樣式,7,常用的樣式屬性,8,通過上一章的學習，了解了在網頁設計中引入CSS的意義。 引入CSS的核心目的就是實現網頁結構內容和表現形式的分離，將原來由HTML語言所承擔的一些與結構無關的功能剝離出來，改由CS

3、S來完成。,在具體介紹CSS之前，先思考一個生活中的問題。,9,10,CSS的作用就是設置網頁的各個組成部分的表現形式。 因此，如果把上面的表格換成描述網頁上一個標題的屬性表，可以設想應該大致如下：,2級標題 字體:宋體; 大小:15像素; 顏色:紅色; 裝飾:下劃線; ,11,再進一步，如果把上面的表格用英語寫出來： h2 font-family: 宋體; font-size:15px; color: red; text-decoration: underline; ,12,CSS的思想就是首先指定對什么“對象”進行設置，然后指定對該對象的哪個方面的“屬性”進行設置，最后給出該設置的“值”。

4、 因此，概括來說，CSS就是由3個基本部分“對象”、“屬性”和“值”組成的。,13,在CSS的3個組成部分中，“對象”是很重要的，它指定了對哪些網頁元素進行設置，因此，它有一個專門的名稱選擇器（selector）。, h1 color: red; font-size: 25px; ,14,選擇器 (selector) 通常是你希望定義的 HTML 元素或標簽,屬性 (property) 是你希望改變的屬性，并且每個屬性都有一個值,屬性和值被冒號分開，并由花括號包圍，這樣就組成了一個完整的樣式聲明,1. CSS 語法 CSS 語法由三部分構成：選擇器、屬性和值：,15,根據樣式代碼的位置，分為三

5、類： 行內樣式 內嵌樣式 外部樣式,樣式的分類,在最后一個聲明后面加上一個分號 (;) 是一個好習慣,16,行內樣式,您如果希望某段文字和其他段落的文字顯示風格不一樣，那么請采用“行內樣式”。行內樣式使用元素標簽的 STYLE 屬性定義。,/*關鍵代碼-*/ 剩余時間：成交結束 新舊程度：全新 所 在 地：北京 寶貝數量：5 件 瀏 覽 量：220 次 另送價值50元的充電器套裝！(一個充電器，兩節(jié)充電電池)可使用半年以 ,17, 應用樣式 P font-size:20px; color:blue; text-align:center; 我是段落 1 我是段落 2 我是段落 3 我們的樣式絕對

6、統一 ,內嵌樣式-1,所有的段落都采用 P 樣式，保證樣式統一,行內樣式表局限于某個標簽，如果希望本網頁內的所以同類標簽都采用統一樣式，這時應采用內嵌樣式。,用分號隔開,18,內嵌樣式-2 選擇器,根據選擇器的不同，內嵌樣式又分為： HTML 選擇器 CLASS 類選擇器 ID 選擇器,19,/*-關鍵代碼-*/ P /*設置樣式：字體和背景色*/ font-family: System; font-size: 18px; color: #3333CC; H2 background-color: #CCFF33; text-align: center; 品種特征方面： 1、蛋魚：蛋魚.。 2、

7、龍睛：龍睛.。 3、高頭：高頭.。,內嵌樣式-3 HTML選擇器,應用H2樣式,應用P樣式,20,內嵌樣式-4 class類選擇器, .myinput border: 1px solid; border-color:#D4BFFF; color:#2A00FF 用戶名 密 value= 提 交 ,CLASS類選擇器,應用類選擇器： class”類名“,類選擇器的定義格式為： .類名 樣式規(guī)則; ,21, #fire color:red; font-size: 24px; 我是二級標題，火是這樣的 我是段落，火是這樣的 ,內嵌樣式-5 ID選擇器,ID選擇器,ID選擇器的定義格式為： ID名 樣

8、式規(guī)則; ,應用ID選擇器：ID”ID名“,22, A /*設置超鏈接不帶下劃線*/ color: blue; text-decoration: none; /*文本修飾：無*/ A:hover /*鼠標在超鏈接上方停留時，帶下劃線 */ color: red; text-decoration:underline; /*文本修飾：下劃線*/ HEAD 俺是超鏈接，移過來我就顯示下劃線 ,內嵌樣式-6 特殊的選擇器,HTML選擇器,特殊的偽類：A代表超鏈接，hover代表鼠標懸停,23,外部樣式,根據樣式文件與網頁的關聯方式又分為： 鏈接（LINK ）外部樣式表 導入（import）外部樣式表,

9、樣式文件 P . ,網頁2,網頁3,網頁1,24,鏈接外部樣式表,使用LINK（鏈接）標簽 ，語法： ,第一步：創(chuàng)建樣式表文件newstyle.css,第二步：把樣式文件和網頁關聯,樣式文件： newstyle.css P . ,Onel.htm,another.htm,第三步：瀏覽查看各網頁,演示：鏈接樣式表示例,25,導入外部樣式表,使用import導入 ，語法： import 樣式表文件.css; ,操作步驟同鏈接樣式表,26,外部樣式文件,樣式的混合使用,行內樣式表、內嵌樣式表、外部樣式表各有優(yōu)勢，實際的開發(fā)中常常 需要混合使用： 有關整個網站統一風格的樣式代碼，放置在獨立的樣式文件*

10、.css 某些樣式不同的頁面，除了鏈接外部樣式文件，還需定義內嵌樣式 某張網頁內，部分內容”與眾不同“，采用行內樣式,對于某個HTML標簽： 1）如果有多種樣式，如果規(guī)定的樣式沒有沖突，則疊加； 2）如果有沖突，則最先考慮行內樣式表顯示，如果沒有，再考慮內嵌樣式顯示，如果還沒有，最后采用外面樣式表顯示，否則就按HTML的默認樣式顯示；,內嵌樣式,行內樣式,某個HTML標簽,27, 層標簽,關鍵代碼 Z-index=1，我是第一層，我是容器，包含圖片段落 Z-index=2，我是第二層，包含圖片和段落 ,使用 Z index指定是哪一層,是塊級容器標簽，可以包含圖片、標題、段落、文字等,圖片,段

11、落,top,left,28, 標簽, 所有韓款童裝10元/件起拍嘍 ,是行級容器標簽，不可以包含圖片、標題、段落等，只能包含文字內容,29,集體聲明 h1, h2, h3, h4, p /*集體聲明*/ color:#FF0000; /*文字顏色*/ font-size:50px; /*字體大小*/ .special, #one /*集體聲明*/ color:#000000; /*文字顏色*/ font-size:40px; /*字體大小*/ ,30,選擇器的嵌套 p b /*嵌套聲明*/ color:red; /*文字顏色*/ font-size:40px; /*字體大小*/ ,31,3. 父子關系 ,1.3.3 XHTML與HTML的重要區(qū)別,1在XHTML中標記名稱必須小寫 這是一個文字段落 ,2在XHTML中屬性名稱必須小寫,3在XHTML中標記必須嚴格嵌套,這行文字以粗體傾斜顯示,4在XHTML中標記必須封閉,例: ,36,CSS 的優(yōu)點,改變?yōu)g覽器的默認顯示風格 頁面內容和顯