　　CSS全稱爲層疊樣式表(Cascading Style Sheets)，與HTML相輔相成，CSS負責實現網頁的排版佈局與樣式美化，使用CSS樣式建議在當前文件夾下創建一個CSS文件夾, 然後在CSS文件夾在創建.css文件, 在css文件中填寫網頁的樣式。

樣式特徵

層疊性: 多組CSS樣式共同作用於一個元素

繼承性: 後代元素可以繼承祖先元素中的某些樣式例 : 大部分的文本屬性都可以被繼承

樣式表的優先級: 優先級用來解決樣式衝突問題。同一個元素的同一個樣式(例如文本色)，在不同地方多次進行設置，哪一種樣式表的優先級高選用哪一種。

離元素最近的樣式優先級最高（就近原則）
文檔內嵌與外鏈樣式表，優先級一致，看代碼書寫順序，後來者居上
瀏覽器默認樣式和繼承樣式優先級較低

　　CSS樣式分爲行內樣式（也稱爲內聯樣式），主要在單個頁面中使用，還有就是內嵌樣式以及外鏈樣式。內嵌樣式用的最多，外鏈樣式主要用在項目當中，接下來我們詳細瞭解一下。

樣式表

插入樣式表的方法有三種：

行內樣式
內嵌樣式表
外鏈樣式

行內樣式

　　藉助於HTML中style標籤屬性，爲當前的標籤元素添加樣式聲明，行內樣式的style值由字符串包含CSS屬性和值得鍵值對組成。

<標籤名 style="屬性:值;屬性:值;">
<div style="background-color:red;color: white">容器</div>

內嵌樣式

　　內嵌樣式在單個網頁中是用的比較多的。有了內嵌樣式，我們就不需要在html標籤中填寫樣式，那樣會顯得html代碼濃重，影響觀看閱讀代碼，而通過內嵌樣式，在<head>標籤中嵌入CSS樣式代碼。在<style>中通過CSS選擇器匹配到HTML代碼中對應的標籤元素。可以實現樣式代碼和HTML標籤代碼分離，讓代碼看起來更加美觀。

 <style>
    選擇器{
          屬性:值;
          屬性:值;
        }
 </style>

外鏈樣式

　　外部鏈接CSS樣式，多用於大型的項目網站中，用外部鏈接CSS樣式可以實現前後端分離。如果使用外部鏈接樣式需要在當前文件夾中創建css文件夾，然後把後綴名爲.css的樣式文件放進去。最後在HTML文件中使用<link>標籤引入外部樣式表，外部樣式文件中同樣藉助選擇器匹配元素應用樣式

<link rel="stylesheet" href="CSS URL" type="text/css">

優先級：行內樣式 > 內嵌樣式 > 外鏈樣式 > 瀏覽器默認樣式

CSS 選擇器

　　通過元素名、類名、id名選擇到頁面中選取相應的元素標籤，爲其添加CSS樣式

* 號選擇器

代表所有

/*去除所有標籤元素的內外邊框值*/
*{
   margin:0;
   padding:0;
}

標籤選擇器

根據標籤名匹配文檔中所有該標籤元素樣式:

標籤名{
  　　  屬性:值;
　　  }
/*爲所有p標籤添加樣式*/
p{
    color: red;
}

id選擇器

　　ID選擇器可以根據元素的 id 屬性值匹配文檔中惟一的標籤元素，然後指定樣式。

CSS 中 id 選擇器以 "#" 來定義。

#標籤id名{
    屬性:值;
}
/*例如*/
#div2{
   color:red;
}

注意 : 元素id具有唯一性，不能使用相同的ID名；標籤id名可以由數字，字母，下劃線，- 組成，不能以數字開頭; 儘量見名知意，多個單詞組成時，可以使用連接符，下劃線，小駝峯表示。

class選擇器/類選擇器

　　根據元素的class屬性值匹配相應的元素,class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用，實現多個標籤相同樣式的複用。

CSS 中 class 選擇器以 "." 來定義。

.元素class名{
    屬性:值;
}
/*例如*/
.blue{
   color:red;
}

特殊用法 :

類選擇器與其他選擇器結合使用時，標籤在前, 類選擇器在後例 : a.c1{ }
class屬性值可以寫多個，共同應用類選擇器的樣式例 : .c1{ } .c2{ }

