CSS 簡介
CSS 語法
Id 和 Class
- id 選擇器
- class 選擇器
CSS 創建
- 外部樣式表
- 內部樣式表
- 行內樣式
- 多重樣式
- 多重樣式優先級
背景（background）
- 背景顏色
- 背景影像
  - background-repeat
  - background-position
  - background-attachment
- 簡寫屬性
文本格式
- 文本顏色（color）
- 對齊方式（text-align）
- 文本修飾（text-decoration）
- 文本轉換（text-transform）
- 文本縮進（text-indent）
字體屬性
- 字體系列
- 字體樣式
- 字體大小
  - 設定字體大小像素
  - 用em來設定字體大小
  - 使用百分比和EM組合
鏈接樣式
- 文本修飾
- 背景顏色
CSS 串列
- 不同的串列項標記（list-style-type）
- 作為串列項標記的影像（list-style-image）
- 瀏覽器兼容性解決方案（ul li）
- 串列專案標記的位置（list-style-position）
- 串列 - 簡寫屬性（list-style）
- 移除默認設定
CSS 表格
- 表格邊框（border）
- 折疊邊框（border-collapse）
- 表格寬度和高度(Width和height)
- 表格文字對齊（text-align、vertical-align）
- 表格填充（padding）
- 表格顏色（background-color）
盒子模型(Box Model)
- 元素的寬度和高度
- 瀏覽器的兼容性問題
邊框（border）
- 邊框樣式（border-style）
- 寬度（border-width）、顏色（border-color）
- 單獨設定各邊
- 簡寫屬性
輪廓（outline）
外邊距、填充
- margin(外邊距)
- padding（填充）
- 簡寫屬性
分組和嵌套選擇器
- 分組選擇器
- 嵌套選擇器
元素尺寸
Display(顯示) 與 Visibility（可見性）
- 隱藏元素 - display:none或visibility:hidden
- Display - 塊和行內元素
定位屬性
- Position(定位)
- 重疊的元素(z-index)
布局 - Overflow
浮動屬性
- float(浮動)
- 清除浮動 - 使用 clear
布局 - 水平 & 垂直對齊
- 元素居中對齊（margin: auto）
- 文本居中對齊（text-align: center）
- 圖片居中對齊（margin: auto）
- 左右對齊
  - 使用定位（position）方式
  - 使用浮動（float）方式
- 垂直居中對齊
  - 使用 padding
  - 使用 line-height
  - 使用 position 和 transform
組合選擇符
- 后代選擇器
- 子元素選擇器
- 相鄰兄弟選擇器
- 后續兄弟選擇器
偽類(Pseudo-classes)
- 語法
- anchor偽類
- 偽類和CSS類
- first-child 偽類
- lang 偽類
偽元素
- 語法
- :first-line 偽元素
- :first-letter 偽元素
- 偽元素和CSS類
- 多個偽元素
- :before 偽元素
- :after 偽元素
導航欄
- 導航欄=鏈接串列
- 垂直導航欄
  - 垂直導航條實體
  - 激活/當前導航條實體
  - 創建鏈接并添加邊框
  - 全屏高度的固定導航條
- 水平導航欄
  - 行內串列項
  - 浮動串列項
  - 水平導航欄實體
  - 活動/當前導航鏈接
  - 鏈接右對齊
  - 添加分割線
  - 固定導航條
  - 灰色水平導航欄
下拉選單
- 基礎的下拉選單
- 下拉選單
提示工具(Tooltip)
- 基礎的工具提示
- 定位提示工具
- 添加箭頭
- 淡入效果
屬性選擇器
- 屬性選擇器
- 屬性和值選擇器
- 屬性選擇器 ~=, |=, ^=, $=, *= 的區別

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 >標題居中</h1>
<p >段落居中，</p> 
</body>
</html>

