CSS初學者到高手成長之路

you-need-to-know

今天Designrock分享一篇別人寫的比寄給大家"CSS初學者到高手成長之路"。寫的很詳細,很適合想要更了解css的人來看看,希望對你有幫助喔!

文章來源:http://www.w3cfuns.com/blog-5454822-5401387.html

CSS其實很簡單,只要把所有“標籤”都理解為“方形框”,寫CSS代碼就相當於用“方形框”拼圖形。

什麼是“”標籤,什麼是“內聯”標籤。

”標籤,可以理解為,和div類似的標籤,定義width height 有效果的標籤。

內聯”標籤,可以理解為,和span類似的標籤,定義width height 沒有效果的標籤。

(“塊”標籤一般用於網頁佈局,“內聯”標籤用於修飾文本)

選擇器的種類和用法,以及優先順序。

style關聯>id選擇器>class選擇器>html標籤選擇器

對於初學者一定要做的事(一直到你真正熟練運用CSS才可省略步驟1):

1.給所有“標籤”都要寫“border”線,直到整段代碼寫完,並確認沒問題才去掉“border”線

(目的是讓肉眼可以看到框的具體佔用的位置,同時理解屬性的功能。注意:此方法比較老土,在IE6時代比較適用。如今:一定要熟練使用瀏覽器的F12快捷鍵,熟練掌握審查元素功能,對你學習非常有幫助。)

2.從外到內”的思路。 (目的是清晰思路,知道怎樣去實現拼圖)

代碼使用技巧(什麼時候使用他們):

1.邊框border 代替網頁中的線條;(IE6時代:另外主要用於調試時,幫助理解代碼時使用)

2.寬度width 所有“塊”標籤,都要寫寬度。 (除非你真正理解“繼承”)

3.高度height “塊”標籤高度是固定時才使用,其他時絕對不要寫height,容易出兼容性問題。

4.外邊距margin “塊”標籤居中時;另外“塊”標籤之間有間距時使用(不要動不動就亂加margin)

5.內邊距padding “塊”標籤與內部文字之間的間距(緊記他與width和height之間的尺寸關係,非常重要)

6.浮動float “塊”標籤按列排版時使用(緊記2列時建議left right,3列時left left right,還有不清除浮動會造成的問題,以及解決辦法,這個標記非常重要,精通css,必先掌握之)

7.背景background “塊”標籤中圖片做為背景時使用(這個標記非常重要,精通css,必先掌握之)

8.定位position 浮動實現不了或難以實現的佈局,如:某些導航(使用不多,可先掌握background後,再掌握之)

9.行高line-height 對文字排版時都要用到(注意:不是line-height height一定要一起用,這是錯誤的理解)

10.縮進text-indent 文本縮進時使用(只左邊文字縮進時,盡量使用text-indent,而不是使用padding-left)

11.列表list-style 一般用於清除li屬性時使用(如:li{list-style:none})

12.居中text-align 通常用於文本居中(注意:“塊”居中用marong:auto;文本居中用text-align:center)

13.溢出overflow 通常用於“不顯示超過對象尺寸的內容”,以及定義塊標籤“顯示滾動條”

14.顯示display 通常三種用途1.隱藏某一塊內容;2.轉換成“塊”標籤;3.轉換成“內聯”標籤

15.可見性visibility 和display:none類似,用於隱藏某一塊內容,但保留佔用空間(使用非常少)

技巧代碼(經驗的積累):

1.一定要掌握代碼的初始化寫法,這個寫好了,能解決以後寫代碼的很多問題

2.overflow:hidden; 這種寫法能解決浮動高度問題;還能解決內部尺寸大,把網站撐破的問題

3.display:inline;float:left; 用於解決ie6 margin間距雙倍問題。

4.word-wrap:break-word 或word-break:break-all; 用於解決長英文字母把網站撐出問題

需要背下來的:

長度單位,如:px em

顏色單詞,如:red blue yellow

顏色十六進制,如:#FF0000 #FFFFFF

(只需要背幾個常用的就可以了,以上內容具體可查看“CSS2.0中文手冊.chm”)

另外幾個非重點代碼:

偽類:link(只做了解,不推薦寫代碼時使用) :hover :visited

規則@import @charset 這兩個一般不使用,但看到別人寫這個代碼要明白什麼意思

聲明!important 一般不使用,特殊情況使用

表格border-collapse border-spacing 能代替table標籤的兩個屬性

關於瀏覽器兼容性:

我推薦寫代碼時,盡量用所有瀏覽器都支持的寫法。 (這需要對css屬性的深刻理解和一定經驗)

對於選擇器前加_ + * if 之類的兼容性寫法盡量不用或少用(雖然不推薦兼容性寫法,但要知道,以備不時之需)

以上是我對常用CSS代碼的所有總結,其實CSS 2.0常用就這麼點內容。

學會以上內容,已經踏入CSS高手(指初學者)殿堂。

另外掌握上以內容後,要想成為一個直正高手,還需要積累經驗,同時,熟悉CSS手冊,看一些大牛寫的CSS代碼,以及關注CSS新技術,逛一些技術型網站。推薦兩個:http://www.w3schools.com http://www.w3school.com.cn/

目前手冊推薦“CSS2.0中文手冊.chm”和“w3school.chm”,首選“CSS2.0中文手冊.chm”,因為它更簡單,適合初學者。

所在請閱讀“CSS2.0中文手冊.chm”的“目錄”中的所​​有內容,要達到遇到不懂的代碼,能馬上準確找到你要的代碼的位置,真正熟悉這個手冊,熟悉程度要像一本你非常熟悉的書一樣,這樣你才能真正成為CSS高手。

所以要養成,寫代碼就打開“CSS2.0中文手冊.chm”手冊,沒事就翻翻“CSS2.0中文手冊.chm”手冊,在不知不覺中提升。

==============================================

成為一個真正的高手,一定要鍛煉出“自學能力”。

也就是遇到問題,不需要問別人,自己就能解決。這需要積累經驗,需要一個過程。

學習最忌諱

1.遇到點問題,就跑去問別人,別人幫解決後,還不去記下來。如果一直這樣,永遠不可能提升

2.遇到點問題,就坐著發呆。

提高“自學能力”的步驟:

1.掌握不一個懂的屬性的方法:

1)查手冊,或者查百度,google (一般查手冊就足夠了)

2)照著手冊的例子寫代碼測試。如:新建一個html文件,給​​屬性加border線,然後修改屬性值,觀看顯示變化

2,遇到問題,想想問題可能出現在哪裡?然後,立即動手調試代碼,而不是坐著發呆。

3,調試代碼方法分“加邊框法”和“排除法”

1)加邊框法:給可以存在問題的“標記”加border 線,這樣很容易看到代碼問題所在。

2)排除法:刪除可能出問題的代碼,如果刪除代碼後,網頁就正常了,那麼問題就出現在刪除的代碼部分。

一般使用“加邊框法”就能解決網頁問題,但有時候需要通過“加邊框法”和“排除法”結合才能解決問題。

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s