羣組選擇器

　　爲一組標籤元素設置統一的樣式，不用類別之間用逗號“，”分隔。

選擇器1,選擇器2,選擇器3{ 
 
}

條件後代選擇器

　　條件後代選擇器：匹配在滿足條件選擇器的情況下的所有後代元素(包含直接子元素和間接子元素)，後代選擇器與父代選擇器用空格隔開。

/*匹配"選擇器1"中所有滿足"選擇器2"的後代標籤元素*/
選擇器1 選擇器2{

}

子代選擇器

　　父代選擇器與子代選擇器用" > "號連接，匹配滿足選擇器的所有直接子代元素

父代選擇器>子代選擇器{

}

僞類選擇器

爲元素的不同狀態分別設置樣式，僞類選擇器必須與基礎選擇器結合使用

:nth-child(n)　　匹配屬於其父元素的第 n 個子元素，不論元素的類型。
p:first-child　　匹配第一個p元素
:link 超鏈接訪問前的狀態
:visited 超鏈接訪問後的狀態
:hover 鼠標滑過時的狀態
:active 鼠標點下去但是不擡起時的狀態(激活)
:focus 焦點狀態(文本框被編輯時就稱爲獲取焦點)
:after　　在元素之後添加內容，配合content屬性使用

/*第一個div元素*/
div:nth-child(1){
    }
/*超鏈接訪問前的狀態*/
a:link{
    }
/*超鏈接訪問後的狀態*/
a:visited{
    }
/*鼠標滑過時的狀態*/
.c1:hover{ 
    }
/*每個<p>元素之後插入內容*/
p:after
{
  content:"要添加的內容"  
}

注意 :

超鏈接如果需要爲四種狀態分別設置樣式,必須按照以下順序書寫

  :link　　　　　　 /*訪問前*/
  :visited　　　　 /*訪問後*/
  :hover　　　　　  /*鼠標滑過時*/
  :active　　　　  /*鼠標點下去但是不擡起來*/

屬性選擇器

　　根據屬性來選擇元素的選擇器。

選擇包含屬性 title 的所有元素

[title]
{
    color:blue;
}

選擇包含屬性 title="never" 的所有元素

[title=never]
{
    border:5px solid green;
}

選擇title屬性值包含hello的所有元素，使用（~）分隔屬性和值:

[title~=hello] { color:blue; }

選擇器的優先級

　　使用選擇器爲元素設置樣式，發生樣式衝突時，主要看選擇器的權重，權重越大，優先級越高

選擇器	權重
標籤選擇器	1
(僞)類選擇器	10
id選擇器	100
行內樣式	1000

　　複雜選擇器(後代,子代,僞類)最終的權重爲各個選擇器權重值之和，羣組選擇器權重以每個選擇器單獨的權重爲準，不進行相加計算例 :

/*羣組選擇器之間互相獨立，不影響優先級*/
body,h1,p{ /*標籤選擇器權重爲 1 */
 color:red;
}
.c1 a{ /*當前組合選擇器權重爲 10+1  */
 color:green;
}
#d1>.c2{ /*當前組合選擇器權重爲 100+10 */
 color:blue;
}

元素的尺寸和顏色

元素的尺寸

px 像素單位
% 百分比相對父元素
em 相對單位 1 em=16px 通常用於移動端的頁面開發常用1.5em
rpx 小程序頁面的單位

當頁面元素的內容大小超出了元素的寬度，可以使用 overflow 屬性來解決超出部分的顯示方式，建議使用auto;

顏色

元素的字體，背景，邊框都會使用到顏色。使用方式 color:red;

顏色有以下幾種表達方法：

英文單詞 red
rgb：R G B 是紅藍綠三基色, 三個值的大小分別在(0~225)之間，
rgba: a是透明度值在(0~1)之間。a的值越小，越透明。
長16進制代表顏色：#ffffff; #000000
短16進制代表顏色：#fff;#000

盒子模型

　　盒模型是針對塊元素的，因爲每一個塊元素就相當於一個盒子，有邊框(border)、外邊距(margin)和內邊距(padding)。

在容器模型中，它規定了元素處理內容、內邊距、邊框和外邊距的大小
最裏面是內容，包圍內容的是內邊距，內邊距的邊緣是邊框
邊框以外是外邊距，外邊距默認是透明的

