html和css入門 （四）
背景樣式
背景顏色
| 屬性名 | background-color |
|---|---|
| 屬性值 | 合法的顏色的名，比如：red；十六進位制值，比如：#ff0000；RGB 值，比如：rgb(255,0,0) |
| 預設值 | transparent |
| 描述 | 設定背景顏色。 |
示例如下：
.box {
/* 下面 3 種寫法是等價的 */
background-color: red; background-color: rgb(255, 0, 0); background-color: #ff0000; }
背景圖片
| 屬性名 | background-image |
|---|---|
| 屬性值 | 圖片所在路徑 |
| 預設值 | none |
| 描述 | 設定背景圖片。 |
示例如下：
.box {
background-image: url("./cat.jpg"); }
圖片重複方式
| 屬性名 | background-repeat |
|---|---|
| 屬性值 | repeat | repeat-x | repeat-y | no-repeat |
| 預設值 | repeat |
| 描述 | 設定背景圖片。 |
示例如下：
.box {
/* repeat 預設值，預設情況下，在水平和垂直方向上都重複*/
background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat; }
圖片位置
| 屬性名 | background-position |
|---|---|
| 屬性值 | 長度 | 百分比 | 表示方位的單詞 |
| 預設值 | 0% 0% |
| 描述 | 背景圖片的位置 |
示例如下：
/*
水平：left center right
垂直：top center bottom
*/
.box { background-position: 40px 40px; background-position: 20% 20%; background-position: right bottom; }
圖片附著
| 屬性名 | background-attachment |
|---|---|
| 屬性值 | scroll | fixed |
| 預設值 | scroll |
| 描述 | 設定背景圖片是否隨內容滾動 |
示例如下：
.box {
/* 背景圖隨著頁面內容滾動 */
background-attachment: scroll; /* 背景圖不會隨著頁面內容滾動 */ background-attachment: fixed; }
簡寫屬性
| 屬性名 | background |
|---|---|
| 屬性值 | color image position repeat attachment |
| 預設值 | 每個屬性的預設值 |
| 描述 | 設定背景圖片是否隨內容滾動 |
示例如下：
.box {
background: #00ff00 url("smiley.gif") no-repeat fixed center; }
偽類選擇器
:link：選擇未被點選過的連結。:visited：選擇被點選過之後的連結。:hover：選擇滑鼠懸停在其上的元素。:active：選擇正在被點選的元素（點著不放）。
高階選擇器
後代選擇器
後代選擇器用於指定目標選擇器必須處於某個選擇器對應的元素內部。其語法格式如下：
<!—使用後代選擇器 -->
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>後代選擇器測試</title> <style> div{ width:300px; height:60px; background-color:#ddd; } div .a{ background-color: green; border:1px solid red; } </style> </head> <body> <div>沒有任何屬性的div元素</div> <div> <div class=”a”>處於div之內，且class屬性為a的元素</div> </div> <div class=”a”>沒有處於div之內，且class屬性為a的元素</div> </body> </html>
程式碼中的div .a選擇器定義的CSS樣式，應該對處於
元素之內且class屬性為a的元素起作用。
直接後代選擇器
子選擇器用於指定目標選擇器必須是某個選擇器對應的元素的子元素。自選擇器的語法格式如下：
子選擇器與後代選擇器有點相似，它們之間存在如下區別：對於後代選擇器，只要目標選擇器位於外部選擇器對應的元素內部，即使是其“孫子元素”也可；對於子選擇器，要求目標選擇器必須是外部選擇器對應的元素的直接子元素才行。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>後代選擇器測試</title> <style> div{ width:300px; height:60px; background-color:#ddd; } div .a{ background-color: green; border:1px solid red; } </style> </head> <body> <div> <a href=”http://www.baidu.com”>百度一下</a> <p class=”a”> div 直接子元素</p> <p> <a class=”a”>，且class屬性為a的元素</a> </p> </div> </body> </html>
並列選擇器
有些時候，我們需要讓一份CSS樣式對多個選擇器起作用，那就可以利用並列選擇器來實現了。並列選擇器的語法格式如下：
對於並列選擇器而言，｛｝中定義的CSS樣式將會對前面列出的所有選擇器匹配的元素起作用。例如下面的示例。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>並列選擇器</title> <style> div,.a,#abc{ width:200px; height:40px; background-color: #888; border:2px dotted green; } </style> </head> <body> <div>沒有任何屬性的div元素</div> <p class=”a”> class屬性為a的元素</p> <h3 id=”abc”> id為abc的元素</h3> </body> </html>
上面定義的樣式對div元素、class屬性為a的元素、id為abc的元素都起作用。
元素盒子有兩部分是可見的：內容和邊框。內邊距是內容和邊框之間的空間，外邊距是邊框和頁面上其他元素之間的空間。
邊框
| 屬性名 | 描述 |
|---|---|
| border-width | 設定邊框的寬度 |
| border-style | 設定邊框的型別 |
| border-color | 設定邊框的顏色 |
| border | 屬性簡寫 |
border-style屬性的值：
none沒有邊框dashed短線式邊框dotted圓點線式邊框double雙線式邊框groove槽線式邊框inset有內嵌效果的邊框outset有外凸效果的邊框ridge脊線邊框solid實線邊框
div {
width: 250px;
height: 50px;
background-color: #dbdbdb;
margin-bottom: 10px;
color: red;
line-height: 50px;
text-align: center;
font-weight: bold;
}
.none {
border: none;
}
.dashed {
border: 10px dashed gray;
}
.dotted {
border: 10px dotted gray;
}
.double {
border: 10px double gray;
}
.groove {
border: 10px groove gray;
}
.inset {
border: 10px inset gray;
}
.outset {
border: 10px outset gray;
}
.ridge {
border: 10px ridge gray;
}
.solid {
border: 10px solid gray;
}
<div class="none">none沒有邊框</div> <div class="dashed">dashed短線式邊框</div> <div class="dotted">dotted圓點線式邊框</div> <div class="double">double雙線式邊框</div> <div class="groove">groove槽線式邊框</div> <div class="inset">inset有內嵌效果的邊框</div> <div class="outset">outset有外凸效果的邊框</div> <div class="ridge">ridge脊線邊框</div> <div class="solid">solid實線邊框</div>
內邊距
內邊距會在元素內容和邊框之間新增空白。我們可以為元素的每個邊界單獨設定內邊距，也可以使用padding簡寫屬性，在一條宣告中設定所有的值。
| 屬性 | 說明 | 值 |
|---|---|---|
padding-top |
設定頂部的內邊距 | 長度值或百分數 |
padding-right |
設定右邊的內邊距 | 長度值或百分數 |
padding-bottom |
設定底部的內邊距 | 長度值或百分數 |
padding-left |
設定左邊的內邊距 | 長度值或百分數 |
padding |
簡寫屬性 | 同上，順序為：top right bottom left |
外邊距
外邊距是元素邊框和頁面上圍繞在它周圍的所有東西之間的空白區域。圍繞在它周圍的東西包括其他元素和它的父元素。
| 屬性 | 說明 | 值 |
|---|---|---|
margin-top |
設定頂部的外邊距 | 長度值或百分數 |
margin-right |
設定右邊的外邊距 | 長度值或百分數 |
margin-bottom |
設定底部的外邊距 | 長度值或百分數 |
margin-left |
設定左邊的外邊距 | 長度值或百分數 |
margin |
簡寫屬性 |
跟內邊距屬性相似，使用百分數值設定外邊距時，百分數總是跟包含塊的寬度相關。
外邊距合併
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
下面三種基本情形會出現外邊距合併：
- 相鄰兄弟元素
相鄰的兩個兄弟元素的之間的外邊距會合並。如：
<p style="margin-bottom: 30px;">這個段落的下外邊距被合併...</p> <p style="margin-top: 20px;">...這個段落的上外邊距被合併。</p>
可以發現這兩個段落中間的距離，不是“上面段落的下邊距”與“下面段落的上邊距”的和 ，而是兩者中的較大者（在此示例中為30px）。
+塊級父元素與其第一個或最後一個子元素
此時這個塊級父元素和其第一個子元素就會發生 上外邊距合併 現象，換句話說，此時這個父元素對外展現出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者。
- 空塊元素
如果存在一個空的塊級元素，其 border、padding、content、height、min-height 都不存在。那麼此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合並。例如：
<p style="margin-bottom: 0px;">這個段落的和下面段落的距離將為20px</p> <div style="margin-top: 20px; margin-bottom: 20px;"></div> <p style="margin-top: 0px;">這個段落的和上面段落的距離將為20px</p>
當有負邊距存在時，合併後的外邊距將是最大正邊距加上最小負邊距（即負邊距中絕對值最大的一個）。
如兩個兄弟元素，上面的元素的下邊距為 20px ，下面的元素的上邊距為 -20px ，那麼發生外邊距合併後，這兩個元素的實際距離將變成 0px 。
處理溢位的內容
如果放置內容的元素尺寸太小的話，瀏覽器預設的處理方式是內容溢位，溢位的內容會被顯示。如下例所示：
<!-- 建立一個無法完全顯示其中內容的小尺寸元素 -->
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>文件的標題</title> <style> p{ border:1px solid blue; width: 100px; height: 100px; } </style> </head> <body> <p>悟空和唐僧一起上某衛視非誠勿擾,悟空上臺,24盞燈全滅。理由:1.沒房沒車只有一根破棍. 2.保鏢職業危險.3.動不動打妖精,對女生不溫柔. 4.坐過牢,曾被壓五指山下500年。唐僧上臺，譁!燈全亮。 理由:1.公務員； 2.皇上兄弟，後臺最硬 3.精通梵文等外語 4.長得帥 5.最關鍵一點：有寶馬！</p> </body> </html>
我們可以使用overflow屬性改變這種行為，下表列出了相關的overflow屬性及值。
屬性名：
overflow-x設定水平方向的溢位方式overflow-y設定垂直方向的溢位方式overflow簡寫屬性，只能設定一個屬性，當水平方向和垂直方向上設定的值相同時，可以使用該屬性。
屬性值：
visible：預設值。內容不會被修剪，會呈現在元素框之外。hidden：內容會被修剪，溢位部分是不可見的scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。auto：由瀏覽器決定如何顯示。如果內容太多就顯示滾動條，否則就不顯示。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>控制內容溢位</title> <style> p{ border:1px solid blue; width: 100px; height: 100px; } #first{ overflow:hidden; } #second{ overflow:scroll; } </style> </head> <body> <p id=”first”>小明過生日，媽媽對小明說：兒子吹蠟燭，許個願吧！吹完蠟燭後，媽媽問小明：許的什麼願啊？小明特無奈的說：我希望下個生日，蠟燭下面能有個蛋糕。</p> <p id=”second”>小明過生日，媽媽對小明說：兒子吹蠟燭，許個願吧！吹完蠟燭後，媽媽問小明：許的什麼願啊？小明特無奈的說：我希望下個生日，蠟燭下面能有個蛋糕。</p> </body> </html>
改變元素的盒型別
display屬性提供了一種改變元素盒型別的方式，給元素應用display屬性後會改變元素在頁面上的顯示方式。下表列出了一些display屬性常用的屬性值。
| 值 | 說明 |
|---|---|
inline |
元素會被顯示成行內元素 |
block |
此元素將顯示成塊級元素 |
inline-block |
元素會被顯示成行內的塊級元素 |
none |
元素既不顯示，也不佔據文件空間 |
-
塊級元素
將display屬性設定為block值會建立一個塊級元素。塊級元素獨佔一行，不允許其他元素與其同在一行。常見的塊級元素有div、p等。
-
行內元素
將display屬性設定為inline使會建立一個行內元素，行內元素會顯示在同一行，不會獨佔一行。常見的行內元素有a、span等。
使用inline值的時候，瀏覽器會忽略某些屬性，比如：
width、height、margin。 -
行內塊級元素
將display屬性設定為inline-block就會建立一個同時具有行內和塊級元素特徵的元素。盒子整體上作為行內元素顯示，也就是說會跟其他行內元素顯示在同一行，但盒子內部作為塊級元素顯示，這樣，
width、height和margin屬性都會應用到盒子上。 -
隱藏元素
將
display屬性設定為none值就是告訴瀏覽器不要為元素建立任何型別的盒子，這時元素在頁面中不顯示，也不佔據任何空間。
浮動
使用float屬性可以建立浮動的盒子，浮動盒會將元素的左邊界或者右邊界移動到包含塊或另一個浮動盒的邊界。
屬性名：
float 設定元素的浮動樣式
屬性值：
left 移動元素，使其左邊界挨著包含塊的左邊界或另一個浮動元素的右邊界 right 移動元素，使其右邊界挨著包含塊的右邊界或另一個浮動元素的左邊界 none 預設值。元素不浮動，並會顯示在其在文字中出現的位置。
清除浮動
如果設定了多個浮動元素，預設情況下，它們會一個挨著一個地堆疊在一起。使用clear屬性可以阻止出現這種情況。clear屬性可以阻止出現這種情況。clear屬性可以指定浮動元素的一個邊界或者兩個邊界不能挨著另一個浮動元素。
屬性名： clear 設定元素的左邊界、右邊界或左右兩個邊界不允許出現浮動元素
屬性值：
left 元素的左邊界不能挨著另一個浮動元素 right 元素的右邊界不能挨著另一個浮動元素 both 元素的左右邊界都不能挨著浮動元素 none 預設值。允許浮動元素出現在兩側