什麼是CSS呢？你可能急迫的想知道答案。但是空泛的文字描述意義不大，讓我們先來一點感性體驗吧。看看這個沒有添加CSS的HTML檔案，是一個普普通通的網頁。然而通過給這個檔案添加的CSS規則，我們可以得到十分美觀的網頁。
這還不是全部，不改動HTML，只是通過添加不同的CSS規則，我們就可以得到各種不同樣式的網頁。好了，下面我們再來回答什麼是CSS這個問題。
什麼是CSS?CSS是CascadingStyleSheets（層疊樣式表）的縮寫。它的作用是定義網頁的外觀（例如字型，顏色等等），它也可以和javascript等瀏覽器端指令碼語言合作做出許多動態效果。
學習CSS的基礎學習CSS之前您應該已經瞭解了HTML或者XHTML。
學習CSS需要什麼特殊的軟體嗎？不。同學習XHTML一樣，在學習CSS的過程中您只需要使用Windows內建的記事本(Notepad.exe)就可以了。在未來實際製作網頁的時候您可能需要用到Dreamweaver等專業的網頁設計軟體，它們將使得為網頁添加CSS的工作變得異常簡單。但是再次強調，在學習CSS的過程中，您不需要這些強大的軟體。本教程只使用記事本，目的在於練習手寫CSS代碼的能力，也是為了方便那些還沒有Dreamweaver之類軟體的讀者。
CSS入門教程——樣式表的基本文法(一)
插入樣式表前後的網頁。
為了更好地理解樣式表的作用，我們先看一個CSS的應用執行個體。在本例子中，你很容易對比出使用CSS前後兩個網頁的區別，當然了，現在你可能讀不懂CSS部分的代碼。別擔心，這些代碼將在少後的教程中介紹。
我們首先來看一下未加入CSS的頁面。網頁裡只有一段話：“菜鳥吧的站長是大傻瓜！傻瓜愛吃大西瓜！”。而且由於分別是標題1、2、3、4，頁面內字型大小也不相同，還有標題的自動換行。
它的原始碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>我真慘!被用來示範CSS!</title> <meta http-equiv="Content-Type"
content="text/html; charset=gb2312" /> <!--這裡將要插入CSS --> </head> <body> <h1><a href="http://cainiao8.com/">菜鳥吧</a></h1> <h2>的站長</h2> <h3>是大傻瓜！傻瓜</h3><!--我就要被修該啦，鬱悶 --> <h4>愛吃大西瓜！</h4> </body> </html>
下面我們簡單的為它加上一點CSS，來讓我不再傻……按如下提示修改網頁的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>我真慘!被用來示範CSS!</title> <meta http-equiv="Content-Type"
content="text/html; charset=gb2312" /> <style type="text/css"> <!-- h1 {font-size: 12px;} h2,h4 {font-size: 12px; display:inline;} --> </style> </head> <body> <h1><a href="http://cainiao8.com/">菜鳥吧</a></h1> <h2>的站長</h2> <h3 style="display:none">是大傻瓜！傻瓜</h3> <h4>愛吃大西瓜！</h4> </body> </html>
讓我們來看看加入CSS之後的網頁。你很容易看出兩個網頁的差別，頁面內的文字大小統一了，而且只有標題1後面有一個換行，甚至有一部分文字被隱藏了起來。這都要歸功於上面紅色部分的代碼。它們就是CSS，下面就讓我們大概瞭解一下這些代碼的意義。
CSS文法簡介加在head部分的<style type="text/css">和</style>分別被瀏覽器識別為CSS的開始和結束。而注釋標籤<!-- -->則是避免不支援CSS的瀏覽器將CSS內容作為網頁本文顯示在頁面上。
上面的內容並沒有定義任何樣式，它的任務只是告訴瀏覽器CSS代碼的位置。下面的內容是重點，正是下面這一部分的內容使得頁面的外觀發生了明顯的變化，它也就是CSS的描述部分(定義部分)：
h1 {font-size: 12px;} h2,h4 {font-size: 12px; display:inline;} …… <h3 style="display:none">是大傻瓜！傻瓜</h3>
通常情況下，CSS的描述部分是由三部分組成的，分別是選取器、屬性和屬性值。寫法如下：
選取器 { 屬性: 屬性值; }
例如：h1 {font-size: 12px;}
本例中選取器也就是你想要描述的HTML標籤，其它選取器將在後面的教程中講解。上面例子的選取器就是h1標籤。屬性和屬性值則是說明你想要描述h1的哪一個屬性，該屬性的值為多少，例如上面例子中將h1字型大小屬性為12像素，寫成font-size: 12px。屬性和屬性值之間用一個冒號“:”分開，以一個分號“;”結束，最後別忘記用一對大括弧“{}”括起來。
我們也可以為一個選取器同時定義多個樣式，樣式之間用分號“;”隔開。也可以同時為幾個標籤同時定義一組樣式，標籤之間用逗號“,”隔開。也許這兩句話比較繞嘴，不過事實上上面例子的第二行代碼就用到了CSS的這個特性。語句“h2,h4 {font-size: 12px; display:inline;} ”同時為h2和,h4兩個標籤定義了兩個樣式。當然了，為了使你的CSS代碼更容易閱讀和維護，你可以分行書寫這些屬性：
h2,h4 { font-size: 12px; display:inline;}
注意1：現在講解上面代碼的最後一行，在<h3 style="display:none">中，我們沒有看到選取器，這是因為插入CSS的位置不同，它將直接作用與當前標籤之內的元素。關於CSS不同的插入方式將在隨後的教程中討論。
注意2：CSS的書寫方式請大家根據自己的喜好決定，不過最終的目的都很明確，提高維護CSS代碼的效率。
CSS注釋我們以一個例子介紹在CSS中插入注釋的方法：
<style type="text/css"> <!-- h1 {font-size: 12px;} /* 把標題的大小都定義為12個像素 */
h2,h4 {font-size: 12px; display:inline;}
--></style>
在CSS中，注釋以“/*”開始，以“*/”結束，注釋裡面的內容對於瀏覽器來說是沒有意義的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