盒模型相關的屬性會影響元素在文檔中的實際佔位，進而影響佈局

邊框

border:width style color;

當border-color設置爲transparent時，爲透明，隱藏邊框。

邊框樣式border-style屬性常用的取值：

solid：實線邊框
dotted：點線邊框
dashed：虛線邊框
double：雙線邊框

CSS邊框屬性允許單獨設置某一方向的邊框屬性

border-top：設置上邊框
border-bottom：設置下邊框
border-left：設置左邊框
border-right：設置右邊框

一些特殊的邊框案例：

網頁三角標製作：標籤元素設置寬高爲0、統一設置四個方向透明邊框、調整某個方向邊框顏色

width: 0;
height: 0;
margin: 0 auto;
border: 50px solid blue;
border-bottom-color:transparent; 
border-left-color:transparent;
border-right-color:transparent;

圓角邊框：border-radius 指定邊框角的圓角半徑

width: 0;
height: 0;
border: 50px solid red;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: green;

當border-radius爲長寬的一半時，就是圓了，如果要設置圓角邊框可以把邊框圓半徑border-radius的值設置小一點。

當某個屬性可以取四個方向的值得時候，分別對應以下規律，

一個值表示統一設置上右下左
兩個值表示分別設置上下左右
三個值表示分別設置上右下，左右保持一致
四個值表示分別設置上右下左

可以取四個值得常用屬性有：border-style、border-width 、 border-color、padding、margin。

輪廓線

屬性：outline

取值：width style color

線邊框實際佔位，輪廓不佔位，取none可以取消文本輸入框默認輪廓線

盒陰影

屬性：box-shadow

取值：h-shadow v-shadow blur spread color;

h-shadow 取像素值，陰影的水平偏移距離
v-shadow 取像素值，陰影的垂直偏移距離
blur 取像素值，表示陰影的模糊程度，值越大越模糊
spread 選填，取像素值，陰影的尺寸
color 設置陰影顏色,默認爲黑色

內邊距

屬性：padding

作用：調整元素內容框與邊框之間的距離

取值：單位是 px 或百分比，但不允許使用負值。內邊距padding支持上右下左取值。

內邊距也可以單方向取值：padding-top、padding-right、padding-bottom、padding-left

外邊距

屬性：margin

作用：調整本元素與其他元素之間的距離

margin:0; 取消默認外邊距

margin:0 auto; 左右自動外邊距，實現元素在父元素範圍內水平居中

margin:-10px;元素位置的微調

內邊距也可以單方向取值：margin-top、margin-right、margin-bottom、margin-left

外邊距合併問題：當一個元素包含在另一個元素中時，它們的上和包含上/或下和包含下外邊距也會發生合併。元素之間同時設置垂直方向的外邊距，最終取較大的值包含合併

盒模型最終尺寸的計算= width/height+padding+border+margin

頁面佈局

默認佈局方式，按照代碼書寫順序及標籤類型從上到下，從左到右依次顯示

定位佈局 position

結合定位屬性調整元素的顯示位置

position: static;

屬性值：

static：默認，沒有定位
fixed（固定定位）：參照瀏覽器窗口進行定位,不跟隨網頁滾動而滾動；
relative（相對定位）：可參照元素在文檔中的原始位置進行偏移
absolute（絕對定位）：參照離他最近的已經定位的祖先元素進行偏移,如果沒有,則參照窗口進行偏移；在文檔中不佔位,可以手動設置寬高

設置好定位後，就可以開始設置偏移屬性了，設置定位的元素可以使用偏移屬性調整距離參照物的位置

top 距參照物的頂部
right 距參照物的右側
bottom 距參照物的底部
left 距參照物的左側

h2.pos_top
{
    position:relative;
    top:-50px;
}

一般情況才採用 "父相子絕" : 父元素設置相對定位,子元素絕對定位，參照已定位的父元素偏移。

重疊次序

元素髮生堆疊時可以使用 z-index 屬性調整已定位元素的顯示位置，值越大元素越靠上：

屬性 : z-index

取值 : 無單位的數值,數值越大,越靠上

堆疊規則：

定位元素與文檔中正常元素髮生堆疊，永遠是已定位元素在上
同爲已定位元素髮生堆疊，按照 HTML 代碼的書寫順序，後來者居上

溢出佈局 overflow

　　overflow：用於控制內容溢出元素框時顯示的方式。

