插入樣式表前后的網(wǎng)頁(yè)。

為了更好地理解樣式表的作用，我們先看一個(gè)CSS的應(yīng)用實(shí)例。在本例子中，你很容易對(duì)比出使用CSS前后兩個(gè)網(wǎng)頁(yè)的區(qū)別，當(dāng)然了，現(xiàn)在你可能讀不懂CSS部分的代碼。別擔(dān)心，這些代碼將在少后的教程中介紹。

我們首先來(lái)看一下未加入CSS的頁(yè)面。網(wǎng)頁(yè)里只有一段話：“菜鳥(niǎo)吧的站長(zhǎng)是大傻瓜！傻瓜愛(ài)吃大西瓜！”。而且由于分別是標(biāo)題1、2、3、4，頁(yè)面內(nèi)字體大小也不相同，還有標(biāo)題的自動(dòng)換行。

它的源代碼如下：

下面我們簡(jiǎn)單的為它加上一點(diǎn)CSS，來(lái)讓我不再傻……按如下提示修改網(wǎng)頁(yè)的代碼：

讓我們來(lái)看看加入CSS之后的網(wǎng)頁(yè)。你很容易看出兩個(gè)網(wǎng)頁(yè)的差別，頁(yè)面內(nèi)的文字大小統(tǒng)一了，而且只有標(biāo)題1后面有一個(gè)換行，甚至有一部分文字被隱藏了起來(lái)。這都要?dú)w功于上面紅色部分的代碼。它們就是CSS，下面就讓我們大概了解一下這些代碼的意義。

CSS語(yǔ)法簡(jiǎn)介

加在head部分的<style type="text/css">和</style>分別被瀏覽器識(shí)別為CSS的開(kāi)始和結(jié)束。而注釋標(biāo)簽<!-- -->則是避免不支持CSS的瀏覽器將CSS內(nèi)容作為網(wǎng)頁(yè)正文顯示在頁(yè)面上。

上面的內(nèi)容并沒(méi)有定義任何樣式，它的任務(wù)只是告訴瀏覽器CSS代碼的位置。下面的內(nèi)容是重點(diǎn)，正是下面這一部分的內(nèi)容使得頁(yè)面的外觀發(fā)生了明顯的變化，它也就是CSS的描述部分(定義部分)：

選擇器 { 屬性: 屬性值; }

例如：

本例中選擇器也就是你想要描述的HTML標(biāo)簽，其它選擇器將在后面的教程中講解。上面例子的選擇器就是h1標(biāo)簽。屬性和屬性值則是說(shuō)明你想要描述h1的哪一個(gè)屬性，該屬性的值為多少，例如上面例子中將h1字體大小屬性為12像素，寫(xiě)成font-size: 12px。屬性和屬性值之間用一個(gè)冒號(hào)“:”分開(kāi)，以一個(gè)分號(hào)“;”結(jié)束，最后別忘記用一對(duì)大括號(hào)“{}”括起來(lái)。

我們也可以為一個(gè)選擇器同時(shí)定義多個(gè)樣式，樣式之間用分號(hào)“;”隔開(kāi)。也可以同時(shí)為幾個(gè)標(biāo)簽同時(shí)定義一組樣式，標(biāo)簽之間用逗號(hào)“,”隔開(kāi)。也許這兩句話比較繞嘴，不過(guò)事實(shí)上上面例子的第二行代碼就用到了CSS的這個(gè)特性。語(yǔ)句“h2,h4 {font-size: 12px; display:inline;} ”同時(shí)為h2和,h4兩個(gè)標(biāo)簽定義了兩個(gè)樣式。當(dāng)然了，為了使你的CSS代碼更容易閱讀和維護(hù)，你可以分行書(shū)寫(xiě)這些屬性：

注意2：CSS的書(shū)寫(xiě)方式請(qǐng)大家根據(jù)自己的喜好決定，不過(guò)最終的目的都很明確，提高維護(hù)CSS代碼的效率。

CSS注釋

我們以一個(gè)例子介紹在CSS中插入注釋的方法：

最新評(píng)論