CSS背景
background-color:red
background-image:url('paper.gif')
background-repeat:no-repeat
background-attachment:feix ??
background-position:right top;
body {background:#ffffff ?url('img_tree.png') ?no-repeat ?right top;} (背景簡寫)
?background-image:url(img_flwr.gif),url(paper.gif);
background-size:80px? 60px;? ? background-size:100%100%;? 規(guī)定背景圖片的尺寸。
background-origin:content-box;? 規(guī)定背景圖片的定位區(qū)域窑多。
background-clip:content-box;? 規(guī)定背景的繪制區(qū)域。
CSS文本格式
color設(shè)置文本顏色
direction設(shè)置文本方向夺荒。
letter-spacing設(shè)置字符間距
line-height設(shè)置行高
text-align對齊元素中的文本
text-decoration向文本添加修飾
text-indent縮進(jìn)元素中文本的首行
text-shadow設(shè)置文本陰影
text-transform控制元素中的字母
unicode-bidi設(shè)置或返回文本是否被重寫
vertical-align設(shè)置元素的垂直對齊
white-space設(shè)置元素中空白的處理方式
word-spacing設(shè)置字間距
所有CSS字體屬性
font在一個聲明中設(shè)置所有的字體屬性
font-family指定文本的字體系列
font-size指定文本的字體大小
font-style指定文本的字體樣式
font-variant以小型大寫字體或者正常字體顯示文本
font-weight指定字體的粗細(xì)。
鏈接樣式
a:link {color:#FF0000;}? ? ? /* 未訪問鏈接*/
a:visited {color:#00FF00;}? /* 已訪問鏈接 */
a:hover {color:#FF00FF;}? /* 鼠標(biāo)移動到鏈接上 */
a:active {color:#0000FF;}? /* 鼠標(biāo)點(diǎn)擊時 *
所有的CSS列表屬性
list-style簡寫屬性良蒸。用于把所有用于列表的屬性設(shè)置于一個聲明中
list-style-image將圖象設(shè)置為列表項(xiàng)標(biāo)志技扼。
list-style-position設(shè)置列表中列表項(xiàng)標(biāo)志的位置。
list-style-type設(shè)置列表項(xiàng)標(biāo)志的類型嫩痰。
CSS 邊框?qū)傩?br>
border簡寫屬性剿吻，用于把針對四個邊的屬性設(shè)置在一個聲明。
border-style用于設(shè)置元素所有邊框的樣式串纺，或者單獨(dú)地為各邊設(shè)置邊框樣式丽旅。
border-width簡寫屬性，用于為元素的所有邊框設(shè)置寬度纺棺，或者單獨(dú)地為各邊邊框設(shè)置寬度榄笙。
border-color簡寫屬性，設(shè)置元素的所有邊框中可見部分的顏色祷蝌，或?yàn)?4 個邊分別設(shè)置顏色茅撞。
border-bottom簡寫屬性，用于把下邊框的所有屬性設(shè)置到一個聲明中巨朦。
border-bottom-color設(shè)置元素的下邊框的顏色米丘。
border-bottom-style設(shè)置元素的下邊框的樣式。
border-bottom-width設(shè)置元素的下邊框的寬度罪郊。
border-left簡寫屬性，用于把左邊框的所有屬性設(shè)置到一個聲明中尚洽。
border-left-color設(shè)置元素的左邊框的顏色悔橄。
border-left-style設(shè)置元素的左邊框的樣式。
border-left-width設(shè)置元素的左邊框的寬度。
border-right簡寫屬性癣疟，用于把右邊框的所有屬性設(shè)置到一個聲明中挣柬。
border-right-color設(shè)置元素的右邊框的顏色。
border-right-style設(shè)置元素的右邊框的樣式睛挚。
border-right-width設(shè)置元素的右邊框的寬度邪蛔。
border-top簡寫屬性，用于把上邊框的所有屬性設(shè)置到一個聲明中扎狱。
border-top-color設(shè)置元素的上邊框的顏色侧到。
order-top-style設(shè)置元素的上邊框的樣式。
border-top-width設(shè)置元素的上邊框的寬度淤击。
border-radius? border-radius:25px;
box-shadow? ? ? box-shadow: 10px 10px 5px #888888;
border-image? ? border-image:url(border.png) 30 30 round;
所有CSS 輪廓（outline）屬性
輪廓（outline）是繪制于元素周圍的一條線匠抗，位于邊框邊緣的外圍，可起到突出元素的作用污抬。
outline在一個聲明中設(shè)置所有的外邊框?qū)傩?/p>
outline-color設(shè)置外邊框的顏色
outline-style設(shè)置外邊框的樣式
outline-width設(shè)置外邊框的寬度
margin屬性可以有一到四個值汞贸。pading和他一樣
margin:25px 50px 75px 100px; ??
上邊距為25px
右邊距為50px
下邊距為75px
左邊距為100px
margin:25px 50px 75px;
上邊距為25px
左右邊距為50px
下邊距為75px
margin:25px 50px;
上下邊距為25px
左右邊距為50px
margin:25px;
所有的4個邊距都是25px
所有CSS 尺寸 (Dimension)屬性
height設(shè)置元素的高度。
line-height設(shè)置行高印机。
max-height設(shè)置元素的最大高度矢腻。
max-width設(shè)置元素的最大寬度
min-height設(shè)置元素的最小高度。
min-width設(shè)置元素的最小寬度射赛。
width設(shè)置元素的寬度多柑。
CSSDisplay(顯示)與Visibility（可見性）
隱藏元素 - display:none或visibility:hidden
隱藏一個元素可以通過把display屬性設(shè)置為"none"，或把visibility屬性設(shè)置為"hidden"咒劲。但是請注意顷蟆，這兩種方法會產(chǎn)生不同的結(jié)果。
visibility:hidden可以隱藏某個元素腐魂，但隱藏的元素仍需占用與未隱藏之前一樣的空間帐偎。也就是說，該元素雖然被隱藏了蛔屹，但仍然會影響布局削樊。
CSSPositioning(定位)
Fixed 定位元素的位置相對于瀏覽器窗口是固定位置。
Relative 定位 ? 相對定位元素的定位是相對其正常位置兔毒。
Absolute 定位 ?絕對定位的元素的位置相對于最近的已定位父元素漫贞，如果元素沒有已定位的父元素，那么它的位置相對于
z-index屬性指定了一個元素的堆疊順序（哪個元素應(yīng)該放在前面育叁，或后面）
CSS3漸變（Gradients）
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
background:linear-gradient(red,blue);/*標(biāo)準(zhǔn)的語法*/從上到下的線性漸變
background:linear-gradient(toright,red,blue);/*標(biāo)準(zhǔn)的語法*/? 線性漸變 - 從左到右
background:linear-gradient(tobottomright,red,blue);/*標(biāo)準(zhǔn)的語法*/ 從左上角到右下角的線性漸變
徑向漸變（Radial Gradients）- 由它們的中心定義
background:radial-gradient(red,green,blue);/*標(biāo)準(zhǔn)的語法*/
顏色結(jié)點(diǎn)不均勻分布的徑向漸變：
background:radial-gradient(red5%,green15%,blue60%);/*標(biāo)準(zhǔn)的語法*/
shape 參數(shù)定義了形狀迅脐。它可以是值 circle 或 ellipse。其中豪嗽，circle 表示圓形谴蔑，ellipse 表示橢圓形豌骏。默認(rèn)值是 ellipse。
background:radial-gradient(circle,red,yellow,green);/*標(biāo)準(zhǔn)的語法*/
CSS3文本效果
text-shadow:5px? 5px? 5px? #FF0000;? 給標(biāo)題添加陰影
box-shadow:10px ?10px ? 5px ?grey; 屬性適用于盒子陰影
text-overflow
word-wrap? CSS3的換行
word-break 單詞拆分換行
hanging-punctuation規(guī)定標(biāo)點(diǎn)字符是否位于線框之外隐锭。
punctuation-trim規(guī)定是否對標(biāo)點(diǎn)字符進(jìn)行修剪窃躲。
text-align-last設(shè)置如何對齊最后一行或緊挨著強(qiáng)制換行符之前的行。
text-emphasis向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色
text-justify規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時所使用的對齊方法钦睡。
text-outline規(guī)定文本的輪廓蒂窒。
text-overflow規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情
text-shadow向文本添加陰影
text-wrap規(guī)定文本的換行規(guī)則。
word-break規(guī)定非中日韓文本的換行規(guī)則荞怒。
word-wrap允許對長的不可分割的單詞進(jìn)行分割并換行到下一行洒琢。
CSS3 @font-face 規(guī)則
font-family:name
src:URL
font-stretch:normal
font-style:normal
font-weight:noraml
CSS3 ? 2D 轉(zhuǎn)換
transform:
matrix(n,n,n,n,n,n)定義 2D 轉(zhuǎn)換，使用六個值的矩陣挣输。transform:matrix(0.866,0.5,-0.5,0.866,0,0);
translate(x,y)定義 2D 轉(zhuǎn)換纬凤，沿著 X 和 Y 軸移動元素。transform:translate(50px,100px);
translateX(n)定義 2D 轉(zhuǎn)換撩嚼，沿著 X 軸移動元素停士。
translateY(n)定義 2D 轉(zhuǎn)換，沿著 Y 軸移動元素完丽。
scale(x,y)定義 2D 縮放轉(zhuǎn)換恋技，改變元素的寬度和高度。transform:scale(2,3);
scaleX(n)定義 2D 縮放轉(zhuǎn)換逻族，改變元素的寬度蜻底。
scaleY(n)定義 2D 縮放轉(zhuǎn)換，改變元素的高度聘鳞。
rotate(angle)定義 2D 旋轉(zhuǎn)薄辅，在參數(shù)中規(guī)定角度。transform:rotate(30deg);
skew(x-angle,y-angle)定義 2D 傾斜轉(zhuǎn)換抠璃，沿著 X 和 Y 軸站楚。transform:skew(30deg,20deg);
skewX(angle)定義 2D 傾斜轉(zhuǎn)換，沿著 X 軸搏嗡。
skewY(angle)定義 2D 傾斜轉(zhuǎn)換窿春，沿著 Y 軸。
CSS33D 轉(zhuǎn)換
transform向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換采盒。
transform-origin允許你改變被轉(zhuǎn)換元素的位置旧乞。
transform-style規(guī)定被嵌套元素如何在 3D 空間中顯示。
perspective規(guī)定 3D 元素的透視效果磅氨。
perspective-origin規(guī)定 3D 元素的底部位置尺栖。
backface-visibility定義元素在不面對屏幕時是否可見。
3D 轉(zhuǎn)換方法
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定義 3D 轉(zhuǎn)換烦租，使用 16 個值的 4x4 矩陣延赌。
translate3d(x,y,z) ? ? ? ?定義 3D 轉(zhuǎn)化货徙。
translateX(x) ? ? ? ? ?定義 3D 轉(zhuǎn)化，僅使用用于 X 軸的值皮胡。
translateY(y)定義 3D 轉(zhuǎn)化，僅使用用于 Y 軸的值赏迟。
translateZ(z)定義 3D 轉(zhuǎn)化屡贺，僅使用用于 Z 軸的值。
scale3d(x,y,z)定義 3D 縮放轉(zhuǎn)換锌杀。
scaleX(x)定義 3D 縮放轉(zhuǎn)換甩栈，通過給定一個 X 軸的值。
rotate3d(x,y,z,angle)定義 3D 旋轉(zhuǎn)
rotateX(angle)定義沿 X 軸的 3D 旋轉(zhuǎn)糕再。
perspective(n)定義 3D 轉(zhuǎn)換元素的透視視圖量没。
CSS3過渡
transition:property,duration,ease,delay;
transition簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性突想。
transition-property規(guī)定應(yīng)用過渡的 CSS 屬性的名稱殴蹄。
transition-duration定義過渡效果花費(fèi)的時間。默認(rèn)是 0猾担。
transition-timing-function規(guī)定過渡效果的時間曲線袭灯。默認(rèn)是 "ease"。
transition-delay規(guī)定過渡效果何時開始绑嘹。默認(rèn)是 0稽荧。
transition:width1slinear2s;效果與下面相同
transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:2s;
CSS3 動畫
@keyframes規(guī)定動畫。
animation所有動畫屬性的簡寫屬性工腋，除了 animation-play-state 屬性姨丈。
animation-name規(guī)定 @keyframes 動畫的名稱。
animation-duration規(guī)定動畫完成一個周期所花費(fèi)的秒或毫秒擅腰。默認(rèn)是 0蟋恬。
animation-timing-function規(guī)定動畫的速度曲線。默認(rèn)是 "ease"惕鼓。
animation-delay規(guī)定動畫何時開始筋现。默認(rèn)是 0。
animation-iteration-count規(guī)定動畫被播放的次數(shù)箱歧。默認(rèn)是 1矾飞。
animation-direction規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 "normal"呀邢。
animation-play-state規(guī)定動畫是否正在運(yùn)行或暫停洒沦。默認(rèn)是 "running"。
CSS3 多列屬性
column-count指定元素應(yīng)該被分割的列數(shù)价淌。
column-fill指定如何填充列
column-gap指定列與列之間的間隙
column-rule所有 column-rule-* 屬性的簡寫
column-rule-color指定兩列間邊框的顏色
column-rule-style指定兩列間邊框的樣式
column-rule-width指定兩列間邊框的厚度
column-span指定元素要跨越多少列
column-width指定列的寬度
columns設(shè)置 column-width 和 column-count 的簡寫
CSS3 彈性盒子(Flex Box)
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成申眼。
彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器瞒津。
彈性容器內(nèi)包含了一個或多個彈性子元素。
注意：彈性容器外及彈性子元素內(nèi)是正常渲染的括尸。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局巷蚪。
彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個容器只有一行濒翻。
flex-direction的值有:
row：橫向從左到右排列（左對齊）屁柏，默認(rèn)的排列方式。
row-reverse：反轉(zhuǎn)橫向排列（右對齊有送，從后往前排淌喻，最后一項(xiàng)排在最前面。
column：縱向排列雀摘。
column-reverse：反轉(zhuǎn)縱向排列裸删，從后往前排，最后一項(xiàng)排在最上面阵赠。
justify-content 屬性
內(nèi)容對齊（justify-content）屬性應(yīng)用在彈性容器上涯塔，把彈性項(xiàng)沿著彈性容器的主軸線（main axis）對齊。
justify-content 語法如下：
各個值解析:
flex-start：
彈性項(xiàng)目向行頭緊挨著填充清蚀。這個是默認(rèn)值伤塌。第一個彈性項(xiàng)的main-start外邊距邊線被放置在該行的main-start邊線，而后續(xù)彈性項(xiàng)依次平齊擺放轧铁。
flex-end：
彈性項(xiàng)目向行尾緊挨著填充每聪。第一個彈性項(xiàng)的main-end外邊距邊線被放置在該行的main-end邊線，而后續(xù)彈性項(xiàng)依次平齊擺放齿风。
center：
彈性項(xiàng)目居中緊挨著填充药薯。（如果剩余的自由空間是負(fù)的，則彈性項(xiàng)目將在兩個方向上同時溢出）救斑。
space-between：
彈性項(xiàng)目平均分布在該行上童本。如果剩余空間為負(fù)或者只有一個彈性項(xiàng)，則該值等同于flex-start脸候。否則穷娱，第1個彈性項(xiàng)的外邊距和行的main-start邊線對齊，而最后1個彈性項(xiàng)的外邊距和行的main-end邊線對齊运沦，然后剩余的彈性項(xiàng)分布在該行上泵额，相鄰項(xiàng)目的間隔相等。
space-around：
彈性項(xiàng)目平均分布在該行上携添，兩邊留有一半的間隔空間嫁盲。如果剩余空間為負(fù)或者只有一個彈性項(xiàng)，則該值等同于center烈掠。否則羞秤，彈性項(xiàng)目沿該行分布缸托，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）瘾蛋。
align-items 屬性
align-items設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式俐镐。
各個值解析:
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界哺哼。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置京革。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）幸斥。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效咬扇。其它情況下甲葬，該值將參與基線對齊。
stretch：如果指定側(cè)軸大小的屬性值為'auto'懈贺，則其值會使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸经窖，但同時會遵照'min/max-width/height'屬性的限制。
flex-wrap 屬性
flex-wrap屬性用于指定彈性盒子的子元素?fù)Q行方式梭灿。
各個值解析:
nowrap- 默認(rèn)画侣， 彈性容器為單行。該情況下彈性子項(xiàng)可能會溢出容器堡妒。
wrap- 彈性容器為多行配乱。該情況下彈性子項(xiàng)溢出的部分會被放置到新行，子項(xiàng)內(nèi)部會發(fā)生斷行
wrap-reverse-反轉(zhuǎn) wrap 排列皮迟。
align-content 屬性
align-content屬性用于修改flex-wrap屬性的行為搬泥。類似于align-items, 但它不是設(shè)置彈性子元素的對齊，而是設(shè)置各個行的對齊伏尼。
各個值解析:
stretch- 默認(rèn)忿檩。各行將會伸展以占用剩余的空間。
flex-start- 各行向彈性盒容器的起始位置堆疊爆阶。
flex-end- 各行向彈性盒容器的結(jié)束位置堆疊燥透。
center-各行向彈性盒容器的中間位置堆疊。
space-between-各行在彈性盒容器中平均分布辨图。
space-around- 各行在彈性盒容器中平均分布班套，兩端保留子元素與子元素之間間距大小的一半。
彈性子元素屬性
完美的居中
以下實(shí)例將完美解決我們平時碰到的居中問題故河。
使用彈性盒子孽尽，居中變的很簡單，只想要設(shè)置margin: auto;可以使得彈性子元素在兩上軸方向上完全居中:
align-self
align-self屬性用于設(shè)置彈性元素自身在側(cè)軸（縱軸）方向上的對齊方式忧勿。
auto：如果'align-self'的值為'auto'杉女，則其計算值為元素的父元素的'align-items'值瞻讽，如果其沒有父元素，則計算值為'stretch'熏挎。
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界速勇。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置坎拐。（如果該行的尺寸小于彈性盒子元素的尺寸烦磁，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條哼勇，則該值與'flex-start'等效都伪。其它情況下，該值將參與基線對齊积担。
stretch：如果指定側(cè)軸大小的屬性值為'auto'陨晶，則其值會使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制帝璧。
flex
各個值解析:
auto: 計算值為 1 1 auto
initial: 計算值為 0 1 auto
none：計算值為 0 0 auto
inherit：從父元素繼承
[?flex-grow?]：定義彈性盒子元素的擴(kuò)展比率先誉。
[?flex-shrink?]：定義彈性盒子元素的收縮比率。
[?flex-basis?]：定義彈性盒子元素的默認(rèn)基準(zhǔn)值的烁。
媒體查詢:
not:not是用來排除掉某些特定的設(shè)備的褐耳，比如 @media not print（非打印設(shè)備）。
only:用來定某種特別的媒體類型渴庆。對于支持Media Queries的移動設(shè)備來說铃芦，如果存在only關(guān)鍵字，移動設(shè)備的Web瀏覽器會忽略only關(guān)鍵字并直接根據(jù)后面的表達(dá)式應(yīng)用樣式文件襟雷。對于不支持Media Queries的設(shè)備但能夠讀取Media Type類型的Web瀏覽器杨帽，遇到only關(guān)鍵字時會忽略這個樣式文件。
all:所有設(shè)備嗤军，這個應(yīng)該經(jīng)匙⒂看到。
@media screen and (min-width: 480px){
body{
background-color:lightgreen;
}
}