在以下實體中, 所有的 p 元素使用讓該元素的文本居中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>教程</title> 
<style>
p.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 >這個標題不受影響</h1>
<p >這個段落居中對齊，</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="https://www.cnblogs.com/timefiles/p/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="https://www.cnblogs.com/timefiles/p/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{ }: 為所有的元素指定一個樣式，
.marked p{ }: 為所有元素內的 p 元素指定一個樣式，
p.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="https://www.cnblogs.com/html/" target="_blank">HTML</a></li>
<li><a href="https://www.cnblogs.com/css/" target="_blank">CSS</a></li>
<li><a href="https://www.cnblogs.com/js/" target="_blank">JavaScript</a></li>
<li><a href="https://www.cnblogs.com/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  href="https://www.cnblogs.com/timefiles/p/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 >文章段落</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="https://www.cnblogs.com/timefiles/p/#home">主頁</a></li>
  <li><a href="https://www.cnblogs.com/timefiles/p/#news">新聞</a></li>
  <li><a href="https://www.cnblogs.com/timefiles/p/#contact">聯系</a></li>
  <li><a href="https://www.cnblogs.com/timefiles/p/#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="https://www.cnblogs.com/timefiles/p/#home">主頁</a></li>
  <li><a href="https://www.cnblogs.com/timefiles/p/#news">新聞</a></li>
  <li><a href="https://www.cnblogs.com/timefiles/p/#contact">聯系</a></li>
  <li style="float:right"><a  href="https://www.cnblogs.com/timefiles/p/#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 >
  <span>Mouse over me</span>
  <div >
    <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 >
  <button >Dropdown</button>
  <div >
    <a href="https://www.cnblogs.com/timefiles/p/#">Link 1</a>
    <a href="https://www.cnblogs.com/timefiles/p/#">Link 2</a>
    <a href="https://www.cnblogs.com/timefiles/p/#">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 >滑鼠移動到這
  <span >提示文本</span>
</div>

HTML代碼：

使用容器元素（例如 <div>）并向其添加 "tooltip" 類，當用戶將滑鼠懸停在此 <div> 上時，會顯示工具提示文本，
工具提示文本位于的嵌入式元素（如 <span>）中，

CSS代碼：

tooltip 類使用 position:relative，用于放置工具提示文本（position:absolute），
tooltiptext 類保存實際的工具提示文本，默認情況下它是隱藏的，并會在滑鼠懸停時可見，
還為其添加了一些基本樣式：120 像素的寬度、黑色背景、白色文本、文本居中以及 5px 的上下內邊距（padding），
border-radius 屬性用于向工具提示文本添加圓角，
當用戶將滑鼠移到的 <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="https://img.uj5u.com/2021/06/21/2455832106171415.jpg" title="tulip flower" />

[attribute*=value] 屬性中做字串拆分，只要能拆出來 value 這個詞就行：

[title*=flower]   -->  <img src="https://img.uj5u.com/2021/06/21/2455832106171415.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"]

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/288217.html

標籤：Html/Css

上一篇：跨域訪問方法介紹(3)--使用片段識別符傳值

下一篇：基于webpack5封裝的cli工具packx

Dreamweaver基礎教程：學習CSS

CSS 簡介

CSS 語法

Id 和 Class

id 選擇器

class 選擇器

CSS 創建

外部樣式表

內部樣式表

行內樣式

多重樣式

多重樣式優先級

背景（background）

背景顏色

背景影像

background-repeat

background-position

background-attachment

簡寫屬性

文本格式

文本顏色（color）

對齊方式（text-align）

文本修飾（text-decoration）

文本轉換（text-transform）

文本縮進（text-indent）

字體屬性

字體系列

字體樣式

字體大小

設定字體大小像素

用em來設定字體大小

使用百分比和EM組合

鏈接樣式

文本修飾

背景顏色

CSS 串列

不同的串列項標記（list-style-type）

作為串列項標記的影像（list-style-image）

瀏覽器兼容性解決方案（ul li）

串列專案標記的位置（list-style-position）

串列 - 簡寫屬性（list-style）

移除默認設定

CSS 表格

表格邊框（border）

折疊邊框（border-collapse）

表格寬度和高度(Width和height)

表格文字對齊（text-align、vertical-align）

表格填充（padding）

表格顏色（background-color）

盒子模型(Box Model)

元素的寬度和高度

瀏覽器的兼容性問題

邊框（border）

邊框樣式（border-style）

寬度（border-width）、顏色（border-color）

單獨設定各邊

簡寫屬性

輪廓（outline）

外邊距、填充

margin(外邊距)

padding（填充）

簡寫屬性

分組和嵌套選擇器

分組選擇器

嵌套選擇器

元素尺寸

Display(顯示) 與 Visibility（可見性）

隱藏元素 - display:none或visibility:hidden

Display - 塊和行內元素

定位屬性

Position(定位)

重疊的元素(z-index)

布局 - Overflow

浮動屬性

float(浮動)

清除浮動 - 使用 clear

布局 - 水平 & 垂直對齊

元素居中對齊（margin: auto）

文本居中對齊（text-align: center）

圖片居中對齊（margin: auto）