學習HTML-第二章css基礎

• 歡迎加入前端交流羣來獲取視頻資料以及前端學習資料：749539640

第二章css基礎

1、css簡介

cascading style sheets    漢譯層疊樣式表,WEB標準中的表現標準語言,表現標準語言在網頁中主要對網頁信息的顯示進行控制，簡單說就是如何修飾網頁信息的顯示樣式。
目前推薦遵循的是W3C發佈的CSS3.0.
用來表現XHTML或者XML等樣式文件的計算機語言。
1998年5月21日由w3C正式推出的css2.0

2、樣式的創建：內部樣式   外部樣式  和 內聯樣式

1.內部樣式  ：

語法：

<style type="text/css"> /*css語句*/ </style>

注：使用style標記建立樣式時，最好將該標記寫在;

2.外部樣式

語法：

<link rel="stylesheet" type="text/css" href="css/index.css"/>

3.內聯樣式（行間樣式，行內樣式，嵌入式樣式）

語法：

<p style="color:red;">這是一段文本</p>

4.@import方式引入樣式文件

語法：

<style type="text/css"> @import url(目標文件的路徑及文件名全稱); </style>

• 注：@和import之間沒有空格 url和小括號之間也沒有空格；必須結尾以分號結束；
• link和import導入外部樣式的區別：
  差異1：老祖宗的差異：link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。 link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性等，@import就只能加載CSS。
  差異2：加載順序的差異：當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式。
  差異3：兼容性的差異。：@import是CSS2.1提出的，因此老的瀏覽器不支持，@import只t在IE5以上的才能識別，而link標籤無此問題。
  差異4：使用dom控制樣式時的差異：當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的.

3、CSS語法

選擇符{屬性：屬性值；屬性：屬性值；}
div{
height: 4px;
}

說明：
1）每一個CSS樣式由兩部分組成，即選擇符和聲明，聲明又分爲屬性和屬性值；
2）屬性必須放在花括號中，屬性與屬性值用冒號鏈接。
3）每條聲明用分號結束。
4）當一個屬性有多個屬性值的時候，屬性值與屬性值不分前後順序。
5）在書寫樣式過程當中，空格、換行等操做不影響屬性顯示

4、樣式表的優先級

內聯樣式表的優先級別最高
內部樣式表與外部樣式表的優先級和書寫的順序有關，後書寫的優先級別高。

5、CSS選擇符（選擇器）

選擇符表示要定義樣式的對象，能夠是元素自己，也能夠是一類元素或者制定名稱的元素.
經常使用的選擇符有十種左右
類型選擇符，id選擇符，class選擇符，通配符，羣組選擇符，
包含選擇符，僞類選擇符

1. 元素選擇符/類型選擇符（element選擇器 )

語法：

元素名稱{屬性：屬性值；}
 div{
padding: 0;
}

說明：
a)元素選擇符就是以文檔語言對象類型做爲選擇符，即便用結構中元素名稱做爲選擇符。例如body、div、p,img,em,strong,span......等。
b)全部的頁面元素均可以做爲選擇符;
用法：
1)若是想改變某個元素的默認樣式時，可使用類型選擇符；
2) 當統一文檔某個元素的顯示效果時，可使用類型選擇符；

2.id選擇器

語法：

#id名{屬性：屬性值;}
#top{
padding: 0;
}

說明：
1）當咱們使用id選擇符時，應該爲每一個元素定義一個id屬性，
如：

2）id選擇符的語法格式是「#」加上自定義的id名
如：#box{width:300px; height:300px;}
3)  起名時要取英文名，不能用關鍵字：(全部的標記和屬性都是關鍵字)
如：head標記
4）一個id名稱只能對應文檔中一個具體的元素對象，由於id只能定義頁面中某一個惟一的元素對象。
5)   最大的用處：建立網頁的外圍結構。

3.class選擇器

語法：

.class名{屬性：屬性值;}
.top{
padding: 0;
}

說明：
1）當咱們使用類選擇符時，應先爲每一個元素定義一個類名稱，
2）類選擇符的語法格式是："如：

"
用法：class選擇符更適合定義一類樣式；

4.*通配符

語法：

*{屬性：屬性值；}
*{
padding: 0;
margin: 0;
}

說明：通配選擇符的寫法是「*」，其含義就是全部元素。
用法：經常使用來重置樣式。

5.羣組選擇器

語法：

選擇符1，選擇符2，選擇符3{屬性：屬性值;}
 <div class="box"></div>
 <div class="name"></div>
.box,.name{
padding: 0;
}

說明：當有多個選擇符應用相同的樣式時，能夠將選擇符用「,」分隔的方式，合併爲一組。

6.包含選擇器(後代選擇器)

語法：

選擇符1    選擇符2{屬性：屬性值;}
 <div class="box">
  <div class="name"></div>
</div>
.box  .name{
padding: 0;
}

說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的全部選擇符2;

7.僞類選擇器(僞類選擇符)

語法 ：
a:link{屬性：屬性值;}超連接的初始狀態;
a:visited{屬性：屬性值;}超連接被訪問後的狀態;
a:hover{屬性：屬性值;}鼠標懸停，即鼠標劃過超連接時的狀態;
a:active{屬性：屬性值;}超連接被激活時的狀態，即鼠標按下時超連接的狀態;
說明：
1）當這4個超連接僞類選擇符聯合使用時，應注意他們的順序，正常順序爲：
a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連接的樣式失效；
（愛恨原則【L O V E】 【H A T E】）
2）爲了簡化代碼，能夠把僞類選擇符中相同的聲明提出來放在a選擇符中；
例如：a{color:red;}     a:hover{color:green;}表示超連接的三種狀態都相同，只有鼠標劃過變顏色。

4、選擇符的權重

css中用四位數字表示權重，權重的表達方式如：0，0，0，0類型選擇符的權重爲0001class選擇符的權重爲0010id選擇符的權重爲0100子選擇符的權重爲0000屬性選擇符的權重爲0010僞類選擇符的權重爲0010僞元素選擇符的權重爲0001包含選擇符的權重：爲包含選擇符的權重之和內聯樣式的權重爲1000繼承樣式的權重爲0000