資源簡介

(共22張PPT)
9
CSS基礎知識
CSS與HTML的關系
CSS式表( Style sheets)技術誕生于1996年,全稱是層疊樣式表( Cascading Style Sheets)。樣式就是格式,對網頁來說,例如文字的大小、顏色及圖片的位置等,都是網頁顯示信息的樣式。層疊是當在HTML文件中引用多個定義樣式文件(CSS文件)時,若多個樣式文件間所定義的樣式發生沖突,則將依據層次處理
樣式表是HTML的“表兄弟”。由于最初的HTML標準還不盡人意,用HML制作網頁就像是用畫筆繪制一幅圖畫,只有那些對網頁制作癡迷且執著的人才可能精確地實現預定的結果。正是在這種情況下,樣式表技術誕生了。樣式表的目的是為了對布局、字體、背景和其他圖文效果實現更加精確的控制
樣式表的宗旨就是將結構和格式分離。樣式表將定義結構和定義格式的兩個部分相互分離,從而使網頁設計人員能夠對網頁的布局施加更多的控制。HTML仍可以保持簡單明了的初衷,而樣式表代碼獨立出來后,則從另一個角度控制網頁外觀。
利用樣式表,可以將站點上所有的網頁都指向某個CSS文件,用戶只需要修改CSS文件中的某一行,那么整個站點都會隨之發生改變。這樣,通過樣式表就可以將許多網頁的風
格格式同時更新,不用再一頁一頁地更新了。
CSS+DIV
基本語法
CSS語法由選擇符,屬性和屬性取值構成,分為內嵌樣式表、內部樣式表和外部樣式表三種。
格式:選擇符{屬性:值}
說明:屬性和取值由大括號括起來,屬性與取值之間用冒號分隔;當屬性取值由多個單詞構成時,要用引號將屬性的取值括起來;對一個選擇符指定多個屬性時,不同屬性之間用分號分隔,可采用分行方式書寫
選擇符組
把相同屬性和值的多個選擇符寫在一起,相互之間用逗號進行分隔,以便減少對樣式的重復定義
類選擇符
對相同標記進行分類定義為不同樣式,在標記和自定義類名之間加上英文句點符號。使用時在HTML文件中通過標記的 CLASS屬性指定不同類即可。這種方式的定義還可以在自定義類名前省略HTM標記,以便將一種樣式應用到不同的標記中。
A
B
D
C
04
鏈接到外部樣式表
格式:< link rel=
Stylesheet "type="text/ css" href="外部樣式表文件URL地址”>
標記必須放在標記內,外部樣式表的文件擴展名為css
03
導入外部樣式表
格式:@ import”外部樣式表文件URL地址；
功能:在< style>標記中導入一個外部樣式
02
內部樣式表
格式:< style type="text/css">內部樣式表
功能:在當前HTML文件中定義并應用內部樣式表。< style>標記必須放在下
01
內嵌樣式（行內樣式）
直接在HTML內容部分的標記中通過 style屬性來定義樣式,可以直接對某個標記進行單獨定義容
CSS+DIV
A
B
格式:<標簽名稱 style="樣式屬性:屬性值;樣式屬性:屬性值…">
功能:可以直接在HTML代碼行中加入樣式規則。這種方法適用于指定網頁內的某一小段文字的顯示風格。不過,利用這種方法定義樣式時,其效果只可以控制該標簽
如何在網頁中加入CSS
01
在行內直接加入樣式
B
02
把樣式表嵌入到文件頭
語法:
如何在網頁中加入CSS
功能:在標簽中,用設置 style屬性的方法,一次只能控制一個標簽的樣式,實在顯示不出css對網頁設計有什么特別的效果。第二種方法是在文件頭嵌入樣式表規則的方法。瀏覽器在整個HTML網頁中都執行該規則。如果想對網頁一次性加入樣式表,就可采用該方法。
這種方法就是將所有的樣式表信息都列于HTML文件的頭部
B
02
把樣式表嵌入到文件頭
如何在網頁中加入CSS
03
鏈接到樣式表
語法:創建一個普通的網頁,但不使用< style>規則,而是在HTML文件頭部
使用標簽。

< title>…


如何在網頁中加入CSS
功能:想要達到集中管理網站網頁樣式的目的時,就必須將樣式定義在獨立的CSS文件中,并將該文件鏈接或輸入到要運用樣式的HTML文件上。這種方法就是將多個HTML文件鏈接到一個樣式表文件上。這個外部的樣式表將設定所有網頁的規則。如果改變樣式表文件中的某一個細節,所有網頁都會隨之改變。
說明:
①*.css為預先編寫好的樣式表文件。
②外部樣式表文件中不能含有任何如同或< style>這樣的HTML標簽。樣式表僅僅是由樣式表規則或聲明組成的。
③在href屬性中可以使用絕對URL或相對URL。
④在外部樣式表文件中,不必須使用注釋標簽。
⑤如同發布HTML文件那樣,將這個CSS文件發布到服務器中。在網頁被打開時,瀏覽器將按照鏈接標簽將含有鏈接外部樣式表文件的HTML網頁按照樣式表規則顯示。
C
04
輸入樣式表
語法:
如何在網頁中加入CSS
說明:
① Import語句后的“;”是必需的。
②要輸入的樣式表文件的擴展名為css
D
樣式的優先級
內聯樣式>內部樣式
內聯樣式>外部樣式
思考當同時有內部樣式和外部樣式時，哪個優先呢？
A
容器標簽：DIV
標題標簽：H1—H6
段落標簽：p
表格標簽：table,tr,td
水平線標簽：hr
預格式化標簽：pre
表單標簽：form
注：塊級元素獨占一行，
可設置寬度，高度，邊框，內填充和外邊距等所有盒子信息
塊元素與行內元素
01
塊級元素
B
02
行內元素
圖片標簽：img
超鏈接標簽：a
文本修飾標簽：b sub sup del i em strong u
換行標簽：br
容器元素：span lable
注：行內元素不能設置寬度和高度
行內元素可以設置邊框線樣式
行內元素可以設置填充樣式
行內元素可以設置左右方向的外邊距樣式
塊元素與行內元素
A
B
格式:< div id/ class="名稱">…