兩天學(xué)會CSS+DIV.doc

【基礎(chǔ)一】DIV+CSS的叫法是不準(zhǔn)確的我想凡是來到“CSS學(xué)習(xí)網(wǎng)”的同學(xué)，很大部分是沖著DIV+CSS來的，目的就是學(xué)習(xí)DIV+CSS的，說的再直接一些就是學(xué)習(xí)如何用DIV+CSS布局頁面，如何從一張圖片制作成標(biāo)準(zhǔn)的DIV+CSS頁面。 如果你看完第一段還沒有發(fā)現(xiàn)錯誤的話，那你就很有必要，接著往下看。 DIV+CSS這種叫法其實(shí)是一種很錯誤的叫法，這是國人一廂情愿的叫法，而標(biāo)準(zhǔn)的叫法是什么呢？呵呵，沒錯，是xHTML+CSS，不理解吧，我來細(xì)細(xì)給你說，如果下面的你能理解，保證面試的時候會有很大的幫助，同時也可以讓你后面的學(xué)習(xí)更輕松。 為什么國人將這種頁面布局的方法叫做DIV+CSS？ 因?yàn)檫^去布局頁面基本上都是用Table布局，也可以說是Table+CSS，而現(xiàn)在布局頁面呢，用DIV，所以叫DIV+CSS，聽起來也挺合理，認(rèn)為這樣布局出來的頁面也就是標(biāo)準(zhǔn)頁面，甚至有些人走了個極端，看到其他網(wǎng)站用到Table，就會嘲笑頁面做的不夠標(biāo)準(zhǔn)，好似用不用Table成為了頁面是否標(biāo)準(zhǔn)的一個標(biāo)尺。現(xiàn)在我可以告訴大家，凡是有著這種行為的，都學(xué)得不咋樣，很皮毛！ 用了Table頁面就不標(biāo)準(zhǔn)了?!純粹無稽之談，那什么才是標(biāo)準(zhǔn)頁面呢？先看一個專業(yè)概念，WEB標(biāo)準(zhǔn)，然后我會問三個問題，你來回答：WEB標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如W3C DOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA（European Computer Manufacturers Association）的ECMAScript標(biāo)準(zhǔn)?？疵靼琢藳]有？問題來了先不要看答案，從上面的概念中找出問題一：WEB標(biāo)準(zhǔn)有幾部分組成？問題二：結(jié)構(gòu)化標(biāo)準(zhǔn)語言是什么？問題三：表現(xiàn)標(biāo)準(zhǔn)語言是什么？答案一：三部分，結(jié)構(gòu)、表現(xiàn)、行為答案二：XHTML和XML答案三：CSS看完上面三個問題，哪什么是標(biāo)準(zhǔn)頁面呢？呵呵，說白了就是按照WEB標(biāo)準(zhǔn)制作的頁面，從第二個問題和第三個問題中，我們又可以說，用XHTML和CSS制作的頁面就是標(biāo)準(zhǔn)頁面，也就是說xHTML+CSS制作的頁面就是標(biāo)準(zhǔn)頁面。怎么樣，理解了吧 為什么不說XML+CSS呢？ 很簡單，因?yàn)閄ML過于復(fù)雜，且當(dāng)前的大部分瀏覽器都不完全支持XML。所以就不用它來布局頁面嘍 既然xHTML+CSS制作頁面就是標(biāo)準(zhǔn)頁面了，又因?yàn)閤HTML中不只有DIV標(biāo)簽，還有span、p、a、ul、li、dl、dt、dd.，即使我不用DIV，用其他標(biāo)簽(比如:ul、li)制作出來的頁面也是標(biāo)準(zhǔn)頁面！所以說用DIV+CSS來制作標(biāo)準(zhǔn)頁面這句話就很狹隘嘍如果滿屏全部都是DIV那也算不上標(biāo)準(zhǔn)頁面，曾經(jīng)由一個朋友告訴我，說他的頁面全部用的DIV，每個模塊，每個功能區(qū)域，就連一條線都是純DIV實(shí)現(xiàn)，并且相當(dāng)自豪的告訴我，沒有人比他做的頁面更標(biāo)準(zhǔn)的了，他不但對WEB標(biāo)準(zhǔn)頁面的理解有差錯還犯了一個很大的錯誤，xHTML中的每一個標(biāo)簽都有其作用，各司其職，各守其責(zé)，要用的恰到好處，這才算是標(biāo)準(zhǔn)頁面，DIV不是萬能的喲！說到這里大家應(yīng)該明白，這種Web2.0時代的布局頁面的方法，叫DIV+CSS是不準(zhǔn)確的，應(yīng)該叫xHTML+CSS。 凡是看到這節(jié)的同學(xué)們，以后盡可能說xHTML+CSS，不要再說DIV+CSS嘍，如果非要說，也要加上一句說明喲，比如面試官：你對DIV+CSS了解么？應(yīng)聘者：DIV+CSS準(zhǔn)確的說應(yīng)該叫xHTML+CSS，我對這種頁面布局方法非常了解！如果你是面試官，你對這個應(yīng)聘者，感覺如何呢？呵呵呵【基礎(chǔ)二】使用Table布局是不明智的大家看到標(biāo)題，不要誤解認(rèn)為在頁面中不能使用Table，而是可以使用Table，但是盡量不要用Table去布局頁面，為什么這么說呢，因?yàn)槭褂肨able布局頁面會使頁面失去靈活性，怎么個靈活法呢，比如今天你好不容易做出來的頁面，第二天老板說我不喜歡登錄模塊放到右邊，還是放到左邊，通知板塊放到右側(cè)去，頁面風(fēng)格最好一個月?lián)Q一種，如果遇到這種老板，提出這種要求，并且你的頁面是用Table布局的，那么你會崩潰的，工作量那是大大滴，如果不相信的話，你們自己可以找個頁面，用Table布局出來，然后變換板塊和風(fēng)格，你就會體會到Table布局的不靈活性，這是為什么呢，因?yàn)門able的誕生是為存儲數(shù)據(jù)用的，功能和Execel差不多，不是用來布局用的，只不過后來大家發(fā)現(xiàn)用Table可以把想放的頁面元素，比如圖片，放到任何自己想放的地方，且做出來的頁面可以兼容多種瀏覽器，于是Table就承擔(dān)起了布局頁面的重?fù)?dān)，這一做就是好幾年. .直到Web2.0時代的到來，Table才從布局頁面的工作中逐漸解脫，專心的去存儲數(shù)據(jù)_ 既然Table是為存儲數(shù)據(jù)誕生的，那誰的誕生是為了頁面布局呢？ 答案就是:DIV，DIV就是為布局頁面而誕生的，只不過一直不被人認(rèn)同，原因就是DIV去布局頁面需要CSS的配合，使用比較繁瑣，還不如Table拖拖拽拽頁面就布局OK了，感覺還不如Table方便，從而DIV被人們放置在一個無人問津的昏暗角落里，暗暗的等待著伯樂的出現(xiàn)，直到2003年美國加州Scott Design公司參加了在舊金山舉辦的有關(guān)網(wǎng)頁排版和設(shè)計的一個研討會上的演講，使DIV看到了陽光，走出了陰霾. . 說了那么多，我們對比一下Table布局頁面和DIV布局頁面的優(yōu)缺點(diǎn)使用表格進(jìn)行頁面布局會帶來很多問題：* 把格式數(shù)據(jù)混入你的內(nèi)容中。這使得文件的大小無謂地變大，而用戶訪問每個 頁面時都必須下載一次這樣的格式信息,帶寬并非免費(fèi)。* 這使得重新設(shè)計現(xiàn)有的站點(diǎn)和內(nèi)容極為消耗勞力 (且昂貴)。* 這還使我們保持整個站點(diǎn)的視覺的一致性極難，花費(fèi)也極高。* 基于表格的頁面還大大降低了它對殘疾人和用手機(jī)或 PDA 瀏覽者的親和力。 而使用CSS進(jìn)行網(wǎng)頁布局，它會：* 使你的頁面載入得更快* 降低你的流量費(fèi)用* 讓你在修改設(shè)計時更有效率而代價更低* 幫助你的整個站點(diǎn)保持視覺的一致性* 讓你的站點(diǎn)可以更好地被搜索引擎找到* 使你的站點(diǎn)對瀏覽者和瀏覽器更具親和力* 在世界上越來越多人采用 Web 標(biāo)準(zhǔn)時，它還能 提高你的職場競爭實(shí)力 (事實(shí)上也就是降低失業(yè)的風(fēng)險)。網(wǎng)上有一篇文章，轉(zhuǎn)過來，文章著重介紹DIV三點(diǎn)優(yōu)勢,也許看完文章后，就像社區(qū)元老heflyaway說的感覺作者比較迷戀Table，每篇文章都不可避免的帶有個人色彩，而轉(zhuǎn)出來的目的，其實(shí)就是想給大家降降DIV+CSS的溫度，免得“走火入魔”，視DIV+CSS是為萬能的，如果想學(xué)好CSS布局頁面，就要從多個方面看它，好了，不多說了，下面是作者對CSS布局頁面的三點(diǎn)優(yōu)勢及理解：1、內(nèi)容和形式分離，網(wǎng)頁前臺只需要顯示內(nèi)容就行，形式上的美工交給CSS來處理。生成的HTML文件代碼精簡，更小打開更快。2、改版網(wǎng)站更簡單容易了，不用重新設(shè)計排版網(wǎng)頁，甚至于不用動原網(wǎng)站的任何HTML和程序頁面，只需要改動CSS文件就完成了所有改版。對于門戶網(wǎng)站來說改版就像換件衣服一樣簡單容易。3、搜索引擎更友好，排名更容易靠前。第一點(diǎn)、內(nèi)容和形式分離網(wǎng)頁前臺只需要顯示內(nèi)容就行，形式上的美工交給CSS來處理。生成的HTML文件代碼精簡，更小打開更快。這個是DIV+CSS技術(shù)最顯著的特點(diǎn)，也是CSS存在的根源。完全的顛覆現(xiàn)在傳統(tǒng)（table）網(wǎng)頁設(shè)計的技術(shù)。所有現(xiàn)在用table制作的內(nèi)容，都可以用CSS來解決掉，而且解決的更完美，更強(qiáng)大。不需要大家再表格套表格，讓生成的網(wǎng)頁文件大小更精簡，更小。table時代，一個頁面表格達(dá)到10個以上是非常普遍的事情，但是現(xiàn)在用DIV+CSS，一個table都可以不用，就完全達(dá)到之前的效果，這就直接導(dǎo)致網(wǎng)頁文件大小比使用table時減少50%-80%，更節(jié)約各位站長的硬盤空間，訪問者打開網(wǎng)頁時更快，而且用div+CSS時，不像以往使用table時，必須把全部table讀取完了才顯示頁面內(nèi)容，現(xiàn)在是可以讀一個div就顯示一個效果，大家打開網(wǎng)頁不用等。好處真是明顯而強(qiáng)大。這個優(yōu)點(diǎn)的確是顯著的，凡是使用傳統(tǒng)table建的網(wǎng)頁，內(nèi)容多的話，有時候達(dá)到30K左右都有可能，文件打了打開時，肯定就有0.0幾秒的延遲。使用DIV+CSS，你前臺打開看到的全是直接內(nèi)容，CSS文件都是導(dǎo)入鏈接的，是另一個文件，根本和HTML文件大小沒關(guān)系，這種生成的HTML文件，一個也就10K左右大小。 第二點(diǎn)，改版網(wǎng)站更簡單容易了不用重新設(shè)計排版網(wǎng)頁，甚至于不用動原網(wǎng)站的任何HTML和程序頁面，只需要改動CSS文件就完成了所有改版。DIV+CSS對于門戶網(wǎng)站來說改版就像換件衣服一樣簡單容易，改版時，不用改動全站HTML頁面，只需要重新寫CSS，再用新CSS覆蓋以前的CSS就可以實(shí)現(xiàn)改版了。方便吧。 第三點(diǎn)，搜索引擎更友好，確實(shí)能夠?qū)EO起到一定的幫助。通過DIV+CSS對網(wǎng)頁的布局，可以讓一些重要的鏈接、文字信息，優(yōu)先讓搜索引擎蜘蛛爬取。這對于SEO也有幫助。綜上所述，個人感覺DIV+CSS不能太迷信它的很好很強(qiáng)大，它作為制作網(wǎng)頁，美化網(wǎng)頁的一個重要輔助是很強(qiáng)大方便的?？梢詮浹a(bǔ)table制作框架和表格時的很多不足和美工上的缺點(diǎn)，但是完全只用它來做，太費(fèi)時費(fèi)力，對于全國中小型網(wǎng)站長來說，真的不太適合。我個人覺得用table+DIV+CSS是最好的組合，也是最省時省力的辦法。還需要再說明一下，本節(jié)講得是Table布局頁面和CSS布局頁面的問題，討論的是“布局頁面”上用誰更好，并不是說在CSS布局的頁面內(nèi)不能用Table，真正厲害的人物是DIV、Table、CSS用得恰到好處，他們?nèi)齻€各做各的事情，DIV布局頁面，Table存儲數(shù)據(jù)，CSS給頁面穿衣服！【基礎(chǔ)三】xHTML+CSS與SEO網(wǎng)頁制作Webjx文章簡介：xHTML+CSS與SEO的內(nèi)容，后面章節(jié)會詳細(xì)給大家介紹，這里就先說一些，讓大家對xHTML+CSS與SEO有一定的認(rèn)識，為后面制作頁面打基礎(chǔ)，畢竟我們做出來的頁面還是要給搜索引擎看的，所以不能不提提xHTML+CSS與SEO的關(guān)系。xHTML+CSS與SEO的內(nèi)容，后面章節(jié)會詳細(xì)給大家介紹，這里就先說一些，讓大家對xHTML+CSS與SEO有一定的認(rèn)識，為后面制作頁面打基礎(chǔ)，畢竟我們做出來的頁面還是要給搜索引擎看的，所以不能不提提xHTML+CSS與SEO的關(guān)系。1)將頁面中最重要的內(nèi)容用h1標(biāo)簽括起來，h1的內(nèi)容就和頁面title很自然的包含了站點(diǎn)或者頁面的核心關(guān)鍵詞，搜索引擎很重視h1標(biāo)簽的內(nèi)容喲2)合理的運(yùn)用h2、h3等標(biāo)題標(biāo)簽，他們對于頁面來說就是文章不同的等級或者不同的功能區(qū)域的標(biāo)志性元素3)頁面meta信息不可忽視，一定要包含頁面核心的內(nèi)容4)為了便于搜索引擎更方便的抓取，要盡可能的保證HTML頁面代碼純凈，強(qiáng)調(diào)一下，既然是xHTML+CSS布局頁面，所以CSS代碼要單獨(dú)寫在一個文件內(nèi)，保證CSS部分和HTML部分徹底分離；html頁面中使用id和class，盡可能的避免style=;盡量使用標(biāo)準(zhǔn)的CSS命名規(guī)范，從這里就可以看出你這個頁面重構(gòu)師是否專業(yè)喲；盡量使用CSS的縮寫以節(jié)省代碼，例如padding:10px 20px 10px 20px;縮寫為padding:10px 20px;最好不要在HTML頁面用font、center這種標(biāo)簽。5)在HTML頁面中strong標(biāo)簽是可以使用的，可以進(jìn)一步強(qiáng)化關(guān)鍵詞和相應(yīng)的文字信息。6)頁面中的javascript代碼會對搜索引擎分析頁面內(nèi)容產(chǎn)生干擾，可以將javascript代碼封裝在一個.js文件中外部調(diào)用。7)盡可能的加入alt注釋，因?yàn)榘俣群蚲oogle都有搜索圖片的功能，如果加了alt，就更方便搜索蜘蛛的爬行，搜索相應(yīng)關(guān)鍵詞，就可能出現(xiàn)你網(wǎng)站上的圖片，點(diǎn)擊圖片不就進(jìn)入你的網(wǎng)站了嘛，就又多了點(diǎn)流量吧?！净A(chǔ)四】CSS如何控制頁面網(wǎng)頁制作Webjx文章簡介：第一：CSS如何控制頁面樣式，有幾種方式；第二：這些方式出現(xiàn)在同一個頁面時的優(yōu)先級。本節(jié)主要講解，兩個內(nèi)容，第一：CSS如何控制頁面樣式，有幾種方式；第二：這些方式出現(xiàn)在同一個頁面時的優(yōu)先級。 使用xHTML+CSS布局頁面，其中有個很重要的特點(diǎn)就是內(nèi)容與表象相分離，內(nèi)容指HTML頁面代碼，表象就是CSS代碼了，如果把頁面看成穿著衣服的人的話，人就是HTML，是內(nèi)容，而衣服呢就是CSS，是表象，現(xiàn)在出現(xiàn)的問題是，如何讓CSS去控制頁面？或者說，如何讓衣服穿在人身上，好體現(xiàn)出人得風(fēng)格特點(diǎn)；不同的CSS就可以使頁面出現(xiàn)不同的風(fēng)格適用不同的網(wǎng)站，而不同的衣服，人穿上后就會體現(xiàn)出不同的職業(yè)。第一：如何讓CSS去控制HTML頁面效果呢？有這么4種方式，行內(nèi)方式、內(nèi)嵌方式、鏈接方式、導(dǎo)入方式1）行內(nèi)方式 行內(nèi)方式是4種樣式中最直接最簡單的一種，直接對HTML標(biāo)簽適用style=，例如： 1. 雖然這種方法比較直接，在制作頁面的時候需要為很多的標(biāo)簽設(shè)置style屬性，所以會導(dǎo)致HTML頁面不夠純凈，文件體積過大，不利于搜索蜘蛛爬行，從而導(dǎo)致后期維護(hù)成本高。2）內(nèi)嵌方式 內(nèi)嵌方式就是將CSS代碼寫在之間，并且用進(jìn)行聲明，例如： 1. 2. 3. 4. 5. 無標(biāo)題文檔6. 7. 11. 12. 13. 14. 15. 全國的CSS愛好者匯聚于此，如果不來，你就OUT嘍我們的口號是：16. “分享自己的歡樂與痛苦，分享自己的經(jīng)驗(yàn)與心得，分享自己的資料與資源”17. 如果您也愿意，就加入我們吧 18. 19. 內(nèi)嵌方式，大家應(yīng)該也能意識到，即使有公共CSS代碼，也是每個頁面都要定義的，如果一個網(wǎng)站有很多頁面，每個文件都會變大，后期維護(hù)也大，如果文件很少，CSS代碼也不多，這種方式還是很不錯的。3）鏈接方式 鏈接方式是使用頻率最高，最實(shí)用的方式，只需要在之間加上 1. ，就可以了，這種方式將HTML文件和CSS文件徹底分成兩個或者多個文件，實(shí)現(xiàn)了頁面框架HTML代碼與美工CSS代碼的完全分離，使得前期制作和后期維護(hù)都十分方便，并且如果要保持頁面風(fēng)格統(tǒng)一，只需要把這些公共的CSS文件單獨(dú)保存成一個文件，其他的頁面就可以分別調(diào)用自身的CSS文件，如果需要改變網(wǎng)站風(fēng)格，只需要修改公共CSS文件就OK了，相當(dāng)?shù)姆奖悖@才是我們xHTML+CSS制作頁面提倡的方式。HTML代碼 1. 2. 3. 4. 5. 無標(biāo)題文檔6. 7. 8. 9. 10. 全國的CSS愛好者匯聚于此，如果不來，你就OUT嘍我們的口號是：11. “分享自己的歡樂與痛苦，分享自己的經(jīng)驗(yàn)與心得，分享自己的資料與資源”12. 如果您也愿意，就加入我們吧 13. 14. CSS代碼 1. #div1width:64px; height:64px; float:left;2. #div1 imgwidth:64px; height:64px; 4)導(dǎo)入方式導(dǎo)入樣式和鏈接樣式比較相似，采用import方式導(dǎo)入CSS樣式表，在HTML初始化時，會被導(dǎo)入到HTML文件中，成為文件的一部分，類似第二種內(nèi)嵌方式。具體導(dǎo)入樣式和鏈接樣式有什么區(qū)別，可以參看這篇文章CSS:import與link的具體區(qū)別，不過我還是建議大家用鏈接方式！第二：四種樣式的優(yōu)先級 如果這上面的四種方式中的兩種用于同一個頁面后，就會出現(xiàn)優(yōu)先級的問題，這里我就不再舉例子來說明了，大家在下面自己證明一下下面的結(jié)論四種樣式的優(yōu)先級別是(從高至低)：行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式、導(dǎo)入樣式?！净A(chǔ)五】CSS選擇器網(wǎng)頁制作Webjx文章簡介：上節(jié)課我們講了一下CSS通過什么方式去控制頁面，如果不記得，我來幫大家回憶一下，總共有四種方式行內(nèi)方式、內(nèi)嵌方式、鏈接方式、導(dǎo)入方式，大家通過這四種方式就可以實(shí)現(xiàn)CSS對HTML頁面樣式的控制，如果要讓這些樣式對HTML頁面中的元素實(shí)現(xiàn)一對一，一對多或者多對一的控上節(jié)課我們講了一下CSS通過什么方式去控制頁面，如果不記得，我來幫大家回憶一下，總共有四種方式行內(nèi)方式、內(nèi)嵌方式、鏈接方式、導(dǎo)入方式，大家通過這四種方式就可以實(shí)現(xiàn)CSS對HTML頁面樣式的控制，如果要讓這些樣式對HTML頁面中的元素實(shí)現(xiàn)一對一，一對多或者多對一的控制，這就需要用到CSS選擇器，HTML頁面中的元素就是通過CSS選擇器進(jìn)行控制的。CSS選擇器共有三種：標(biāo)簽選擇器、ID選擇器、類選擇器。為了后面的對選擇器的解釋更容易理解，在這里先打個比喻，如果把你所處的環(huán)境視為HTML頁面的話，環(huán)境里的每一個人則相當(dāng)于HTML頁面內(nèi)標(biāo)簽元素，每個人都有一個ID(身份證)，那么html中的每一個標(biāo)簽也都有自己的ID，大家都知道ID是唯一的，不可能重復(fù)?！緲?biāo)簽選擇器】一個完整的HTML頁面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽采用相應(yīng)的CSS樣式，(在大環(huán)境中你可能出于不同的位置，但是不管怎么樣，你總是穿著同一套衣服，這件衣服就是由標(biāo)簽選擇器事先給你限定好的，不管走到哪里都是這身衣服)比如，在style.css文件中對p標(biāo)簽樣式的聲明如下： 1. p2. font-size:12px;3. background:#900;4. color:090;5. 則頁面中所有p標(biāo)簽的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)，這在后期維護(hù)中，如果想改變整個網(wǎng)站中p標(biāo)簽背景的顏色，只需要修改background屬性就可以了，就這么容易！【ID選擇器】ID選擇器在某一個HTML頁面中只能使用一次(當(dāng)然也可以用好幾次，不過就不符合W3C標(biāo)準(zhǔn)了，那頁面也就不是標(biāo)準(zhǔn)頁面嘍，咱們的目的不就是為了做標(biāo)準(zhǔn)的頁面么，所以建議大家不要在同一個html頁面中多個標(biāo)簽擁有共同的ID)，就像在你所處的環(huán)境中，你只有一個ID(身份證)，不可能重復(fù)！相信大家也能看出來，ID選擇器更具有針對性，如：先給某個HTML頁面中的某個p標(biāo)簽起個ID，代碼如下： 1. 此處為p標(biāo)簽內(nèi)的文字 在CSS中定義ID為one的p標(biāo)簽的屬性，就需要用到#，代碼如下： 1. #one2. font-size:12px;3. background:#900;4. color:090;5. 這樣頁面中的某個p就會是CSS中定義的樣式。【類選擇器】這種選擇器更容易理解了，就是使頁面中的某些標(biāo)簽(可以是不同的標(biāo)簽)具有相同的樣式，就像國慶中某個方陣中，肯定都是不同的人，卻均穿紅色衣服，手中高舉花環(huán)，樣式都是一樣的，如果想讓這一類人都有共同的樣式，該怎么做呢呵呵，和ID選擇器的用法類似，只不過把id換做class，如下： 1. 此處為p標(biāo)簽內(nèi)的文字 如果我還想讓div標(biāo)簽也有相同的樣式，怎么辦呢？加上同樣的class就可以了，如下 1. 此處為p標(biāo)簽內(nèi)的文字 這樣頁面中凡是加上class=one的標(biāo)簽，樣式都是一樣的嘍CSS定義的時候和ID選擇器差不多，只不過把#換成.，如下 1. .one2. font-size:12px;3. background:#900;4. color:090;5. 補(bǔ)充:一個標(biāo)簽可以有多個類選擇器的值，不同的值用空格分開，如： 1. 此處為p標(biāo)簽內(nèi)的文字 這樣我們可以將多個樣式用到同一個標(biāo)簽中，當(dāng)然也可以，ID和class一塊用 1. 此處為p標(biāo)簽內(nèi)的文字2. 【通用選擇器】到這里，前三種基本的選擇器說完了，但是還需要給大家介紹一個CSS選擇器中功能最強(qiáng)大但是用的最少的一種選擇器“通用選擇器” 1. *此處為CSS代碼 強(qiáng)大之處是因?yàn)樗麑Ω讣壷械乃蠬TML標(biāo)簽進(jìn)行樣式定義，可對具有共同樣式的標(biāo)簽樣式進(jìn)行定義(有點(diǎn)小學(xué)數(shù)學(xué)中的提取公因式)，這樣可以大大精簡代碼；既然有這么強(qiáng)大的功能為什么是用的最少呢，同樣還是因?yàn)樗膹?qiáng)大，他是對父級元素內(nèi)的所有標(biāo)簽進(jìn)行定義，所以只要你定義了，那么父級里面的所有的標(biāo)簽，甭管有沒有必要，也都相當(dāng)于加上了通用選擇器里面的代碼了，能這么說大家不能夠完全理解，沒關(guān)系，我給大家舉個例子，請看下面 1. 2. 3. 4. 5. 無標(biāo)題文檔6. 7. 13. 14. 15. 16. 17. 這里是p標(biāo)簽區(qū)域18. 這里是a標(biāo)簽區(qū)域19. 20. 21. 這里是p標(biāo)簽區(qū)域22. 這里是a標(biāo)簽區(qū)域23. 24. 25. 大家運(yùn)行一下上面的例子，div1里面的兩個標(biāo)簽是不是樣式一樣，這就是通用選擇器的強(qiáng)大之處，不管里面有多少個標(biāo)簽都會將樣式加到所有標(biāo)簽內(nèi)，如果div1里面得所有的標(biāo)簽都有一部分相同的CSS代碼，那么可以把這部分代碼提取出來，用通用選擇器來定義，這樣可以大大縮減代碼，但是如果div1里面只要有一個和其他元素沒有相同的代碼，就不能用通用選擇器來定義，這也就是CSS通用選擇器不靈活的一點(diǎn)?，F(xiàn)在大家明白為什么通用選擇器是選擇器里面功能最強(qiáng)大的但又是用的最少的選擇器了吧呵呵對于通用選擇器還有一個不得不提的用法，就是為了保證作出的頁面能夠兼容多種瀏覽器，所以要對HTML內(nèi)的所有的標(biāo)簽進(jìn)行重置，會將下面的代碼加到CSS文件的最頂端 1. *margin:0; padding:0; 為什么要這么用呢，因?yàn)槊糠N瀏覽器都自帶有CSS文件，如果一個頁面在瀏覽器加載頁面后，發(fā)現(xiàn)沒有CSS文件，那么瀏覽器就會自動調(diào)用它本身自帶的CSS文件，但是不同的瀏覽器自帶的CSS文件又都不一樣，對不同標(biāo)簽定義的樣式不一樣，如果我們想讓做出的頁面能夠在不同的瀏覽器顯示出來的效果都是一樣的，那么我們就需要對對HTML標(biāo)簽重置，就是上面的代碼了，但是這樣也有不好的地方，因?yàn)镠TML4.01中有89個標(biāo)簽，所以相當(dāng)于在頁面加載CSS的時候，先對這89個標(biāo)簽都加上了margin:0; padding:0;，在這里我不建議大家這么做，因?yàn)?9個標(biāo)簽中需要重置的標(biāo)簽是很少數(shù)，沒有必要將所有的標(biāo)簽都重置，需要哪些標(biāo)簽重置就讓哪些標(biāo)簽重置就可以了，如下 1. body,div,p,a,ul,limargin:0; padding:0; 如果還需要dl、dt、dd標(biāo)簽重置，那就在上面加上就可以了，如下 1. body,div,p,a,ul,li,dl,dt,ddmargin:0; padding:0; 用到那些就寫那些，這點(diǎn)也可以看做衡量頁面重構(gòu)師制作頁面水平的高低，以及是否專業(yè)的一個方面到這里大家更應(yīng)該明白這句話“通用選擇器是功能最強(qiáng)大但是用的最少的選擇器”了吧_OK！選擇器的內(nèi)容我向大家應(yīng)該都明白了，后面就繼續(xù)講解一下“選擇器的集體聲明”和“選擇器的嵌套”【選擇器的集體聲明】在我們使用選擇器的時候，有些標(biāo)簽樣式是一樣的，或者某些標(biāo)簽都有共同的樣式屬性，我們可以將這些標(biāo)簽集體聲明，不同的標(biāo)簽用“,”分開，比如： 1. h1,h2,h3,h4,h5,h6color:#900; 1. #one,#three,.yellowfont-size:14px;2. #onebackground:#ccc;3. #threebackground:#ccc;4. .yellowbackground:#ccc; 和小學(xué)的提取公因式差不多，把共同的部分提取出來，這么做的好處，相同的部分共同定義，不同的部分單獨(dú)定義，保證風(fēng)格統(tǒng)一，樣式修改靈活，這也是優(yōu)化CSS代碼的一塊，要記住喲【選擇器的嵌套】選擇器也是可以嵌套的，如： 1. #div1 p acolor:#900;/*意思是在ID為div12. 內(nèi)的p標(biāo)簽內(nèi)的鏈接a標(biāo)簽的文字顏色為紅色*/ 這樣的好處就是不需要在單獨(dú)的為ID為div1的標(biāo)簽內(nèi)的p標(biāo)簽內(nèi)的a標(biāo)簽單獨(dú)定義class選擇器或者ID選擇器，CSS代碼不就少了嘛同樣也是CSS代碼優(yōu)化的一塊。到這里，基本的選擇器說完了，但是還需要給大家介紹一個“通用選擇器” 1. *此處為CSS代碼 好，這節(jié)課主要講解了三種CSS代碼選擇器、選擇器的聲明、選擇器的嵌套三塊知識，要掌握好，如果有不懂，可以留言。【基礎(chǔ)六】CSS選擇器命名及常用命名網(wǎng)頁制作Webjx文章簡介：關(guān)于CSS命名法，和其他的程序命名差不多，也是有三種：駱駝命名法，帕斯卡命名法，匈牙利命名法。規(guī)范的命名也是Web標(biāo)準(zhǔn)中的重要一項(xiàng)，標(biāo)準(zhǔn)的命名可以更好的看懂代碼，我想大家應(yīng)該都有這種經(jīng)歷，某日翻出自己過去寫的代碼居然看不懂了，呵呵，為了避免這種情況我們就要規(guī)范化命名，再說了，現(xiàn)在一個項(xiàng)目不是一個人就可以完成的，是需要大家互相合作的，如果沒有規(guī)范化命名，別人就無法看懂你的代碼，大大降低了工作效率，所以必須規(guī)范化命名，這樣還顯著咱專業(yè)！好了不多說了，關(guān)于CSS命名法，和其他的程序命名差不多，也是有三種：駱駝命名法，帕斯卡命名法，匈牙利命名法?！抉橊劽ā空f到駱駝大家肯定會想到它那明顯的特征，背部的隆起，一高一低的，我們的命名也要這樣一高一低，怎么才能這樣，就用大小寫字母唄，大寫的英文就相當(dāng)于駱駝背部的凸起，小寫的就是凹下去的地方了，但是這個也是有規(guī)則的，就是第一個字母要小寫，后面的詞的第一個字母就要用大寫，如下： 1. #headerBlock2. .navMenuRedButton 【帕斯卡命名法】這種命名法同樣也是大小寫字母混編而成，和駱駝命名法很像，只有一點(diǎn)區(qū)別，就是首字母要大寫，如下 1. #HeaderBlock2. .NavMenuRedButton 【匈牙利命名法】匈牙利命名法，是需要在名稱前面加上一個或多個小寫字母作為前綴，來讓名稱更加好認(rèn)，更容易理解，比如： 1. #head_navigation2. .red_navMenuButton 以上三種，前兩種（駱駝命名法、帕斯卡命名法）在命名CSS選擇器的時候比較常用，當(dāng)然這三種命名法可以混合使用，只需要遵守有一個原則就可以，就是“容易理解，容易認(rèn)，方便協(xié)同工作”就OK了，沒有必要強(qiáng)調(diào)是那種命名法。以下為于頁面模塊的常用命名頭：header 內(nèi)容：content/container尾：footer導(dǎo)航：nav側(cè)欄：sidebar欄目：column頁面外圍控制整體布局寬度：wrapper左右中：left right center登錄條：loginbar標(biāo)志：logo廣告：banner頁面主體：main熱點(diǎn)：hot新聞：news下載：download子導(dǎo)航：subnav菜單：menu子菜單：submenu搜索：search友情鏈接：friendlink頁腳：footer版權(quán)：copyright滾動：scroll內(nèi)容：content到這節(jié)課，都是CSS非?；A(chǔ)的知識，是為了照顧沒有一點(diǎn)基礎(chǔ)的同學(xué)，從下節(jié)課開始，將介紹CSS布局頁面中的很重要的兩個概念，也是必須要掌握的概念，如果不能很好理解的話后面再布局頁面的時候就會出現(xiàn)很多問題。1）盒子模型2）內(nèi)鏈元素VS塊狀元素【基礎(chǔ)七】盒子模型網(wǎng)頁制作Webjx文章簡介：什么是盒子模型？對于初學(xué)者來說，很難說出來，但是對于生活中的盒子大家熟悉吧，哈哈，這里提到的盒子模型你就可以理解成現(xiàn)實(shí)生活中的盒子就可以了，不然怎么能起個名字叫“盒子模型”呢盒子模型，是XHTML+CSS布局頁面中的核心！要想學(xué)會用CSS布局頁面，就首先要理解盒子模型！什么是盒子模型？對于初學(xué)者來說，很難說出來，但是對于生活中的盒子大家熟悉吧，哈哈，這里提到的盒子模型你就可以理解成現(xiàn)實(shí)生活中的盒子就可以了，不然怎么能起個名字叫“盒子模型”呢好！既然和現(xiàn)實(shí)生活中的盒子一樣，那我們想一下，生活中的盒子內(nèi)部是不是空的好用來存放東西，而里面存放東西的區(qū)域我們給他起個名字叫“content(內(nèi)容)”，而盒子的紙壁給他起個名字叫“border(邊框)”，如果盒子內(nèi)部的東西比如是一塊硬盤，但是硬盤怕震動，所以我們需要在硬盤的四周盒子的內(nèi)部均勻填充一些防震材料，這時硬盤和盒子的邊框就有了一定的距離了，我們稱這部分距離叫“padding(內(nèi)邊距)”，如果我們需要購買許多塊硬盤，還是因?yàn)橛脖P怕震動所以需要在盒子和盒子之間也需要一些防震材料來填充，那么盒子和盒子之間的距離我們稱之為margin(外邊距)OK！這下盒子模型的四要素就出來了分別是：content(內(nèi)容)、border(邊框)、padding(內(nèi)邊距)、margin(外邊距)，如下圖我們的頁面就是由許許多多的盒子組成的喲，但是和現(xiàn)實(shí)生活中的盒子我們會忽略外邊距(margin)，但是在頁面中，我們是不能忽略外邊距(margin)的，只有包括外邊距的盒子模型在CSS中才是完整的，即使外邊距為零，我們也不要忽略它，要知道他是存在的。怎么樣，理解“盒子模型”了沒？就是這么點(diǎn)知識【基礎(chǔ)八】塊狀元素和內(nèi)聯(lián)元素網(wǎng)頁制作Webjx文章簡介：是在CSS布局頁面中很重要的兩個概念，必須要理解透徹！既然說到概念就先看看塊狀元素和內(nèi)聯(lián)元素的定義。在用CSS布局頁面的時候，我們會將HTML標(biāo)簽分成兩種，塊狀元素和內(nèi)聯(lián)元素（我們平常用到的div和p就是塊狀元素，鏈接標(biāo)簽a就是內(nèi)聯(lián)元素）。是在CSS布局頁面中很重要的兩個概念，必須要理解透徹！既然說到概念就先看看塊狀元素和內(nèi)聯(lián)元素的定義。注：這節(jié)課看似挺長，其實(shí)內(nèi)容很少，通過舉例子讓大家更容易理解而已，不要被眼前的文字和代碼嚇到喲塊狀元素一般是其他元素的容器，可容納內(nèi)聯(lián)元素和其他塊狀元素，塊狀元素排斥其他元素與其位于同一行，寬度(width)高度(height)起作用。常見塊狀元素為div和p。內(nèi)聯(lián)元素內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，它允許其他內(nèi)聯(lián)元素與其位于同一行，但寬度(width)高度(height)不起作用。常見內(nèi)聯(lián)元素為“a”。做了個對比表，幫助大家更容易理解。塊狀元素內(nèi)聯(lián)元素是否允許其他元素同處一行noyeswidth和height是否起作用yesno對于上面的概念，我們用實(shí)例的方式給大家講明白，要注意聽喲要求：ID為div1的紅色(#900)區(qū)域，寬度和高度均為300像素，并且包含一個ID為div2的綠色區(qū)域，長度寬度均為100像素的div2。CSS代碼如下： 1. #div1width:300px; height:300px; background:#900;2. #div2width:100px; height:100px; background:#090; HTML代碼如下： 1. 2. 3. 為了方便初學(xué)者更好的學(xué)習(xí)，我把完整的代碼發(fā)出來 1. 3. 4. 5. 6. CSS學(xué)習(xí)網(wǎng)-“可容納內(nèi)聯(lián)元素和其他塊狀元素”7. 8. 12. 13. 14. 15. 16. 17. 18. 19. 怎么樣，是不是下面的效果 如果你做出來了，就繼續(xù)往下看，咱們給剛才的要求再加一個條件，在div1里放入一個鏈接a，內(nèi)容為“可容納內(nèi)聯(lián)元素和其他塊狀元素”顏色為白色。CSS代碼如下： 1. #div1width:300px; height:300px; background:#900;2. #div2width:100px; height:100px; background:#090;3. acolor:#fff; HTML代碼如下： 1. 2. 3. 可容納內(nèi)聯(lián)元素和其他塊狀元素4. 是不是下面的效果 到這里，我們可以看得到div1這個塊狀元素里面擁有兩個元素，一個是塊狀元素div2，另一個是內(nèi)聯(lián)元素a，這就是塊狀元素概念里面說的“一般是其他元素的容器，可容納內(nèi)聯(lián)元素和其他塊狀元素”，為什么要說一般呢，因?yàn)閴K狀元素不只是用來做容器，有時還有其他用途，比如利用塊狀元素將上下兩個元素隔開些距離，再比如利用塊狀元素來實(shí)現(xiàn)父級元素的高度自適應(yīng)，這方面的內(nèi)容會在后面詳細(xì)講解，因?yàn)椴粚儆诒竟?jié)知識，就不多說。好！我們繼續(xù)加條件，在div1里面div2的后面再放入一個ID為div3的長寬均為100像素的藍(lán)色(#009)區(qū)域塊，代碼如下CSS代碼如下： 1. #div1width:300px; height:300px; background:#900;2. #div2width:100px; height:100px; background:#090;3. #div3width:100px; height:100px; background:#009;4. acolor:#fff; HTML代碼如下： 1. 2. 3. 4. 可容納內(nèi)聯(lián)元素和其他塊狀元素5. 是不是下面這個效果 是不是和自己事先想象的不一樣，本以為藍(lán)色會處于綠色的右側(cè)，可是卻位于下側(cè)，如果你再加幾個div4，div5同樣的他們還是繼續(xù)位于前一個下面，垂直排列，這就是塊狀元素概念中說的“塊狀元素排斥其他元素與其位于同一行”說白了，就是塊狀元素比較霸道，誰都別想和他坐同一行，甭管你是和他有親戚關(guān)系的塊狀元素還是毫無聯(lián)系的內(nèi)聯(lián)元素，都不行，都到下面一行待著去，看看例子中，綠色方塊和藍(lán)色方塊是不是各處同一行，內(nèi)聯(lián)元素a也別想和他處一行，但是事情是沒有絕對的，塊狀元素不是不允許其他元素和他處一行嘛，不是比較霸道嘛，沒關(guān)系，咱有辦法，具體什么辦法，我們后面會詳細(xì)講解，知識不屬于本節(jié)內(nèi)容，就也不多說了，大家留意后面的教程唷到這里，我想大家對“塊狀元素”的概念已經(jīng)比較清楚了，下面通過例子給大家繼續(xù)解釋“內(nèi)聯(lián)元素”的概念，當(dāng)然還是繼續(xù)加條件，加個什么條件呢，在a的后面再加一個內(nèi)容為“Love CSS”的鏈接，所有鏈接的背景設(shè)置為淡橙色(#F93)CSS代碼如下： 1. #div1width:300px; height:300px; background:#900;2. #div2width:100px; height:100px; background:#090;3. #div3width:100px; height:100px; background:#009;4. acolor:#fff; background:#F93; HTML代碼如下： 1. 2. 3. 4. 可容納內(nèi)聯(lián)元素和其他塊狀元素5. Love CSS6. 效果是不是下面這個 兩個連接a是不是處于同一行(不要忘記a是內(nèi)聯(lián)元素喲)，這就解釋了概念上說的“內(nèi)聯(lián)元素允許其他內(nèi)聯(lián)元素與其位于同一行”，為什么不說“內(nèi)聯(lián)元素允許其他元素與其位于同一行”，因?yàn)槠渌匕▋煞N元素，內(nèi)聯(lián)元素和塊狀元素，它如果和內(nèi)聯(lián)元素在一塊那就肯定在一行了，如果和塊狀元素在一塊，即使它同意，他后面的塊狀元素也不同意，塊狀元素會另起一行位于它的下一行。我們繼續(xù)添加條件，現(xiàn)在大家給內(nèi)聯(lián)元素a在css中加上寬度和高度，比如width:100px;height:50px;看看有什么變化CSS代碼 1. #div1width:300px; height:300px; background:#900;2. #div2width:100px; height:100px; background:#090;3. #div3width:100px; height:100px; background:#009;4. acolor:#fff; background:#F93;width:100px;height:50px; 看到效果了沒有，是不是沒有任何變化呢，這就說明了概念中的內(nèi)聯(lián)元素的寬度(width)高度(height)不起作用，它的大小只隨內(nèi)部文本或者其他內(nèi)聯(lián)元素變化，具體證明算是給大家一個作業(yè)，自己來證明一下。