# 無處不在的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,只是總有一些核心的東西,而不是去考慮那些基礎語法,基礎的東西我們可以在實踐的過程中一一發現。但是我們可能發現不了,或者在平時的使用中考慮不到一些有趣的用法或者說特殊的用法,這時候可以通過觀察一些精致設計的代碼中學習到。復雜的東西可以變得很簡單,簡單的東西也可以變得很復雜。