CSS基本選擇器..

1、 項(xiàng)目描述：項(xiàng)目描述： 為了展示自己的才藝，記錄自己的心事，分享自己的興趣愛好，某同學(xué)決定制作一個個人網(wǎng)站。項(xiàng)目目標(biāo)：項(xiàng)目目標(biāo)：能夠使用（X）HTML搭建網(wǎng)頁的結(jié)構(gòu)；學(xué)會在HTML中引入CSS；能夠?qū)ξ淖趾蛨D片進(jìn)行簡單的修飾。 項(xiàng)目任務(wù)：項(xiàng)目任務(wù)：任務(wù)1編寫網(wǎng)站首頁結(jié)構(gòu)任務(wù)任務(wù)2 2超鏈接到其它頁面超鏈接到其它頁面任務(wù)3實(shí)現(xiàn)網(wǎng)站首頁的文字效果任務(wù)4實(shí)現(xiàn)首頁和二級頁面的背景效果任務(wù)三：實(shí)現(xiàn)個人主頁的文字效果任務(wù)三：實(shí)現(xiàn)個人主頁的文字效果技能目標(biāo)：1、能夠在、能夠在html頁中以多種方式引入頁中以多種方式引入CSS；2、能夠?qū)ξ谋具M(jìn)行修飾、能夠?qū)ξ谋具M(jìn)行修飾 知識目標(biāo)：1. 了解了解CSS的概念；

2、的概念；2. CSS引入網(wǎng)頁的方法引入網(wǎng)頁的方法3. CSS語法規(guī)則，命名規(guī)則語法規(guī)則，命名規(guī)則4. 與文字相關(guān)的與文字相關(guān)的CSS屬性名、屬性值屬性名、屬性值 相關(guān)知識：相關(guān)知識：CSS的概念和語法的概念和語法1.1基本基本CSS選擇器選擇器1.2在在HTML中使用中使用CSS的方法的方法1.3復(fù)合選擇器復(fù)合選擇器1.4CSS的繼承特性的繼承特性1.5 CSSCSS概念概念 Cascading Style SheetCascading Style Sheet層疊樣式表。層疊樣式表。CSSCSS作用作用在網(wǎng)頁中實(shí)現(xiàn)網(wǎng)頁結(jié)構(gòu)內(nèi)容和表現(xiàn)形式的分離，將原在網(wǎng)頁中實(shí)現(xiàn)網(wǎng)頁結(jié)構(gòu)內(nèi)容和表現(xiàn)形式的分離，將原

3、來由來由HTMLHTML語言所承擔(dān)的一些與結(jié)構(gòu)無關(guān)的功能剝語言所承擔(dān)的一些與結(jié)構(gòu)無關(guān)的功能剝離出來，改由離出來，改由CSSCSS來完成。來完成。1.1 CSS1.1 CSS的概念和語法的概念和語法 CSSCSS的標(biāo)準(zhǔn)的標(biāo)準(zhǔn)目前有三個目前有三個CSSCSS標(biāo)準(zhǔn)。標(biāo)準(zhǔn)。CSS1CSS1、CSS2CSS2和和CSS3CSS3。CSS1CSS1于于19961996年年1212月通過，月通過，CSS2CSS2則于則于19981998年年5 5月通過。月通過。CSS3CSS3在在CSS2CSS2的基礎(chǔ)上增加了很多新的樣式和效果。但現(xiàn)的基礎(chǔ)上增加了很多新的樣式和效果。但現(xiàn)在支持在支持CSS3CSS3的瀏覽器

4、版本要求較高。的瀏覽器版本要求較高。 CSSCSS文檔中大小寫不敏感文檔中大小寫不敏感1.1 CSS的概念和語法的概念和語法 在介紹在介紹CSSCSS語法之前，先思考一個生活中的問語法之前，先思考一個生活中的問題。題。 1.1 CSS的概念和語法的概念和語法 張飛張飛 身高身高:185cm;:185cm; 體重體重:105kg;:105kg; 性別性別: :男男; ; 性格性格: :暴躁暴躁; ; 民族民族: :漢族漢族; ; 這個表實(shí)際上是由這個表實(shí)際上是由3 3個要素組成的，即姓名、個要素組成的，即姓名、屬性和屬性值。屬性和屬性值。 CSS CSS的作用就是設(shè)置網(wǎng)頁的各個組成部分的表的作用

5、就是設(shè)置網(wǎng)頁的各個組成部分的表現(xiàn)形式。現(xiàn)形式。 因此，如果把上面的表格換成描述網(wǎng)頁上一個因此，如果把上面的表格換成描述網(wǎng)頁上一個標(biāo)題的屬性表，可以設(shè)想應(yīng)該大致如下：標(biāo)題的屬性表，可以設(shè)想應(yīng)該大致如下： 2 2級標(biāo)題級標(biāo)題 字體字體: :宋體宋體; ; 大小大小:15:15像素像素; ; 顏色顏色: :紅色紅色; ; 裝飾裝飾: :下劃線下劃線 再進(jìn)一步，如果把上面的表格用英語寫出來：再進(jìn)一步，如果把上面的表格用英語寫出來： h2h2 font-family: font-family: 宋體宋體; ; font-size:15px; font-size:15px; color: red; col

