還有復(fù)雜一點(diǎn)的復(fù)合型選擇器,下面的是HTML文件
如果沒(méi)有一個(gè)好的結(jié)構(gòu)
那么以后可能就是這樣子。。。。
還有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;
}
4.5 更有趣的CSS
一個(gè)包含了para2以及para_bg的例子
那么以后可能就是這樣子。。。。
我們只是添加了一個(gè)黑色的背景
.para_bg{
background-color:#000;
}
重新改變后的網(wǎng)頁(yè)變得比原來(lái)有趣了很多,所謂的繼承與合并就是上面的例子。
我們還可以用CSS3做出更多有趣的效果,而這些并不在我們的討論范圍里面,因?yàn)槲覀冇懻摰氖莃e a geek。
或許我們寫的代碼都是那么的簡(jiǎn)單,從HTML到Javascript,還有現(xiàn)在的CSS,只是總有一些核心的東西,而不是去考慮那些基礎(chǔ)語(yǔ)法,基礎(chǔ)的東西我們可以在實(shí)踐的過(guò)程中一一發(fā)現(xiàn)。但是我們可能發(fā)現(xiàn)不了,或者在平時(shí)的使用中考慮不到一些有趣的用法或者說(shuō)特殊的用法,這時(shí)候可以通過(guò)觀察一些精致設(shè)計(jì)的代碼中學(xué)習(xí)到。復(fù)雜的東西可以變得很簡(jiǎn)單,簡(jiǎn)單的東西也可以變得很復(fù)雜。
5 無(wú)處不在的三劍客
這時(shí)我們終于了解了我們的三劍客,他們也就這么可以結(jié)合到一起了,HTML+Javascript+CSS是這一切的基礎(chǔ)。而我們用到的其他語(yǔ)言如PHP、Python、Ruby等等到最后都會(huì)變成上面的結(jié)果,當(dāng)然還有Coffeescript之類的語(yǔ)言都是以此為基礎(chǔ),這才是我們需要的知識(shí)。
5.1 Hello,Geek
有了一些些基礎(chǔ)之后,我們終于能試著去寫一些程序了。也是時(shí)候去創(chuàng)建一個(gè)像樣的東西,或許你在一些界面設(shè)計(jì)方面的書(shū)籍看過(guò)類似的東西,可能我寫得也沒(méi)有那些內(nèi)容好,只是這些都是一些過(guò)程。過(guò)去我們都是一點(diǎn)點(diǎn)慢慢過(guò)來(lái)的,只是現(xiàn)在我們也是如此,技術(shù)上的一些東西,事實(shí)上大家都是知道的。就好比我們都覺(jué)得我們可以開(kāi)個(gè)超市,但是如果讓我們?nèi)ラ_(kāi)超市的話,我們并不一定能賺錢。
學(xué)習(xí)編程的目的可能不在于我們能找到一份工作,那只是在編程之外的東西,雖然確實(shí)也是很確定的。但是除此之處,有些東西也是很重要的。
過(guò)去總是不理解為什么會(huì)一些人會(huì)不厭其煩地去回答別人的問(wèn)題,有時(shí)候可能會(huì)想是一種能力越大責(zé)任越大的感覺(jué),但是有時(shí)候在寫一些博客或者回答別人的問(wèn)題的時(shí)候我們又重新思考了這些問(wèn)題,又重新學(xué)習(xí)了這些技能。所以這里可能說(shuō)的不是關(guān)于編程的東西而是一些編程以外的東西,關(guān)于學(xué)習(xí)或者學(xué)習(xí)以外的東西。
5.2 從源碼學(xué)習(xí)
過(guò)去總覺(jué)得學(xué)了一種語(yǔ)言的語(yǔ)法便算是學(xué)會(huì)了一種語(yǔ)言,直到有一天接觸運(yùn)用該語(yǔ)言的項(xiàng)目的時(shí)候,雖然也會(huì)寫上幾行代碼,但是卻不像這種語(yǔ)言的風(fēng)格。于是這也是這一篇的意義所在了:
5.3 瀏覽器渲染過(guò)程
基本的渲染引擎的過(guò)程如下圖所示:

flow
解析HTML去構(gòu)建DOM樹(shù)
渲染樹(shù)形結(jié)構(gòu)
生成渲染的樹(shù)形圖布局
繪制樹(shù)形圖
對(duì)于Webkit瀏覽器來(lái)說(shuō),他的過(guò)程如下所示:

webkitflow
5.3.1 HTML
寫好HTML的一個(gè)要點(diǎn)在于讀別人寫的代碼,這只是一方面,我們所說(shuō)的HTML方面的內(nèi)容可能不夠多,原因有很多,很多東西都需要在實(shí)戰(zhàn)中去解決。讀萬(wàn)卷書(shū)和行萬(wàn)里路,分不清哪個(gè)有重要的意義,但是如果可以同時(shí)做好兩個(gè)的話,成長(zhǎng)會(huì)更快的。
寫好HTML應(yīng)該會(huì)有下面的要點(diǎn)