首頁 web前端 css教學 驚現學習CSS應該注意的方法_基礎教程

驚現學習CSS應該注意的方法_基礎教程

May 16, 2016 pm 12:07 PM

學習任何東西都是一樣,從小學、中學、大學,除了學習知識外就是去學習方法! 

  要想掌握CSS, 首先要學會HTML,我剛開始是從零開始學習的,花了一個月時間學習HTML,沒有老師,書就是我唯一的老師,也沒有上網的條件!一個月過後,我就開始學習CSS,剛開始看的第一本CSS書是《CSS網頁樣式設計》看了幾天後發現根本看不懂! ,之後換了一本《HTML參考大全》,這本書是網頁製作師的案頭常備之書!之所以更換這本書來學習CSS,是因為這裡面有一部分是CSS,就成了我的CSS啟蒙書。看了幾段後,覺得外國人寫的教程很有條理,由淺入深,一步一步引領你向前走,讓你明白他們在說什麼,而不是像國內的書講的深淺不一,缺乏條理,好像怕你不知道他很有學問!就像前面所說的那本書《CSS網頁樣式設計》當時看了,對於初學CSS的我來說,我真的不知道它在說什麼!

  再來談一下學習過程中的細節,因為一個樣式它是不可能脫離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,這兩方面以後一定會寫專題來研究。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

揭開屏幕讀取器的神秘面紗:可訪問的表格和最佳實踐 揭開屏幕讀取器的神秘面紗:可訪問的表格和最佳實踐 Mar 08, 2025 am 09:45 AM

這是我們在形式可訪問性上進行的小型系列中的第三篇文章。如果您錯過了第二篇文章,請查看“以:focus-visible的管理用戶焦點”。在

將框陰影添加到WordPress塊和元素 將框陰影添加到WordPress塊和元素 Mar 09, 2025 pm 12:53 PM

CSS盒子陰影和輪廓屬性獲得了主題。讓我們查看一些在真實主題中起作用的示例,以及我們必須將這些樣式應用於WordPress塊和元素的選項。

使用GraphQL緩存 使用GraphQL緩存 Mar 19, 2025 am 09:36 AM

如果您最近開始使用GraphQL或審查了其優點和缺點,那麼您毫無疑問聽到了諸如“ GraphQl不支持緩存”或

使您的第一個自定義苗條過渡 使您的第一個自定義苗條過渡 Mar 15, 2025 am 11:08 AM

Svelte Transition API提供了一種使組件輸入或離開文檔(包括自定義Svelte Transitions)時動畫組件的方法。

優雅且酷的自定義CSS捲軸:展示櫃 優雅且酷的自定義CSS捲軸:展示櫃 Mar 10, 2025 am 11:37 AM

在本文中,我們將深入研究滾動條。我知道,這聽起來並不魅力,但請相信我,一個精心設計的頁面是齊頭並進的

展示,不要說 展示,不要說 Mar 16, 2025 am 11:49 AM

您花多少時間為網站設計內容演示文稿?當您撰寫新的博客文章或創建新頁面時,您是在考慮

使用Redwood.js和Fauna構建以太坊應用 使用Redwood.js和Fauna構建以太坊應用 Mar 28, 2025 am 09:18 AM

隨著最近比特幣價格超過20k美元的攀升,最近打破了3萬美元,我認為值得深入研究創建以太坊

NPM命令是什麼? NPM命令是什麼? Mar 15, 2025 am 11:36 AM

NPM命令為您運行各種任務,無論是一次性或連續運行的過程,例如啟動服務器或編譯代碼。

See all articles