在上期《初遇HTML先生和CSS×××》中，HTML先生與我們大家詳細的介紹了他自己，在今天這篇文章，CSS×××也將詳細的介紹一下她的遊戲規則，接下來的時間，就留給我們的CSS×××。有請，我們漂亮的CSS×××。
CSS×××：
Hi，大家好，我是Cascading Style Sheets，簡稱CSS，中文名，層疊樣式表。
今天，我非常高興，又和【web前端開發】的小夥伴們見面了，在這裏認識大家，我感到非常榮幸，也希望大家會喜歡我，記住我。
關於我的故事，我在上期節目中，已經跟大家介紹過了，我是一名化妝師，你也可以稱我爲一名魔術師，至於我在工作中的價值，請參考下圖效果：
▲使用了CSS前後的效果對比
今天，我要重點跟大家講一下，跟我玩的話，需要注意哪些遊戲規則。正所謂無規則不遊戲。
首先，我們一起先來看一下下圖中的這輛法拉利跑車，各位，喜歡嗎？喜歡。其實，我也很喜歡，紅色的，悶騷而拉風。沒有關係，只要努力，香車美女會有的，我與各位共勉，美女我就不需要了，要是有帥哥的話，我還是可以考慮一下。
好了，不開玩笑了。說正事。
▲CSS×××喜歡的跑車
從這張照片裏，我們可以得到兩個非常直觀的信息：
1、品牌：法拉利
2、顏色：紅色
如果把上面的信息用中文再簡寫一下的話，還可以這樣寫：
法拉利{顏色:紅色}
這個是不是有點像我們平時在網頁上看到的CSS代碼的樣子了？但是，這個還不是我CSS×××。因爲我的合作伙伴，瀏覽器依然不認識它。雖然長得像我，但還不是我。
你現在可以隨便打開一個網站，按一下鍵盤上的F12鍵，你就可以看到我是什麼樣子。
下面是我打開百度，按下F12看到的界面效果，你也可以去試試。
▲百度網頁案例截圖
發現沒有了，HTML和CSS全都是英文。
如果我們把CSS寫成：法拉利{顏色:紅色}
中國人是認識了，但我CSS×××與HTML先生，還有我的電腦朋友，瀏覽器小夥伴，他們都不認識，所以需要把這行：
法拉利{顏色:紅色}
換成我的小夥伴能夠認識的語言。
我們的世界，也是跟你們人類世界一樣，我們也有自己的溝通語言。
比方，中國人說中文，但如果你對一個不懂中文的外國人說中文，外國人也會聽不懂，一面懵逼。所以，你需要說我們能夠聽得懂的語言。
所以，如果你把：
法拉利{顏色:紅色}
這樣的文字寫到網頁裏，然後發給我們的瀏覽器朋友，我們的瀏覽器也會一面茫然，兄弟，你這是啥呀？我完全看不懂呀。
所以，你就會得不到你想要的效果。而程序員就把這種情況稱之爲BUG。
其實，BUG，不是我們的錯，是你在寫的時候，就寫了一些，我們瀏覽器小夥伴不認識的東西，他們沒有辦法，所以瀏覽器小夥伴就說，不知道是什麼東西，直接報錯就好了。
那我們應該怎麼修改呢？其實，也非常簡單：
將法拉利{顏色:紅色}換成Ferrari{color:red;}就可以了。
這樣我們的瀏覽器就認識了。
那我再來說一下，爲啥變成英文，我們的瀏覽器小朋友就認識了？因爲我們的電腦朋友只認識英文和數字，而在這些英文與數字裏，又有許多規則。只有按照規則出現的英文與數字，我們的電腦朋友與瀏覽器朋友纔會認識。
而在我這裏，你們就需要準守我的遊戲規則。話說，我的地盤，聽我的，請看下面的圖：
▲CSS×××講解遊戲規則
通過上面這張遊戲規則圖，我想，你可以非常直觀的瞭解到CSS×××的遊戲規則了。
規則一：每條CSS語句，必須有選擇器（selector）+聲明（declaration）組成；而聲明（declaration）裏面必須包括，屬性（property）與值（value）。
規則二：每條CSS語句，必須將聲明（declaration）用大括號（{}）包裹起來，並且聲明（declaration）裏的屬性（property）與值（value）必須用冒號（：）分開來。
規則三：在CSS語句裏，每條聲明（declaration）與聲明（declaration）之間，必須用分號（；）將其區分開來。
聽起來好像有點複雜，其實，我的結構真的非常簡單，用英文寫出來就是這樣：
selector {
declaration0;
declaration1;
declaration2;
......
declarationN }
然後再將聲明（declaration）細化成：屬性（property）與值（value）。所以就有了如下結構：
selector
{
property0: value0；
property1: value1；
property2: value2；
property3: value3；
......
propertyN: valueN；
}
這就是我的遊戲規則部分，只要是想跟我玩這個遊戲的朋友，就必須要準守這個遊戲規則。
除了這個遊戲規則外，我還有一些其他的特徵，你也需要記住。
在前面，我已經說了，我是跟HTML先生一起工作的，那具體我們是怎麼一起協同工作的呢？今天我也來跟大家說一下。
在HTML先生那裏，他有三種方式可以獲取到我的一些信息。
第一種就是，行內引入。例如，HTML現在想直接獲取前面法拉利跑車的外觀顏色，紅色，那HTML先生就需要這樣寫：
<div style="color:red;"></div>
第二種方式：內部引入方式。就是直接將前面我們寫好的那行代碼，直接寫在HTML的<head>裏，那HTML先生就應該這樣寫：
<style type="text/css">
Ferrari{color:red;}
</style>
第三種方式就是：外部引入。
外部引入，也是我們在寫界面時候，比較常用的一種方式，也是大家非常推薦使用的一種方式。
HTML先生引入外部樣式的時候，應該這樣寫：
<link rel="stylesheet" type="text/css" href="common.css">
<link rel="stylesheet" type="text/css" href="header.css">
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="footer.css">
當頁面需要用到幾個樣式文件，就引入幾個，一般來講，可以分爲以下幾個樣式文件：
1、公共樣式文件（common.css）；就是所有頁面都會用的一些樣式。
2、頭部樣式文件（header.css）；這個是頁面頂部部分內容，很多頁面都會用到，所以也建議建一個獨立的文件，便於修改。
3、底部樣式文件（footer.css）；這個是頁面底部內容，主要用於一些友情鏈接，底部不怎麼重要的菜單，還有一些關於網站的版權信息，爲了方便，也建議建一個獨立文件，當然如果內容不多的話，也可以跟頭部樣式文件合併在一個CSS文件裏。這個視具體情況而定。
4、當前頁面樣式文件，在這裏列舉的當前頁面爲首頁，所以引入的當前頁面樣式文件爲（index.css）。
web小二：
鄭州專業不孕不育醫院:http://jbk.39.net/yiyuanzaixian/zztjyy/
鄭州不孕不育醫院×××:http://jbk.39.net/yiyuanzaixian/zztjyy/
到現在爲止，CSS×××將遊戲規則以及怎麼與HTML先生配合工作都介紹完了，那麼接下來，怎麼將這些內容，有序的應用到我們的網站中去呢？這個是我們下期將要與大家分享的內容，本期內容暫時到這裏，下期我們再見！