【入門須知】學(xué)DIVCSS技術(shù)如何入門?學(xué)DIVCSS技術(shù)入門-創(chuàng)新互聯(lián)

【入門須知】學(xué)DIV CSS技術(shù)如何入門?學(xué)DIV CSS技術(shù)入門

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)汝城免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

引言：

引用一本書中的一段文字：“當(dāng)我第一次開始學(xué)習(xí)漢語時(shí)，我的家庭老師老王給了我一本漢英字典、一本漢語語法書和一本初級(jí)教程。但是，他將這些書放 在一個(gè)書筐里，并說到下周才能派上用場。在第一周，他只教我聽和記一些短語。在開始嚴(yán)格有序的學(xué)習(xí)前，他要我學(xué)會(huì)如何復(fù)述一些短評(píng)。“請問，哪里有餐 館？”?！罢埥o我來點(diǎn)米飯”?！斑@件衣服多少錢？”。在那個(gè)星期，我不得不無條件地接受知識(shí)、句子結(jié)構(gòu)、發(fā)音和語法。然而，到了星期五我居然可以去一家中 餐館要了一碗米飯并付了賬。沒有理論，沒有解釋，就是這些簡單的短語給了我做這件事的足夠的語法和詞匯。

不知從何時(shí)開始，CSS開始為國人重視起來。許多人都開始學(xué)習(xí)CSS，但又不知從何入手，所以此文就是給那些初學(xué)者所寫，帶他們踏上CSS列車。 一. CSS學(xué)習(xí)重在方法！

學(xué)習(xí)任何東西都是一樣，從小學(xué)、中學(xué)、大學(xué)，除了學(xué)習(xí)知識(shí)外就是去學(xué)習(xí)方法！

要想掌握CSS, 首先要學(xué)會(huì)HTML，我剛開始是從零開始學(xué)習(xí)的，花了一個(gè)月時(shí)間學(xué)習(xí)HTML，沒有老師，書就是我唯一的老師，也沒有上網(wǎng)的條件！一個(gè)月過后，我就開始學(xué)習(xí)CSS，剛開始看的第一本CSS書是《CSS網(wǎng)頁樣式設(shè)計(jì)》看了幾天后發(fā)現(xiàn)根本看不懂！，之后換了一本《HTML參考大全》，這本書是網(wǎng)頁制作師的案頭常備之書！之所以更換這本書來學(xué)習(xí)CSS，是因?yàn)檫@里面有一部分是CSS，就成了我的CSS啟蒙書?？戳藥锥魏?，覺得外國人寫的教程很有條理，由淺入深，一步一步引領(lǐng)你向前走，讓你明白他們在說什么，而不是象國內(nèi)的書講的深淺不一，缺乏條理，好象怕你不知道他很有學(xué)問！就象前面所說的那本書《CSS網(wǎng)頁樣式設(shè)計(jì)》當(dāng)時(shí)看了，對于初學(xué)CSS的我來說，真的不知道它在說什么！

再來談一下學(xué)習(xí)過程中的細(xì)節(jié)，因?yàn)橐粋€(gè)樣式它是不可能脫離HTML頁面的，HTML不與樣式結(jié)合的話, CSS就失去了存在的意義。所以一般書中都會(huì)舉一個(gè)例子，然后讓你上機(jī)測試效果，這是筆者想讓你有對樣式表CSS有一個(gè)初步的印象，告訴你CSS能做什么。一個(gè)小例子：“麻雀雖小，五臟俱全”，你可能看不懂每一個(gè)語句的真正意思。但是你可以記得例子的模式，以后在實(shí)踐中不斷地用，不斷用的過程就是不斷記的過程，所以不能恢心，不能總認(rèn)為自己記憶力不好，但不管你騎的是牛也好，千里馬也罷，只要有恒心，一定會(huì)到達(dá)終點(diǎn)的。

閱讀一本書，一般來說第一次要先把整個(gè)書通讀一遍，不理解的也要往下看，在往下看的過程中你也許會(huì)找到那個(gè)問題的答案?？赐旰竽阌幸粋€(gè)大概的印象，但一定有很多不明白的地方，沒關(guān)系，繼續(xù)往下看。

第二遍你就要邊看邊做學(xué)習(xí)筆記了，把你認(rèn)為是重點(diǎn)的部分寫上，還有，你覺得有疑問的部分也要記下，帶著疑問看下去，如果沒有答案，你可以去BBS上發(fā)一個(gè)貼子，好心人還是很多的，提示一句：“一定要學(xué)會(huì)如何去問問題！” 這里就不說了。你還要上機(jī)去練習(xí)書上的例子，最讓你困惑的：“一是記不住，二是對概念的理解有誤（這一條可能是書譯的不好，另外就是你的理解不對）”，對于第一條你就要樹立信心，堅(jiān)持再堅(jiān)持下去。當(dāng)你到達(dá)終點(diǎn)時(shí)你回發(fā)現(xiàn)一切都是順理成章的事。因?yàn)槟闩α?，努力了就?huì)有回報(bào)，有結(jié)果。

