第4章習(xí)一點(diǎn)CSS的語法ppt

1、第4章 學(xué)習(xí)一點(diǎn)css的語法 我們?cè)谇叭轮幸呀?jīng)熟悉了一些html和css的基本知識(shí)，還給張三做出了一個(gè)效果不錯(cuò)的電子簡歷。但是，如果面對(duì)更加復(fù)雜的需求，目前我們所了解的這些標(biāo)簽用法就有點(diǎn)捉襟見肘了，同時(shí)，我們?cè)谇皫渍轮幸灿龅搅艘恍┎幻靼椎拿~，比如：偽類，選擇符，等等。為了更扎實(shí)的學(xué)習(xí)css，有必要停下腳步，將前面的疑難解決之后再進(jìn)行下一步的學(xué)習(xí)。 本章的目的就是講解css的幾個(gè)重要名詞，熟悉css的寫法，為今后學(xué)習(xí)更多的html標(biāo)簽和css技巧做準(zhǔn)備。4.1 再訪html4.1.1 組成html頁面的細(xì)胞 - 標(biāo)簽再復(fù)雜的事情也是由相對(duì)簡單的部分組合而成的，html也不例外。構(gòu)成html頁

2、面的細(xì)胞，就是一個(gè)又一個(gè)的標(biāo)簽。我們?cè)诒竟?jié)首先將截至目前學(xué)習(xí)過的html和css知識(shí)總結(jié)提煉一下。在前面的三章中，我們已經(jīng)介紹了若干基本的標(biāo)簽，它們是：表示段落。表示正文表示字體的設(shè)置等。當(dāng)然html的標(biāo)簽還有很多，在今后的章節(jié)中我們將陸續(xù)見到。不過，既然它們都被稱作標(biāo)簽，肯定有一些共性，其中書寫的語法都是類似的，即如下的樣子：4.1.2 css規(guī)則的具體寫法具體而言，對(duì)某個(gè)標(biāo)簽應(yīng)用css有如下兩種方法：行內(nèi)樣式表：在標(biāo)簽定義中增加style=”css屬性”這樣的代碼。外部樣式表和內(nèi)部樣式表：首先在頁面首部鏈接樣式表文件或者直接編寫樣式表定義，然后在標(biāo)簽定義中增加class=”css選擇器”來

3、實(shí)現(xiàn)。css屬性和css選擇器就構(gòu)成了一條css規(guī)則。那么，css屬性和css選擇器有什么區(qū)別呢？舉個(gè)日常生活中的例子就比較好理解了。假設(shè)我們所在的單位要招聘員工，一名銷售人員，一名網(wǎng)頁設(shè)計(jì)師，其中網(wǎng)頁設(shè)計(jì)師要求大學(xué)畢業(yè)，精通css/html，熟練使用dreamweaver軟件等；銷售人員則要求與人溝通能力強(qiáng)，有一定的客戶群體，有銷售經(jīng)驗(yàn)等。這條廣告放置在招聘網(wǎng)站之后，單位的人事部門就收到了不少人的簡歷。那么，如何從這些簡歷中找到符合條件的人呢？4.1.3 標(biāo)簽應(yīng)用css規(guī)則的具體寫法css規(guī)則已經(jīng)有了，那么該如何讓標(biāo)簽應(yīng)用這個(gè)規(guī)則呢？上節(jié)已經(jīng)提到了兩種情況，下面分別講述?！綾ss規(guī)則處于內(nèi)部

4、樣式表和外部樣式表之中時(shí)】在這種情況下，我們需要在標(biāo)簽中增加一個(gè)屬性，聲明class=”css選擇器”即可。代碼包含了代碼中的內(nèi)部樣式表，同時(shí)還有兩個(gè)h2標(biāo)簽。代碼 應(yīng)用css規(guī)則：applycss-innerout.html在標(biāo)簽中應(yīng)用內(nèi)部樣式表中的css規(guī)則這是一個(gè)在標(biāo)簽中聲明style=h2的標(biāo)題。這是一個(gè)在標(biāo)簽中沒有聲明style=h2的標(biāo)題。4.1.4 css選擇器的種類-八種武器上一節(jié)我們遺留了一個(gè)問題，本節(jié)的末尾相信能夠解決它。首先，介紹一下css選擇器的種類。我們知道，選擇器就好比招聘工作職位時(shí)的條件一樣，是為了從眾多的html標(biāo)簽中挑選出我們所需要設(shè)置樣式的標(biāo)簽。因此，css

5、選擇器的分類就是根據(jù)選擇html標(biāo)簽方法的不同而區(qū)分的。css選擇器共有如下兩大類八種。簡單選擇器。包括：類型選擇器（type selectors）屬性選擇器（attribute seletors）id選擇器（id selectors）類選擇器（class selectors）通配選擇器（universal selectors）組合選擇器后代選擇器（descendant combinators）子選擇器（child combinators）兄弟選擇器（sibling combinators） 4.1.5 偽類還記得在第3章我們所講的鏈接4個(gè)狀態(tài)嗎？這里簡單的復(fù)習(xí)一下，鏈接的狀態(tài)一共有4種：鏈接