屬性值：

visible：默認值，不會修剪，內容會呈現在元素框之外
hidden：內容會被修剪，其餘內容不可見
scroll：多出內容以滾動條形式查看
auto：會自動選擇，如果內容被修剪，多出部分以滾動條形式呈現

注意:overflow 屬性只工作於指定高度的塊元素上。

浮動佈局 float

主要用於設置塊元素的水平排列，所以如果要使用float，要把元素變成塊元素display:block;，或者元素已經是塊元素。

屬性值：

float: left;　　設置元素向左浮動
float: right;　　設置元素向右浮動

特點

元素設置浮動會從原始位置脫流，向左或向右依次停靠在其他元素邊緣，在文檔中不再佔位
元素設置浮動，就具有塊元素的特徵，可以手動調整寬高
"文字環繞"：浮動元素遮擋正常元素的位置，無法遮擋正常內容的顯示，內容圍繞在浮動元素周圍顯示

常見問題

子元素全部設置浮動，導致父元素高度爲0，影響父元素背景色和背景圖片展示,影響頁面佈局

解決

對於內容固定的元素，如果子元素都浮動，可以給父元素固定高度(例:導航欄)
指定元素兩側不能出現浮動元素。設置 clear:both; 清除浮動
爲父元素設置 overflow:hidden; 解決高度爲0

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

隱藏元素

隱藏元素有兩種實現方法

display：none
visibility：hidden

注意：這兩種方法會產生不同的結果，visibility:hidden隱藏的元素仍佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

塊元素和內聯元素的轉變

　　將元素變成內聯元素

display:inline;

　　將元素變成塊元素

display:block;

背景屬性

CSS 屬性定義背景效果：

background-color：背景顏色
background-image：背景圖片
background-repeat：設置平鋪方式
background-attachment：背景圖像是否固定或者隨着頁面的其餘部分滾動。
background-position：顯示位置

背景顏色

background-color: red;

背景圖片

　　默認情況下進行平鋪重複顯示，以覆蓋整個元素實體.

background-image : url("圖片路徑");

設置背景圖片，指定圖片路徑，如果路徑中出現中文或空格，需要加引號

設置顏色漸變

可以使用兩個或兩個以上節點

/*上->下，紅變藍*/
background-image: linear-gradient(#e66465, #9198e5); 
/*左->右，紅變黃*/
background-image: linear-gradient(to right, red , yellow); 
/*從左上角開始，紅變黃*/
background-image: linear-gradient(to bottom right, red, yellow);  
/*帶有透明度的漸變*/
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 
/*徑向漸變*/
background-image: radial-gradient(red, yellow, green);

設置背景圖片的平鋪重複方式

默認背景圖片從元素的左上角顯示，如果圖片尺寸與元素尺寸不匹配時，會出現以下情況：

如果元素尺寸大於圖片尺寸，會自動重複平鋪，直至鋪滿整個元素
如果元素尺寸小於圖片尺寸，圖片默認從元素左上角開始顯示，超出部分不可見

平鋪方式

background-repeat

取值：

repeat：默認值，沿水平和垂直方向重複平鋪
repeat-x：沿X軸重複平鋪
repeat-y：沿Y軸重複平鋪
no-repeat：不重複平鋪

背景是否固定

background-attachment:fixed;

屬性值：

fixed：固定，背景圖片不會隨着頁面滾動而滾動
scroll：隨着頁面滾動而滾動
local：隨着頁面元素滾動而滾動

顯示位置

默認顯示在元素左上角

background-position:x y;

取值方式：

　　1. 像素值
　　　　設置背景圖片的在元素座標系中的起點座標
　　2. 方位值
　　　　水平方向取值：left/center/right
　　　　垂直方向取值：top/center/bottom

注：如果只設置某一個方向的方位值，另外一個方向默認爲center

精靈圖技術：爲了減少網絡請求，可以將所有的小圖標拼接在一張圖片上，一次網絡請求全部得到；藉助於background-position 對背景圖片開始位置進行調整，實現顯示不同的圖標

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #sp {
            border: solid 1px red;
            /* 設置顯示背景圖片的寬度和高度 */
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background-image: url("imgs/img07.png");
        }
        #sp2 {
            border: solid 1px red;
            /* 設置顯示背景圖片的寬度和高度 */
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background-image: url("imgs/img07.png");
            background-position: 0 -25px;
        }
        #sp3 {
            border: solid 1px red;
            /* 設置顯示背景圖片的寬度和高度 */
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background: url("imgs/img07.png") 0 -50px;
        }
    </style>
