css樣式的簡單使用
阿新 • • 發佈：2019-01-04
####4.初識CSS####
##4.1##
4.1.1CSS的基本語法結構
行內樣式，在html標籤中直接使用style屬性設定css樣式
<h2 style="color: red;font-size: 12px;"></h2>
內部樣式表，把css程式碼寫在head的style標籤中
<style type="text/css">
h3{
color: #090;
}
p{
font-size: 16px;
color: red;
.green{
font-size: 20px;
color: green;
}
.red{
font-size: 30px;
color: red;
}
</style>
外部樣式表，把css程式碼儲存為一個單獨的樣式表文件，副檔名為.css，在頁面中引用外部樣式表即可。html檔案引用外部樣式表有兩種方式，分別是連結式和匯入式。
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
4.1.2css3的基本選擇器
1.標籤選擇器
標籤{}
2.類選擇器
.類名{}
class="類名"
3.id選擇器
#id名{}
id="id名"
同一個id屬性在用一個頁面中只能使用一次，類選擇器可以使用多次
4.1.3優先順序
就近原則
id選擇器>類選擇器>標籤選擇器
##4.2高階選擇器##
4.2.1層次選擇器
1.後代選擇器 E F
作用：選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內 div p{ }
作用：選擇匹配的F元素，且匹配的F元素是匹配的E元素的子元素 div>p{}
3.相鄰兄弟選擇器 E+F
作用：選擇匹配的F元素，且匹配的F元素緊位於匹配的E元素後面 .active+p{}
4.通用兄弟選擇器 E~F
作用：選擇匹配的F元素，且位於匹配的E元素後的所有匹配的F元素 .active~p{
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active~p{
background: red;
}
</style>
</head>
<body>
<div>
<p >1</p>
<p class="active">2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
<p>7</p>
<p>8</p>
</div>
</body>
</html>
4.2.2結構偽類選擇器
E：first-child 功能描述：作為父元素的第一個子元素的元素E
E：last-child 功能描述：作為父元素的最後一個子元素的元素E
E F：nth-child 功能描述：選擇父級元素E的第n個子元素F，關鍵字為even，odd。
E：first-of-type 功能描述：選擇父元素內具有指定型別的第一個E元素
E：last-of-type 功能描述：選擇父元素內具有指定型別的最後一個E元素
E F：nth-of-type 功能描述：選擇父元素內具有指定型別的第n個F元素
區別：E F：nth-child(n)在父級裡從一個元素開始查詢，不分型別。
E F：nth-of-type(n)在父級裡先看型別，再看位置。
odd even:奇數，偶數，或者使用公式(an+b)
4.2.3屬性選擇器
E[attr] 功能描述：選擇匹配具有屬性attr的E元素
E[attr=val] 功能描述：選擇匹配具有屬性attr的E元素，並且屬性值為val(其中val區分大小寫)
E[attr^=val] 功能描述：選擇匹配具有屬性attr的E元素，且E元素定義了屬性attr，其屬性值是以val開頭的任意字串
E[attr$=val] 功能描述：選擇匹配具有屬性attr的E元素，且E元素定義了屬性attr，其屬性值是以val結尾的任意字串
E[attr*=val] 功能描述：選擇匹配元素E，且E元素定義了屬性attr，其屬性值包含了“val”。
4.2.4目標偽類選擇器
E：target
<div id="d1" class="c">
<h1><a href="#d1" >青花瓷</a></h1>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br/>
</p>
</div>
<style type="text/css">
p{
height: 0px;
overflow: hidden;
}
.c:target p{
height: 300px;
color: red;
}
.c:target h1 a{
color: red;
}
</style>
####5.css美化網頁元素####
##5.1字型樣式##
屬性名 含義
font-family 設定字型型別
font-size 設定字型大小
font-style 設定字型風格
font-weight 設定字型的粗細
font 在一個宣告中設定所有字型屬性
5.1.1字型型別
p{font-family:Verdana,"楷體";}
英文設定為Verdana型別，中文設定為楷體
p{font-family:Times,"Times New Roman","楷體";}
英文設定為Times，如果計算機中沒有這個字型則設定為Times New Roman字型，中文設定為楷體
5.1.2字型大小
h1{font-size:24px;}
設定字型大小為24畫素
5.1.3字型風格
屬性值：normal(預設),italic(斜體字樣式),oblique(傾斜的字型樣式)
5.1.4字型的粗細
屬性值：normal(預設),bold(粗體字型),bolder(更粗的字型),lighter(更細的字型),(100,200,300,400,500,600,700,800,900)定義由細到粗的字型，400等同於normal，700等同於bold
5.1.5字型的屬性
p span{font:oblique bold 12px "楷體";}
##5.2排版網頁文字##
屬性名 含義
color 設定文字顏色
text-align 設定元素水平對齊方式
text-indent 設定首行文字的縮排
line-height 設定文字的行高
text-decoration 設定文字的裝飾
vertical-align 設定垂直對齊方式
text-shadow 設定文字陰影
5.2.1文字顏色
1.使用十六進位制表示
2.rgb（r,g,b）
以上rgb三個引數，正整數的取值為0~255，百分比的取值為0%~100%，超出範圍值將截止其最近的取值極限，三個引數都不能負數
3.rgba(r,g,b,a)
以上a控制alpha透明度的引數，其中這個透明通道值為0~1，如果是0表示完全透明，如果是1表示完全不透明，取值不能是負數。
5.2.2水平對齊方式
屬性值：left(左)，right(右),center(中間),justify(兩端對齊)
5.2.3首行縮排和行高
line-height的屬性值與font-size的屬性值一樣，也是以數字來表示，單位px，也可以用倍數表示，行高是字型大小的倍數
text-indent縮排距離以數字表示，單位em或px，通常為2em，為2個字元
5.2.4文字裝飾
屬性值：none(預設值)，underline(設定文字的下劃線),overline(設定文字的上劃線),line-through(設定文字的刪除線)
5.2.5垂直對齊方式
通常用於設定圖片與文字的對齊方式
屬性值：middle，top，bottom
5.2.6文字陰影
text-shadow：color x軸位移(x-offset) y軸位移(y-offset) 模糊半徑(blur-radius);
text-shadow:blue 10px 10px 2px;
##5.3設定超連結和列表樣式##
5.3.1超連結偽類
a:hover{}
偽類名稱 含義
a:link 單擊訪問前的超連結樣式
a:visited 單擊訪問後
a:hover 滑鼠懸浮其上
a:active 單擊未釋放
設定偽類的順序：a:link，a:visited，a:hover，a:active
5.3.2列表樣式
1.list-style-type設定列表標記的型別
屬性值：none，disc(實心圓)，circle(空心圓),square(實心方塊)，decimal(數字)
li{list-style-type:disc;}
2.list-style設定所有列表的屬性
type-position-image的順序設定屬性值，實際使用中會直接使用list-style來設定無標記符
##5.4設定背景屬性##
5.4.1背景屬性
1.背景顏色
background-color：#D7D7D7;
2.背景影象
background-image:url(圖片路徑)
圖片重複方式
background-repeat:repeat-x；
屬性值：repeat(沿水平和垂直方向平鋪)，repeat-x(沿水平方向平鋪),no-repeat(不平鋪，背景影象只顯示一次),repeat-y(沿垂直方向平鋪)
3.背景定位
background-position：x y；
x y可以是畫素，百分比，方向關鍵詞
示例
1）0px 0px 預設，表示從左上角出現的背景影象
2）30px 30px 正向偏移，影象向下和向右移動
3）-50px -50px 反向偏移，影象向上和向右移動
4）30% 50% 垂直方向居中，水平方向偏移30%
5）right top 右上角出現
6）left bottom 左下角出現
7）top 上方水平居中位置出現
4.背景
background：#c00 url(../arrow-down.gif) 205px 10px no-repeat;
5.4.1背景尺寸
background-size:auto
可以設定背景影象的大小，單位畫素px，百分比，填充(cover)配合背景定位，contain(保持本身的寬高比例的縮放)
5.4.2px
使用畫素調整影象大小 ，單位px
5.4.3perception
使用百分比調整影象大小，單位%
5.4.4cover
使得背景影象放大後填充整個div，配合背景定位一起使用，將background-position：設定為center
5.4.5contain
可以使影象保持本身的寬高比例，將圖片縮放到寬度或者高度正好適應所定義背景的區域。
##5.5css漸變##
說明：1）IE瀏覽器是Trident核心，應加字首：-ms-
2）Firefox瀏覽器是Mozilla核心，應加字首：-moz-
3）Chrome瀏覽器是Webkit核心，應加字首：-webkit-
4）Opera瀏覽器是Blink核心，應加字首：-o-
5）Safari瀏覽器是Webkit核心，應加字首：-webkit-
語法如下：background:
linear-gradient(position,color1,color2,...)
考慮到加瀏覽器字首。如果是Webit核心的瀏覽器要相容
-webkit-linear-gradient(position,color1,color2,...)
屬性值（position）：1）to top：從底部到頂部
2）to bottom：從頂部到底部
3）to left：從右邊到左邊
4）to right：從左邊到右邊
5）to top left：從右下方到左上方
6）to top right：從左下方到右上方
7）to bottom left：從右上方到左下方
8）to bottom right：從左上方到右下方
####6.盒子模型####
##6.1盒子模型##
6.1.1什麼是盒子模型
一個獨立的盒子模型由content(網頁內容),border(邊框),padding(內邊距),margin(外邊距)
content:位於最中間，網頁的主要內容
border:位於內邊距外面
padding:位於邊框內部的空隙,是內容與邊框的距離
margin：位於邊框外部的空隙，後面加auto表示頁面居中
6.1.2邊框
1.border-color
屬性 說明
border-top-color 設定上邊框顏色
border-right-color 設定右邊框顏色
border-bottom-color 設定下邊框顏色
border-left-color 設定左邊框顏色
border-color 設定四個邊框為同一顏色
注意：設定border-color屬性同時設定四條邊框的顏色時，設定順序按順時針向上，右，下，左設定，邊框顏色，沒有設定屬性值的找對邊。
也可以同時設定上下，左右邊框的顏色
6.1.3border-width
用來指定border粗細程度，它的值有thin(設定細的邊框)，medium(設定中等的邊框，一般為2px)，thick(設定粗的邊框)和畫素值。
屬性 說明
border-top-width 設定上邊框粗細
border-right-width 設定右邊框粗細
border-bottom-width 設定下邊框粗細
border-left-width 設定左邊框粗細
border-width 設定四個邊框為同一粗細
特性與border-color一樣
6.1.4border-style
用來指定border的樣式，它的值有none(無邊框),hidden(隱藏),dotted(點線邊框),dashed(虛線邊框),solid(實線邊框),double(雙邊框),groove(),ridge(),outset。
屬性值 說明
border-top-style 設定上邊框樣式
border-right-style 設定右邊框樣式
border-bottom-style 設定下邊框樣式
border-left-style 設定左邊框樣式
border-style 設定四個邊框為同一樣式
一般常用的值為：none，solid
特性與border-color一樣
border的簡寫屬性，如設定某網頁元素的下邊框為紅色，9px，虛線：border-bottom:9px #F00 dashed
(同時設定三個屬性時，沒有限制，可以按任意順序設定，但是通常的順序為粗細，顏色，樣式)
設定某網頁元素為紅色，9px，虛線：border：9px #F00 dashed
6.1.5外邊距
外邊距(margin)位於盒子邊框外，指與其他盒子之間的距離，也就是指網頁中元素與元素之間的距離,單位可以是畫素px，也可以是百分比%。
屬性 說明
margin-top 設定上外邊框
margin-right 設定右外邊框
margin-bottom 設定下外邊框
margin-left 設定左外邊框
margin 設定四個方位的外邊框(順時針的順序進行設定)
margin還有一個特色值：auto，這個值通常當設定盒子在它的父容器中居中顯示時使用(必須是塊元素,要設定寬度)。margin：0px auto;
display: inline-block;把行內元素變為塊元素。
6.1.6內邊距
內邊距(padding)用於控制內容與邊框之間的距離，以便精確控制內容在盒子中的位置。
屬性 說明
padding-left 設定左內邊距
padding-right 設定右內邊距
padding-top 設定上內邊距
padding-bottom 設定下內邊距
padding 設定四個方位內邊距
6.1.7盒子模型的尺寸
在css中，width和height指的是內容區域的寬度和高度。增加了邊框、內邊距、外邊距、後不會影響內容區域的尺寸，但是會增加盒子模型的總尺寸。
div{
width:100px; /*div寬度100px*/
height:100px; /*div高度100px*/
padding:5px; /*內邊距5px*/
margin:10px; /*外邊距10px*/
border:1px solid #00000 /*邊框1px*/
}
盒子模型的總尺寸(外盒的總尺寸)=border+padding+margin+內容寬度
盒子模型的總尺寸(內盒的總尺寸)=border+padding+內容寬度
6.1.8box-sizing佈局
box-sizing:content-box(預設值，盒子的寬度或高度=border+padding+（margin）+width/height)|border-box(盒子的寬度或高度等於元素內容的寬度或高度，即height=盒子的總高度)
inherit(此值使元素繼承父元素的盒子模型模式)
##6.2圓角邊框##
6.2.1border-radius的語法
border-radius後面可以設定1~4個值，單位可以是px，%
border-radius:20px 四個角都是圓角，值是20px
border-radius：20px 40px;上下20px，左右40px
border-radius;20px 40px 30px;上20px，右40px，下30px，左40px
6.2.2利用border-radius製作特殊圖形
1.圓形:1）元素的寬度和高度必須相同
2）圓角的半徑為元素寬度的一半，或者之間設定圓角半徑值50%。
2.半圓形：1）50px 50px 0 0設定上半圓
2）0 0 50px 50px設定下半圓
3）0 50px 50px 0設定右半圓
4）50px 0 0 50px設定左半圓
製作上半圓或下半圓時，元素的寬度是高度的2倍，而且圓角的半徑為元素的高度值。
製作左半圓或右半圓時，元素的高度是寬度的2倍，而且圓角的半徑為元素的寬度值。
3.扇形：50px 0 0 0設定左上
0 50px 0 0設定右上
0 0 50px 0設定下右
0 0 0 50px設定下左
##6.3盒子陰影##
6.3.1box-shadow的語法
box-shadow：inset x-offset y-offset blur-radius color；
1）inset：陰影型別，可選值，預設的投影方式的外陰影，如果設定的inset表示內陰影。
2）x-offset：x軸位移，用來指定陰影的水平位移量，其值可以是正值，也可以是負值，如果是正值，陰影在物件的右邊，反之在左邊。
3）y-offset：y軸位移，用來指定陰影的垂直位移量，其值可以是正值，也可以是負值，7陰影在物件的底部，反之在頂部。
4）blur-radius：陰影模糊半徑，代表陰影向外模糊的模糊範圍，值越大陰影想外模糊的範圍越大，陰影的邊緣越模糊，只能是正值，為0則不具有模糊效果
5）color：陰影顏色
box-shadow：20px 10px 10px #06c外陰影
box-shadow：inset 20px 10px 10px #06c內陰影
####7浮動####
##7.1display##
7.1.1display屬性的使用
值 說明
block 塊級元素的預設值，元素會被顯示為塊級元素，該元素前後會帶有換行符
inline 行內元素的預設值
inline-block 行內塊元素，元素既具有行內元素的特性，也具有塊元素的特性
none 設定元素不會被顯示
nav標籤佈局導航條
##7.2浮動概述##
7.2.1float屬性
屬性值 說明
left 元素向左浮動
right 元素向右浮動
none 預設值，元素不浮動，並會顯示在其文字中出現的位置
##7.3清除浮動##
7.3.1clear屬性
值 說明
left 在左側不允許浮動元素
right 在右側不允許浮動元素
both 在左右兩側不允許浮動元素
none 預設值，允許浮動元素在兩側
7.3.2解決父級邊框塌陷的方法
1.浮動元素後面加空div
2.設定父元素的高度
3.父級新增overflow屬性
屬性值 說明
visible 預設值，內容不會被修剪，會呈現在盒子之外
hidden 內容會被修剪，並且其餘內容是不可見的
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘內容
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘內容
4.父級新增偽類after
注意：浮動元素後面加空div，很簡單，但是空div會造成HTML程式碼冗餘
設定父元素的高度，很簡單，但是元素固定高度會降低元素的可擴充套件
父級新增overflow屬性，很簡單，但是有下拉列表的場景不能用
父級新增偽類after，寫法比上面要複雜，但是沒有副作用，推薦使用
##7.4inline-block與浮動的區別
優點：
inline-block可以讓元素排在一行，並且支援寬度與高度，程式碼實現起來方便新增該屬性的元素帶標準文件流中，不需要清除浮動。
float可以讓元素排在一行並且支援寬度和高度，可以決定排列方向
缺點：
display：inline-block位置方向不可控制，會解析空格，
float浮動以後元素脫離文件流，會對周圍元素產生影響，必須在它的父級上新增清除浮動的樣式
使用：header article section nav footer佈局
####8.定位網頁元素####
##8.1定位在網頁元素的應用##
position屬性 說明
static 預設值，沒有定位，元素按照標準文件進行佈局。
relative 相對定位，使用相對定位的盒子位置常以標準文件流的排版方式為基礎，然後向後使盒子相對於它在原來的位置偏移指定的距離。
absolute 絕對定位，盒子的位置以包含它的盒子為基準進行偏移。
fixed 固定定位，以瀏覽器視窗為基準進行定位，也就是當拖動瀏覽器視窗的滾動條，依然保持物件位置不變。
當屬性設定為absolute,relative,fixed時，有四個子屬性，top，right，bottom，left，這四個屬性可以設定為畫素值外，還可以設定百分數。
left設定為正數，元素會向右移動，top值設定為正數，元素向下移動。
固定定位的特性：相對瀏覽器來定位，偏移量不會隨滾動條的移動而移動。
固定定位的使用場景：一般用在視窗左右兩邊的固定廣告，返回頂部圖示，吸頂導航欄和固定右側導航欄等。
絕對定位是以盒子作為基準的，但是要先對盒子的定位屬性設定為relative相對定位，才可以利用絕對定位。
結論：1）使用了絕對定位的元素，以它最近的一個“已經定位"的”祖先“元素為基準進行定位。如果沒有已經定位的祖先元素，那麼以瀏覽器視窗為基準進行定位。
2）絕對定位的元素從標準文件流中脫離，這意味著它們對其他元素的定位不會造成影響。
##8.2z-index屬性
8.2.1z-index屬性的應用
z-index是用於調整元素定位時重疊層的上下位置。它的值為整數，可以是正數，也可以是負數，當元素被設定了postion屬性時，z-index屬性可以設定各元素之間的重疊高低
關係。預設值為0。
8.2.2設定層的透明度
屬性 說明
opacity:x x的值為0~1，值越小越透明
filter:alpha(opacity=x) x的值為0~100，值越小越透明
由於兩種方法在使用中存在瀏覽器的相容問題，並不能確定使用者的瀏覽器。因此在樣式表中同時設定這兩種方法，以適應所有的瀏覽器。
####9.利用css製作網頁動畫####
##9.1css變形##
9.1.1變形簡介
css變形是一些效果的集合，如平移，旋轉，縮放，傾斜效果，每個效果都可以稱為變形，css變形是通過transform實現的，它可以作用在塊元素和行內元素上，語法如下：
transform:[transform-function] *;
transform-function:設定變形函式，可以是一個，也可以是多個，中間以空格分開。
translate():平移函式，基於x，y座標重新定位元素的位置
scale():縮放函式，可以使任意元素物件 尺寸發生變化
rotate():旋轉函式，取值是一個度數值.
skew():傾斜函式，取值是一個度數值。
css3 3D變形函式：translate3d()平移函式，scale3d()縮放函式,rotate3d()旋轉函式。
9.1.22D變形
1.2D位移
位移指的是元素從一個位置移動到另一個位置上，可以使用translate()函式讓元素在x軸，y軸上任意移動而不影響在x軸或y軸上的其他元素。
translate（tx，ty）;
tx表示x軸移動的向量長度，如果為正值，表示元素向x軸右側移動，為負值則向左側移動
ty表示y軸移動的向量長度，如果為正值，表示元素向y軸下側移動，為負值則向上側移動
常用單位是px，也可以是百分比。
當translate()函式只有一個值時，表示水平偏移，如果只設置垂直偏移，就必須設定第一個引數為0，第二個引數為偏移量。
例:transform: translate(4px, 8px);
2.2D縮放
scale()函式能夠用來縮放元素大小，該元素有兩個引數值，分別用來定義寬度和高度的縮放比例，預設值為1，0~0.99的任意值都可以使元素縮小，而任何大於1的值能讓元素放大
scale(sx,sy)；
例:transform: scale(2, 5);
3.2D傾斜
skew()函式能夠讓元素傾斜顯示，可將一個物件以其中心為之圍繞X軸和Y軸按照一定的角度傾斜。
skew(ax,ay);
ax:指定元素水平方向(x軸)的傾斜角度。
ay:指定元素垂直方向(y軸)的傾斜角度。
ax和ay都是角度值，單位用deg(度)表示。
例：transform: skew(40deg, -20deg);
4.2D旋轉
rotate()函式能夠讓元素在二維空間裡繞著一個指定的角度旋轉，這個元素物件可以是行內元素，可以是塊元素，旋轉的角度值如果是正值，則元素相對原來的中心順時針旋轉，如果是負值，則元素相對原來中心逆時針旋轉。
rotate(a);
該函式只接收一個值a，代表的是角度值。a的取值為正值，元素相對原來中心順時針旋轉。單位使用deg表示。
例：transform: rotate(60deg);
##9.2css3過渡##
9.2.1過渡屬性的使用
語法：transition:[transition-property transition-duration transition-timing-function transition-delay]*;
transition-property:指定過渡或動態模擬的css屬性
transition-duration:指定完成過渡所需要的時間
transition-timing-function:指定過渡函式
transition-delay:指定過渡開鎖出現的延遲時間
需要注意的是四個屬性之間不能用逗號隔開，而是使用空格分隔。
簡單語法：transition:過渡屬性 過渡所需的時間 過渡動畫函式 過渡延遲時間
1.過渡屬性
transition-property:屬性用來定義轉換動畫的CSS屬性名稱，常用的取值：IDENT：指定的CSS屬性(width、height、background-color屬性等)。
all：指定所有元素支援transition-property屬性的樣式，一般為了方便都會用all
例： transition: background-color;
2.過渡所需的時間
transition-duration屬性用來定義轉換動畫的時間長度，即從設定舊屬性到新屬性所花費的時間，單位為s
例： transition: background-color 2s;
3.過渡動畫函式
transition-timing-function屬性用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡新增一個函式來制定動畫的快慢方式。
常用的幾種過渡動畫方式如下。
ease:元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢(預設值).
linear:元素樣式從初始狀態過渡到終止狀態時恆速(勻速運動).
ease-in:元素樣式從初始狀態過渡到終止狀態時速度越來越快(漸顯效果).
ease-out:元素樣式從初始狀態過渡到終止狀態時速度越來越慢(漸隱效果).
ease-in-out:元素樣式從初始狀態過渡到終止狀態時速度先加速在減速(漸顯漸隱效果)。
例：transition: background-color 2s ease-out;
4.過渡延遲時間
transition-delay屬性用來指定一個動畫開始執行的時間，也就是說，在改變元素屬性值後多長時間去執行過渡效果。這個時間值可以是正值，負值或0.
正值：元素過渡效果不會觸發，當過了設定的時間值後才會被觸發
負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷。
0：預設值，元素過渡效果立即執行。
9.2.2過渡的觸發機制
偽類觸發：hover，active，focus,checked等
媒體查詢：可以通過@media屬性判斷裝置的尺寸、方向等
JavaScript觸發：用JavaScrip指令碼觸發
總結過渡動畫的使用步驟：
1）在預設樣式中宣告元素的初始狀態樣式。
2）宣告過渡元素最終狀態樣式，如懸浮狀態
3）在預設樣式中通過新增過渡函式，新增一些不同的樣式
##9.3css3動畫##
9.3.1css3動畫使用過程
1）通過關鍵幀(@keyframes)來宣告一個動畫
2）找到要設定動畫的元素，並且呼叫關鍵幀宣告的動畫
1.設定關鍵幀
語法： @keyframes IDENT{
from{/*css樣式*/}
percentage{/*css樣式*/}
to{/*css樣式*/}
}
也可以將關鍵詞from和to換成百分比，即
@keyframes IDENT{
0%{/*css樣式*/}
percentage{/*css樣式*/}
100%{/*css樣式*/}
}
2.呼叫關鍵幀
語法：animatioin可以在不觸發任何事件的情況下也能隨著時間的變化來改變元素的css屬性值，從而達到一種動畫的效果。
animation：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode；
animation：動畫名稱 動畫的播放時間 動畫的播放方式 開始播放動畫的時間 動畫的播放次數 動畫的播放方向 動畫的播放狀態 動畫時間外屬性
1）animation-name：是由@keyframes建立的動畫名稱
2）animation-duration animation-timing-function animation-delay和過渡時間、過渡方式、延時時間是一樣的
3）animation-iteration-count：動畫的播放次數。值通常為整數，預設值是1，表示動畫執行一次。還有一個特殊值infinite，表示動畫無限次播放
4）animation-direction：動畫的播放方向，主要有兩個只，normal表示動畫每次都是向前播放，另一個值是alternate，表示動畫播放為偶數次則向前播放，奇數次則向反方向播放。
5）animation-play-state：動畫的播放狀態：有兩個值：running和paused。可以通過paused將正在播放的元素動畫停下來，也可以是使用running將暫停的動畫重新播放。
6）animation-fill-mode；定義在動畫開始之前和結束之後發生的操作。其取值為forwards表示動畫在結束後繼續應用最後關鍵幀的位置，取值為backwards表示會在向元素應用動畫樣式時迅速應用動畫的初始幀，
取值為both表示元素動畫同時具有forwards和backwards的效果。
##4.1##
4.1.1CSS的基本語法結構
行內樣式，在html標籤中直接使用style屬性設定css樣式
<h2 style="color: red;font-size: 12px;"></h2>
內部樣式表，把css程式碼寫在head的style標籤中
<style type="text/css">
h3{
color: #090;
}
p{
font-size: 16px;
color: red;
.green{
font-size: 20px;
color: green;
}
.red{
font-size: 30px;
color: red;
}
</style>
外部樣式表，把css程式碼儲存為一個單獨的樣式表文件，副檔名為.css，在頁面中引用外部樣式表即可。html檔案引用外部樣式表有兩種方式，分別是連結式和匯入式。
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
4.1.2css3的基本選擇器
1.標籤選擇器
標籤{}
2.類選擇器
.類名{}
class="類名"
3.id選擇器
#id名{}
id="id名"
同一個id屬性在用一個頁面中只能使用一次，類選擇器可以使用多次
4.1.3優先順序
就近原則
id選擇器>類選擇器>標籤選擇器
##4.2高階選擇器##
4.2.1層次選擇器
1.後代選擇器 E F
作用：選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內 div p{ }
作用：選擇匹配的F元素，且匹配的F元素是匹配的E元素的子元素 div>p{}
3.相鄰兄弟選擇器 E+F
作用：選擇匹配的F元素，且匹配的F元素緊位於匹配的E元素後面 .active+p{}
4.通用兄弟選擇器 E~F
作用：選擇匹配的F元素，且位於匹配的E元素後的所有匹配的F元素 .active~p{
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active~p{
background: red;
}
</style>
</head>
<body>
<div>
<p >1</p>
<p class="active">2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
<p>7</p>
<p>8</p>
</div>
</body>
</html>
4.2.2結構偽類選擇器
E：first-child 功能描述：作為父元素的第一個子元素的元素E
E：last-child 功能描述：作為父元素的最後一個子元素的元素E
E F：nth-child 功能描述：選擇父級元素E的第n個子元素F，關鍵字為even，odd。
E：first-of-type 功能描述：選擇父元素內具有指定型別的第一個E元素
E：last-of-type 功能描述：選擇父元素內具有指定型別的最後一個E元素
E F：nth-of-type 功能描述：選擇父元素內具有指定型別的第n個F元素
區別：E F：nth-child(n)在父級裡從一個元素開始查詢，不分型別。
E F：nth-of-type(n)在父級裡先看型別，再看位置。
odd even:奇數，偶數，或者使用公式(an+b)
4.2.3屬性選擇器
E[attr] 功能描述：選擇匹配具有屬性attr的E元素
E[attr=val] 功能描述：選擇匹配具有屬性attr的E元素，並且屬性值為val(其中val區分大小寫)
E[attr^=val] 功能描述：選擇匹配具有屬性attr的E元素，且E元素定義了屬性attr，其屬性值是以val開頭的任意字串
E[attr$=val] 功能描述：選擇匹配具有屬性attr的E元素，且E元素定義了屬性attr，其屬性值是以val結尾的任意字串
E[attr*=val] 功能描述：選擇匹配元素E，且E元素定義了屬性attr，其屬性值包含了“val”。
4.2.4目標偽類選擇器
E：target
<div id="d1" class="c">
<h1><a href="#d1" >青花瓷</a></h1>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br/>
</p>
</div>
<style type="text/css">
p{
height: 0px;
overflow: hidden;
}
.c:target p{
height: 300px;
color: red;
}
.c:target h1 a{
color: red;
}
</style>
####5.css美化網頁元素####
##5.1字型樣式##
屬性名 含義
font-family 設定字型型別
font-size 設定字型大小
font-style 設定字型風格
font-weight 設定字型的粗細
font 在一個宣告中設定所有字型屬性
5.1.1字型型別
p{font-family:Verdana,"楷體";}
英文設定為Verdana型別，中文設定為楷體
p{font-family:Times,"Times New Roman","楷體";}
英文設定為Times，如果計算機中沒有這個字型則設定為Times New Roman字型，中文設定為楷體
5.1.2字型大小
h1{font-size:24px;}
設定字型大小為24畫素
5.1.3字型風格
屬性值：normal(預設),italic(斜體字樣式),oblique(傾斜的字型樣式)
5.1.4字型的粗細
屬性值：normal(預設),bold(粗體字型),bolder(更粗的字型),lighter(更細的字型),(100,200,300,400,500,600,700,800,900)定義由細到粗的字型，400等同於normal，700等同於bold
5.1.5字型的屬性
p span{font:oblique bold 12px "楷體";}
##5.2排版網頁文字##
屬性名 含義
color 設定文字顏色
text-align 設定元素水平對齊方式
text-indent 設定首行文字的縮排
line-height 設定文字的行高
text-decoration 設定文字的裝飾
vertical-align 設定垂直對齊方式
text-shadow 設定文字陰影
5.2.1文字顏色
1.使用十六進位制表示
2.rgb（r,g,b）
以上rgb三個引數，正整數的取值為0~255，百分比的取值為0%~100%，超出範圍值將截止其最近的取值極限，三個引數都不能負數
3.rgba(r,g,b,a)
以上a控制alpha透明度的引數，其中這個透明通道值為0~1，如果是0表示完全透明，如果是1表示完全不透明，取值不能是負數。
5.2.2水平對齊方式
屬性值：left(左)，right(右),center(中間),justify(兩端對齊)
5.2.3首行縮排和行高
line-height的屬性值與font-size的屬性值一樣，也是以數字來表示，單位px，也可以用倍數表示，行高是字型大小的倍數
text-indent縮排距離以數字表示，單位em或px，通常為2em，為2個字元
5.2.4文字裝飾
屬性值：none(預設值)，underline(設定文字的下劃線),overline(設定文字的上劃線),line-through(設定文字的刪除線)
5.2.5垂直對齊方式
通常用於設定圖片與文字的對齊方式
屬性值：middle，top，bottom
5.2.6文字陰影
text-shadow：color x軸位移(x-offset) y軸位移(y-offset) 模糊半徑(blur-radius);
text-shadow:blue 10px 10px 2px;
##5.3設定超連結和列表樣式##
5.3.1超連結偽類
a:hover{}
偽類名稱 含義
a:link 單擊訪問前的超連結樣式
a:visited 單擊訪問後
a:hover 滑鼠懸浮其上
a:active 單擊未釋放
設定偽類的順序：a:link，a:visited，a:hover，a:active
5.3.2列表樣式
1.list-style-type設定列表標記的型別
屬性值：none，disc(實心圓)，circle(空心圓),square(實心方塊)，decimal(數字)
li{list-style-type:disc;}
2.list-style設定所有列表的屬性
type-position-image的順序設定屬性值，實際使用中會直接使用list-style來設定無標記符
##5.4設定背景屬性##
5.4.1背景屬性
1.背景顏色
background-color：#D7D7D7;
2.背景影象
background-image:url(圖片路徑)
圖片重複方式
background-repeat:repeat-x；
屬性值：repeat(沿水平和垂直方向平鋪)，repeat-x(沿水平方向平鋪),no-repeat(不平鋪，背景影象只顯示一次),repeat-y(沿垂直方向平鋪)
3.背景定位
background-position：x y；
x y可以是畫素，百分比，方向關鍵詞
示例
1）0px 0px 預設，表示從左上角出現的背景影象
2）30px 30px 正向偏移，影象向下和向右移動
3）-50px -50px 反向偏移，影象向上和向右移動
4）30% 50% 垂直方向居中，水平方向偏移30%
5）right top 右上角出現
6）left bottom 左下角出現
7）top 上方水平居中位置出現
4.背景
background：#c00 url(../arrow-down.gif) 205px 10px no-repeat;
5.4.1背景尺寸
background-size:auto
可以設定背景影象的大小，單位畫素px，百分比，填充(cover)配合背景定位，contain(保持本身的寬高比例的縮放)
5.4.2px
使用畫素調整影象大小 ，單位px
5.4.3perception
使用百分比調整影象大小，單位%
5.4.4cover
使得背景影象放大後填充整個div，配合背景定位一起使用，將background-position：設定為center
5.4.5contain
可以使影象保持本身的寬高比例，將圖片縮放到寬度或者高度正好適應所定義背景的區域。
##5.5css漸變##
說明：1）IE瀏覽器是Trident核心，應加字首：-ms-
2）Firefox瀏覽器是Mozilla核心，應加字首：-moz-
3）Chrome瀏覽器是Webkit核心，應加字首：-webkit-
4）Opera瀏覽器是Blink核心，應加字首：-o-
5）Safari瀏覽器是Webkit核心，應加字首：-webkit-
語法如下：background:
linear-gradient(position,color1,color2,...)
考慮到加瀏覽器字首。如果是Webit核心的瀏覽器要相容
-webkit-linear-gradient(position,color1,color2,...)
屬性值（position）：1）to top：從底部到頂部
2）to bottom：從頂部到底部
3）to left：從右邊到左邊
4）to right：從左邊到右邊
5）to top left：從右下方到左上方
6）to top right：從左下方到右上方
7）to bottom left：從右上方到左下方
8）to bottom right：從左上方到右下方
####6.盒子模型####
##6.1盒子模型##
6.1.1什麼是盒子模型
一個獨立的盒子模型由content(網頁內容),border(邊框),padding(內邊距),margin(外邊距)
content:位於最中間，網頁的主要內容
border:位於內邊距外面
padding:位於邊框內部的空隙,是內容與邊框的距離
margin：位於邊框外部的空隙，後面加auto表示頁面居中
6.1.2邊框
1.border-color
屬性 說明
border-top-color 設定上邊框顏色
border-right-color 設定右邊框顏色
border-bottom-color 設定下邊框顏色
border-left-color 設定左邊框顏色
border-color 設定四個邊框為同一顏色
注意：設定border-color屬性同時設定四條邊框的顏色時，設定順序按順時針向上，右，下，左設定，邊框顏色，沒有設定屬性值的找對邊。
也可以同時設定上下，左右邊框的顏色
6.1.3border-width
用來指定border粗細程度，它的值有thin(設定細的邊框)，medium(設定中等的邊框，一般為2px)，thick(設定粗的邊框)和畫素值。
屬性 說明
border-top-width 設定上邊框粗細
border-right-width 設定右邊框粗細
border-bottom-width 設定下邊框粗細
border-left-width 設定左邊框粗細
border-width 設定四個邊框為同一粗細
特性與border-color一樣
6.1.4border-style
用來指定border的樣式，它的值有none(無邊框),hidden(隱藏),dotted(點線邊框),dashed(虛線邊框),solid(實線邊框),double(雙邊框),groove(),ridge(),outset。
屬性值 說明
border-top-style 設定上邊框樣式
border-right-style 設定右邊框樣式
border-bottom-style 設定下邊框樣式
border-left-style 設定左邊框樣式
border-style 設定四個邊框為同一樣式
一般常用的值為：none，solid
特性與border-color一樣
border的簡寫屬性，如設定某網頁元素的下邊框為紅色，9px，虛線：border-bottom:9px #F00 dashed
(同時設定三個屬性時，沒有限制，可以按任意順序設定，但是通常的順序為粗細，顏色，樣式)
設定某網頁元素為紅色，9px，虛線：border：9px #F00 dashed
6.1.5外邊距
外邊距(margin)位於盒子邊框外，指與其他盒子之間的距離，也就是指網頁中元素與元素之間的距離,單位可以是畫素px，也可以是百分比%。
屬性 說明
margin-top 設定上外邊框
margin-right 設定右外邊框
margin-bottom 設定下外邊框
margin-left 設定左外邊框
margin 設定四個方位的外邊框(順時針的順序進行設定)
margin還有一個特色值：auto，這個值通常當設定盒子在它的父容器中居中顯示時使用(必須是塊元素,要設定寬度)。margin：0px auto;
display: inline-block;把行內元素變為塊元素。
6.1.6內邊距
內邊距(padding)用於控制內容與邊框之間的距離，以便精確控制內容在盒子中的位置。
屬性 說明
padding-left 設定左內邊距
padding-right 設定右內邊距
padding-top 設定上內邊距
padding-bottom 設定下內邊距
padding 設定四個方位內邊距
6.1.7盒子模型的尺寸
在css中，width和height指的是內容區域的寬度和高度。增加了邊框、內邊距、外邊距、後不會影響內容區域的尺寸，但是會增加盒子模型的總尺寸。
div{
width:100px; /*div寬度100px*/
height:100px; /*div高度100px*/
padding:5px; /*內邊距5px*/
margin:10px; /*外邊距10px*/
border:1px solid #00000 /*邊框1px*/
}
盒子模型的總尺寸(外盒的總尺寸)=border+padding+margin+內容寬度
盒子模型的總尺寸(內盒的總尺寸)=border+padding+內容寬度
6.1.8box-sizing佈局
box-sizing:content-box(預設值，盒子的寬度或高度=border+padding+（margin）+width/height)|border-box(盒子的寬度或高度等於元素內容的寬度或高度，即height=盒子的總高度)
inherit(此值使元素繼承父元素的盒子模型模式)
##6.2圓角邊框##
6.2.1border-radius的語法
border-radius後面可以設定1~4個值，單位可以是px，%
border-radius:20px 四個角都是圓角，值是20px
border-radius：20px 40px;上下20px，左右40px
border-radius;20px 40px 30px;上20px，右40px，下30px，左40px
6.2.2利用border-radius製作特殊圖形
1.圓形:1）元素的寬度和高度必須相同
2）圓角的半徑為元素寬度的一半，或者之間設定圓角半徑值50%。
2.半圓形：1）50px 50px 0 0設定上半圓
2）0 0 50px 50px設定下半圓
3）0 50px 50px 0設定右半圓
4）50px 0 0 50px設定左半圓
製作上半圓或下半圓時，元素的寬度是高度的2倍，而且圓角的半徑為元素的高度值。
製作左半圓或右半圓時，元素的高度是寬度的2倍，而且圓角的半徑為元素的寬度值。
3.扇形：50px 0 0 0設定左上
0 50px 0 0設定右上
0 0 50px 0設定下右
0 0 0 50px設定下左
##6.3盒子陰影##
6.3.1box-shadow的語法
box-shadow：inset x-offset y-offset blur-radius color；
1）inset：陰影型別，可選值，預設的投影方式的外陰影，如果設定的inset表示內陰影。
2）x-offset：x軸位移，用來指定陰影的水平位移量，其值可以是正值，也可以是負值，如果是正值，陰影在物件的右邊，反之在左邊。
3）y-offset：y軸位移，用來指定陰影的垂直位移量，其值可以是正值，也可以是負值，7陰影在物件的底部，反之在頂部。
4）blur-radius：陰影模糊半徑，代表陰影向外模糊的模糊範圍，值越大陰影想外模糊的範圍越大，陰影的邊緣越模糊，只能是正值，為0則不具有模糊效果
5）color：陰影顏色
box-shadow：20px 10px 10px #06c外陰影
box-shadow：inset 20px 10px 10px #06c內陰影
####7浮動####
##7.1display##
7.1.1display屬性的使用
值 說明
block 塊級元素的預設值，元素會被顯示為塊級元素，該元素前後會帶有換行符
inline 行內元素的預設值
inline-block 行內塊元素，元素既具有行內元素的特性，也具有塊元素的特性
none 設定元素不會被顯示
nav標籤佈局導航條
##7.2浮動概述##
7.2.1float屬性
屬性值 說明
left 元素向左浮動
right 元素向右浮動
none 預設值，元素不浮動，並會顯示在其文字中出現的位置
##7.3清除浮動##
7.3.1clear屬性
值 說明
left 在左側不允許浮動元素
right 在右側不允許浮動元素
both 在左右兩側不允許浮動元素
none 預設值，允許浮動元素在兩側
7.3.2解決父級邊框塌陷的方法
1.浮動元素後面加空div
2.設定父元素的高度
3.父級新增overflow屬性
屬性值 說明
visible 預設值，內容不會被修剪，會呈現在盒子之外
hidden 內容會被修剪，並且其餘內容是不可見的
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘內容
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘內容
4.父級新增偽類after
注意：浮動元素後面加空div，很簡單，但是空div會造成HTML程式碼冗餘
設定父元素的高度，很簡單，但是元素固定高度會降低元素的可擴充套件
父級新增overflow屬性，很簡單，但是有下拉列表的場景不能用
父級新增偽類after，寫法比上面要複雜，但是沒有副作用，推薦使用
##7.4inline-block與浮動的區別
優點：
inline-block可以讓元素排在一行，並且支援寬度與高度，程式碼實現起來方便新增該屬性的元素帶標準文件流中，不需要清除浮動。
float可以讓元素排在一行並且支援寬度和高度，可以決定排列方向
缺點：
display：inline-block位置方向不可控制，會解析空格，
float浮動以後元素脫離文件流，會對周圍元素產生影響，必須在它的父級上新增清除浮動的樣式
使用：header article section nav footer佈局
####8.定位網頁元素####
##8.1定位在網頁元素的應用##
position屬性 說明
static 預設值，沒有定位，元素按照標準文件進行佈局。
relative 相對定位，使用相對定位的盒子位置常以標準文件流的排版方式為基礎，然後向後使盒子相對於它在原來的位置偏移指定的距離。
absolute 絕對定位，盒子的位置以包含它的盒子為基準進行偏移。
fixed 固定定位，以瀏覽器視窗為基準進行定位，也就是當拖動瀏覽器視窗的滾動條，依然保持物件位置不變。
當屬性設定為absolute,relative,fixed時，有四個子屬性，top，right，bottom，left，這四個屬性可以設定為畫素值外，還可以設定百分數。
left設定為正數，元素會向右移動，top值設定為正數，元素向下移動。
固定定位的特性：相對瀏覽器來定位，偏移量不會隨滾動條的移動而移動。
固定定位的使用場景：一般用在視窗左右兩邊的固定廣告，返回頂部圖示，吸頂導航欄和固定右側導航欄等。
絕對定位是以盒子作為基準的，但是要先對盒子的定位屬性設定為relative相對定位，才可以利用絕對定位。
結論：1）使用了絕對定位的元素，以它最近的一個“已經定位"的”祖先“元素為基準進行定位。如果沒有已經定位的祖先元素，那麼以瀏覽器視窗為基準進行定位。
2）絕對定位的元素從標準文件流中脫離，這意味著它們對其他元素的定位不會造成影響。
##8.2z-index屬性
8.2.1z-index屬性的應用
z-index是用於調整元素定位時重疊層的上下位置。它的值為整數，可以是正數，也可以是負數，當元素被設定了postion屬性時，z-index屬性可以設定各元素之間的重疊高低
關係。預設值為0。
8.2.2設定層的透明度
屬性 說明
opacity:x x的值為0~1，值越小越透明
filter:alpha(opacity=x) x的值為0~100，值越小越透明
由於兩種方法在使用中存在瀏覽器的相容問題，並不能確定使用者的瀏覽器。因此在樣式表中同時設定這兩種方法，以適應所有的瀏覽器。
####9.利用css製作網頁動畫####
##9.1css變形##
9.1.1變形簡介
css變形是一些效果的集合，如平移，旋轉，縮放，傾斜效果，每個效果都可以稱為變形，css變形是通過transform實現的，它可以作用在塊元素和行內元素上，語法如下：
transform:[transform-function] *;
transform-function:設定變形函式，可以是一個，也可以是多個，中間以空格分開。
translate():平移函式，基於x，y座標重新定位元素的位置
scale():縮放函式，可以使任意元素物件 尺寸發生變化
rotate():旋轉函式，取值是一個度數值.
skew():傾斜函式，取值是一個度數值。
css3 3D變形函式：translate3d()平移函式，scale3d()縮放函式,rotate3d()旋轉函式。
9.1.22D變形
1.2D位移
位移指的是元素從一個位置移動到另一個位置上，可以使用translate()函式讓元素在x軸，y軸上任意移動而不影響在x軸或y軸上的其他元素。
translate（tx，ty）;
tx表示x軸移動的向量長度，如果為正值，表示元素向x軸右側移動，為負值則向左側移動
ty表示y軸移動的向量長度，如果為正值，表示元素向y軸下側移動，為負值則向上側移動
常用單位是px，也可以是百分比。
當translate()函式只有一個值時，表示水平偏移，如果只設置垂直偏移，就必須設定第一個引數為0，第二個引數為偏移量。
例:transform: translate(4px, 8px);
2.2D縮放
scale()函式能夠用來縮放元素大小，該元素有兩個引數值，分別用來定義寬度和高度的縮放比例，預設值為1，0~0.99的任意值都可以使元素縮小，而任何大於1的值能讓元素放大
scale(sx,sy)；
例:transform: scale(2, 5);
3.2D傾斜
skew()函式能夠讓元素傾斜顯示，可將一個物件以其中心為之圍繞X軸和Y軸按照一定的角度傾斜。
skew(ax,ay);
ax:指定元素水平方向(x軸)的傾斜角度。
ay:指定元素垂直方向(y軸)的傾斜角度。
ax和ay都是角度值，單位用deg(度)表示。
例：transform: skew(40deg, -20deg);
4.2D旋轉
rotate()函式能夠讓元素在二維空間裡繞著一個指定的角度旋轉，這個元素物件可以是行內元素，可以是塊元素，旋轉的角度值如果是正值，則元素相對原來的中心順時針旋轉，如果是負值，則元素相對原來中心逆時針旋轉。
rotate(a);
該函式只接收一個值a，代表的是角度值。a的取值為正值，元素相對原來中心順時針旋轉。單位使用deg表示。
例：transform: rotate(60deg);
##9.2css3過渡##
9.2.1過渡屬性的使用
語法：transition:[transition-property transition-duration transition-timing-function transition-delay]*;
transition-property:指定過渡或動態模擬的css屬性
transition-duration:指定完成過渡所需要的時間
transition-timing-function:指定過渡函式
transition-delay:指定過渡開鎖出現的延遲時間
需要注意的是四個屬性之間不能用逗號隔開，而是使用空格分隔。
簡單語法：transition:過渡屬性 過渡所需的時間 過渡動畫函式 過渡延遲時間
1.過渡屬性
transition-property:屬性用來定義轉換動畫的CSS屬性名稱，常用的取值：IDENT：指定的CSS屬性(width、height、background-color屬性等)。
all：指定所有元素支援transition-property屬性的樣式，一般為了方便都會用all
例： transition: background-color;
2.過渡所需的時間
transition-duration屬性用來定義轉換動畫的時間長度，即從設定舊屬性到新屬性所花費的時間，單位為s
例： transition: background-color 2s;
3.過渡動畫函式
transition-timing-function屬性用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡新增一個函式來制定動畫的快慢方式。
常用的幾種過渡動畫方式如下。
ease:元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢(預設值).
linear:元素樣式從初始狀態過渡到終止狀態時恆速(勻速運動).
ease-in:元素樣式從初始狀態過渡到終止狀態時速度越來越快(漸顯效果).
ease-out:元素樣式從初始狀態過渡到終止狀態時速度越來越慢(漸隱效果).
ease-in-out:元素樣式從初始狀態過渡到終止狀態時速度先加速在減速(漸顯漸隱效果)。
例：transition: background-color 2s ease-out;
4.過渡延遲時間
transition-delay屬性用來指定一個動畫開始執行的時間，也就是說，在改變元素屬性值後多長時間去執行過渡效果。這個時間值可以是正值，負值或0.
正值：元素過渡效果不會觸發，當過了設定的時間值後才會被觸發
負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷。
0：預設值，元素過渡效果立即執行。
9.2.2過渡的觸發機制
偽類觸發：hover，active，focus,checked等
媒體查詢：可以通過@media屬性判斷裝置的尺寸、方向等
JavaScript觸發：用JavaScrip指令碼觸發
總結過渡動畫的使用步驟：
1）在預設樣式中宣告元素的初始狀態樣式。
2）宣告過渡元素最終狀態樣式，如懸浮狀態
3）在預設樣式中通過新增過渡函式，新增一些不同的樣式
##9.3css3動畫##
9.3.1css3動畫使用過程
1）通過關鍵幀(@keyframes)來宣告一個動畫
2）找到要設定動畫的元素，並且呼叫關鍵幀宣告的動畫
1.設定關鍵幀
語法： @keyframes IDENT{
from{/*css樣式*/}
percentage{/*css樣式*/}
to{/*css樣式*/}
}
也可以將關鍵詞from和to換成百分比，即
@keyframes IDENT{
0%{/*css樣式*/}
percentage{/*css樣式*/}
100%{/*css樣式*/}
}
2.呼叫關鍵幀
語法：animatioin可以在不觸發任何事件的情況下也能隨著時間的變化來改變元素的css屬性值，從而達到一種動畫的效果。
animation：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode；
animation：動畫名稱 動畫的播放時間 動畫的播放方式 開始播放動畫的時間 動畫的播放次數 動畫的播放方向 動畫的播放狀態 動畫時間外屬性
1）animation-name：是由@keyframes建立的動畫名稱
2）animation-duration animation-timing-function animation-delay和過渡時間、過渡方式、延時時間是一樣的
3）animation-iteration-count：動畫的播放次數。值通常為整數，預設值是1，表示動畫執行一次。還有一個特殊值infinite，表示動畫無限次播放
4）animation-direction：動畫的播放方向，主要有兩個只，normal表示動畫每次都是向前播放，另一個值是alternate，表示動畫播放為偶數次則向前播放，奇數次則向反方向播放。
5）animation-play-state：動畫的播放狀態：有兩個值：running和paused。可以通過paused將正在播放的元素動畫停下來，也可以是使用running將暫停的動畫重新播放。
6）animation-fill-mode；定義在動畫開始之前和結束之後發生的操作。其取值為forwards表示動畫在結束後繼續應用最後關鍵幀的位置，取值為backwards表示會在向元素應用動畫樣式時迅速應用動畫的初始幀，
取值為both表示元素動畫同時具有forwards和backwards的效果。