當前位置:才華齋>設計>網頁設計>

Html/Css新手入門攻略

網頁設計 閱讀(2.42W)

  一、理解web標準含義--為什麼採用web標準

Html/Css新手入門攻略

*****將內容與樣式分離

1、web標準是一系列標準,就是一系列技術標準

在使用時,是組合應用

【1】、結構化內容 xhtml

【2】、表現化內容 css

【3】、行為化內容 JavaScript

2、網頁開發的小工具--火狐瀏覽器中的firebug

工具--附加元件--搜尋firebug

作為web前端工作,要相容的瀏覽器ie,火狐瀏覽器,谷歌劉瀏覽器,蘋果瀏覽器等。

網頁是否有css樣式,測試--在瀏覽器改變文字大小。

3、css定義技巧:

【1】、為了將來的css程式碼優化,建議所有的屬性值後面都要帶上“;”

【2】、某些xhtml標籤有自己預設的css屬性值,

例如h1標籤就有自己的屬性值,自動就是加粗顯示,字號比較大。

【3】、為了相容主流瀏覽器,為統一,建議我們在設定時,將所有元素的css屬性重置為標準的。

【4】、不同的瀏覽器,有各自不容的css屬性值--要命的就是瀏覽器的相容。

【5】、就一個比較特殊的'字型想用怎麼辦?--將其轉化為圖片。

分中英文字型。設定字型的順序,將英文字型設定在前,中文在後。

【6】、css編輯工具--用什麼都行,高手,用樹葉殺人

【7】、想讓文字在垂直方向上居中,將行高設定為元素的高度,行高=元素高度

【8】、css可以重新設定,xhtml標籤的預設樣式。

4、css應用給網頁的方式:就相當於給人怎麼去穿上衣服。

【1】、行內樣式:應用於一個。

【2】、嵌入樣式:應用於一類標籤。

【3】、如果我們有很多的網頁,都要用css,將這些css寫到一個獨立檔案中,這個就是外鏈式,推薦使用。

【4】、匯入式樣式:也是將樣式寫到一個檔案中,再倒入到網頁中。

*****說明,匯入式,其實與內嵌式是相類似的,都是將樣式加入到網頁裡。

1、匯入式會佔用html檔案空間

2、有些瀏覽器解析會有問題。瀏覽器會最後讀取@import中的內容

3、將多個樣式檔案,匯入到一個樣式檔案中。

  二、css的特性

css叫層疊樣式表。

1、繼承:子元素會繼承父元素的某些樣式。

【因為有些子元素本身就有預設值,所以他就不用父元素】

2、疊層:子元素如果定義了與父元素相同的樣式,會覆蓋掉父元素的樣式。

*****後面的樣式會覆蓋前面的樣式

  三、css樣式的優先權:當樣式有衝突時,聽誰?

css優先權:就近原則

作用範圍越小,優先權越高。

離要修飾目標越近的樣式優先權越高。

爺爺--紅

爸爸--綠

孩子--藍

選擇優先權

行內>id>class>標籤選擇符

特殊情況,我們可以提升某個屬性的許可權

*****IEtest工具,也有一個相容性問題,在win7下打不開ie6.--下載綠色版ie6。不用安裝直接用哪種版本。

  四、常用的一些文字,文字控制的css樣式

*****我們在應用css樣式時,一定要注意它的預設值。因為不同的瀏覽器它的css預設值是不同的(不同的屬性瀏覽

器支援是不一樣的,我們還要保證我們網頁的相容性,儘量使用通過的屬性,不用存在相容性差別的屬性。)

  五、css控制元素的某種狀態--偽類

偽類語法:

元素名稱:偽類名稱{屬性:值}

例如:超連結的滑鼠經過狀態

a:hover{text-decoration:underline;}

*****如果,滑鼠放上效果不起作用,請修改連線狀態的順序 L-V-H-A