6、正常狀態(tài)。這時(shí)鼠標(biāo)并未單擊它。鏈接被掠過的狀態(tài)。鼠標(biāo)運(yùn)動(dòng)過程中某時(shí)刻處于鏈接之上，但尚未單擊。鏈接被單擊的狀態(tài)。單擊鼠標(biāo)左鍵，鏈接產(chǎn)生作用，根據(jù)鏈接的設(shè)置，打開目標(biāo)網(wǎng)頁。鏈接單擊后的狀態(tài)。假如目標(biāo)網(wǎng)頁在新建窗口中打開，當(dāng)前鏈接的狀態(tài)。對(duì)應(yīng)地，就有4種偽類，a:link 表示鏈接正常狀態(tài)。a:hover 表示鏈接被鼠標(biāo)掠過的情況。a:active 表示鏈接被單擊時(shí)的狀態(tài)。a:visited 表示鏈接單擊后的狀態(tài)。4.1.6 偽類的排列順序由于不同瀏覽器對(duì)于偽類支持的細(xì)節(jié)不同，偽類的不同順序在個(gè)別情況下也會(huì)造成一些小麻煩，約定俗成的順序就如代碼4-12中所寫的那樣：a:link color:blu

7、e;a:visitedcolor:purple;a:hovercolor:yellow;a:activecolor:green;4.2 盒模型 講完了選擇器這個(gè)重要的概念，下面來講另一個(gè)同樣重要，但理解起來不那么復(fù)雜的名詞 - 盒模型。在開始之前，首先要明白html標(biāo)簽可以被分為塊元素、內(nèi)聯(lián)元素和可變?cè)亍?.2.1 塊元素、內(nèi)聯(lián)元素和可變?cè)貕K元素、內(nèi)聯(lián)元素和可變?cè)厥莌tml標(biāo)簽的3種不同類型。其中，塊元素（block element）和內(nèi)聯(lián)元素（inline element）是主要的，它們的最大差異就是塊元素一般都從新行開始。下面來分別介紹?！緣K元素】塊元素（block element）

8、顧名思義，它好比一塊磚或者一個(gè)盒子，方方正正，同時(shí)能夠包含其他元素，也就是可以成為其他標(biāo)簽的容器。塊元素一般來說，都以一個(gè)新行開始，塊元素標(biāo)簽內(nèi)部是內(nèi)聯(lián)元素或者其他塊元素的組合。常見塊元素是段落標(biāo)簽,等等。當(dāng)然，也有特殊情況，比如我們?cè)诤竺嬲鹿?jié)將要講到的表單標(biāo)簽，它只能用來容納其他塊元素。如果沒有特別設(shè)置css樣式，多個(gè)塊元素的顯示將會(huì)按照順序以每次另起一行的方式一直往下排 - 這是默認(rèn)的布局方式。我們可以通過設(shè)置css改變它，把塊元素?cái)[放到想要的位置上去，而不是每次都單獨(dú)另起一行?？偨Y(jié)一下，塊元素的特點(diǎn)就是：總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除

9、非設(shè)定一個(gè)寬度。如果與我們?nèi)粘懙奈恼孪囝惐?，塊元素類似一個(gè)段落。4.2.2 盒模型 塊元素或者以塊元素方式顯示的其他標(biāo)簽在瀏覽器中顯示的時(shí)候，如果背景色和網(wǎng)頁背景色不相同，可以看出有上、下、左、右四個(gè)邊界，好像一個(gè)盒子，如圖所示。一些塊級(jí)元素：h2、div、p、span標(biāo)簽 4.3 文檔類型 在第三章的末尾，我們用dreamweaver為張三制作了一個(gè)電子簡歷，在代碼中，我們發(fā)現(xiàn)有這樣一行： 這句代碼是dreamweaver自動(dòng)為每一個(gè)新創(chuàng)建的網(wǎng)頁加入的，如果有機(jī)會(huì)使用別的網(wǎng)頁制作網(wǎng)站開發(fā)軟件，比如visual studio等，都會(huì)發(fā)現(xiàn)它們也會(huì)增加類似的一行。那么，這行看起來很怪異的代碼到底有什么作用呢？4.4 小結(jié)本章介紹了css技術(shù)中幾個(gè)重要的概念和它們的應(yīng)用：html頁面的樹形結(jié)構(gòu)；選擇器和它的種類；偽類；盒模型以及文檔類型。選擇器是用來選擇頁面上符合條件的標(biāo)簽的，只有將這些標(biāo)簽選擇出來，才能有的放矢的應(yīng)用樣式。選擇器的分類標(biāo)準(zhǔn)根據(jù)選擇標(biāo)簽的方法而定，對(duì)于我們初學(xué)者，要熟練掌握如下的3種