# 無處不在的CSS
或許你覺得CSS一點兒也不重要，而事實上，如果說HTML是建筑的框架，CSS就是房子的裝修。那么Javascript呢，我聽到的最有趣的說法是小三——還是先讓我們回到代碼上來吧。
## 3.1 CSS
下面就是我們之前說到的代碼，css將Red三個字母變成了紅色。
~~~
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="para" style="color:red">Red</p>
</body>
<script type="text/javascript" src="app.js"></script>
</html>
~~~
只是，
~~~
var para=document.getElementById("para");
para.style.color="blue";
~~~
將字體變成了藍色，CSS+HTML讓頁面有序的工作著，但是Javascript卻打亂了這些秩序，有著唯恐世界不亂的精彩，也難怪被冠以小三之名了——或許終于可以理解，為什么以前人們對于Javascript沒有好感了——不過這里要講的是正室，也就是CSS，這時還沒有Javascript。
## 3.2 關于CSS
這不是一篇專業講述CSS的書籍，所以我不會去說CSS是怎么來的，有些東西我們既然可以很容易從其他地方知道，也就不需要花太多時間去重復。諸如重構等這些的目的之一也在于去除重復的代碼，不過有些重復是不可少的，也是有必要的，而通常這些東西可能是由其他地方復制過來的。
到目前為止我們沒有依賴于任何特殊的硬件或者是軟件，對于我們來說我們最基本的需求就是一臺電腦，或者可以是你的平板電腦，當然也可以是你的智能手機，因為他們都有個瀏覽器，而這些都是能用的，對于我們的CSS來說也不會有例外的。
CSS(Cascading Style Sheets)，到今天我也沒有記得他的全稱，CSS還有一個中文名字是層疊式樣式表，事實上翻譯成什么可能并不是我們關心的內容，我們需要關心的是他能做些什么。作為三劍客之一，它的主要目的在于可以讓我們方便靈活地去控制Web頁面的外觀表現。我們可以用它做出像淘寶一樣復雜的界面，也可以像我們的書本一樣簡單，不過如果要和我們書本一樣簡單的話，可能不需要用到CSS。HTML一開始就是依照報紙的格式而設計的，我們還可以繼續用上面說到的編輯器，又或者是其他的。如果你喜歡DreamWeaver那也不錯，不過一開始使用IDE可無助于我們寫出良好的代碼。
忘說了，CSS也是有版本的，和windows，Linux內核等等一樣，但是更新可能沒有那么頻繁，HTML也是有版本的，JS也是有版本的，復雜的東西不是當前考慮的內容。
## 3.3 代碼結構
對于我們的上面的Red示例來說，如果沒有一個好的結構，那么以后可能就是這樣子。
~~~
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-size: 22px;color:#f00;text-align: center;padding-left: 20px;">如果沒有一個好的結構</p>
<p style=" font-size:44px;color:#3ed;text-indent: 2em;padding-left: 2em;">那么以后可能就是這樣子。。。。</p>
</body>
</html>
~~~
雖然我們看到的還是一樣的:
于是我們就按各種書上的建議重新寫了上面的代碼
~~~
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<style type="text/css">
.para{
font-size: 22px;
color:#f00;
text-align: center;
padding-left: 20px;
}
.para2{
font-size:44px;
color:#3ed;
text-indent: 2em;
padding-left: 2em;
}
</style>
</head>
<body>
<p class="para">如果沒有一個好的結構</p>
<p class="para2">那么以后可能就是這樣子。。。。</p>
</body>
</html>
~~~
總算比上面好看也好理解多了，這只是臨時的用法，當文件太大的時候，正式一點的寫法應該如下所示:
~~~
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<style type="text/css" href="style.css"></style>
</head>
<body>
<p class="para">如果沒有一個好的結構</p>
<p class="para2">那么以后可能就是這樣子。。。。</p>
</body>
</html>
~~~
我們需要
~~~
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="para">如果沒有一個好的結構</p>
<p class="para2">那么以后可能就是這樣子。。。。</p>
</body>
</html>
~~~
然后我們有一個像app.js一樣的style.css放在同目錄下，而他的內容便是
~~~
.para{
font-size: 22px;
color:#f00;
text-align: center;
padding-left: 20px;
}
.para2{
font-size:44px;
color:#3ed;
text-indent: 2em;
padding-left: 2em;
}
~~~
這代碼和JS的代碼有如此多的相似
~~~
var para={
font_size:'22px',
color:'#f00',
text_align:'center',
padding_left:'20px',
}
~~~
而22px、20px以及#f00都是數值，因此：
~~~
var para={
font_size:22px,
color:#f00,
text_align:center,
padding_left:20px,
}
~~~
目測差距已經盡可能的小了，至于這些話題會在以后討論到，如果要讓我們的編譯器更正確的工作，那么我們就需要非常多這樣的符號，除非你樂意去理解:
~~~
(dotimes (i 4) (print i))
~~~
總的來說我們減少了符號的使用，但是用lisp便帶入了更多的括號，不過這是一種簡潔的表達方式，也許我們可以在其他語言中看到。
~~~
\d{2}/[A-Z][a-z][a-z]/\d{4}
~~~
上面的代碼，是為了從一堆數據中找出“某日/某月/某年”。如果一開始不理解那是正則表達式，就會覺得那個很復雜。
這門語言可能是為設計師而設計的，但是設計師大部分還是不懂編程的，不過相對來說這門語言還是比其他語言簡單易懂一些。
## 3.4 樣式與目標
如下所示，就是我們的樣式
~~~
.para{
font-size: 22px;
color:#f00;
text-align: center;
padding-left: 20px;
}
~~~
我們的目標就是
~~~
如果沒有一個好的結構
~~~
所以樣式和目標在這里牽手了，問題是他們是如何在一起的呢？下面就是CSS與HTML溝通的重點所在了:
### 3.4.1 選擇器
我們用到的選擇器叫做類選擇器，也就是class，或者說應該稱之為class選擇器更合適。與類選擇器最常一起出現的是ID選擇器，不過這個適用于比較高級的場合，諸如用JS控制DOM的時候就需要用到ID選擇器。而基本的選擇器就是如下面的例子:
~~~
p.para{
color:#f0f;
}
~~~
將代碼添加到style.css的最下面會發現“如果沒有一個好的結構”變成了粉紅色，當然我們還會有這樣的寫法
~~~
p>.para{
color:#f0f;
}
~~~
為了產生上面的特殊的樣式，雖然不好看，但是我們終于理解什么叫層疊樣式了，下面的代碼的重要度比上面高，也因此有更高的優先規則。
而通常我們可以通過一個
~~~
p{
text-align:left;
}
~~~
這樣的元素選擇器來給予所有的p元素一個左對齊。
還有復雜一點的復合型選擇器，下面的是HTML文件
~~~
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="para">如果沒有一個好的結構</p>
<div id="content">
<p class="para2">那么以后可能就是這樣子。。。。</p>
</div>
</body>
</html>
~~~
還有CSS文件
~~~
.para{
font-size: 22px;
color:#f00;
text-align: center;
padding-left: 20px;
}
.para2{
font-size:44px;
color:#3ed;
text-indent: 2em;
padding-left: 2em;
}
p.para{
color:#f0f;
}
div#content p {
font-size:22px;
}
~~~
## 3.5 更有趣的CSS
一個包含了para2以及para_bg的例子
~~~
<div id="content">
<p class="para2 para_bg">那么以后可能就是這樣子。。。。</p>
</div>
~~~
我們只是添加了一個黑色的背景
~~~
.para_bg{
background-color:#000;
}
~~~
重新改變后的網頁變得比原來有趣了很多，所謂的繼承與合并就是上面的例子。
我們還可以用CSS3做出更多有趣的效果，而這些并不在我們的討論范圍里面，因為我們討論的是be a geek。
或許我們寫的代碼都是那么的簡單，從HTML到Javascript，還有現在的CSS，只是總有一些核心的東西，而不是去考慮那些基礎語法，基礎的東西我們可以在實踐的過程中一一發現。但是我們可能發現不了，或者在平時的使用中考慮不到一些有趣的用法或者說特殊的用法，這時候可以通過觀察一些精致設計的代碼中學習到。復雜的東西可以變得很簡單，簡單的東西也可以變得很復雜。
