JavaWeb基礎—CSS學習小結

標籤：圖文   對比   html標籤   top   css布局   bottom   距離   結合   需要   

重點記憶：四種結合方式 三種基本選取器
　　1.CSS:層疊樣式表
　　相當於皮膚
　　提高了可維護性、樣式與內容分離（注釋格式/* */）

　　2.CSS與HTML結合的四種方式：內聯式、嵌入式、外部式
　　 1.每個標籤上都有一個style【屬性】來控制 sytle="key:value;key:value" <div style="">
　　2.使用style標籤：<style type="text/css">div{key:value}</style>寫在頭部
　　3.在style標籤裡面使用語句，與2類似對比 【相容性差】
　　@import url{css檔案路徑};
　　4.使用link頭標籤引入外部檔案<link rel="stylesheet" type="text/css" href="" />分離了【推薦】
　　

　　CSS的優先順序：由上到下、由外到內優先順序增高（就近原則）

　　3. CSS的選取器：要對哪個標籤裡的樣式進行操作
　　三種基本選取器
　　　　1.標籤選取器：使用標籤名稱作為選取器名稱（上2處）
　　　　2.類別選取器【最常用】：每個HTML標籤都有一個class屬性，使用這個值作為選取器。
　　　　使用方法：div.haha{} .haha{}(所有class值為haha的）
　　　　3.id選取器【給js留的】：每個HTML標籤都有一個id屬性，使用這個值作為選取器。
　　　　使用方法：div#haha{} #haha{}（所有id值為haha的）
　　　　基本選取器的優先順序：（內聯的就近的style最高）>id>class>標籤

　　不同點：

　　　　1、ID選取器只能在文檔中使用一次。與類別選取器不同，在一個HTML文檔中，
　　　　ID選取器只能使用一次，而且僅一次。而類別選取器可以使用多次。
　　　　2、可以使用類別選取器詞列表方法為一個元素同時設定多個樣式。我們可以為一個元素同時設多個樣式
　　　　但只可以用類別選取器的方法實現，ID選取器是不可以的（不能使用 ID 詞列表）。
　　　　<span class="stress bigsize">可以給兩個同時設定。

　　三種延伸選取器
　　1.關聯選取器：可以設定嵌套標籤裡的樣式
　　如：<div><p></p></div> 設定p標籤的樣式 div p{}
　　.food>li .first span
　　總結：>作用於元素的第一代後代，空格作用於元素的所有後代。
　　2.組合選取器：把不同的標籤設定成相同的樣式
　　如：<div></div> <p></p> 設定相同的樣式 div,p{}
　　3.虛擬元素選取器：提供了一些定義好的樣式【作瞭解】
　　更有趣的是偽類選擇符，為什麼叫做偽類選擇符，它允許給html不存在的標籤設定樣式
　　比如超連結（lv ha)：
　　狀態：原始狀態 懸停狀態 點擊狀態 點擊之後
　　:link :hover ：active :visited
　　a:hover{color:red;}
　　樣式操作 在頭部style中 a:link{} a:hover{}

　　4.CSS盒子模型 （現在主流為div+css組成）
　　在講解CSS布局之前，我們需要提前知道一些知識，
　　在CSS中，html中的標籤元素大體被分為三種不同的類型：塊狀元素、內嵌元素和內聯塊狀元素。
　　重要概念 邊框：border （設定上下左右 border-top border-bottom border-left border-right）
　　屬性：width（即粗細） style（樣式） color
　　內邊距：padding（div中常值內容距離邊框的值）（四個方向同上）
　　屬性：length
　　外邊距：margin（div距外部的距離）其它亦同上
　　還記得在講盒模型時外邊距(margin)、內邊距(padding)和邊框(border)
　　設定上下左右四個方向的邊距是按照順時針方向設定的（不單獨設定的時候的預設順序）
　　5.CSS的布局的漂浮【作瞭解，用的少】
　　float
　　兩個屬性值：left 文字資料流流向對象【右邊】（自己居左，後邊div居右） right 流向【左邊】
　　6.CSS的布局的定位
　　position
　　兩個屬性值：absolute :將對象從文檔流中拖出（在上面飄著，後面補上），再使用上下左右定位
　　relative ：對象不可重疊（不會拖出），依舊使用上下左右定位
　　7.案例：圖文混排 圖片簽名

JavaWeb基礎—CSS學習小結