6、or: red; text-decoration: underline; text-decoration: underline; CSS CSS的思想就是首先指定對什么的思想就是首先指定對什么“對象對象”進(jìn)行進(jìn)行設(shè)置，然后指定對該對象的哪個方面的設(shè)置，然后指定對該對象的哪個方面的“屬性屬性”進(jìn)進(jìn)行設(shè)置，最后給出該設(shè)置的行設(shè)置，最后給出該設(shè)置的“值值”。 因此，概括來說，因此，概括來說，CSSCSS就是由就是由3 3個基本部分個基本部分“對象對象”、“屬性屬性”和和“值值”組成的。組成的。 CSSCSS基本語法基本語法 選擇符選擇符 屬性名屬性名1: 1: 屬性值屬性值1;1; 屬性名屬性名2:

7、 2: 屬性值屬性值2; 2; 選擇符：選擇符：指被設(shè)樣式的對象指被設(shè)樣式的對象 ：表示此符號內(nèi)的一組樣式是對指定對象設(shè)置的。表示此符號內(nèi)的一組樣式是對指定對象設(shè)置的。 屬性名屬性名: : 屬性值屬性值 ：具體的樣式具體的樣式 CSSCSS注釋：注釋：/ /* * 被注釋內(nèi)容被注釋內(nèi)容 * *1.1 CSS的概念和語法的概念和語法注意冒號和分號注意冒號和分號1.2 1.2 基本基本CSSCSS選擇器選擇器 在在CSSCSS的的3 3個組成部分中，個組成部分中，“對象對象”是很重要的，是很重要的，它指定了對哪些網(wǎng)頁元素進(jìn)行設(shè)置，因此，它有一它指定了對哪些網(wǎng)頁元素進(jìn)行設(shè)置，因此，它有一個專門的名稱

8、個專門的名稱選擇器（選擇器（selectorselector）。）。1.2.1 1.2.1 標(biāo)記選擇器標(biāo)記選擇器標(biāo)記選擇器中的標(biāo)記選擇器中的“標(biāo)記標(biāo)記”指指XHTMLXHTML中的標(biāo)記。中的標(biāo)記。CSSCSS可以定義幾乎所有可以定義幾乎所有HTMLHTML標(biāo)記中內(nèi)容的樣式。例如標(biāo)記中內(nèi)容的樣式。例如bodybody、h1-h6h1-h6、p p、a a、divdiv、ulul等。等。例：對例：對HTMLHTML語言中的分段標(biāo)記語言中的分段標(biāo)記P P進(jìn)行字體定義：進(jìn)行字體定義： p font-family: p font-family: 宋體宋體; ; 1.2.21.2.2 類別選擇器類別選擇器

9、表示方法：在字符的前面加前綴句點(diǎn)表示方法：在字符的前面加前綴句點(diǎn)“.”.”來表示類別選擇器。來表示類別選擇器。引用方法：在此處定義的類名在頁面中的元素用引用方法：在此處定義的類名在頁面中的元素用classclass屬性的值來屬性的值來引用。引用。 例：定義了一個類選擇器例：定義了一個類選擇器title1title1，用來定義字體的大小：，用來定義字體的大?。?title1 font-size:12px; .title1 font-size:12px; 在頁面中使用定義的樣式：在頁面中使用定義的樣式：學(xué)校網(wǎng)站開發(fā)學(xué)校網(wǎng)站開發(fā) 注意：類名不能以數(shù)字開頭。注意：類名不能以數(shù)字開頭。CSSCSS的類名

10、只能包含字母和數(shù)字。的類名只能包含字母和數(shù)字。 class class選擇器選擇器 style type=text/css .red .red color:red color:red; ;/ /* * 紅色紅色 * */ / font-size:18px; font-size:18px; / /* * 文字大小文字大小 * */ / .green.green color:green color:green; ;/ /* * 綠色綠色 * */ / font-size:20px; / font-size:20px; /* * 文字大小文字大小 * */ / class class選擇器選擇器11

11、 class class選擇器選擇器22 h3 h3同樣適用同樣適用 1.2.3 ID1.2.3 ID選擇器選擇器表示方法：字符前加表示方法：字符前加“#”#”。引用方法：在元素的引用方法：在元素的idid屬性中引用。屬性中引用。例如：例如：title2 font-size:larger; font-title2 font-size:larger; font-weight:boldweight:bold; ; 這個這個CSSCSS規(guī)則只能用在具有這個規(guī)則只能用在具有這個idid屬性的元素上，屬性的元素上， 學(xué)校網(wǎng)站開發(fā)學(xué)校網(wǎng)站開發(fā) 練習(xí)：練習(xí)：若若htmlhtml中有如下代碼：中有如下代碼：我

