4.3 代碼結(jié)構(gòu)
對于我們的上面的Red示例來說，如果沒有一個好的結(jié)構(gòu)，那么以后可能就是這樣子。
如果沒有一個好的結(jié)構(gòu)
那么以后可能就是這樣子。。。。
雖然我們看到的還是一樣的:
No Style
于是我們就按各種書上的建議重新寫了上面的代碼
如果沒有一個好的結(jié)構(gòu)
那么以后可能就是這樣子。。。。
總算比上面好看也好理解多了，這只是臨時的用法，當(dāng)文件太大的時候，正式一點的寫法應(yīng)該如下所示:
如果沒有一個好的結(jié)構(gòu)
那么以后可能就是這樣子。。。。
我們需要
如果沒有一個好的結(jié)構(gòu)
那么以后可能就是這樣子。。。。
然后我們有一個像app.js一樣的style.css放在同目錄下，而他的內(nèi)容便是
.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都是數(shù)值，因此：
var para={
font_size:22px,
color:#f00,
text_align:center,
padding_left:20px,
}
目測差距已經(jīng)盡可能的小了，至于這些話題會在以后討論到，如果要讓我們的編譯器更正確的工作，那么我們就需要非常多這樣的符號，除非你樂意去理解:
(dotimes (i 4) (print i))
總的來說我們減少了符號的使用，但是用lisp便帶入了更多的括號，不過這是一種簡潔的表達(dá)方式，也許我們可以在其他語言中看到。
\d{2}/[A-Z][a-z][a-z]/\d{4}
上面的代碼，是為了從一堆數(shù)據(jù)中找出“某日/某月/某年”。如果一開始不理解那是正則表達(dá)式，就會覺得那個很復(fù)雜。
這門語言可能是為設(shè)計師而設(shè)計的，但是設(shè)計師大部分還是不懂編程的，不過相對來說這門語言還是比其他語言簡單易懂一些。
4.4 樣式與目標(biāo)
如下所示，就是我們的樣式
.para{
font-size: 22px;
color:#f00;
text-align: center;
padding-left: 20px;
}
我們的目標(biāo)就是
如果沒有一個好的結(jié)構(gòu)
所以樣式和目標(biāo)在這里牽手了，問題是他們是如何在一起的呢?下面就是CSS與HTML溝通的重點所在了:
4.4.1 選擇器
我們用到的選擇器叫做類選擇器，也就是class，或者說應(yīng)該稱之為class選擇器更合適。與類選擇器最常一起出現(xiàn)的是ID選擇器，不過這個適用于比較高級的場合，諸如用JS控制DOM的時候就需要用到ID選擇器。而基本的選擇器就是如下面的例子:
p.para{
color:#f0f;
}
將代碼添加到style.css的最下面會發(fā)現(xiàn)“如果沒有一個好的結(jié)構(gòu)”變成了粉紅色，當(dāng)然我們還會有這樣的寫法
p>.para{
color:#f0f;
}
為了產(chǎn)生上面的特殊的樣式，雖然不好看，但是我們終于理解什么叫層疊樣式了，下面的代碼的重要度比上面高，也因此有更高的優(yōu)先規(guī)則。
而通常我們可以通過一個
p{
text-align:left;
}