有好多人也看了，但是沒有什么進(jìn)步，我分析主要有以下幾個(gè)原因：

原因一：壓力不夠，因?yàn)橛胁簧偃吮热缑拦W(xué)CSS，因?yàn)槭强磩e人學(xué)，所以學(xué)之，不學(xué)就沒優(yōu)勢！這樣的壓力是很小的，學(xué)不好還有美工這碗飯。

原因二：只是業(yè)余學(xué)習(xí)，這樣學(xué)還只是玩一玩，因?yàn)槟悴灰欢ǚ且赃@門技術(shù)吃飯。

原因三：方法不對，有的人只是在看教程，但他不動(dòng)手去做，我以前就是看的太多，做的太少，所以有了實(shí)踐你才能把理論的東西揉進(jìn)去。 二. 掌握CSS的四個(gè)學(xué)習(xí)階段

有一次我問一個(gè)網(wǎng)友，學(xué)CSS難嗎？她說：“不難”我說你學(xué)多久了？她說：“剛學(xué)”。其實(shí)她說的也沒錯(cuò)！如果有人問我學(xué)CSS 難嗎？我會(huì)說：“難！”為什么我會(huì)說難呢？

學(xué)CSS可以分成以下幾個(gè)階段：

階段一：不去想瀏覽器的兼容性問題的情況下能做出頁面，但頁面里到處用TABLE的 模式DIV寫出的頁面。

階段二：想到了兼容性問題，但無法提前預(yù)防，只會(huì)修補(bǔ)問題，大量使用HACK技術(shù)（我對HACK技術(shù)只是知道，但用的很少）

階段三：可提前預(yù)防BUG，但樣式表中大量應(yīng)用了ID,CLASS，CSS譯過來是重疊樣式表，比如“DIV P SPAN”。這句代碼是標(biāo)明DIV子元素中P的子元素SPAN，這樣寫就可以定義SPAN的樣式了，不用在SPAN中加入CLASS了。這也就是CSS的優(yōu)點(diǎn)所在，為什么不好好利用而一定要定義一個(gè)CLASS呢！

階段四：這一階段是最難的，良好的HTML語義結(jié)構(gòu)、合理的CSS、可重復(fù)利用的樣式。良好的語義有這方面的文章,合理的CSS，這兩方面以后一定會(huì)寫專題來研究。 三. CSS初學(xué)者常見問題：

讓我們一步步來。第一個(gè)要求是縮圖的正下方要有個(gè)標(biāo)題。作法相當(dāng)直接了當(dāng)：在你的 HTML 里放上圖片，接著一個(gè)斷行 (BR)，再把標(biāo)題放在一個(gè)段落 (P) 里并且置中 (利用 CSS)。

接著我們要讓這些縮圖跟標(biāo)題成對地排列在瀏覽器窗口里。使用表格排版時(shí)，這一對對的縮圖跟標(biāo)題會(huì)被分別放置在 TD 里。在使用 CSS 排版時(shí)，我們要把它們分別放置在 DIV 里。為了讓它們能水平排列在窗口上，我們用 CSS 讓這些 DIV 往左浮動(dòng) (FLOAT)。問題1：學(xué)CSS應(yīng)該選什么樣書來讀？

先推薦幾本：

《CSS權(quán)威指南》

《網(wǎng)站重構(gòu)》

《網(wǎng)站布局實(shí)錄》

《HTML參考大全》

如果對HTML還不太了解的話，可以先讀讀《HTML參考大全》這本書，這本書即是一本教學(xué)書同時(shí)也是一本很好的用來查詢HTML的工具書。最近出版的《精通CSS》、 《無懈可擊的Web設(shè)計(jì)》都是非常好的書，但不適合沒有有CSS基礎(chǔ)的人讀，要想成為一個(gè)優(yōu)秀的CSS Builder，還要有扎實(shí)的英文基礎(chǔ)，那樣你就可以去閱讀國外的CSS教程，參與相關(guān)的論壇，有人說，不懂英語可以只看代碼，但事實(shí)上，他們的書中論述的不僅僅是代碼，更重要的，是他們會(huì)告訴我們編碼的思想和編碼的方法，這些都是我們值得去學(xué)習(xí)和領(lǐng)會(huì)的。另外我推薦的中文教程是：《HTML and CSS Standard》、蘇沈小雨《CSS2中文手冊》、電子版《網(wǎng)頁設(shè)計(jì)師》；外英文版的電子書很多，就不一一舉例?？措娮訒且患芊ξ兜氖?，我本人就不習(xí)慣看電子版的，所以經(jīng)常買書看。

問題2：用什么軟件編輯CSS代碼?

