CSS 簡介
CSS 指層疊樣式表 (Cascading Style Sheets),樣式定義如何顯示 HTML 元素,樣式通常存儲在樣式表中,外部樣式表通常存儲在 CSS 文件中(多個樣式定義可層疊為一個）。
CSS中，顏色值通常以以下方式定義:
- 十六進制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 顏色名稱 - 如："red"
CSS 語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明：
- 選擇器通常是需要改變樣式的 HTML 元素，參考CSS 選擇器
- 每條聲明由一個屬性和一個值組成，屬性（property）是您希望設置的樣式屬性（style attribute），參考CSS 屬性
- 每個屬性有一個值，屬性和值被冒號分開。
- CSS聲明總是以分號(;)結束，聲明總以大括號({})括起來。
- 注釋是用來解釋代碼，CSS注釋以 /* 開始, 以 */ 結束。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程</title>
<style>
body {background-color:tan;}
h1 {color:maroon;font-size:20pt;}
hr {color:navy;}
p {font-size:11pt;margin-left:15px;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}
</style>
</head>
<body>
<h1>這是標題</h1>
<hr>
<p>你可以看到這個段落是被設定的 CSS 渲染的。</p>
<p><a href="https://www.cnblogs.com/" target="_blank">這是一個鏈接</a></p>
</body>
</html>
Id 和 Class
如果要在HTML元素中設置CSS樣式，需要在元素中設置"id" 和 "class"選擇器。
id 選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
以下的樣式規則應用於元素屬性 id="para1":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>這個段落不受該樣式的影響。</p>
</body>
</html>
注：ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。
class 選擇器
class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示。
在以下的例子中，所有擁有 center 類的 HTML 元素均為居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">標題居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
在以下實例中, 所有的 p 元素使用 class="center" 讓該元素的文本居中:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">這個標題不受影響</h1>
<p class="center">這個段落居中對齊。</p>
</body>
</html>
注：類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。
CSS 創建
當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔，插入樣式表的方法有三種:
- 外部樣式表(External style sheet)
- 內部樣式表(Internal style sheet)
- 內聯樣式(Inline style)
外部樣式表
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，可以通過改變一個文件來改變整個站點的外觀。
每個頁面使用 <link> 標簽鏈接到樣式表， <link> 標簽在（文檔的）頭部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
瀏覽器會從文件 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標簽。
樣式表應該以 .css 擴展名進行保存，下面是一個樣式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
注：不要在屬性值與單位之間留有空格（如："margin-left: 20 px" ），正確的寫法是 "margin-left: 20px" 。
內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表，可以使用 <style> 標簽在文檔頭部定義內部樣式表，就像這樣:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
內聯樣式
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢，請慎用這種方法。
要使用內聯樣式，需要在相關的標簽內使用樣式（style）屬性，Style 屬性可以包含任何 CSS 屬性，本例展示如何改變段落的顏色和左外邊距：
<p style="color:sienna;margin-left:20px">這是一個段落。</p>
多重樣式
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。
外部樣式表擁有針對 h3 選擇器的三個屬性：
h3
{
color:red;
text-align:left;
font-size:8pt;
}
內部樣式表擁有針對 h3 選擇器的兩個屬性：
h3
{
text-align:right;
font-size:20pt;
}
擁有內部樣式表的這個頁面同時與外部樣式表鏈接，h3 得到的樣式是：
color:red;
text-align:right;
font-size:20pt;
顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內部樣式表中的規則取代。
多重樣式優先級
樣式表允許以多種方式規定樣式信息：
- 在單個的 HTML 元素中；
- 在 HTML 頁的頭元素中；
- 在一個外部的 CSS 文件中；
- 在同一個 HTML 文檔內部引用多個外部樣式表。
一般情況下，優先級如下：（內聯樣式）Inline style > （內部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認樣式。
<head>
<!-- 外部樣式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 設置：h3{color:blue;} -->
<style type="text/css">
/* 內部樣式 */
h3{color:green;}
</style>
</head>
<body>
<h3>測試！</h3>
</body>
注：如果外部樣式放在內部樣式的后面，則外部樣式將覆蓋內部樣式。
背景（background）
CSS 背景屬性用於定義HTML元素的背景：
| Property | 描述 |
|---|---|
| background | 簡寫屬性，作用是將背景屬性設置在一個聲明中。 |
| background-attachment | 背景圖像是否固定或者隨着頁面的其余部分滾動。 |
| background-color | 設置元素的背景顏色。 |
| background-image | 把圖像設置為背景。 |
| background-position | 設置背景圖像的起始位置。 |
| background-repeat | 設置背景圖像是否及如何重復。 |
背景顏色
background-color 屬性定義了元素的背景顏色，以下實例中body、h1、p和 div 元素擁有不同的背景顏色:
body {background-color:#b0c4de;}
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
背景圖像
background-image 屬性描述了元素的背景圖像，默認情況下背景圖像進行平鋪重復顯示以覆蓋整個元素實體，頁面背景圖片設置實例:
body {background-image:url('paper.gif');}
background-repeat
設置如何平鋪對象的 background-image 屬性：
| 值 | 說明 |
|---|---|
| repeat | 背景圖像將向垂直和水平方向重復。這是默認 |
| repeat-x | 只有水平位置會重復背景圖像 |
| repeat-y | 只有垂直位置會重復背景圖像 |
| no-repeat | background-image不會重復 |
| inherit | 指定background-repea屬性設置應該從父元素繼承 |
background-position
background-position屬性設置背景圖像的起始位置：
| 值 | 描述 |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom |
如果僅指定一個關鍵字，其他值將會是"center" |
| x% y% | 第一個值是水平位置，第二個值是垂直。左上角是0％0％，右下角是100％100％。如果僅指定了一個值，其他值將是50％，默認值為：0％0％ |
| xpos ypos | 第一個值是水平位置，第二個值是垂直。左上角是0，單位可以是像素（0px0px）或任何其他 CSS單位。如果僅指定了一個值，其他值將是50％，可以混合使用％和positions |
| inherit | 指定background-position屬性設置應該從父元素繼承 |
background-attachment
background-attachment設置背景圖像是否固定或者隨着頁面的其余部分滾動：
| 值 | 描述 |
|---|---|
| scroll | 背景圖片隨着頁面的滾動而滾動，這是默認的。 |
| fixed | 背景圖片不會隨着頁面的滾動而滾動。 |
| local | 背景圖片會隨着元素內容的滾動而滾動。 |
| initial | 設置該屬性的默認值， 閱讀關於 initial 內容 |
| inherit | 指定 background-attachment 的設置應該從父元素繼承，閱讀關於 inherit 內容 |
簡寫屬性
為了簡化頁面的背景屬性的代碼，可以將這些屬性合並在同一個屬性中，**背景的簡寫屬性為 "background":
body {background:#ffffff url('img_tree.png') no-repeat right top;}
當使用簡寫屬性時，屬性值的順序為（無需全部使用）：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
文本格式
所有CSS文本屬性：
| 屬性 | 描述 |
|---|---|
| color | 設置文本顏色 |
| direction | 設置文本方向。 |
| letter-spacing | 設置字符間距 |
| line-height | 設置行高 |
| text-align | 對齊元素中的文本 |
| text-decoration | 向文本添加修飾 |
| text-indent | 縮進元素中文本的首行 |
| text-shadow | 設置文本陰影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 設置或返回文本是否被重寫 |
| vertical-align | 設置元素的垂直對齊 |
| white-space | 設置元素中空白的處理方式 |
| word-spacing | 設置字間距 |
文本顏色（color）
一個網頁的背景顏色是指在主體內的選擇：
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
注：對於W3C標准的CSS，如果你定義了顏色屬性，你還必須定義背景色屬性。
對齊方式（text-align）
text-align屬性指定元素文本的水平對齊方式：
| 值 | 描述 |
|---|---|
| left | 把文本排列到左邊。默認值：由瀏覽器決定。 |
| right | 把文本排列到右邊。 |
| center | 把文本排列到中間。 |
| justify | 實現兩端對齊文本效果。 |
| inherit | 規定應該從父元素繼承 text-align 屬性的值。 |
文本修飾（text-decoration）
text-decoration 屬性規定添加到文本的修飾，下划線、上划線、刪除線等：
| 值 | 描述 |
|---|---|
| none | 默認。定義標准的文本。 |
| underline | 定義文本下的一條線。 |
| overline | 定義文本上的一條線。 |
| line-through | 定義穿過文本下的一條線。 |
| blink | 定義閃爍的文本。 |
| inherit | 規定應該從父元素繼承 text-decoration 屬性的值。 |
文本轉換（text-transform）
ext-transform 屬性控制文本的大小寫：
| 值 | 描述 |
|---|---|
| none | 默認，定義帶有小寫字母和大寫字母的標准的文本。 |
| capitalize | 文本中的每個單詞以大寫字母開頭。 |
| uppercase | 定義僅有大寫字母。 |
| lowercase | 定義無大寫字母，僅有小寫字母。 |
| inherit | 規定應該從父元素繼承 text-transform 屬性的值。 |
文本縮進（text-indent）
text-indent 屬性規定文本塊中首行文本的縮進：
| 值 | 描述 |
|---|---|
| length | 定義固定的縮進，如50px，默認值：0。 |
| % | 定義基於父元素寬度的百分比的縮進。 |
| inherit | 規定應該從父元素繼承 text-indent 屬性的值。 |
字體屬性
CSS字體屬性定義字體，加粗，大小，文字樣式，所有CSS字體屬性如下：
| Property | 描述 |
|---|---|
| font | 在一個聲明中設置所有的字體屬性 |
| font-family | 指定文本的字體系列 |
| font-size | 指定文本的字體大小 |
| font-style | 指定文本的字體樣式 |
| font-variant | 以小型大寫字體或者正常字體顯示文本 |
| font-weight | 指定字體的粗細 |
字體系列
在CSS中，有兩種類型的字體系列名稱：
- 通用字體系列：擁有相似外觀的字體系統組合（如 "Serif" 或 "Monospace"）
- 特定字體系列：一個特定的字體系列（如 "Times" 或 "Courier"）
font-family 屬性設置文本的字體系列，應該設置幾個字體名稱作為一種"后備"機制，如果瀏覽器不支持第一種字體，它將嘗試下一種字體。
注意: 如果字體系列的名稱超過一個字，它必須用引號，如Font Family："宋體"。
多個字體系列是用一個逗號分隔指明：
p{font-family:"Times New Roman", Times, serif;}
字體樣式
font-style 主要是用於指定斜體文字的字體樣式屬性，這個屬性有三個值：
- 正常 - 正常顯示文本
- 斜體 - 以斜體字顯示的文字
- 傾斜的文字 - 文字向一邊傾斜（和斜體非常類似，但不太支持）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字體大小
font-size 屬性設置文本的大小,不要通過調整字體大小使段落看上去像標題或者使標題看上去像段落，請務必使用正確的HTML標簽。
字體大小的值可以是絕對或相對的大小。
絕對大小：
- 設置一個指定大小的文本
- 不允許用戶在所有瀏覽器中改變文本大小
- 確定了輸出的物理尺寸時絕對大小很有用
相對大小：
- 相對於周圍的元素來設置大小
- 允許用戶在瀏覽器中改變文字大小
注：如果你不指定一個字體的大小，默認大小和普通文本段落一樣，是16像素（16px=1em）。
設置字體大小像素
設置文字的大小與像素，讓您完全控制文字大小：
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
用em來設置字體大小
為了避免Internet Explorer 中無法調整文本的問題，許多開發者使用 em 單位代替像素。em的尺寸單位由W3C建議，1em和當前字體大小相等，在瀏覽器中默認的文字大小是16px。
因此，1em的默認大小是16px，可以通過下面這個公式將像素轉換為em：px/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
使用百分比和EM組合
在所有瀏覽器的解決方案中，設置 <body> 元素的默認字體大小的是百分比，可以顯示相同的文本大小並允許所有瀏覽器縮放文本的大小：
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
鏈接樣式
鏈接的樣式可以用任何CSS屬性（如顏色，字體，背景等），特別的鏈接可以有不同的樣式，這取決於他們是什么狀態，這四個鏈接狀態是：
- a:link - 正常，未訪問過的鏈接
- a:visited - 用戶已訪問過的鏈接
- a:hover - 當用戶鼠標放在鏈接上時
- a:active - 鏈接被點擊的那一刻
a:link {color:#000000;} /* 未訪問鏈接*/
a:visited {color:#00FF00;} /* 已訪問鏈接 */
a:hover {color:#FF00FF;} /* 鼠標移動到鏈接上 */
a:active {color:#0000FF;} /* 鼠標點擊時 */
當設置為若干鏈路狀態的樣式，也有一些順序規則：
- a:hover 必須跟在 a:link 和 a:visited后面
- a:active 必須跟在 a:hover后面
文本修飾
text-decoration 屬性主要用於刪除鏈接中的下划線：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
背景顏色
背景顏色（background-color）屬性指定鏈接背景色：
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
CSS 列表
CSS 列表屬性作用如下：
- 設置不同的列表項標記為有序列表
- 設置不同的列表項標記為無序列表
- 設置列表項標記為圖像
在 HTML中，有兩種類型的列表：
- 無序列表 ul - 列表項標記用特殊圖形（如小黑點、小方框等）
- 有序列表 ol - 列表項的標記有數字或字母
使用 CSS，可以列出進一步的樣式，並可用圖像作列表項標記。
不同的列表項標記（list-style-type）
list-style-type屬性指定列表項標記的類型是：
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
作為列表項標記的圖像（list-style-image）
要指定列表項標記的圖像，使用列表樣式圖像屬性 list-style-image：
ul
{
list-style-image: url('sqpurple.gif');
}
瀏覽器兼容性解決方案（ul li）
如果想在所有的瀏覽器放置同樣的圖像標志，就應使用瀏覽器兼容性解決方案，下面的例子會顯示相同的圖像標記：
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
例子解釋：
ul:
- 設置列表類型為沒有列表項標記
- 設置填充和邊距 0px（瀏覽器兼容性）
ul 中所有 li:
- 設置圖像的 URL，並設置它只顯示一次（無重復）
- 需要的定位圖像位置（左 0px 和上下 5px）
- 用 padding-left 屬性把文本置於列表中
列表項目標記的位置（list-style-position）
list-style-position 屬性指示如何相對於對象的內容繪制列表項標記，屬性定義及使用說明如下：
| 值 | 描述 |
|---|---|
| inside | 列表項目標記放置在文本以內，且環繞文本根據標記對齊。 |
| outside | 默認值，保持標記位於文本的左側，列表項目標記放置在文本以外，且環繞文本不根據標記對齊。 |
| inherit | 規定應該從父元素繼承 list-style-position 屬性的值。 |
<h2>Outside:</h2>
<ul style="list-style-position:outside;width:25%;">
<li style="border:1px solid #000000">Coffee</li>
<li style="border:1px solid #000000;border-top:0">Tea</li>
<li style="border:1px solid #000000;border-top:0">Coca-cola</li>
</ul>
<h2>Inside:</h2>
<ul style="list-style-position:inside;width:25%;">
<li style="border:1px solid #000000;">Coffee</li>
<li style="border:1px solid #000000;border-top:0;">Tea</li>
<li style="border:1px solid #000000;border-top:0;">Coca-cola</li>
</ul>
列表 - 簡寫屬性（list-style）
在單個屬性中可以指定所有的列表屬性，就是所謂的簡寫屬性。
為列表使用簡寫屬性，列表樣式屬性設置如下：
ul
{
list-style: square url("sqpurple.gif");
}
可以按順序設置如下屬性：
- list-style-type
- list-style-position
- list-style-image
如果上述值丟失一個，其余仍在指定的順序，就沒關系。
移除默認設置
list-style-type:none 屬性可以用於移除小標記，默認情況下列表 <ul> 或 <ol> 還設置了內邊距和外邊距，可使用 margin:0 和 padding:0 來移除:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
CSS 表格
表格邊框（border）
使用border屬性指定CSS表格邊框，下面的例子指定了一個表格的Th和TD元素的黑色邊框：
table, th, td
{
border: 1px solid black;
}
折疊邊框（border-collapse）
border-collapse 屬性設置表格的邊框是否被折疊成一個單一的邊框或隔開：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格寬度和高度(Width和height)
Width和height屬性定義表格的寬度和高度，下面的例子是設置100％的寬度、50像素的th元素的高度的表格：
table
{
width:100%;
}
th
{
height:50px;
}
表格文字對齊（text-align、vertical-align）
text-align屬性設置水平對齊方式，向左，右，或中心：
td { text-align:right; }
vertical-align 垂直對齊屬性設置垂直對齊，比如頂部，底部或中間：
td
{
height:50px;
vertical-align:bottom;
}
表格填充（padding）
如果要在表中控制內容和邊框之間的空格，應使用td和th元素的填充屬性：
td {padding:15px;}
表格顏色（background-color）
下面的例子指定邊框的顏色和th元素的文本和背景顏色：
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素，下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
- Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
- Content(內容) - 盒子的內容，顯示文本和圖像。
元素的寬度和高度
當指定一個 CSS 元素的寬度和高度屬性時，只是設置內容區域的寬度和高度，完整大小的元素還必須添加內邊距、邊框和外邊距。
下面的例子中的元素的總寬度為300px：
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
上圖的寬度：300px (寬)+ 50px (左 + 右填充)+ 50px (左 + 右邊框)+ 50px (左 + 右邊距)= 450px
瀏覽器的兼容性問題
根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。IE5.X 和 6 在怪異模式中使用自己的非標准模型， width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
目前最好的解決方案是回避這個問題：不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持設置填充的寬度和邊框的寬度屬性，在HTML頁面聲明 即可。
邊框（border）
CSS邊框屬性允許指定一個元素邊框的樣式和顏色：
| 屬性 | 描述 |
|---|---|
| border | 簡寫屬性，用於把針對四個邊的屬性設置在一個聲明。 |
| border-style | 用於設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。 |
| border-width | 簡寫屬性，用於為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。 |
| border-color | 簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。 |
| border-bottom | 簡寫屬性，用於把下邊框的所有屬性設置到一個聲明中。 |
| border-bottom-color | 設置元素的下邊框的顏色。 |
| border-bottom-style | 設置元素的下邊框的樣式。 |
| border-bottom-width | 設置元素的下邊框的寬度。 |
| border-left | 簡寫屬性，用於把左邊框的所有屬性設置到一個聲明中。 |
| border-left-color | 設置元素的左邊框的顏色。 |
| border-left-style | 設置元素的左邊框的樣式。 |
| border-left-width | 設置元素的左邊框的寬度。 |
| border-right | 簡寫屬性，用於把右邊框的所有屬性設置到一個聲明中。 |
| border-right-color | 設置元素的右邊框的顏色。 |
| border-right-style | 設置元素的右邊框的樣式。 |
| border-right-width | 設置元素的右邊框的寬度。 |
| border-top | 簡寫屬性，用於把上邊框的所有屬性設置到一個聲明中。 |
| border-top-color | 設置元素的上邊框的顏色。 |
| border-top-style | 設置元素的上邊框的樣式。 |
| border-top-width | 設置元素的上邊框的寬度。 |
邊框樣式（border-style）
邊框樣式屬性（border-style）用來定義邊框的樣式，指定要顯示什么樣的邊界：
寬度（border-width）、顏色（border-color）
可以通過border-width屬性為邊框指定寬度，為邊框指定寬度有兩種方法：
- 指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)
- 使用 3 個關鍵字之一（CSS 沒有定義 3 個關鍵字的具體寬度）：thick 、medium（默認值） 和 thin
border-color屬性用於設置邊框的顏色，可以設置的顏色：
- name - 指定顏色的名稱，如 "red"
- RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
- Hex - 指定16進制值, 如 "#ff0000"
- 還可以設置邊框的顏色為"transparent"
p.one
{
border-style:solid;
border-width:5px;
border-color:red;
}
p.two
{
border-style:solid;
border-width:medium;
border-color:#98bf21;
}
注：border-width、border-color單獨使用是不起作用的，必須得先使用border-style來設置邊框樣式。
單獨設置各邊
在CSS中，可以指定不同的側面不同的邊框：
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
上面的例子也可以設置一個單一屬性：
border-style:dotted solid;
border-style屬性可以有1-4個值，按照順序分別是：
- 上邊框、右邊框、底邊框、左邊框
- 上邊框、左右邊框、底邊框
- 上底邊框、右左邊框
- 四面邊框
上面的例子用了border-style，border-width 、 border-color也是同理。
簡寫屬性
可以在一個"border"屬性中設置：border-width、border-style (required)、border-color。
border:5px solid red;
輪廓（outline）
輪廓（outline）是繪制於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
輪廓（outline）屬性指定元素輪廓的樣式、顏色和寬度，不會增加額外的width或者height。
| 屬性 | 說明 |
|---|---|
| outline | 在一個聲明中設置所有的輪廓屬性 |
| outline-color | 設置輪廓的顏色 |
| outline-style | 設置輪廓的樣式 |
| outline-width | 設置輪廓的寬度 |
外邊距、填充
margin(外邊距)
**margin(外邊距)屬性定義元素周圍的空間，清除周圍的（外邊框）元素區域，沒有背景顏色、是完全透明的。
margin可以單獨改變元素的上、下、左、右邊距，也可以一次改變所有的外邊距屬性。
邊距屬性：
| 屬性 | 描述 |
|---|---|
| margin | 簡寫屬性。在一個聲明中設置所有外邊距屬性。 |
| margin-bottom | 設置元素的下外邊距。 |
| margin-left | 設置元素的左外邊距。 |
| margin-right | 設置元素的右外邊距。 |
| margin-top | 設置元素的上外邊距。 |
值的類型：
| 值 | 說明 |
|---|---|
| auto | 設置瀏覽器邊距。 |
| 這樣做的結果會依賴於瀏覽器 | |
| length | 定義一個固定的margin（使用像素，pt，em等） |
| % | 定義一個使用百分比的邊距 |
padding（填充）
padding（填充）是一個簡寫屬性，定義元素邊框與元素內容之間的空間，即上下左右的內邊距。
padding可以單獨改變元素的上、下、左、右填充，也可以一次改變所有的填充屬性。
填充屬性：
| 屬性 | 說明 |
|---|---|
| padding | 使用簡寫屬性設置在一個聲明中的所有填充屬性 |
| padding-bottom | 設置元素的底部填充 |
| padding-left | 設置元素的左部填充 |
| padding-right | 設置元素的右部填充 |
| padding-top | 設置元素的頂部填充 |
值的類型：
| 值 | 說明 |
|---|---|
| length | 定義一個固定的填充(像素, pt, em,等) |
| % | 使用百分比值定義一個填充 |
簡寫屬性
所有邊距屬性的簡寫屬性是 margin ，所有的填充屬性的簡寫屬性是 padding ，可以有一到四個值。
- 上、右、下、左
- 上、左右、下
- 上下、左右
- 上下左右
margin:25px 50px 75px 100px;
padding:25px 50px 75px 100px;
分組和嵌套選擇器
分組選擇器
在樣式表中有很多具有相同樣式的元素：
h1 { color:green; }
h2 { color:green; }
p { color:green; }
為了盡量減少代碼，可以使用分組選擇器，每個選擇器用逗號分隔。
對以上代碼使用分組選擇器：
h1,h2,p { color:green; }
嵌套選擇器
它可能適用於選擇器內部的選擇器的樣式，在下面的例子設置了四個樣式：
- p{ }: 為所有 p 元素指定一個樣式。
- .marked{ }: 為所有 class="marked" 的元素指定一個樣式。
- .marked p{ }: 為所有 class="marked" 元素內的 p 元素指定一個樣式。
- p.marked{ }: 為所有 class="marked" 的 p 元素指定一個樣式。
p { color:blue; text-align:center; }
.marked { background-color:red; }
.marked p { color:white; }
p.marked{ text-decoration:underline; }
元素尺寸
尺寸 (Dimension) 屬性允許控制元素的高度和寬度，允許增加行間距：
| 屬性 | 描述 |
|---|---|
| height | 設置元素的高度。 |
| line-height | 設置行高。 |
| max-height | 設置元素的最大高度。 |
| max-width | 設置元素的最大寬度。 |
| min-height | 設置元素的最小高度。 |
| min-width | 設置元素的最小寬度。 |
| width | 設置元素的寬度。 |
Display(顯示) 與 Visibility（可見性）
display屬性設置一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。
隱藏元素 - display:none或visibility:hidden
隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"，兩種方法會產生不同的結果：
- visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間，仍然會影響布局。
- display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間，該元素原本占用的空間也會從頁面布局中消失。
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}
Display - 塊和內聯元素
塊元素是一個元素，占用了全部寬度，在前后都是換行符，如：h1、p、div等。
內聯元素只需要必要的寬度，不強制換行，如：span、a等。
display 屬性規定元素應該生成的框的類型，可以更改為內聯元素和塊元素，使頁面看起來是以一種特定的方式組合。
下面的示例把列表項顯示為內聯元素、把span元素作為塊元素：
li {display:inline;}
span {display:block;}
html代碼：
<style>
li{display:inline;}
span{display:block;}
</style>
<p>鏈接列表水平顯示：</p>
<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
結果如下：
定位屬性
所有的CSS定位屬性：
| 屬性 | 說明 | 值 | CSS |
|---|---|---|---|
| bottom | 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 | ||
| clip | 剪輯一個絕對定位的元素 | ||
| cursor | 顯示光標移動到指定的類型 | ||
| left | 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 | ||
| 設置當元素的內容溢出其區域時發生的事情。 | |||
| 指定如何處理頂部/底部邊緣的內容溢出元素的內容區域 | |||
| 指定如何處理右邊/左邊邊緣的內容溢出元素的內容區域 | |||
| position | 指定元素的定位類型 | ||
| right | 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 | ||
| top | 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 | ||
| z-index | 設置元素的堆疊順序 |
Position(定位)
position屬性指定了元素的定位類型，屬性的五個值：
- static：HTML元素的默認值，即沒有定位，遵循正常的文檔流對象，靜態定位的元素不會受到 top、bottom、left、right影響。
- relative：相對定位元素的定位是相對其正常位置，移動相對定位元素，但它原本所占的空間不會改變，相對定位元素經常被用來作為絕對定位元素的容器塊。
- fixed：元素的位置相對於瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動。元素的位置與文檔流無關，不占據空間，定位的元素和其他元素重疊。
- absolute：絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對於html。定位使元素的位置與文檔流無關，不占據空間，定位的元素和其他元素重疊。
- sticky：粘性定位，基於用戶的滾動位置來定位。粘性定位的元素是依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。未滾動時，它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;會固定在目標位置。元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位。這個特定閾值指的是 top、right、bottom 或 left 之一，指定四個閾值其中之一才可使粘性定位生效，否則其行為與相對定位相同。
元素可以使用的頂部、底部、左側和右側屬性定位，然而必須先設定position屬性。
重疊的元素(z-index)
元素的定位與文檔流無關，可以覆蓋頁面上的其它元素。z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面），一個元素可以有正數或負數的堆疊順序，具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
如果兩個定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
布局 - Overflow
overflow 屬性可以控制內容溢出元素框時在對應的元素區間內添加滾動條，overflow屬性有以下值：
| 值 | 描述 |
|---|---|
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，並且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
注：overflow 屬性只工作於指定高度的塊元素上，默認情況下overflow 的值為 visible， 意思是內容溢出元素框。
浮動屬性
所有的浮動屬性：
| 屬性 | 描述 | 值 |
|---|---|---|
| clear | 指定不允許元素周圍有浮動元素。 | left 、right、both、none、inherit |
| float | 指定一個盒子（元素）是否可以浮動。 | left、right、none、inherit |
float(浮動)
float（浮動）會使元素向左或向右移動，其周圍的元素也會重新排列。
float（浮動），往往是用於圖像，但它在布局時一樣非常有用。
元素按如下方式浮動：
- 元素的水平方向浮動，意味着元素只能左右移動而不能上下移動。
- 一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
- 浮動元素之后的元素將圍繞它，浮動元素之前的元素將不會受到影響。
彼此相鄰的浮動元素：把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
清除浮動 - 使用 clear
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性——指定元素兩側不能出現浮動元素。
布局 - 水平 & 垂直對齊
元素居中對齊（margin: auto）
要水平居中對齊一個元素(如 div), 可以使用 margin: auto;：
- 設置到元素的寬度將防止它溢出到容器的邊緣。
- 元素通過指定寬度，並將兩邊的空外邊距平均分配。
.center { margin: auto; width: 60%; }
注: 如果沒有設置 width 屬性(或者設置 100%)，居中對齊將不起作用。
文本居中對齊（text-align: center）
如果僅僅是為了文本在元素內居中對齊，可以使用 text-align: center;：
.center { text-align: center; }
圖片居中對齊（margin: auto）
要讓圖片居中對齊, 可以使用 margin: auto; 並將它放到 塊 元素中:
img {
display: block;
margin: auto;
width: 40%;
}
左右對齊
使用定位（position）方式
可以使用 position: absolute; 屬性來對齊元素：
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
注：絕對定位元素會被從正常流中刪除，並且能夠交疊元素。
使用浮動（float）方式
可以使用 float 屬性來對齊元素：
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
注：如果子元素的高度大於父元素，且子元素設置了浮動，那么子元素將溢出，這時候可以使用 "clearfix(清除浮動)" 來解決該問題。
.clearfix {overflow: auto;}
垂直居中對齊
使用 padding
簡單方式就是頭部頂部使用 padding（要水平和垂直都居中可以使用 padding 和 text-align: center）：
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
使用 line-height
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文本有多行，添加以下代碼: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
使用 position 和 transform
還可以使用 transform 屬性來設置垂直居中：
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
組合選擇符
組合選擇符包括各種簡單選擇符的組合方式，在 CSS3 中包含了四種組合方式:
- 后代選擇器（以 空格分隔）
- 子元素選擇器（以 大於 > 號分隔）
- 相鄰兄弟選擇器（以 加號 + 分隔）
- 普通兄弟選擇器（以 波浪號 ～ 分隔）
后代選擇器
后代選擇器用於選取某元素的后代元素，選取所有插入到 div 元素中的 p 元素:
div p { background-color:yellow; }
子元素選擇器
與后代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素直接/一級子元素的元素，選擇 div元素中所有直接子元素 p ：
div>p { background-color:yellow; }
相鄰兄弟選擇器
相鄰兄弟選擇器可選擇緊接在另一元素后的元素，且二者有相同父元素，選取所有位於 div 元素后的第一個 p 元素：
div+p { background-color:yellow; }
后續兄弟選擇器
后續兄弟選擇器選取所有指定元素之后的相鄰兄弟元素，選取所有 div 元素之后的所有相鄰兄弟元素 p :
div~p { background-color:yellow; }
偽類(Pseudo-classes)
偽類是用來添加一些選擇器的特殊效果，可以看作以選中元素為基准點此元素的一些狀態或屬性。
偽類選擇元素基於的是當前元素處於的狀態（當前所具有的特性），由於狀態是動態變化的，所以一個元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。
語法
偽類的語法：
selector:pseudo-class {property:value;}
偽類也可以使用偽類：
selector.class:pseudo-class {property:value;}
anchor偽類
在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以以不同的方式顯示：
a:link {color:#FF0000;} /* 未訪問的鏈接 */
a:visited {color:#00FF00;} /* 已訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標划過鏈接 */
a:active {color:#0000FF;} /* 已選中的鏈接 */
注：a:hover 必須被置於 a:link 和 a:visited 之后才是有效的，a:active 必須被置於 a:hover 之后才是有效的，偽類的名稱不區分大小寫。
偽類和CSS類
偽類可以與 CSS 類配合使用：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 語法</a>
first-child 偽類
可以使用 :first-child 偽類來選擇父元素的第一個子元素。
- 選擇器匹配作為任何元素的第一個子元素的 p 元素：
p:first-child { color:blue; }
- 匹配所有 p 元素中的第一個 i 元素：
p > i:first-child { color:blue; }
- 匹配所有作為第一個子元素的 p 元素中的所有 i 元素：
p:first-child i { color:blue; }
lang 偽類
:lang 偽類可以為不同的語言定義特殊的規則，為屬性值為 no 的q元素定義引號的類型：
q:lang(no) {quotes: "~" "~";}
偽元素
偽元素是對元素中的特定內容進行操作，設計偽元素的目的就是去選取諸如元素內容第一個字（母）、第一行，選取某些內容前面或后面這種普通的選擇器無法完成的工作。它控制的內容實際上和元素是相同的，但是它本身只是基於元素的抽象，並不存在於文檔中，所以叫偽元素。
語法
偽元素的語法：
selector:pseudo-element {property:value;}
CSS類也可以使用偽元素：
selector.class:pseudo-element {property:value;}
:first-line 偽元素
"first-line" 偽元素用於向文本的首行設置特殊樣式，對 p 元素的第一行文本進行格式化：
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
注："first-line" 偽元素只能用於塊級元素。
:first-letter 偽元素
"first-letter" 偽元素用於向文本的首字母設置特殊樣式：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
注："first-letter" 偽元素只能用於塊級元素。
偽元素和CSS類
偽元素可以結合CSS類，使所有 class 為 article 的段落的首字母變為紅色：
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
多個偽元素
可以結合多個偽元素來使用，下面段落的第一個字母將顯示為紅色（字體大小為 xx-large），第一行中的其余文本將為藍色（以小型大寫字母顯示），段落中的其余文本將以默認字體大小和顏色來顯示：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
:before 偽元素
":before" 偽元素可以在元素的內容前面插入新內容，在每個 h1 元素前面插入一幅圖片：
h1:before { content:url(smiley.gif); }
:after 偽元素
":after" 偽元素可以在元素的內容之后插入新內容，在每個 h1 元素后面插入一幅圖片：
h1:after { content:url(smiley.gif); }
導航欄
使用CSS你可以轉換成好看的導航欄而不是枯燥的HTML菜單。
導航欄=鏈接列表
作為標准的HTML基礎一個導航欄是必須的，下面的例子將建立一個標准的HTML列表導航欄。
導航條基本上是一個鏈接列表，所以使用 <ul> 和 <li>元素：
<ul>
<li><a href="#home">主頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯系</a></li>
<li><a href="#about">關於</a></li>
</ul>
從列表中刪除邊距和填充：
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
上面的例子中的代碼是垂直和水平導航欄使用的標准代碼：
- list-style-type:none - 移除列表前小標志，一個導航欄並不需要列表標記。
- **移除瀏覽器的默認設置將邊距和填充設置為0。
垂直導航欄
上面的代碼只需要 <a>元素的樣式，建立一個垂直的導航欄：
a {
display: block;
width: 60px;
}
- display:block - 顯示塊元素的鏈接，讓整體變為可點擊鏈接區域（不只是文本），它允許我們指定寬度。
- width:60px - 塊元素默認情況下是最大寬
垂直導航條實例
創建一個簡單的垂直導航條實例，在鼠標移動到選項時，修改背景顏色：
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 鼠標移動到選項上修改背景顏色 */
li a:hover {
background-color: #555;
color: white;
}
激活/當前導航條實例
在點擊了選項后，可以添加 "active" 類來標准哪個選項被選中：
li a.active {
background-color: #4CAF50;
color: white;
}
創建鏈接並添加邊框
可以在 <li> or <a> 上添加text-align:center 樣式來讓鏈接居中。
可以在 border <ul> 上添加 border 屬性來讓導航欄有邊框。如果要在每個選項上添加邊框，可以在每個 <li> 元素上添加border-bottom :
ul { border: 1px solid #555; }
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child { border-bottom: none; }
全屏高度的固定導航條
接下來創建一個左邊是全屏高度的固定導航條，右邊是可滾動的內容：
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* 全屏高度 */
position: fixed;
overflow: auto; /* 如果導航欄選項多，允許滾動 */
}
水平導航欄
有兩種方法創建橫向導航欄，使用內聯(inline)或浮動(float)的列表項。
這兩種方法都很好，但如果想鏈接到具有相同的大小，必須使用浮動的方法。
內聯列表項
構建水平導航欄的一種方法是，除了上面的“標准”代碼外，還要將 <li> 元素指定為 inline：
li
{
display:inline;
}
- display:inline; -默認情況下，<li>元素是塊元素，這里刪除換行符之前和之后每個列表項，以顯示一行。
浮動列表項
創建水平導航欄的另一種方法是浮動 <li> 元素，並為導航鏈接規定布局：
li { float:left; }
a
{
display:block;
width:60px;
background-color: #dddddd;
}
例子解釋：
- float: left; - 使用 float 使塊元素滑動為彼此相鄰
- **display: block; **- 將鏈接顯示為塊元素可以使整個鏈接區域都可單擊（不僅是文本），而且允許指定填充（如果需要，還可以指定高度，寬度，邊距等）
- padding: 8px; - 使塊元素更美觀
- background-color: #dddddd; - 為每個元素添加灰色背景色
如需全寬的背景色，請將 background-color 添加到 <ul> 而不是每個 <a> 元素：
ul { background-color: #dddddd; }
水平導航欄實例
創建具有深色背景色的基礎水平導航欄，並在用戶將鼠標移到鏈接上方時改變鏈接的背景色：
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 當鼠標懸停時把鏈接顏色更改為 #111（黑色） */
li a:hover {
background-color: #111;
}
活動/當前導航鏈接
向當前鏈接添加 "active" 類，這樣用戶就知道他/她在哪個頁面上：
.active { background-color: #4CAF50; }
鏈接右對齊
將導航條最右邊的選項設置右對齊 (float:right;)：
<ul>
<li><a href="#home">主頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯系</a></li>
<li style="float:right"><a class="active" href="#about">關於</a></li>
</ul>
添加分割線
<li> 通過 border-right 樣式來添加分割線:
/* 除了最后一個選項(last-child) 其他的都添加分割線 */
li { border-right: 1px solid #bbb; }
li:last-child { border-right: none; }
固定導航條
可以設置頁面的導航條固定在頭部或者底部：
/*固定在頭部*/
ul {
position: fixed;
top: 0;
width: 100%;
}
/*固定在底部*/
ul {
position: fixed;
bottom: 0;
width: 100%;
}
灰色水平導航欄
帶有細灰色邊框的灰色水平導航欄的實例：
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a { color: #666; }
下拉菜單
基礎的下拉菜單
創建當用戶將鼠標移到元素上時出現的下拉框：
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
HTML代碼：
- 使用任何元素打開下拉菜單內容，例如 或
- 使用容器元素（如
）創建下拉內容，並在其中添加任何內容。
- 用 <div> 元素包圍這些元素，使用 CSS 正確定位下拉內容。
CSS代碼：
- .dropdown 類使用 position:relative，當希望將下拉內容放置在下拉按鈕的正下方（使用 position:absolute）時，需要使用該類。
- .dropdown-content 類保存實際的下拉菜單內容。默認情況下它是隱藏的，並將在懸停時顯示。如果您希望下拉內容的寬度與下拉按鈕的寬度一樣，請將寬度設置為 100％（設置 overflow:auto 可實現在小屏幕上滾動）。
用了 CSS box-shadow 屬性，而不是邊框，這樣下拉菜單看起來像一張“卡片”。
當用戶將鼠標移到下拉按鈕上時，:hover 選擇器用於顯示下拉菜單。
下拉菜單
創建下拉菜單，並允許用戶選取列表中的某一項。本例與上例相似，除了在下拉框內添加鏈接並為其設置了樣式，以此匹配下拉按鈕的樣式：
<style>
/* 設置下拉按鈕的樣式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> - 需要放置下拉內容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉內容（默認隱藏） */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* 下拉鏈接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 懸停時更改下拉鏈接的顏色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 懸停時顯示下拉菜單 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 顯示下拉內容時，更改下拉按鈕的背景顏色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
右對齊的下拉菜單內容：如果希望下拉菜單從右到左而不是從左到右，請添加 right: 0;。
.dropdown-content { right: 0; }
提示工具(Tooltip)
當用戶將鼠標指針移到元素上時，工具提示通常用於提供關於某內容的額外信息：
基礎的工具提示
創建一個鼠標移到元素上時顯示的工具提示：
<style>
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 懸停元素上顯示點線 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位 */
position: absolute;
z-index: 1;
}
/* 鼠標移動上去后顯示提示框 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">鼠標移動到這
<span class="tooltiptext">提示文本</span>
</div>
HTML代碼：
- 使用容器元素（例如 <div>）並向其添加 "tooltip" 類。當用戶將鼠標懸停在此 <div> 上時，會顯示工具提示文本。
- 工具提示文本位於 class="tooltiptext" 的嵌入式元素（如 <span>）中。
CSS代碼：
- tooltip 類使用 position:relative，用於放置工具提示文本（position:absolute）。
- tooltiptext 類保存實際的工具提示文本，默認情況下它是隱藏的，並會在鼠標懸停時可見。
- 還為其添加了一些基本樣式：120 像素的寬度、黑色背景、白色文本、文本居中以及 5px 的上下內邊距（padding）。
- border-radius 屬性用於向工具提示文本添加圓角。
- 當用戶將鼠標移到 class="tooltip" 的 <div> 上時，:hover 選擇器用於顯示工具提示文本。
定位提示工具
顯示在右側：
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
顯示在左側：
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
*注：top:-5px 同於定位在容器元素的中間，使用數字 5 因為提示文本的頂部和底部的內邊距（padding）是 5px。
顯示在頭部：
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* 使用一半寬度 (120/2 = 60) 來居中提示工具 */
}
顯示在底部：
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* 使用一半寬度 (120/2 = 60) 來居中提示工具 */
}
注：如果想要提示工具顯示在頭部和底部，需要使用 margin-left 屬性，並設置為 -60px（使用寬度的一半來居中對齊），即： width/2 (120/2 = 60)。
添加箭頭
可以用CSS 偽元素 ::after 及 content 屬性為提示工具創建一個小箭頭標志，箭頭是由邊框組成的，但組合起來后提示工具像個語音信息框。
頂部提示框/底部箭頭：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* 提示工具底部 */
left: 50%; /*用於居中對齊箭頭*/
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
* **border-width** 屬性指定了箭頭的大小，如果修改它，也要修改 margin-left 值。這樣箭頭在能居中顯示。
* **border-color** 用於將內容轉換為箭頭，設置頂部邊框為黑色，其他是透明的。如果設置了其他的也是黑色則會顯示為一個黑色的四邊形。
底部提示框/頂部箭頭：
```css
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* 提示工具頭部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
右側提示框/左側箭頭：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* 提示工具左側 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
左側提示框/右側箭頭：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* 提示工具右側 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
淡入效果
可以使用 CSS3 transition 屬性及 opacity 屬性來實現提示工具的淡入效果:
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext { opacity: 1; }
屬性選擇器
可以設置帶有特定屬性或屬性值的 HTML 元素的樣式。
屬性選擇器
把包含標題（title）的所有元素變為藍色：
[title] { color:blue; }
屬性和值選擇器
改變標題title='runoob'元素的邊框樣式：
[title=runoob] { border:5px solid green; }
屬性選擇器 ~=, |=, ^=, $=, *= 的區別
attribute 屬性中包含 value:
- [attribute~=value] 屬性中包含獨立的單詞為 value：
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />
- [attribute*=value] 屬性中做字符串拆分，只要能拆出來 value 這個詞就行：
[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
attribute 屬性以 value 開頭:
- [attribute|=value] 屬性中必須是完整且唯一的單詞，或者以 - 分隔開：
[lang|=en] --> <p lang="en"> <p lang="en-us">
- [attribute^=value] 屬性的前幾個字母是 value 就可以：
[lang^=en] --> <p lang="ennn">
attribute 屬性以 value 結尾:
- [attribute$=value] 屬性的后幾個字母是 value 就可以：
a[src$=".pdf"]