第一節 padding_margin
1. padding內填充
padding
padding-top
padding-right
padding-bottom
padding-left
padding:2px
padding:10px20px;
padding:10px20px 30px;
padding:10px20px 30px 40px;
n Padding:一個數字，指的是四個方向是一樣的（上右下左）
n Padding-top,padding-right,padding-bottom,padding-left
n Padding:兩個數字
u Padding:10px 20px;
u 指的是上下爲10px,左右爲20px
u 注意：兩個數字之間有空格。
n Padding三個數字
u Padding:10px 20px 30px;
u 指的是上10px,下面的填充爲30px,左右爲20px;
n Padding:四個數字
u 如：padding:10px 20px30px 40px;
u 按着順時針方向。(上右下左)
n Padding:0 10px;
n Padding:0;
2. margin外邊距
margin - top
margin - right
margin - bottom
margin - left
margin :2px
margin :10px 20px;
margin :10px 20px 30px;
margin :10px 20px 30px 40px;
n margin:一個數字，指的是四個方向是一樣的（上右下左）
n margin-top,margin-right,margin-bottom,margin-left
n margin:兩個數字
u margin:10px 20px;
u 指的是上下外邊距爲10px,左右爲20px
u 注意：兩個數字之間有空格。
n margin三個數字
u margin:10px 20px 30px;
u 指的是上外邊距10px,爲30px,左右外邊距爲20px;
n margin:四個數字
u 如：padding:10px 20px30px 40px;
u 按着順時針方向。(外邊距，上右下左)
n margin:0 10px;
n margin:0;
3.CSS屬性——內外邊距
第一節 CSS背景
background
background：顏色 圖片路徑 重複 位置 依附
background-color: 背景色,英文單詞或十六進制顏色都可以。
Background-image:url(圖片路徑)背景圖
background-repeat:none repeat-x,repeat-y,repeat
background-position:top right bottom left
background-attachment:fixed
第三節 CSS Sprite
背景圖定位
小圖放到整合成大圖，減少向服務器的請求
在大圖上要顯示哪一部分，通過座標進行定位
背景圖的左上角是0，0 座標
一般定位：背景圖Y軸向上移，X軸向左移
background-positon:-100px-50px;
意思是：背景將向上移100px,同時向左移動50px.
第四節 CSS屬性——表格屬性
第五節 浮動與清除
IE6IE7 下，若浮動元素之前存在兄弟行內非浮動元素，IE 會將浮動元素所在的“當前行”認爲是其前邊的兄弟行內元素所產生的匿名框的底邊，導致該浮動元素折行。
浮動的元素可以理解爲該元素已經脫離文檔流。“已經不存在了”
浮動只有兩個方向：left,right
float:left(左浮動), float:right（右浮動）;
浮動的位置：浮動到包含元素的邊界。或具有浮動屬性元素的邊上。
浮動元素的層級高於普通元素。
凡是浮動的元素都是塊元素。
如果浮動前行內元素，浮動後自動轉爲塊元素。
備註：行內元素沒有寬高，只有塊元素纔有寬高。
關於浮動，我們能通常用在，將塊元素在一行內顯示。
主要應用於排序（DIV+CSS）
凡是設置了浮動這之後，一定要有清除浮動。
主要目的，清除上面的有浮動屬性，對後面的元素造成的影響。
（上面的浮動屬性，如果不清除，下面的元素會默認繼承。）
清除浮動的寫法：clear:left,right,both
.Clear:both,清除兩邊，我們通常用在版權獨佔一行。
清除寫的位置：具有浮動屬性的最後面。
通常，用一個空的<div class=”clear”></div>
CSS浮動介紹
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。
浮動框浮動後，將脫離原來的普通文檔流，並且不會佔用空間，層級會高於普通文檔流。
浮動元素會生成一個塊級框，而不論它本身是何種元素。
浮動元素一般要指定一個明確的寬度；否則，它們會盡可能地窄。
• 請看下圖，當把框1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
• 再請看下圖，當框1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因爲它不再處於文檔流中，所以它不佔據空間，實際上覆蓋住了框2，使框 2 從視圖中消失。
• 如果把所有三個框都向左移動，那麼框1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
• 如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”：
CSS清除
• 假設希望讓一個圖片浮動到文本塊的左邊，並且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。
• 因爲浮動元素脫離了文檔流，所以包圍圖片和文本的div 不佔據空間。
• 如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用clear(清除浮動)。
第六節 CSS繼承特性
l CSS繼承性
n HTML文檔以樹形結構進行組織，各元素之間是一種層次關係，這種層次關係同樣反映在樣式表的應用中。具有層次關係的元素之間，內層元素將繼承外層元素的樣式，多個外層元素中定義的樣式將疊加到內層元素。
n HTML中，<body>是其他元素的容器，是其他元素的最外層元素，所以<body>元素中定義的樣式將影響其他所有元素的顯示格式。
l 具有繼承的CSS屬性
n 文本相關的屬性是繼承的
u text-align、color、text-indent、font-family、font-size
u font-style、font-weight、 letter-spacing、word-spacing
u text-transform、line-height等
第六節 CSS優先級
l 單個選擇器優先級
n !important > 行內樣式 > ID選擇器> Class選擇器 >元素選擇器
n 定義!important的選擇器，優先級最高，但IE6不支持。
n 例如：h1{color:#ff0000!important;}
<style type="text/css">
/*（1）行內樣式優先級最高 */
#title{ color:#0000ff;} /*（2）ID選擇器比Class選擇器優先級高 */
.title{ color:#00ff00; } /*（3）Class選擇器比元素選擇器優先級高 */
h1{ color:#ff0000; } /*（4）元素選擇器，優先級最低*/
</style>
<h1 class="title" id="title"style="color:#999900">人社部官員</h1>
1. 組合選擇器的優先級是如何計算的？
a) 特指度表示一個css選擇器表達式的重要程度，可以通過一個公式來計算出一個數值，數越大，越重要。
b) 一般而言，選擇器指向的越準確，它的優先級就越高。通常我們用1表示標籤選擇器的優先級，用10表示class選擇器的優先級，用100標示ID選擇器的優先級，用1000表示行內樣式。
c) 叫做“I-C-E”計算公式
d) 舉例：
i. div.box span{ } 優先級爲12
ii. .box span{ } 優先級爲11，優先級小於上邊
重點要注意：!important優先級最高，
高於上面一切。* 選擇器最低，低於一切。
第七節 CSS優先級實例
<style type="text/css">
div.news div{color:#ff0000;}
.title{color:#0000ff;font-size:24px;height:30px;font-family:黑體;}
</style>
<div class="news">
<divclass="title">橫跨黨政軍 規格勝其他領導小組</div>
<divclass="content">不能將國家安全委員會作爲一個政府部門來看待。</div>
</div>
第八節 綜合案例限時搶
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> |
|
<title>網頁標題</title> |
|
<meta name="keywords" content="關鍵字列表" /> |
|
<meta name="description" content="網頁描述" /> |
|
<link rel="stylesheet" type="text/css" href="" /> |
|
<style type="text/css"> |
|
*{ margin:0;padding:0;border:0;} |
|
body{font-size:12px;} |
|
ul,li{ list-style:none} |
|
.box{ border:1px solid black; width:650px; margin:50px auto; padding:10px;} |
|
.box li{ float:left; text-align:center; border:1px solid green; position:relative; margin:5px;} |
|
.box li img.up{ position:absolute; top:-10px;right:-10px;} |
|
h2{ color:#ff3300; border-bottom:2px solid #ff3300; margin-bottom:10px; font-size:24px;} |
|
.box a:hover{opacity:0.5;} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="box"> |
|
<div><h2>今日閃價</h2></div> |
|
<div> |
|
<ul> |
|
<li><a href=""><img src="08.jpg"></a><br>優惠品格<img src="up.png" class="up" /></li> |
|
<li><a href=""><img src="08.jpg"></a><br>優惠品格<img src="up.png" class="up" /></li> |
|
<li><a href=""><img src="08.jpg"></a><br>優惠品格<img src="up.png" class="up"/></li> |
|
<li><a href=""><img src="08.jpg"></a><br>優惠品格<img src="up.png" class="up"/></li> |
|
<li><a href=""><img src="08.jpg"></a><br>優惠品格<img src="up.png" class="up" /></li> |
|
<li><a href=""><img src="08.jpg"></a><br>優惠品格<img src="up.png" class="up" /></li> |
|
<li><a href=""><img src="08.jpg"></a><br>優惠品格<img src="up.png" class="up"/></li> |
|
<li><a href=""><img src="08.jpg"></a><br>優惠品格<img src="up.png" class="up"/></li> |
|
</ul> |
|
<div style="clear:both"></div> |
|
</div> |
|
</div> |
|
</body> |
|
</html> |
