一、理解web標(biāo)準(zhǔn)含義--為什么采用web標(biāo)準(zhǔn)

*****將內(nèi)容與樣式分離

1、web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)，就是一系列技術(shù)標(biāo)準(zhǔn)
在使用時(shí)，是組合應(yīng)用
【1】、結(jié)構(gòu)化內(nèi)容 xhtml
【2】、表現(xiàn)化內(nèi)容 css
【3】、行為化內(nèi)容 JavaScript

2、網(wǎng)頁(yè)開(kāi)發(fā)的小工具--火狐瀏覽器中的firebug
工具--附加組件--搜索firebug
作為web前端工作，要兼容的瀏覽器ie，火狐瀏覽器，谷歌劉瀏覽器，蘋(píng)果瀏覽器等。
網(wǎng)頁(yè)是否有css樣式，測(cè)試--在瀏覽器改變文字大小。

3、css定義技巧：
【1】、為了將來(lái)的css代碼優(yōu)化，建議所有的屬性值后面都要帶上“；”
【2】、某些xhtml標(biāo)簽有自己默認(rèn)的css屬性值，

例如h1標(biāo)簽就有自己的屬性值，自動(dòng)就是加粗顯示，字號(hào)比較大。
【3】、為了兼容主流瀏覽器，為統(tǒng)一，建議我們?cè)谠O(shè)置時(shí)，將所有元素的css屬性重置為標(biāo)準(zhǔn)的。
【4】、不同的瀏覽器，有各自不容的css屬性值--要命的就是瀏覽器的兼容。
【5】、就一個(gè)比較特殊的字體想用怎么辦？--將其轉(zhuǎn)化為圖片。

分中英文字體。設(shè)置字體的順序，將英文字體設(shè)置在前，中文在后。
【6】、css編輯工具--用什么都行，高手，用樹(shù)葉殺人
【7】、想讓文字在垂直方向上居中，將行高設(shè)置為元素的高度，行高=元素高度
【8】、css可以重新設(shè)置，xhtml標(biāo)簽的默認(rèn)樣式。

4、css應(yīng)用給網(wǎng)頁(yè)的方式：就相當(dāng)于給人怎么去穿上衣服。
【1】、行內(nèi)樣式：應(yīng)用于一個(gè)。
【2】、嵌入樣式：應(yīng)用于一類標(biāo)簽。
【3】、如果我們有很多的網(wǎng)頁(yè)，都要用css，將這些css寫(xiě)到一個(gè)獨(dú)立文件中，這個(gè)就是外鏈?zhǔn)?，推薦使用。
【4】、導(dǎo)入式樣式：也是將樣式寫(xiě)到一個(gè)文件中，再倒入到網(wǎng)頁(yè)中。

*****說(shuō)明，導(dǎo)入式，其實(shí)與內(nèi)嵌式是相類似的，都是將樣式加入到網(wǎng)頁(yè)里。
1、導(dǎo)入式會(huì)占用html文件空間
2、有些瀏覽器解析會(huì)有問(wèn)題。瀏覽器會(huì)最后讀取@import中的內(nèi)容
3、將多個(gè)樣式文件，導(dǎo)入到一個(gè)樣式文件中。

二、css的特性

css叫層疊樣式表。

1、繼承：子元素會(huì)繼承父元素的某些樣式。
【因?yàn)橛行┳釉乇旧砭陀心J(rèn)值，所以他就不用父元素】

2、疊層：子元素如果定義了與父元素相同的樣式，會(huì)覆蓋掉父元素的樣式。
*****后面的樣式會(huì)覆蓋前面的樣式

三、css樣式的優(yōu)先權(quán)：當(dāng)樣式有沖突時(shí)，聽(tīng)誰(shuí)？

css優(yōu)先權(quán)：就近原則
作用范圍越小，優(yōu)先權(quán)越高。
離要修飾目標(biāo)越近的樣式優(yōu)先權(quán)越高。

爺爺--紅
爸爸--綠
孩子--藍(lán)
選擇優(yōu)先權(quán)
行內(nèi)>id>class>標(biāo)簽選擇符
特殊情況，我們可以提升某個(gè)屬性的權(quán)限
*****IEtest工具，也有一個(gè)兼容性問(wèn)題，在win7下打不開(kāi)ie6.--下載綠色版ie6。不用安裝直接用哪種版本。

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

*****我們?cè)趹?yīng)用css樣式時(shí)，一定要注意它的默認(rèn)值。因?yàn)椴煌臑g覽器它的css默認(rèn)值是不同的（不同的屬性瀏覽
器支持是不一樣的，我們還要保證我們網(wǎng)頁(yè)的兼容性，盡量使用通過(guò)的屬性，不用存在兼容性差別的屬性。）

五、css控制元素的某種狀態(tài)--偽類

偽類語(yǔ)法：
元素名稱：偽類名稱{屬性：值}
例如：超鏈接的鼠標(biāo)經(jīng)過(guò)狀態(tài)
a：hover{text-decoration：underline；}
*****如果，鼠標(biāo)放上效果不起作用，請(qǐng)修改連接狀態(tài)的順序 L-V-H-A

以上這篇Html/Css(新手入門(mén)第一篇必看攻略)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/xie-zhan/archive/2016/07/01/5631868.html

最新評(píng)論