DIV+CSS技術入門學習

2020-03-24 17:00:55

字體：大中小

來源：轉載

供稿：網友

引言：
引用一本書中的一段文字：“當我第一次開始學習漢語時，我的家庭老師老王給了我一本漢英字典、一本漢語語法書和一本初級教程。但是，他將這些書放在一個書筐里，并說到下周才能派上用場。在第一周，他只教我聽和記一些短語。在開始嚴格有序的學習前，他要我學會如何復述一些短評?！罢垎?，哪里有餐館？”?！罢埥o我來點米飯”?！斑@件衣服多少錢？”。在那個星期，我不得不無條件地接受知識、句子結構、發音和語法。然而，到了星期五我居然可以去一家中餐館要了一碗米飯并付了賬。沒有理論，沒有解釋，就是這些簡單的短語給了我做這件事的足夠的語法和詞匯。不知從何時開始，CSS開始為國人重視起來。許多人都開始學習CSS，但又不知從何入手，所以此文就是給那些初學者所寫，帶他們踏上CSS列車。一. CSS學習重在方法！學習任何東西都是一樣，從小學、中學、大學，除了學習知識外就是去學習方法！要想掌握CSS, 首先要學會HTML，我剛開始是從零開始學習的，花了一個月時間學習HTML，沒有老師，書就是我唯一的老師，也沒有上網的條件！一個月過后，我就開始學習CSS，剛開始看的第一本CSS書是《CSS網頁樣式設計》看了幾天后發現根本看不懂！，之后換了一本《HTML參考大全》，這本書是網頁制作師的案頭常備之書！之所以更換這本書來學習CSS，是因為這里面有一部分是CSS，就成了我的CSS啟蒙書?？戳藥锥魏?，覺得外國人寫的教程很有條理，由淺入深，一步一步引領你向前走，讓你明白他們在說什么，而不是象國內的書講的深淺不一，缺乏條理，好象怕你不知道他很有學問！就象前面所說的那本書《CSS網頁樣式設計》當時看了，對于初學CSS的我來說，真的不知道它在說什么！再來談一下學習過程中的細節，因為一個樣式它是不可能脫離html' target='_blank'>HTML頁面的，HTML不與樣式結合的話, CSS就失去了存在的意義。所以一般書中都會舉一個例子，然后讓你上機測試效果，這是筆者想讓你有對樣式表CSS有一個初步的印象，告訴你CSS能做什么。一個小例子：“麻雀雖小，五臟俱全”，你可能看不懂每一個語句的真正意思。但是你可以記得例子的模式，以后在實踐中不斷地用，不斷用的過程就是不斷記的過程，所以不能恢心，不能總認為自己記憶力不好，但不管你騎的是牛也好，千里馬也罷，只要有恒心，一定會到達終點的。閱讀一本書，一般來說第一次要先把整個書通讀一遍，不理解的也要往下看，在往下看的過程中你也許會找到那個問題的答案?？赐旰竽阌幸粋€大概的印象，但一定有很多不明白的地方，沒關系，繼續往下看。第二遍你就要邊看邊做學習筆記了，把你認為是重點的部分寫上，還有，你覺得有疑問的部分也要記下，帶著疑問看下去，如果沒有答案，你可以去BBS上發一個貼子，好心人還是很多的，提示一句：“一定要學會如何去問問題！” 這里就不說了。你還要上機去練習書上的例子，最讓你困惑的：“一是記不住，二是對概念的理解有誤（這一條可能是書譯的不好，另外就是你的理解不對）”，對于第一條你就要樹立信心，堅持再堅持下去。當你到達終點時你回發現一切都是順理成章的事。因為你努力了，努力了就會有回報，有結果。有好多人也看了，但是沒有什么進步，我分析主要有以下幾個原因：原因一：壓力不夠，因為有不少人比如美工學CSS，因為是看別人學，所以學之，不學就沒優勢！這樣的壓力是很小的，學不好還有美工這碗飯。原因二：只是業余學習，這樣學還只是玩一玩，因為你不一定非要以這門技術吃飯。原因三：方法不對，有的人只是在看教程，但他不動手去做，我以前就是看的太多，做的太少，所以有了實踐你才能把理論的東西揉進去。二. 掌握CSS的四個學習階段有一次我問一個網友，學CSS難嗎？她說：“不難”我說你學多久了？她說：“剛學”。其實她說的也沒錯！如果有人問我學CSS 難嗎？我會說：“難！”為什么我會說難呢？學CSS可以分成以下幾個階段：階段一：不去想瀏覽器的兼容性問題的情況下能做出頁面，但頁面里到處用TABLE的模式DIV寫出的頁面。階段二：想到了兼容性問題，但無法提前預防，只會修補問題，大量使用HACK技術（我對HACK技術只是知道，但用的很少）階段三：可提前預防BUG，但樣式表中大量應用了ID,CLASS，CSS譯過來是重疊樣式表，比如“DIV P SPAN”。這句代碼是標明DIV子元素中P的子元素SPAN，這樣寫就可以定義SPAN的樣式了，不用在SPAN中加入CLASS了。這也就是CSS的優點所在，為什么不好好利用而一定要定義一個CLASS呢！階段四：這一階段是最難的，良好的HTML語義結構、合理的CSS、可重復利用的樣式。良好的語義有這方面的文章,合理的CSS，這兩方面以后一定會寫專題來研究。三. CSS初學者常見問題：讓我們一步步來。第一個要求是縮圖的正下方要有個標題。作法相當直接了當：在你的 HTML 里放上圖片，接著一個斷行 (BR)，再把標題放在一個段落 (P) 里并且置中 (利用 CSS)。接著我們要讓這些縮圖跟標題成對地排列在瀏覽器窗口里。使用表格排版時，這一對對的縮圖跟標題會被分別放置在 TD 里。在使用 CSS 排版時，我們要把它們分別放置在 DIV 里。為了讓它們能水平排列在窗口上，我們用 CSS 讓這些 DIV 往左浮動 (FLOAT)。問題1：學CSS應該選什么樣書來讀？
先推薦幾本：《CSS權威指南》《網站重構》《網站布局實錄》《HTML參考大全》如果對HTML還不太了解的話，可以先讀讀《HTML參考大全》這本書，這本書即是一本教學書同時也是一本很好的用來查詢HTML的工具書。最近出版的《精通CSS》、《無懈可擊的Web設計》都是非常好的書，但不適合沒有有CSS基礎的人讀，要想成為一個優秀的CSS Builder，還要有扎實的英文基礎，那樣你就可以去閱讀國外的CSS教程，參與相關的論壇，有人說，不懂英語可以只看代碼，但事實上，他們的書中論述的不僅僅是代碼，更重要的，是他們會告訴我們編碼的思想和編碼的方法，這些都是我們值得去學習和領會的。另外我推薦的中文教程是：《HTML and CSS Standard》、蘇沈小雨《CSS2中文手冊》、電子版《網頁設計師》；外英文版的電子書很多，就不一一舉例?？措娮訒且患芊ξ兜氖?，我本人就不習慣看電子版的，所以經常買書看。問題2：用什么軟件編輯CSS代碼?
這個問題好象是問過頻率最高的！先說我自己吧，剛開始是用DreamWeaver寫代碼，由于DreamWeaver軟件本身是一個很耗CPU和內存的軟件，運行時編輯的速度就可想而知了。走了好長一段時間之后我才過度到了“半手寫”狀態，“半手寫”就是利用DW提供的代碼提示功能，當你寫“F”時有關“F”的樣式就會立刻在后面提示出來，方便你選取。如果再寫上幾個字母，你要的那個樣式就很快找到了，這樣可以加快你的寫樣式的速度，但有一個壞處就是如果你脫離了代提示的編輯軟件你就不會寫樣式了，比如你在程序員那里修改微調樣式時，他用的可不一定是你用的那個軟件，不一定有代碼提示功能，所以你只能回到自己的機器上編輯好了然后發給程序員！這樣做顯然是不專業的！所以如果想成為優秀的人就要做到夠專業！說了這些好象還沒有說到主題：只要已經能達到會手寫的程度，用什么軟件都可以，推薦使用DreamWeaver外掛TopStyle（最新版本是Pro V3.12）。問題3：先寫HTML還是先寫CSS？
網上有很多種答案：先寫HTML后寫CSS；先寫CSS后寫HTML；兩者同時寫。我傾向于兩者一起寫，先寫CSS或者先寫HTML對于初學者都不是恰當得的方法。如果讓一個人編寫代碼，你告訴他先寫HTML,寫完后 HTML不能修改了，然后你寫CSS，如果他可以寫出來，那這個人一定是一個水平非常高的Builder了！所以對于初學者，多數情況下我建議同時編寫，具體我說一下步驟：先要把站點建好，目錄建好，比如我們建好文件夾CSS,IMAGES,這兩個是最其本的，然后新建一個HTML文件，一個style.css一個空的樣式表，把HTML頁連接到這個外部樣式表。
然后我們先寫HTML中的最基本的布局部分，都是用DIV，然后直接在DIV里加入ID或CLASS，這些布局部分包括外套部分，頭部分，中間部分，左，中，右，版權部分等。寫好這些后，這時你可以到樣式表中寫樣式，或者你在接著寫布局里的部分，我們拿頭部為例，在頭部寫入LOGO部分，NAV部分也同樣加入ID或CLASS。其它同理。為什么說我們不可能一次性把HTML部分寫好呢，因為人都是可能犯錯誤的，可能你的想法寫的過程就是有問題的，或者為了瀏覽器的兼容性問題，有些是你由于經驗的不足沒有提前預料到的，所以當你寫樣式時發現了問題時就有可能要改動你的HTML的代碼。大至的寫法就是這樣，你也可以HTML/CSS同時進行，都是可以的，看你的習慣。我們寫代碼時很多時候是邊寫代碼邊測試，也不是說寫一句測試一句，而是寫了一段代碼后就進行瀏覽器的測試，我是同時用IE6與FF一起測試。一個優秀的制作師他們的代碼多數情況寫了很多時他們才測試一下，是因為一個人如果經驗多的話，他們就會知道并提前預防瀏覽器錯誤顯示的發生了！所以他們寫代碼的速度比沒有經驗的人快。他們已經經歷過了你所要經歷的錯誤，你第一次遇到錯誤的瀏覽器顯示問題你要花時間去修補，而他們可提前防止或遇到了可立即解決問題！這就是你與他們的不同點之一。初學者與高手不同點之處還有一個就是高手們使用了大量的快捷鍵，所以一定要記住那些常用的快捷鍵，每一個小的細節都有一點提高，綜合在一起就是很大的提高。另外提高自己的水平最好的方法就是多實踐，多找一些比較好的HTML+CSS的模板進行編碼實踐，開始時要選一個簡單點的，把頁面截圖，然后把這張圖用自己的想法還原成HTML頁面…… 本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS3 Gradient 創建水晶按鈕實例

下一篇：再談CSS Hack各瀏覽器兼容問題