CSS學習備忘錄

如何引用CSS檔案的內容

在一個CSS檔案中，可以通過@import指令來引用另一個CSS檔案，格式如下：

@import url("被引用的CSS檔案名稱");

例如有a.css和b.css兩個CSS檔案，如果希望在a.css中使用b.css中的選取器，可在a.css檔案中添加如下指令來完成：

@import url("b.css");

在html或者php檔案中引用某個css檔案時，可以在<style>標籤中添加如下格式的語句：

<style>
@import url("被引用的CSS檔案名稱");
</style>

Css選取器

選取器是CSS中非常重要的概念，CSS中常用四種不同的選取器。簡單說，選取器就是在CSS中建立，而在網頁（html,jsp,php,asp.net）中使用。

css選取器優先順序：

id選取器>class選取器>html選取器>萬用字元選取器

id選取器的複用性比較低，優先順序比類別選取器高，唯一使用。如果某人樣式只給某一個html元素使用，則選擇id選取器；如果一個樣式可以給多個html元素使用，則應當優先使用class選取器。

1、CSS類別選取器(又叫Class選取器)

基本文法：

.類別選取器{

屬性名稱:屬性值;

……

}

CSS類別選取器的例子：

http://www.bianceng.cn/http://www.bianceng.cn/web/Css/201607/50222.htm

2、CSS的id選取器

基本文法：

#id選取器{

屬性名稱:屬性值;

……

}

CSS的id選取器的例子：

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50229.htm

3、CSS的html元素選取器

基本文法：

html元素名{

屬性名稱:屬性值;

……

}

CSS的html元素選取器的例子：

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50230.htm

例子：CSS讓所有的超連結出現指定的效果：

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50235.htm

例子：css控制不同段落出現不同的效果，即對同一種html元素分類：

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50240.htm

4、CSS萬用字元選取器：

希望所有的元素都符合某一種樣式，可使用萬用字元選取器。萬用字元選取器可應用於所有html元素，但其優先順序最低。

文法：

*{

屬性名稱:屬性值;

…….

}

例:

*{margin:0;padding:0}

可以讓所有html元素的外邊距和內邊距都預設為0

CSS萬用字元選取器的例子

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50246.htm

Css的margin屬性：

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50251.htm

CSS父子選取器：

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50256.htm

一個CSS元素同時有id選取器和類別選取器的例子：

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50261.htm

一個CSS元素同時有多個類別選取器的例子

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50266.htm

如何合并多個類別選取器的公用部分？

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50271.htm

Css塊內元素和行內元素

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50276.htm

塊元素和行內元素的相互轉換

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50281.htm

CSS標準流和非標準流

流：網頁設計中的流，是指元素（標籤）的相片順序。

標準流：元素（標籤）在網頁中如同流水，排在前面的元素（標籤），內容在前面出現；排在後面的元素（標籤），內容在後面出現。

非標準流：當某個元素（標籤）脫離了標準流（例如因為相對定位）排列，統稱為非標準流排列。

CSS盒子模型

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50287.htm

CSS盒子模型綜合執行個體

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50290.htm

CSS設定背景圖片

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50295.htm

CSS控制帶文字說明的多張圖片

用CSS盒子模型實現仿優酷網首頁的圖片效果。

具體寫頁面順序：

1、先寫html，做出顯示內容；

2、寫css檔案，控制樣式；

CSS浮動

浮動是CSS中非常重要的概念。浮動對塊元素和行內元素都生效，包括左浮動、右浮動和清除浮動。行內元素如果浮動，自動轉換為塊元素。

1、右浮動：指一個塊元素向右移動，讓出自己原來的位置，向右移動直到碰到包含自己的父元素的右邊框。

2、左浮動：指某個塊元素盡量向左邊移動，讓出右邊的位置，讓別的塊元素顯示。

CSS右浮動的例子：

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50296.htm

CSS左浮動的例子：

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50301.htm

CSS浮動的一個特殊情況

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50307.htm

如何理解浮動？

如果一個元素右/左浮動，則：

1、該元素本身會盡量向右/左移動，直到碰到邊框或者別的浮動元素，浮動對塊元素和行內元素都生效。

2、元素向右/左浮動，相當於讓出自己的左/右邊，別的元素就會在它的左/右邊排列。

CSS實現文字包圍圖片的效果

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50312.htm

清除浮動

如果不希望別的元素在某個元素的左邊或者右邊，可使用清除浮動的方法：

clear:right;clear:left;clear:both;

CSS定位

CSS定位(Positioning)屬性允許對元素進行定位，position屬性值：

1、靜態定位：static(預設值)：元素正常產生。塊元素產生一個矩形框，作為文檔流/標準流的一部分，行內元素則會建立一個或多個行框，置於其父元素之中。

2、相對定位：relative：元素框位移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留，好象該元素仍然在文檔流/標準流中一樣。這裡所謂的相對，是相對該元素原來應該在的位置進行定位。

3、絕對位置：absolute：元素框從文檔流中完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好象元素原來不存在一樣。元素定位後產生一個塊級框，而不論原來它在正常流中產生何種類型的框。

絕對位置，是指對該元素最近的那個脫離了標準流的元素定位；如果沒有父元素(或有父元素，但父元素沒有脫離標準流)，則相對body左上方定位。

4、固定定位：fixed:元素框的表現類似於將position設定為absolute，不過其包含塊是視窗本身，即相對body的左上方。

靜態定位靠margin-left,margin-right等來移動位置；

動態定位靠left，right來移動位置。

CSS相對定位的例子

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50317.htm

CSS絕對位置的例子1

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50322.htm

CSS絕對位置的例子2

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50325.htm

CSS固定定位的例子

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50331.htm

position的z-index

http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50336.htm