第4章 學習一點css的語法演示文稿
第4章 學習一點CSS的語法,我們在前三章中已經熟悉了一些HTML和CSS的基本知識，還給張三做出了一個效果不錯的電子簡歷。但是，如果面對更加復雜的需求，目前我們所了解的這些標簽用法就有點捉襟見肘了，同時，我們在前幾章中也遇到了一些不明白的名詞，比如偽類，選擇符，等等。為了更扎實的學習CSS，有必要停下腳步，將前面的疑難解決之后再進行下一步的學習。本章的目的就是講解CSS的幾個重要名詞，熟悉CSS的寫法，為今后學習更多的HTML標簽和CSS技巧做準備。,4.1 再訪HTML,,4.1.1 組成HTML頁面的細胞 --- 標簽,再復雜的事情也是由相對簡單的部分組合而成的，HTML也不例外。構成HTML頁面的細胞，就是一個又一個的標簽。我們在本節首先將截至目前學習過的HTML和CSS知識總結提煉一下。在前面的三章中，我們已經介紹了若干基本的標簽，它們是表示段落。body表示正文font表示字體的設置等。當然HTML的標簽還有很多，在今后的章節中我們將陸續見到。不過，既然它們都被稱作標簽，肯定有一些共性，其中書寫的語法都是類似的，即如下的樣子標簽名稱 屬性屬性值/標簽名稱,4.1.2 CSS規則的具體寫法,具體而言，對某個標簽應用CSS有如下兩種方法行內樣式表在標簽定義中增加style”CSS屬性”這樣的代碼。外部樣式表和內部樣式表首先在頁面首部鏈接樣式表文件或者直接編寫樣式表定義，然后在標簽定義中增加class”CSS選擇器”來實現。CSS屬性和CSS選擇器就構成了一條CSS規則。那么，CSS屬性和CSS選擇器有什么區別呢舉個日常生活中的例子就比較好理解了。假設我們所在的單位要招聘員工，一名銷售人員，一名網頁設計師，其中網頁設計師要求大學畢業，精通CSS/HTML，熟練使用Dreamweaver軟件等；銷售人員則要求與人溝通能力強，有一定的客戶群體，有銷售經驗等。這條廣告放置在招聘網站之后，單位的人事部門就收到了不少人的簡歷。那么，如何從這些簡歷中找到符合條件的人呢,4.1.3 標簽應用CSS規則的具體寫法,CSS規則已經有了，那么該如何讓標簽應用這個規則呢上節已經提到了兩種情況，下面分別講述。【CSS規則處于內部樣式表和外部樣式表之中時】在這種情況下，我們需要在標簽中增加一個屬性，聲明class”CSS選擇器”即可。代碼包含了代碼中的內部樣式表，同時還有兩個h2標簽。代碼 應用CSS規則applycss-innerout.htmlhtmlheadtitle在標簽中應用內部樣式表中的CSS規則/titlestyle/*對頁面上所有的H2標簽都設置樣式規則*/H2Colorwhite;Background-colorgreen;--/style/headbodyh2 classh2這是一個在標簽中聲明styleh2的標題。/h2hr noshade height1h2這是一個在標簽中沒有聲明styleh2的標題。/h2/body/html,4.1.4 CSS選擇器的種類-八種武器,上一節我們遺留了一個問題，本節的末尾相信能夠解決它。首先，介紹一下CSS選擇器的種類。我們知道，選擇器就好比招聘工作職位時的條件一樣，是為了從眾多的HTML標簽中挑選出我們所需要設置樣式的標簽。因此，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個狀態嗎這里簡單的復習一下，鏈接的狀態一共有4種鏈接正常狀態。這時鼠標并未單擊它。鏈接被掠過的狀態。鼠標運動過程中某時刻處于鏈接之上，但尚未單擊。鏈接被單擊的狀態。單擊鼠標左鍵，鏈接產生作用，根據鏈接的設置，打開目標網頁。鏈接單擊后的狀態。假如目標網頁在新建窗口中打開，當前鏈接的狀態。對應地，就有4種偽類，Alink 表示鏈接正常狀態。Ahover 表示鏈接被鼠標掠過的情況。Aactive 表示鏈接被單擊時的狀態。Avisited 表示鏈接單擊后的狀態。,4.1.6 偽類的排列順序,由于不同瀏覽器對于偽類支持的細節不同，偽類的不同順序在個別情況下也會造成一些小麻煩，約定俗成的順序就如代碼4-12中所寫的那樣Alink ColorBlue;AvisitedColorPurple;AhoverColorYellow;AactiveColorGreen;,4.2 盒模型,講完了選擇器這個重要的概念，下面來講另一個同樣重要，但理解起來不那么復雜的名詞 --- 盒模型。在開始之前，首先要明白HTML標簽可以被分為塊元素、內聯元素和可變元素。,4.2.1 塊元素、內聯元素和可變元素,塊元素、內聯元素和可變元素是HTML標簽的3種不同類型。其中，塊元素（block element）和內聯元素（inline element）是主要的，它們的最大差異就是塊元素一般都從新行開始。下面來分別介紹。【塊元素】塊元素（block element）顧名思義，它好比一塊磚或者一個盒子，方方正正，同時能夠包含其他元素，也就是可以成為其他標簽的容器。塊元素一般來說，都以一個新行開始，塊元素標簽內部是內聯元素或者其他塊元素的組合。常見塊元素是段落標簽,blockquote等等。當然，也有特殊情況，比如我們在后面章節將要講到的表單標簽，它只能用來容納其他塊元素。如果沒有特別設置CSS樣式，多個塊元素的顯示將會按照順序以每次另起一行的方式一直往下排 --- 這是默認的布局方式。我們可以通過設置CSS改變它，把塊元素擺放到想要的位置上去，而不是每次都單獨另起一行。總結一下，塊元素的特點就是總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100，除非設定一個寬度。如果與我們日常寫的文章相類比，塊元素類似一個段落。,4.2.2 盒模型,塊元素或者以塊元素方式顯示的其他標簽在瀏覽器中顯示的時候，如果背景色和網頁背景色不相同，可以看出有上、下、左、右四個邊界，好像一個盒子，如圖所示。,,一些塊級元素h2、div、p、span標簽,4.3 文檔類型,在第三章的末尾，我們用Dreamweaver為張三制作了一個電子簡歷，在代碼中，我們發現有這樣一行DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd這句代碼是Dreamweaver自動為每一個新創建的網頁加入的，如果有機會使用別的網頁制作網站開發軟件，比如Visual Studio等，都會發現它們也會增加類似的一行。那么，這行看起來很怪異的代碼到底有什么作用呢,4.4 小結,本章介紹了CSS技術中幾個重要的概念和它們的應用HTML頁面的樹形結構；選擇器和它的種類；偽類；盒模型以及文檔類型。選擇器是用來選擇頁面上符合條件的標簽的，只有將這些標簽選擇出來，才能有的放矢的應用樣式。選擇器的分類標準根據選擇標簽的方法而定，對于我們初學者，要熟練掌握如下的3種選擇器類型選擇器定義網頁上某一種標簽的樣式，一次能定義一類標簽，方便但不靈活。ID選擇器定義網頁上某一個ID的標簽樣式，精確，但只能定義一個，用得多了會比較麻煩。類選擇器可以靈活的設置樣式，不限于某一類的標簽，只要在標簽屬性中加上Class類選擇器名稱就可以應用樣式，是最常用的一種選擇器。,
技術文庫