</head>
<body>
    <div id="sp"></div>
    <div id="sp2"></div>
    <div id="sp3"></div>
</body>
</html>

案例代碼

設置背景圖片的尺寸

background-size:width height;

取值方式：

　　1. 像素值
　　　　500px 500px：同時指定寬高
　　　　500px：指定寬度，高度自適應
　　2. 百分比：參照元素的尺寸進行計算
　　　　50% 50%; 根據元素寬高,分別計算圖片的寬高
　　　　50%; 根據元素寬度計算圖片寬高,圖片高度等比例縮放

背景屬性簡寫

background:color url("") repeat position;

注意：

如果需要同時設置以上屬性值，遵照相應順序書寫
background-size 單獨設置

文本格式

字體樣式

字體系列

font-family:"黑體","Microsoft YaHei",Arial;

取值：

family-name：字體類型名稱：“宋體”、“微軟雅黑”。其實中文字體也有英文名，都是一樣的。
generic-family：字體系列名稱：“serif”、“sans-serif”、“monospace”...

注意：可以指定多個字體名稱作爲備選字體，使用逗號隔開，如果瀏覽器不支持第一個字體，則會嘗試下一個；如果字體名稱爲中文，或者名稱中出現了空格，必須使用引號

Serif 和 Sans-serif 字體之間的區別

sans-serif 字體比較適合在屏幕上閱讀，而 serif 字體更容易在紙上閱讀。“sans”指無。

自定義字體

<style> 
@font-face
{
    font-family: myFirstFont;    /*自定義字體名*/
    src: url(sansation_light.woff);     /*自定義字體URL*/
}
 
div
{
    font-family:myFirstFont;
}
</style>

字體大小

font-size:20px;

瀏覽器默認字體大小是16px，1em=16px，

字體粗細

font-weight:normal;

normal（默認值）等價於400
bold (加粗) 等價於700

斜體

font-style:italic;

字體屬性

font : style weight size family;

注意 :

如果四個屬性值都必須設置，嚴格按照順序書
size family 是必填項

文本樣式

文本顏色

十六進制值，如: ＃FF0000
一個RGB值，如: RGB(255,0,0)
顏色的名稱，如: red

color:red;

文本裝飾線

/*刪除文本裝飾*/
text-decoration:none;

取值 :

underline：下劃線
overline：上劃線
line-through：刪除線
none：取消裝飾線

在CSS中，使用text-decoration屬性來定義段落文本的下劃線、刪除線和頂劃線。none即爲默認值，可以用這個屬性值也可以去掉已經有下劃線或刪除線或頂劃線的樣式。

水平對齊方式

text-align:center;

取值 :

left：左對齊(默認值)
center：居中對齊
right：右對齊
justify：兩端對齊

行高

line-height:30px;

使用 : 文本在當前行中永遠垂直居中，可以藉助行高height調整文本在元素中的垂直顯示位置

line-height = height 設置一行文本在元素中垂直居中
line-height > height 文本下移顯示
line-height < height 文本靠上顯示

特殊：line-height可以採用無單位的數值，代表當前字體大小的倍數,以此計算行高

字符間距

letter-spacing:2px   /*字母(漢字)與字母(漢字)  之間的間距*/
word-spacing:30px;　　/*單詞與單詞 之間的間距*/

文本縮進

text-indent:50px;

大小寫轉換

text-transform:uppercase;

屬性值：

uppercase：文本大小
lowercase：文本小寫
capitalize：首字母大寫

文字方向

direction:rtl;    /*right to left*/

屬性值：

ltr：默認，從左向右
rtl：從右向左

列表樣式

　　通過列表樣式，設置列表項標記的圖像（小黑點、小方框、數字、字母...）。

list-style-type: circle;    /*設置標記爲圓圈*/

常用屬性值：

none：無標記
disc：默認。標記是實心圓。
circle：標記是空心圓。
square：標記是實心方塊。
decimal：標記是數字。
lower-roman / upper-roman：小寫或大寫羅馬數字(i, ii, iii, iv, v, I, II, III, IV, V, )
lower-alpha / upper-alpha：小/大寫寫英文字母