這個(gè)問題好象是問過頻率最高的！先說我自己吧，剛開始是用DreamWeaver寫代碼，由于DreamWeaver軟件本身是一個(gè)很耗CPU和內(nèi)存的軟件，運(yùn)行時(shí)編輯的速度就可想而知了。走了好長一段時(shí)間之后我才過度到了“半手寫”狀態(tài)，“半手寫”就是利用DW提供的代碼提示功能，當(dāng)你寫“F”時(shí)有關(guān)“F”的樣式就會(huì)立刻在后面提示出來，方便你選取。如果再寫上幾個(gè)字母，你要的那個(gè)樣式就很快找到了，這樣可以加快你的寫樣式的速度，但有一個(gè)壞處就是如果你脫離了代提示的編輯軟件你就不會(huì)寫樣式了，比如你在程序員那里修改微調(diào)樣式時(shí)，他用的可不一定是你用的那個(gè)軟件，不一定有代碼提示功能，所以你只能回到自己的機(jī)器上編輯好了然后發(fā)給程序員！這樣做顯然是不專業(yè)的！所以如果想成為優(yōu)秀的人就要做到夠?qū)I(yè)！

說了這些好象還沒有說到主題：

只要已經(jīng)能達(dá)到會(huì)手寫的程度，用什么軟件都可以，推薦使用DreamWeaver外掛TopStyle（最新版本是Pro V3.12）。

問題3：先寫HTML還是先寫CSS？

網(wǎng)上有很多種答案：先寫HTML后寫CSS；先寫CSS后寫HTML；兩者同時(shí)寫。我傾向于兩者一起寫，先寫CSS或者先寫HTML對于初學(xué)者都不是恰當(dāng)?shù)玫姆椒āＨ绻屢粋€(gè)人編寫代碼，你告訴他先寫HTML,寫完后 HTML不能修改了，然后你寫CSS，如果他可以寫出來，那這個(gè)人一定是一個(gè)水平非常高的Builder了！所以對于初學(xué)者，多數(shù)情況下我建議同時(shí)編寫，具體我說一下步驟：

1.

先要把站點(diǎn)建好，目錄建好，比如我們建好文件夾CSS,IMAGES,這兩個(gè)是最其本的，然后新建一個(gè)HTML文件，一個(gè)style.css一個(gè)空 的樣式表，把HTML頁連接到這個(gè)外部樣式表。   然后我們先寫HTML中的最基本的布局部分，都是用DIV，然后直接在DIV里加入ID或CLASS，這些 布局部分包括外套部分，頭部分，中間部分，左，中，右，版權(quán)部分等。   寫好這些后，這時(shí)你可以到樣式表中寫樣式，或者你在接著寫布局里的部分，我們拿頭部為例，在頭部寫入LOGO部分，NAV部分也同樣加入ID或CLASS。其它同理。

2.

為什么說我們不可能一次性把HTML部分寫好呢，因?yàn)槿硕际强赡芊稿e(cuò)誤的，可能你的想法寫的過程就是有問題的，或者為了瀏覽器的兼容性問題，有些是你由于經(jīng)驗(yàn)的不足沒有提前預(yù)料到的，所以當(dāng)你寫樣式時(shí)發(fā)現(xiàn)了問題時(shí)就有可能要改動(dòng)你的HTML的代碼。大至的寫法就是這樣，你也可以HTML/CSS同時(shí)進(jìn)行，都是可以的，看你的習(xí)慣。我們寫代碼時(shí)很多時(shí)候是邊寫代碼邊測試，也不是說寫一句測試一句，而是寫了一段代碼后就進(jìn)行瀏覽器的測試，我是同時(shí)用IE6與FF一起測試。一個(gè)優(yōu)秀的制作師他們的代碼多數(shù)情況寫了很多時(shí)他們才測試一下，是因?yàn)橐粋€(gè)人如果經(jīng)驗(yàn)多的話，他們就會(huì)知道并提前預(yù)防瀏覽器錯(cuò)誤顯示的發(fā)生了！所以他們寫代碼的速度比沒有經(jīng)驗(yàn)的人快。他們已經(jīng)經(jīng)歷過了你所要經(jīng)歷的錯(cuò)誤，你第一次遇到錯(cuò)誤的瀏覽器顯示問題你要花時(shí)間去修補(bǔ)，而他們可提前防止或遇到了可立即解決問題！這就是你與他們的不同點(diǎn)之一。

初學(xué)者與高手不同點(diǎn)之處還有一個(gè)就是高手們使用了大量的快捷鍵，所以一定要記住那些常用的快捷鍵，每一個(gè)小的細(xì)節(jié)都有一點(diǎn)提高，綜合在一起就是很大的提高。

另外提高自己的水平最好的方法就是多實(shí)踐，多找一些比較好的HTML CSS的模板進(jìn)行編碼實(shí)踐，開始時(shí)要選一個(gè)簡單點(diǎn)的，把頁面截圖，然后把這張圖用自己的想法還原成HTML頁面……

最后祝愿大家學(xué)習(xí)進(jìn)步。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞標(biāo)題：【入門須知】學(xué)DIVCSS技術(shù)如何入門?學(xué)DIVCSS技術(shù)入門-創(chuàng)新互聯(lián)
瀏覽路徑：http://muchs.cn/article30/spipo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、云服務(wù)器、App開發(fā)、定制開發(fā)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)