12、是頁頁頭部我是頁頁頭部我是正文部分我是正文部分若想將以上文字的顏色設(shè)置為紅色，則需要怎樣設(shè)置若想將以上文字的顏色設(shè)置為紅色，則需要怎樣設(shè)置選擇器？選擇器？1.2.4 1.2.4 通用選擇器通用選擇器表示方法：表示方法： * *作用：作用：指定的樣式可應(yīng)用在頁面里的所有元素。指定的樣式可應(yīng)用在頁面里的所有元素。例如：把頁面中所有支持字體屬性的樣式都設(shè)為例如：把頁面中所有支持字體屬性的樣式都設(shè)為“宋體宋體”： * * font-family: font-family: 宋體宋體; ; 1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法 1.3.1 1.3.1 行內(nèi)式行內(nèi)式在在

13、HTMLHTML標(biāo)記中使用標(biāo)記中使用stylestyle屬性，直接寫入需要定義的樣式。屬性，直接寫入需要定義的樣式。例如：例如：p style=color:Blue; font-size:large 內(nèi)嵌樣式內(nèi)嵌樣式表表 其中各個屬性之間用其中各個屬性之間用“;”;”隔開，屬性與屬性值之間隔開，屬性與屬性值之間用用“:”:”隔開。隔開。 p style=color:#FF0000; font-size:20px; text- ;正文內(nèi)容正文內(nèi)容11 p style=color:#000000; font-style:italic ;正文內(nèi)容正文內(nèi)容22 p style=color:#FF00F

14、F; font-size:25px; font- ;正文內(nèi)容正文內(nèi)容33 1.3.2 1.3.2 內(nèi)嵌式內(nèi)嵌式 在HTML文檔頭部標(biāo)記中，用標(biāo)記來存放樣式表代碼。例如：在標(biāo)記中加入樣式表代碼，書寫格式如下：選擇器屬性名a：屬性值a；屬性名b：屬性值b 頁面標(biāo)題頁面標(biāo)題 style type=text/css ppcolor:#0000FF;color:#0000FF;font-size:25px;font-size:25px; 這是第這是第1 1行正文內(nèi)容行正文內(nèi)容 這是第這是第2 2行正文內(nèi)容行正文內(nèi)容 這是第這是第3 3行正文內(nèi)容行正文內(nèi)容 1.3.3 1.3.3 外部樣式表的引入外部樣式

15、表的引入網(wǎng)站中有單獨(dú)的網(wǎng)站中有單獨(dú)的CSSCSS文件（擴(kuò)展名為文件（擴(kuò)展名為CSSCSS），在），在主文檔中調(diào)用主文檔中調(diào)用CSSCSS文件。文件。調(diào)用的方法調(diào)用的方法: :1 1、鏈接式、鏈接式在頁面的頭部標(biāo)記在頁面的頭部標(biāo)記中加入使用中加入使用linklink標(biāo)記及其屬性標(biāo)記及其屬性格式：格式：link href / 2 2、導(dǎo)入式、導(dǎo)入式 在頁面的頭部標(biāo)記在頁面的頭部標(biāo)記中使用中使用 import import 使用方法：使用方法：import urlimport url(“(“樣式文件名樣式文件名);); 1.4 文字常用的屬性名、屬性值文字常用的屬性名、屬性值1 1、文字屬性、文字屬

16、性 字體（字體（font-familyfont-family） 文字大小（文字大小（font-sizefont-size） 文字樣式（文字樣式（font-stylefont-style） 文字粗細(xì)（文字粗細(xì)（font-weightfont-weight）2 2、文本屬性、文本屬性 首行縮進(jìn)（首行縮進(jìn)（text-indenttext-indent） 文本顏色（文本顏色（colorcolor） 文本對齊屬性（文本對齊屬性（text-aligntext-align） 文本修飾（文本修飾（text-decorationtext-decoration）知識點(diǎn)小結(jié)知識點(diǎn)小結(jié) CSSCSS規(guī)則格式？規(guī)則格式？ CSSCSS選擇器的基本類型？選擇器的基本類型？選擇器 屬性名：屬性值； 屬性名：屬性值； 標(biāo)記選擇器、類選擇器、ID選擇器 CSSCSS引入的方式？引入的方式？行內(nèi)式、內(nèi)嵌式、鏈接式、導(dǎo)入式任務(wù)實(shí)踐任務(wù)實(shí)踐參考步驟：參考步驟：1.1. 打開個人主頁的首頁文件打開個人主頁的首頁文件“index.htmlindex.html”。2.2. 使用鏈接式添加樣式表。使用鏈接式添加樣式表。3.3. 給各文字部分添加給各文字部分添加IDID或或classclas