第4章習一點CSS的語法ppt

1、第4章 學習一點css的語法 我們在前三章中已經(jīng)熟悉了一些html和css的基本知識，還給張三做出了一個效果不錯的電子簡歷。但是，如果面對更加復雜的需求，目前我們所了解的這些標簽用法就有點捉襟見肘了，同時，我們在前幾章中也遇到了一些不明白的名詞，比如：偽類，選擇符，等等。為了更扎實的學習css，有必要停下腳步，將前面的疑難解決之后再進行下一步的學習。 本章的目的就是講解css的幾個重要名詞，熟悉css的寫法，為今后學習更多的html標簽和css技巧做準備。4.1 再訪html4.1.1 組成html頁面的細胞 - 標簽再復雜的事情也是由相對簡單的部分組合而成的，html也不例外。構成html頁

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

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

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

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

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

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

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

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