1 Css的簡介

Css層疊樣式表

層疊 ：一層一層的

樣式表： 很多屬性與書屬性值

Css可以將頁面的內容與顯示的樣式分離，提高了顯示功能

2 css 與html 的四種結合方式

1）每一個HTML標籤上面都有一個屬性 style

Eg<divstyle="color:green">asdfgasdg</div>

2）使用HTML的標籤<style> 寫在head裡面

<styletype=”text/css”>div {/style>

下面div標籤裡面的屬性就會按照上面設定的執行

3）建立css檔案，然後在HTML檔案中引入css檔案實現分離

Css檔案：<div>{color:blue}</div>

<style type="text/css">@importurl(div.css);</style>

(有一些瀏覽器不起作用，一般不用)

4）使用link標籤(在head中)

<linkred=”stylesheet” type=”text/css” href=”css的路徑”/>

3 css的優先順序

由上到下，由外到內優先順序由低到高，後加載的優先順序高

4 Css的基本選擇器（三種）

格式 選擇器{屬性名: 屬性值;…}

1） 標籤選擇器 ：使用標籤名作為選擇器名

2） Class選擇器：在HTML標籤中使用一個class屬性，對class屬性起名

那麼選擇器的名字就可以是標籤名+class的名字，如果有多個可以使用.class值

3） Id選擇器:原理與class一樣，將class----àid, .-----à#

選擇器的優先順序：

style>Id選擇器>class選擇器>標籤選擇器

5 css擴充套件選擇器

1) 關聯選擇器，用於標籤裡面套標籤 div p {}用於div 裡面p標籤的資料

2) 組合選擇器， div,p{}用於div 和p 標籤的操作，並操作

3) 偽元素選擇器

超連結的狀態 ：原始狀態 滑鼠放上去的狀態 點選 點選之後的狀態

:link :hover :active :visited

6 盒子模型-----在進行佈局前需要把資料封裝到一塊一塊的區域中（div）

1) 邊框
border ：粗細（2px）樣式（solid）顏色（blue）
上：border—top
下：border—bottom
左：border—left
右：border—right

2) 內邊距
padding：距離（20px）
使用padding同一設定也可以分別設定上下左右的內邊距

3) 外邊距
margin：距離（2px）
可以使用margin統一設定也可以分別設定上下左右四個邊框

7 css佈局的漂浮
float：left：文字流向物件的右邊
right：文字流向物件的左邊

8 css 的佈局定位
position：
屬相值：absolute：將物件從文件中拖出，在最上層，可以使用top，bottom等定位
relative：不會將物件拖出，而是直接使用top和bottom等對物件定位。

圖片簽名-----在圖片上顯示文字
#text{position: absolute;top: 30px;left: 30px;color:red;}
<div id="img11"><img src="image/1.jpg"width="200" height="300"></div>

<div id="text">王美華</div>