1.CSS:Cascading Style Sheet層疊樣式表，又稱風格樣式表Style Sheet,用于設(shè)計網(wǎng)頁風格。
2.CSS3的基本語法結(jié)構(gòu):
(1)CSS中注釋為/內(nèi)容/
(2)CSS規(guī)則由選擇器，聲明組成。
(3)聲明必須放在大括號{}中，聲明可以是一或多條。
(4)每條聲明由一個屬性和值組成，屬性和值用冒號:分開，每條語句以分號;結(jié)尾，如:
<style type="text/CSS">
h1{
font-size:12px;
color:red;
}
</style>
3.在HTML中引入CSS樣式的方式:
(1)行內(nèi)樣式:直接在標簽中用style屬性設(shè)置CSS樣式。
<p style="font-size:10px;">字體大小</p>
(2)內(nèi)部樣式表:把css代碼寫在<head>的<style>中，規(guī)范化應(yīng)寫為<style type="text/css">
(3)外部樣式表:文件擴展名為.css在外部樣式表中可直接寫樣式代碼，不需要<style>標簽。
a.鏈接式引用外部樣式表(常用)：
<head>
<link href="外部樣式表路徑" rel="stylesheet" type="text/css"/>
</head>
b.導(dǎo)入式引用外部樣式表：
<head>
<style>
@import url("外部樣式表路徑");
</style>
</head>
4.樣式優(yōu)先級:"就近原則"，行內(nèi)樣式>內(nèi)部樣式表>外部樣式表
當有很多樣式時，用!important可以為某一個樣式覆蓋掉其他所有樣式。
如
#textcolor{
color:pink !important;
}
5.CSS選擇器命名規(guī)范:駝峰命名法，用語義化單詞命名且不能和ID選擇器同名。
6.CSS3的基本選擇器
(1)標簽選擇器:以標簽名做選擇器的名稱如
h1{
color:red;
}
(2)類選擇器:選擇器名可自定義如
.red{
color:red;
}
<p class="red">內(nèi)容</p>
(3)ID選擇器:選擇器名可自定義，如
#red{
color:red;
}
<p id="red">內(nèi)容</p>
但同一個id屬性的選擇器在頁面中只能出現(xiàn)一次。
7.基本選擇器的優(yōu)先級:ID選擇器>類選擇器>標簽選擇器
8.CSS3的高級選擇器
1.層次選擇器:
(1)后代選擇器A B{ }：中間用空格隔開，只要是A的后代元素都會被選中。
(2)子選擇器A>B{ }：只能選擇A的子元素。
(3)相鄰兄弟選擇器A+B{ }：只用于A后面一個同級元素
(4)通用兄弟選擇器A~B{ }：用于A后面所有的同級元素
2.結(jié)構(gòu)偽類選擇器:根據(jù)文檔對象模型DOM的節(jié)點(元素級別)來操作。
(1)B:first-child 作為父元素的第一個子元素B，作用和(3)相似
(2)B:last-child 作為父元素的最后一個子元素B
(3)A B:nth-child(n) 在父級中查第n個子元素是不是B，不分類型
(4)B:first-of-type 選擇父元素內(nèi)B類型的第一個元素B
(5)B:last-of-type 選擇父元素內(nèi)B類型的最后一個元素B
(6)A B:nth-of-type(n) 在父級里先是不是B類型，再看位置n
9.屬性選擇器:
(1)A[arrt] 選擇包含屬性arrt的A標簽(也可寫多個屬性，但要同時存在)
(2)A[arrt = val] 選擇包含屬性arrt,且屬性值=val(區(qū)分大小寫)的A標簽
(3)A[arrt ^= val] 選擇包含屬性arrt,且屬性值以val開頭的任意字符串
(4)A[arrt $= val] 選擇包含屬性arrt,且屬性值以val結(jié)尾的任意字符串
(5)A[arrt *= val] 選擇包含屬性arrt,且屬性值包含val字符串的A標簽
10.CSS3設(shè)置文本樣式；
（1）<span>標簽:用來設(shè)置行內(nèi)元素(或幾個文字)的樣式。
(2)字體樣式：
font-size：常用單位px
font-family：若同時設(shè)中英文字體，英文字體要設(shè)置在中文字體前面
font-style：normal標準、italic斜體、oblique傾斜
font-variant：small-caps; 字體設(shè)置為新型的大寫字母，所有小寫字母都轉(zhuǎn)換為大寫。
font-weight：normal標準、bold粗、bolder更粗、lighter細、100-900數(shù)字越大越粗
font：一次設(shè)置字體所有屬性，順序為"字體風格-粗細-大小-類型"
如 font:italic bold 36px "宋體";
(3)用font簡寫方式至少要指定 font-size和 font-family 屬性，其他的屬性(如font-weight、font-style、font-variant、line-height)如未指定將使用默認值。
縮寫時 font-size 與 line-height中間要加"/"斜扛如 "12px/1.5em"
11.Text-transform：控制文本的大小寫
none 默認，定義既有小寫字母也有大寫字母的標準文本(原文)
capitalize 每個單詞以大寫字母開頭
uppercase 全部為大寫字母
lowercase 全部小寫字母
inherit 從父元素繼承text-transform屬性的值。
12.direction屬性：規(guī)定文本的方向/書寫方向。
ltr 文本方向從左到右
rtl 方向從右到左
inherit 繼承父元素direction屬性的值。
13.文字排版
(1)適用大多數(shù)瀏覽器：
從左向右 writing-mode: vertical-lr;
從右向左 writing-mode: vertical-rl;
(2)只適用IE瀏覽器:
從左向右 writing-mode: tb-lr;
從右向左 writing-mode: tb-rl
14.排版網(wǎng)頁文本
(1)color文本顏色:
RGB：如color:#FF0000; 另一種方法rgb(r,g,b)其中三個參數(shù)取整0~255
RGBA：在RGB基礎(chǔ)上加控制alpha透明度的參數(shù)，取值0~1，0表示完全透明
(2)text-align水平對齊:
left左(默認)、center中間、right右、justify兩端對齊
(3)text-indent首行縮進：2em或2px 縮進兩個字符
(4)text-height文本行高: 單位px或 按倍數(shù)(行高是字體大小的倍數(shù))
(5)text-decoration文本裝飾：
none默認無、underline下劃線、overline上劃線、line-through刪除線
(2)vertical-align垂直對齊：只能作用于<table>表格單元格的對象:
top頂、middle居中、bottom底
(4)text-shadow文本陰影：
語法"text-shadow:陰影顏色 x軸位移(x-offset) y軸位移(y-offset) 模糊半徑(blur-radius);"
如text-shadow: blue 10px 10ox 2px;
(5)查詢?yōu)g覽器是否支持HTML5及CSS3屬性的網(wǎng)址www.caniuse.com
15.CSS3設(shè)置超鏈接樣式：
偽類:根據(jù)標簽處于某種行為或狀態(tài)來修飾超鏈接樣式。其他標簽如p可以使用hover和active。
語法"標簽名:偽類名{聲明;}"
(1)a:link 未訪問前的超鏈接
(2)a:visited 訪問過后
(3)a:hover 鼠標移到鏈接上
(4)a:link 鼠標點擊未釋放
(5)設(shè)置偽類的順序：a:link - a:visited - a:hover - a:active
(6)雖有四種樣式,但實際開發(fā)中只設(shè)置<a>標簽選擇器樣式、鼠標懸浮鏈接樣式
16.CSS3設(shè)置列表樣式
(1)list-style-type：列表項標記類型
none無符號、decimal數(shù)字、disc實心圓(默認)、circle空心圓、square實心正方形
(2)list-style-image：用圖像做列表項標記
(3)list-style-position：設(shè)置列表項標記的位置
(4)list-style：一次設(shè)置列表的所有屬性 (屬性值為none時說明列表無樣式)
順序為 list-style-type + list-style-position + list-style-image
17.<div>標簽：用于網(wǎng)頁布局，把HTML文檔分成獨立不同的部分。
18.CSS3設(shè)置背景樣式：
(1)background-color：背景色不能繼承，其默認值是透明transparent
(2)background-image：url(圖片路徑)、none(不顯示背景圖像)
(3)background-repeat：背景圖像重復(fù)平鋪
repeat(沿水平和垂直方向)、no-repeat(不平鋪,只顯示一次)、
repeat-x(只沿水平方向)、repeat-y(只沿垂直方向)、
(4)background-position：背景圖的位置(X水平Y(jié)垂直方向的偏移量，如果只有一個方向關(guān)鍵字，則默認另一個關(guān)鍵字為center)
(5)background：一次設(shè)置背景的所有屬性
(6)background-size背景圖片尺寸：
1.Xpos Ypos:如 0px 0px：默認無偏移,從左上角出現(xiàn)
30px 40px：正向偏移,圖像向右和向下出現(xiàn)
-50px -60px：反向偏移,圖像向左和向上出現(xiàn)
2.X% Y%：如30% 50%(水平方向偏移30%，垂直方向居中)
3.X水平關(guān)鍵詞(left,center,right)、Y垂直關(guān)鍵詞(top,center,bottom)
auto(保持圖片原尺寸,不易失真)、cover(放大填滿容器標簽)、
百分比percentage、contain(按照圖片本身的寬高比例適應(yīng)定義背景的區(qū)域)
19.gradient線性漸變：顏色沿著一條直線方向過渡。
(1)常規(guī)語法：" linear-gradient(position, color1, color2,...)"
(2)瀏覽器兼容語法：" -兼容前綴-linear-gradient(position,color1,color2,...)"
(3)漸變的直線方向：
to left 從右向左、to top left 向左上方、to bottom left 向左下方、
to right 從左向右、to top right向右上方、to bottomo right向右下方、
to bottom從上向下、to top 從下向上、
20.CSS3徑向漸變radial-gradient：圓形漸變，顏色從一個起點朝所有方向混合，語法和線性漸變相似。
21.盒子模型的組成:
content網(wǎng)頁內(nèi)容、border邊框、padding內(nèi)邊距、margin外邊距
(1)邊框border：
border-color 邊框顏色：如border-color:#369 #000 #111 #F00;按“上右下左順時針”設(shè)置
border-width 邊框粗細：如細thin、中等medium、粗的thick
border-style 邊框樣式：常用none無邊框、dotted點線邊框、dashed虛線邊框、solid實線邊框
border 簡寫:如下邊框border-bottom:9px red dashed;四條邊框border:9px blue solid;
(2)margin外邊距：盒子邊框以外和其他盒子間的距離
margin-top:上外邊距、margin-bottom：下外邊距
margin-left：左外邊距、margin-right：右外邊距
margin：簡寫"上右下左"
auto：設(shè)置盒子在它的父容器里居中顯示。如margin:0px auto;讓整個盒子居中。
如果將元素的 margin設(shè)為負值，則元素會變大。
(塊元素可以把左右頁邊距設(shè)置為"自動"中心對齊。margin:auto;但前提寬度不能是100%)
注意：很多標簽都有自身默認的外邊距，所以一般用并集選擇器統(tǒng)一設(shè)置這些標簽的外邊距為0px,這樣不會產(chǎn)生不必要的空隙。
如清除body和h2自帶的外邊距 body,h2{margin:0px;}
(3)padding內(nèi)邊距：
padding-left、padding-right、padding-top、padding-bottom、
padding"上右下左"
22.盒子模型的尺寸
增加邊框、內(nèi)邊距、外邊距后不會影響內(nèi)容區(qū)域的尺寸，但會增加盒子模型的總尺寸。
(1)內(nèi)盒總尺寸 = border(上下/左右)+padding(上下/左右)+內(nèi)容寬/高度
(2)整個盒子的寬度 = 內(nèi)容寬度+左右padding+左右邊框border+左右margin
23.box-sizing拯救布局
(語法)box-sizing:content-box、border-box、inherit
(1)content-box：盒子的寬度或高度=border+padding+(margin)+width/height
(2)border-box：盒子的寬或高度等于元素內(nèi)容的寬或高度
(即 該內(nèi)容寬/高度=盒子寬/高度-border-padding )
(3)inherit：使元素繼承父元素的盒子模型模式。
24.border-radius圓角邊框：語法和邊框相似，只是四個邊框帶圓角
(語法)border-radius:length{1~4個數(shù)字};
(1)用border-radius制作特殊圖形
圓形：元素的寬度和高度必須相同。圓角半徑為元素寬度的一半，或直接設(shè)圓角半徑為50%
半圓形：元素的高度是寬度的2倍，且圓角半徑為元素的寬度值。
扇形：即制作四分之一圓形。"三同"元素寬度、高度、圓角半徑 "一不同"
25.盒子陰影：和文本陰影相似
(語法)box-shadow:inset x-offset y-offset blur-radius color;
inset：內(nèi)部陰影，可選。
x-offset：X軸水平位移，正值在右，負值在左。
y-offset：Y軸垂直位移，正值在下，負值在上。
blur-radius：模糊半徑可選，只能>=0 值越大陰影向外面積越大,邊緣越模糊。
26.標準文檔流：元素根據(jù)塊元素或行內(nèi)元素的特性從上到下，從左到右的方式自然排列。
27.display屬性:用于指定標簽的顯示方式。
block：塊元素的默認值，該元素前后自帶換行符
inline：行內(nèi)元素的默認值，元素會顯示為行內(nèi)元素
inline-block：行內(nèi)塊元素，兼具行內(nèi)元素和塊元素的特性
none：元素不會顯示
28.Float：指定網(wǎng)頁元素向哪個方向浮動
left左、right右、none默認無(元素不浮動 顯示在其文本出現(xiàn)的位置)
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果是右浮動，后面的文本流將環(huán)繞在它左邊：
29.clear清除浮動：當子元素全部浮動了，父級將包不住子元素會造成邊框塌陷，所以要清除浮動元素對其他元素的影響。
30.clear屬性：規(guī)定元素的哪一側(cè)不允許其他浮動元素。
left(左側(cè)不允許浮動元素)、right(右側(cè)不允許)、
both(左右都不允許，常用于文本在圖片下方顯示)、
none(允許浮動元素出現(xiàn)在兩側(cè))
31.解決父級邊框塌陷
(1)浮動元素后加空的div，該div樣式要設(shè)置clear:both;margin:0px;padding:0px;
(2)設(shè)置父元素固定高度把邊框撐開。
(3)父級添加overflow屬性:設(shè)置外層盒子的overflow:hidden。但此方法不能用于有下拉列表框的場景。
(4)父級添加偽類after，推薦。
32.Overflow屬性：溢出處理，也可用于擴展盒子高度。
- visible 默認溢出內(nèi)容可見，顯示在盒子外面
- hidden 多出來的內(nèi)容被隱藏且沒有滾動條
- scroll 有垂直水平2條滾動條，可查看多余內(nèi)容
- auto 如果內(nèi)容溢出，自動顯示滾動條(只有垂直條)查看
- inherit 繼承父特性
33.Position屬性：指定盒子的位置，相對它父級的位置或它自身應(yīng)該在的位置。
(1)static 默認無定位，元素按照標準文檔布局。
(2)relative相對定位
a.特性:
1.以標準文檔流排版為基礎(chǔ)，相當于它在原來位置偏移指定的距離。
2.元素位置偏移后，仍會保留原位置。
3.層級提高，可以遮蓋標準文檔流元素和浮動元素。
b.使用場景：
相對定位可以不設(shè)偏移量，讓后面的絕對定位以它為祖先元素作基準定位。
c.語法 position:relative,指定偏移量時：水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如
div{
position: relative;
top:-20px;
left:20px;
}
(3)absolute絕對定位
a.特性：
1.以已定位的祖先元素作基準定位，如果沒有定位的祖先元素，則以瀏覽器窗口為基準定位。
2.元素位置偏移后，不保留原位置(其他元素可以用它原來的空位)
3.層級提高，可以遮蓋標準文檔流元素和浮動元素。
4.設(shè)置絕對定位的元素脫離文檔流，對其他盒子的定位無影響
b.使用場景：下拉菜單、焦點圖輪播、彈出數(shù)字氣泡、特別花邊等。
(4)fixed固定定位
a.特性：直接以瀏覽器窗口為基準定位，偏移位置不受窗口滾動條滾動的影響。
b.使用場景：窗口邊緣的固定廣告、返回頂部圖標、邊緣固定導(dǎo)航欄等。
33.z-index屬性:設(shè)置定位元素的堆疊順序。默認值0，值大的層位于值小層的上方。
(1)網(wǎng)頁中的元素都含有兩個堆疊層級，一個是未設(shè)置絕對定位時所處的環(huán)境，此時z-index是0；另一個是設(shè)置絕對定位時所處的堆疊環(huán)境，
此時層的位置由z-index的值確定。
34.設(shè)置元素透明度的方法(通常兩種方法搜設(shè)置以適應(yīng)所有瀏覽器兼容)
(1)opacity:x x值為0~1，值越小越透明
(2)filter:alpha(opacity=x) x值為0~100，值越小越透明
35.transfrom變形:
指效果的集合，如平移、旋轉(zhuǎn)、縮放、傾斜效果。
語法 transform:[transform-function]*;
其中transform-function是變形函數(shù)，如要設(shè)置多個，則中間以空格分開。在用2D變形時要加瀏覽器兼容性前綴。
常用2D變形函數(shù)如下：
(1)translate(tx,ty)：
平移函數(shù)，將元素從原位置(基于X,Y坐標)移動到指定位置上。
tx表示X軸(橫坐標)上移動的向量長度，正值向右，負值向左。
ty表示Y軸(縱坐標)上移動的向量長度，正值向下，負值向上。
(2)scale(sx,sy)：
縮放函數(shù)，定義寬高度(元素尺寸)的縮放比例，默認值1。0~0.99縮小，大于1放大。
sx表示寬度即橫坐標方向的縮放量。
sy表示高度即縱坐標方向的縮放量。
(3)rotate(a)；
旋轉(zhuǎn)函數(shù)，只取一個值為度數(shù)值,單位deg表示角度°
正值順時針轉(zhuǎn)，負值逆時針轉(zhuǎn)。
rotate函數(shù)只旋轉(zhuǎn)，不改變元素形狀。
(4)skew(ax,ay)：
傾斜函數(shù)，取值為度數(shù)值，單位deg
ax表示水平方向即X軸的傾斜角度。
ay表示垂直方向即Y軸的傾斜角度。
36.3D變形函數(shù)：translate3d()平移函數(shù)、scale3d()縮放函數(shù)、rotate3d()旋轉(zhuǎn)函數(shù)
37.transition過渡：
指動畫轉(zhuǎn)換的過程，如漸現(xiàn)、漸弱、動畫快慢等。
通過指定屬性的初始狀態(tài)、結(jié)束狀態(tài)，在兩個狀態(tài)間通過平滑過渡的方式實現(xiàn)動畫。
語法:[transition-property transition-duration
transition-timing-function transition-delay]*
(速記法)transition: 過渡屬性 過渡用時 過渡的動畫函數(shù) 過渡的延遲時間
主要包括四個屬性值：
(1)transition-property：
過渡屬性，設(shè)置過渡或動態(tài)模擬的CSS屬性
(2)transition-duration：
過渡用時，從舊屬性到新屬性的用時，單位為s
(3)transition-timing-function：
指定過渡函數(shù)、過渡速度,有以下方式：
ease 速度由快到慢，逐漸變慢(默認)
liner 勻速
ease-in 越來越快(漸顯)
ease-out 越來越慢(漸隱)
ease-in-out 先加速再減速(漸顯漸隱)
(4)transition-delay：設(shè)置過渡是否延遲時間執(zhí)行。
注意：transition-duration指完成過渡需要的時間；transition-delay指過渡在什么時間之后觸發(fā)。
38.總結(jié)如何用transition實現(xiàn)過渡動畫：
(1)在默認樣式中聲明元素的初始狀態(tài)。
(2)聲明過渡元素之中狀態(tài)樣式，如懸浮狀態(tài)
(3)在默認樣式中通過添加過渡函數(shù)，添加不同的樣式。
39.過渡的觸發(fā)機制：
(1)偽類觸發(fā): :hover、 :active、 :focus、 :checked等
(2)媒體查詢：通過@media屬性判斷設(shè)備的尺寸、方向等。
(3)JavaScript觸發(fā)：用JavaScript腳本觸發(fā)。
40.animation動畫
animation制作動畫的步驟:
(1)通過類似Flash動畫的關(guān)鍵幀(@keyframes)聲明一個動畫；
其中@keyframes稱為關(guān)鍵幀，可以設(shè)置多段屬性。語法
@keyframes 動畫名稱{
from{ //css樣式代碼 }
百分比1{ //css樣式 }
百分比2{ //css樣式 }
100%{ //css樣式 }
}
(2)找到要設(shè)置動畫的元素，調(diào)用關(guān)鍵幀已聲明的動畫。
如 animation: spread(動畫名) 2s linear(勻速);
41.animation動畫的語法和屬性
" animation: 動畫名稱 播放時間 播放方式 開始播放的時間 播放次數(shù) 播放方向 播放狀態(tài) 動畫時間之外的狀態(tài) "
其中屬性分別為：
animation-name 動畫名稱、
animation-duration 播放時間、
animation-timing-function 播放方式、
animation-delay 開始播放的時間、
animation-iteration-count 播放次數(shù)(無限次用infinite)、
animation-diriection 播放方向、
animation-play-state 播放狀態(tài)、
animation-fill-mode 動畫時間之外的狀態(tài)、
42.瀏覽器兼容前綴：
-moz- 火狐等使用 Mozilla內(nèi)核的瀏覽器
-webkit- 谷歌、Safari等使用 Webkit內(nèi)核的瀏覽器
-o- Opera瀏覽器，使用Blink內(nèi)核
-ms- IE，使用 Trident內(nèi)核
