好程序員web前端培訓(xùn)分享HTMLCSS學(xué)習(xí)之CSS基礎(chǔ)
好程序員web 前端培訓(xùn)分享 HTMLCSS 學(xué)習(xí)之 CSS 基礎(chǔ)， CSS(cascading style sheet) 漢譯為層疊樣式表 , 是用于控制網(wǎng)頁樣式 WEB 標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)語言 , 在網(wǎng)頁中主要對網(wǎng)頁信息的顯示進(jìn)行控制。 目前推薦遵循的是W3C 發(fā)布的 CSS3.0 版本； 用來表現(xiàn)HTML 或者 XHTML 等樣式文件的計(jì)算機(jī)語言。 1998 年 5 月 21 日由 w3C 正式推出的 css2.0
目前創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、魚臺(tái)網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
HTML + CSS ， 彌補(bǔ)html 語言的不足 縮減頁面代碼，提高訪問速度; 代碼減少，頁面文件就會(huì)小，占用網(wǎng)絡(luò)帶寬就少，客戶端打開速度就快，用戶體驗(yàn)就會(huì)更好 結(jié)構(gòu)清晰，有利于seo 優(yōu)化 有利于搜索引擎優(yōu)化 縮短改版時(shí)間 對網(wǎng)站的重構(gòu)有很好的支持
CSS 語法 ， CSS 語法由兩部分組成：選擇符、聲明。 聲明包括：屬性和屬性值 選擇符 { 屬性 : 屬性值 ; 屬性 : 屬性值 } 選擇符說明：CSS 選擇符（選擇器） 選擇符表示要定義樣式的對象( 標(biāo)簽名字 ) ，可以是元素本身，也可以是一類元素或者制定名稱的元素 , 簡單來說就是給對應(yīng)的元素起個(gè)名稱。 1 ）每個(gè) CSS 樣式由兩部分組成，即選擇符和聲明，聲明又分為屬性和屬性值； 2 ）屬性必須放在花括號中，屬性與屬性值用冒號連接。 3 ）每條聲明用分號結(jié)束。 4 ）當(dāng)一個(gè)屬性有多個(gè)屬性值的時(shí)候，屬性值與屬性值不分先后順序 , 用空格隔開。 5 ）在書寫樣式過程中，空格、換行等操作不影響屬性顯示。
CSS樣式表
1:內(nèi)部樣式表
語法： <style type="text/css"> css語句 </style> 注：使用style標(biāo)記創(chuàng)建樣式時(shí)，最好將該標(biāo)記寫在<head></head>;
2:外部樣式
(1) 語法： <link rel="stylesheet" type="text/css" href="目標(biāo)文件的路徑及文件名全稱" /> 說明： 使用link元素導(dǎo)入外部樣式表時(shí)，需將該元素寫在文檔頭部，即<head>與</head>之間。 rel：用于定義文檔關(guān)聯(lián)，表示關(guān)聯(lián)樣式表； type：定義文檔類型； (2)、導(dǎo)入外部樣式表 <style type="text/css"> @import url("目標(biāo)文件的路徑及文件名全稱"); </style> 說明：@和import之間沒有空格 url和小括號之間也沒有空格；括號內(nèi)部加引號，必須結(jié)尾以分號結(jié)束；
link @import區(qū)別
差別1： 老祖宗的差別：link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式。 link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS。 差別2： 加載順序的差別：當(dāng)一個(gè)頁面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候），link引用的CSS會(huì)同時(shí)被加載，而@import引用的CSS 會(huì)等到頁面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁面時(shí)開始會(huì)沒有樣式。 差別3： 兼容性的差別。：@import是CSS2.1提出的，所以老的瀏覽器不支持，@import只在IE5以上的才能識別，而link標(biāo)簽無此問題。 差別4： 使用dom控制樣式時(shí)的差別：當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的.
3:內(nèi)聯(lián)樣式表
<標(biāo)簽 style="屬性1:值1;屬性2:值2; ……"></標(biāo)簽>
CSS樣式表的權(quán)重關(guān)系
1）內(nèi)聯(lián)樣式表的優(yōu)先級別最高 2）內(nèi)部樣式表與外部樣式表的優(yōu)先級和書寫的順序有關(guān)，后書寫的優(yōu)先級別高。 3）同在一個(gè)樣式表中的優(yōu)先級和書寫的順序也有關(guān)，后書寫的優(yōu)先級別高。(被覆蓋的只是相同屬性的樣式)
CSS選擇符
CSS基本選擇符：
類型選擇符、id選擇符、class選擇符(類選擇符) Css選擇符分類 ：
類型選擇符（標(biāo)記選擇器） 類選擇符 （class選擇符） ID選擇符 （id選擇器） 偽類選擇器 通配符（*）設(shè)置全局屬性 群組選擇符（集合選擇器） 包含選擇符（后代選擇器） 屬性選擇符 偽對象選擇符
類型選擇符
類型選擇符是根據(jù)html語言中的標(biāo)記來直接定義 語法： 標(biāo)簽名稱 {屬性：屬性值；} a)類型選擇符就是以文檔對象html中的標(biāo)簽作為選擇符，即使用結(jié)構(gòu)中元素名稱作為選擇符。例如body、div、p,img,em,strong,span......等。 b)所有的頁面元素都可以作為選擇符; 用法： （1）如果想改變某個(gè)元素的默認(rèn)樣式時(shí)，可以使用類型選擇符；（如：改變一個(gè)p段落樣式） （2）當(dāng)統(tǒng)一文檔某個(gè)元素的顯示效果時(shí)，可以使用類型選擇符；（如：改變文檔所有p段落樣式）
類（class）選擇符
語法 ： .class名{屬性：屬性值;} 用法： class選擇符更適合定義一類樣式； (1)當(dāng)我們使用類選擇符時(shí)，應(yīng)先為每個(gè)元素定義一個(gè)類名稱， (2)類選擇符的語法格式： 如：<div></div> .top{屬性:屬性值;}
ID選擇符
語法： <標(biāo)簽 id=“名”></標(biāo)簽> #id名{屬性：屬性值;} （1）可以給每個(gè)元素使用id選擇符，但id是元素的唯一標(biāo)識符，不可出現(xiàn)重復(fù)的id名； 如：<div id="top"></div> （2）id選擇符的語法格式是“#”加上自定義的id名 如：#box{width:300px; height:300px;} （3）起名時(shí)要取英文名，不能用關(guān)鍵字：(所有的標(biāo)記和屬性都是關(guān)鍵字) 如：div標(biāo)記 （4）一個(gè)id名稱只能在文檔中出現(xiàn)一次，因?yàn)閕d是唯一的 （5）最大的用處：創(chuàng)建網(wǎng)頁的外圍結(jié)構(gòu)。(唯一性、起名字不能使用關(guān)鍵字)
偽類選擇器
a:link {color: red;} /* 未訪問的鏈接狀態(tài) */ a:visited {color: green;} /* 已訪問的鏈接狀態(tài) */ a:hover {color: blue;} /* 鼠標(biāo)滑過鏈接狀態(tài) */ a:active {color: yellow;} /* 鼠標(biāo)按下去時(shí)的狀態(tài) / 說明： 1）當(dāng)這4個(gè)超鏈接偽類選擇符聯(lián)合使用時(shí)，應(yīng)注意他們的順序，正常順序?yàn)椋? a，a:link,a:visited,a:hover,a:active,錯(cuò)誤的順序有時(shí)會(huì)使超鏈接的樣式失效； 2）為了簡化代碼，可以把偽類選擇符中相同 的聲明提出來放在a選擇符中； 例如：a{color:red;} a:hover{color:green;} 表示超鏈接的三種狀態(tài)都相同，只有鼠標(biāo)劃過變化顏色
通配符
語法：*{屬性：屬性值;} 說明：通配選擇符的寫法是“*”，其含義就是所有標(biāo)簽； 表示該樣式適用所有網(wǎng)頁元素； 用法：常用來重置樣式。 例：*{margin:0;padding:0;}
群組選擇符
語法：選擇符1，……，選擇符5 {屬性：屬性值;} 說明：當(dāng)有多個(gè)選擇符應(yīng)用相同的樣式時(shí)，可以將選擇符用“，”分隔的方式，合并為一組。 實(shí)例：.top, #nav, p{width:100px;}
包含選擇器（后代選擇器）
語法：選擇符1(父) 選擇符2（后代）{屬性：屬性值;} 選擇符父級 選擇符子級{屬性：屬性值;} 說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的所有選擇符2; 實(shí)例： div ul li{height:200px;}
選擇符權(quán)重
css中用四位數(shù)字表示權(quán)重， 權(quán)重的表達(dá)方式如：0，0，0，0； 權(quán)重規(guī)則：HTML標(biāo)簽(類型選擇符)的權(quán)重是1，class的權(quán)重是10，id的權(quán)重是100。 類型選擇符的權(quán)重為0001 class選擇符的權(quán)重為0010 id選擇符的權(quán)重為0100 屬性選擇符的權(quán)重為0010 偽類選擇符的權(quán)重為0010 偽元素（對象）選擇符的權(quán)重為0001 包含選擇符的權(quán)重：為包含選擇符的權(quán)重之和 內(nèi)聯(lián)樣式的權(quán)重為1000 繼承樣式的權(quán)重為0000 群組集合選擇符權(quán)重為他本身 注：如果權(quán)重相同時(shí)，則執(zhí)行后寫的樣式；
css層疊性
css層疊指的是樣式的優(yōu)先級，當(dāng)產(chǎn)生沖突時(shí)以優(yōu)先級高的為準(zhǔn)。 1. 開發(fā)者樣式>讀者樣式>瀏覽器樣式（除非使用!important標(biāo)記 ） 2. id選擇符>（偽）類選擇符>元素選擇符 3. 權(quán)重相同時(shí)取后面定義的樣式
分享文章：好程序員web前端培訓(xùn)分享HTMLCSS學(xué)習(xí)之CSS基礎(chǔ)
文章地址：http://muchs.cn/article8/picdop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、服務(wù)器托管、微信小程序、網(wǎng)站排名、網(wǎng)站營銷、建站公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