鼠標箭頭樣式

cursor：default;

屬性值：

url：自定義光標的URL
default：默認光標
auto：瀏覽器默認光標
crosshair：十字線
move：可移動的圖標
wait：轉圈等待的光標
help：問號
text：可選文本的光標

提示工具

　　先讓提示文本隱藏，當鼠標劃過需要提示的地方的時候，再讓提示文本顯現。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 教程</title>
</head>
<style>
    /*鼠標移動到這*/
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }
    /*提示文本*/
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* 定位 */
        position: absolute;
        z-index: 1;
    }
　　 /*當鼠標劃過時，提示顯現*/
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
</style>
<body style="text-align:center;">

<div class="tooltip">
    鼠標移動到這<span class="tooltiptext">提示文本</span>
</div>

</body>
</html>

　　因此當我們需要提示條出現在上下左右的時候，只需要在提示條的定位中進行修改。

右邊

.tooltip .tooltiptext {
    top: -5px;    /*提示條向上移動5px*/
    left: 105%;  /*提示條向右移動5px*/
}

左邊

.tooltip .tooltiptext {
    top: -5px;　　/*提示條向上移動5px*/
    right: 105%; /*提示條向右移動5px*/
}

上面

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;    /*底部撐滿，移到最上面*/
    left: 50%;              /*左邊取一半，到中間*/
    margin-left: -60px; /* 向左移，居中 */
}

下面

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;            /*上面取滿，到底部*/
    left: 50%;              /*到中間*/
    margin-left: -60px; /* 向左移居中 */
}

指向性箭頭

/*在後面添加樣式*/
.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;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.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;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">

<br><br>

<div class="tooltip">鼠標移動到我這
  <span class="tooltiptext">提示文本</span>
</div>

</body>
</html>

完整代碼

其他方向依次類推

透明屬性

opacity:0.5;

0是全透明，1是不透明。

過渡屬性

transition：將鼠標懸停在一個元素上，逐步該元素的屬性值：

/*逐步改變寬度從 100px 到 300px */
div
{
    width:100px;
    transition: width 2s;
}
div:hover {width:300px;}

transition-delay: 2s; 延遲2s再，變換。

媒體類型

　　媒體類型允許我們指定HTML文檔將如何在不同媒體呈現。該文檔可以以不同的方式顯示在電腦屏幕上，手機上、平板上和紙張上。

@media 規則

@media 屬性值：

all：用於所有媒體設備
print：用於打印機
handheld：用於很小的手持設備
screen：用於電腦顯示器
tv：用於電視

案例：在電腦屏幕上，字體14px，打印的時候，字體10px。

@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}

屏幕尺寸響應式佈局

/* 響應式佈局 - 屏幕尺寸小於 800px 時，兩列布局改爲上下佈局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

動畫 @keyframes

　　@keyframes 規則是創建動畫，創建一個動畫演示，提供給animation屬性調用。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
div
{
    animation: myfirst 5s;
}

還可以使用百分比來規定變化發生的時間，關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

前端——CSS

樣式特徵

樣式表

行內樣式

內嵌樣式

外鏈樣式

CSS 選擇器

標籤選擇器

id選擇器

class選擇器/類選擇器

羣組選擇器

條件後代選擇器

子代選擇器

僞類選擇器

屬性選擇器

選擇器的優先級

元素的尺寸和顏色

元素的尺寸

顏色

盒子模型

邊框

輪廓線

盒陰影

內邊距

外邊距

頁面佈局

定位佈局 position

重疊次序

溢出佈局 overflow

浮動佈局 float

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

隱藏元素

塊元素和內聯元素的轉變

背景屬性

背景顏色

背景圖片

設置顏色漸變

設置背景圖片的平鋪重複方式

平鋪方式

背景是否固定

顯示位置

設置背景圖片的尺寸

文本格式

字體樣式

字體系列

自定義字體

字體大小

字體粗細

斜體

字體屬性

文本樣式

文本顏色

文本裝飾線

水平對齊方式

行高

字符間距

文本縮進

大小寫轉換

文字方向

列表樣式

鼠標箭頭樣式

提示工具

右邊

左邊

上面

下面

指向性箭頭

透明屬性

過渡屬性

媒體類型

@media 規則

動畫 @keyframes