第4章 學習一點css的語法演示文稿

《第4章 學習一點css的語法演示文稿》由會員分享，可在線閱讀，更多相關《第4章 學習一點css的語法演示文稿（13頁珍藏版）》請在技術文庫上搜索。

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

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

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

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

5、簽。因此，CSS選擇器的分類就是根據選擇HTML標簽方法的不同而區分的。CSS選擇器共有如下兩大類八種。簡單選擇器。包括：類型選擇器（Type Selectors）屬性選擇器（Attribute Seletors）ID選擇器（ID Selectors）類選擇器（Class Selectors）通配選擇器（Universal Selectors）組合選擇器后代選擇器（Descendant Combinators）子選擇器（Child Combinators）兄弟選擇器（Sibling Combinators）,4.1.5 偽類,還記得在第3章我們所講的鏈接4個狀態嗎？這里簡單的復習一下，鏈接的狀

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

7、k Color:Blue;A:visitedColor:Purple;A:hoverColor:Yellow;A:activeColor:Green;,4.2 盒模型,講完了選擇器這個重要的概念，下面來講另一個同樣重要，但理解起來不那么復雜的名詞 - 盒模型。在開始之前，首先要明白HTML標簽可以被分為塊元素、內聯元素和可變元素。,4.2.1 塊元素、內聯元素和可變元素,塊元素、內聯元素和可變元素是HTML標簽的3種不同類型。其中，塊元素（block element）和內聯元素（inline element）是主要的，它們的最大差異就是塊元素一般都從新行開始。下面來分別介紹?！緣K元素】塊元素（

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

9、缺省是它的容器的100%，除非設定一個寬度。如果與我們日常寫的文章相類比，塊元素類似一個段落。,4.2.2 盒模型,塊元素或者以塊元素方式顯示的其他標簽在瀏覽器中顯示的時候，如果背景色和網頁背景色不相同，可以看出有上、下、左、右四個邊界，好像一個盒子，如圖所示。,一些塊級元素：h2、div、p、span標簽,4.3 文檔類型,在第三章的末尾，我們用Dreamweaver為張三制作了一個電子簡歷，在代碼中，我們發現有這樣一行：這句代碼是Dreamweaver自動為每一個新創建的網頁加入的，如果有機會使用別的網頁制作網站開發軟件，比如Visual Studio等，都會發現它們也會增加類似的一行。那

10、么，這行看起來很怪異的代碼到底有什么作用呢？,4.4 小結,本章介紹了CSS技術中幾個重要的概念和它們的應用：HTML頁面的樹形結構；選擇器和它的種類；偽類；盒模型以及文檔類型。選擇器是用來選擇頁面上符合條件的標簽的，只有將這些標簽選擇出來，才能有的放矢的應用樣式。選擇器的分類標準根據選擇標簽的方法而定，對于我們初學者，要熟練掌握如下的3種選擇器：類型選擇器：定義網頁上某一種標簽的樣式，一次能定義一類標簽，方便但不靈活。ID選擇器：定義網頁上某一個ID的標簽樣式，精確，但只能定義一個，用得多了會比較麻煩。類選擇器：可以靈活的設置樣式，不限于某一類的標簽，只要在標簽屬性中加上Class=類選擇器名稱就可以應用樣式，是最常用的一種選擇器。,