CSS3基礎整理（3月9號）

參考W3School內容整理

CSS3根據特徵能夠分爲：動畫屬性，背景屬性，邊框屬性，Box屬性，Color屬性，尺寸屬性，可伸縮屬性，字體屬性，文本屬性，內容生成，Grid屬性，超連接屬性，列表屬性，外邊距屬性，內邊距屬性，多列屬性，定位屬性，打印屬性，表格屬性，2/3D轉換屬性，過渡屬性，用戶界面屬性等。

1.動畫屬性，動畫屬性是CSS3新增長的屬性，這樣不少之前經過js實現的效果 經過CSS就能夠實現了。 

　　　　動畫屬性中包括：@keyframes(規定動畫),支持狀況（IE9以及以前不支持，最新的Firefox支持，opera chrome以及Safari須要加前綴）

animation（動畫屬性簡寫）, 支持狀況（IE9以及以前不支持， chrome以及Safari須要加前綴）

animation-name（@keyframes的名稱）,

animation-duration（週期 單位s/ms）,

animation-timing-function(速度曲線：默認ease 慢-快-慢,linear 勻速,ease-in 低低速開始，ease-out 低速結束，ease-in-out),

animation-delay(是否延遲，默認爲0，單位秒or豪秒),

animation-iteration-count（規定播放次數 默認1）,

animation-direction（規定下一週期是否逆向播放，默認 normal ,alternate 反向輪流播放）,

animation-play-state（規定動畫是否正在運行，默認 running，paused是暫停）,支持狀況（IE9以及以前不支持， chrome以及Safari須要加前綴）

animation-fill-mode（規定對象動畫時間以外的狀態 none 不改變，forwards 動畫結束以後顯示的是最後一幀，backwards在設置了animation-delay後有效，動畫開始以前顯示第一幀（from中定義）,both是forwards與backwards的集合），支持狀況（IE9以及以前不支持， chrome以及Safari須要加前綴）

 

.foo{
    -webkit-animation:anima 2s ease 1s 2 alternate;
　　 animation:anima 2s ease 1s 2 alternate;

　　-webkit-animation-fill-mode:both;
　　animation-fill-mode:both;}

@-webkit-keyframes anima{
    from{
　　　　/*.......*/
　　}
　　to{
　　　　/*.......*/
　　}
}    

@-o-keyframes anima{
    from{
　　　　/*.......*/
　　}
　　to{
　　　　/*.......*/
　　}}  

@keyframes anima{
    from{
　　　　/*.......*/
　　}
　　to{
　　　　/*.......*/
　　}
}      

 

背景屬性，背景屬性是在CSS中應用很是多，支持（IE8以前的不支持新增的size和orgin），其

　　主要包括background （在一個聲明中設置左右的屬性，一般先設置background-color，而後是background-image。。。在CSS3支持多重設置背景圖像，之間使用逗號隔開，寫在前的背景圖顯示在上方），

　　background-attachment(設置背景圖像是否隨頁面的其他部分滾動，取值有scroll（默認) fixed(背景圖像固定不動)和inherit)，

　　background-color（設置背景圖像），

　　background-image（設置圖像  URL（**.jpg）），

　　background-position(設置背景圖像的起始點，取值有[top bottom center left right]中的兩兩組合，若是隻指定一個參數 默認爲後一個center，x% y%，以左上角爲標準指定位置，若是隻指定一個，另外一個默認爲50%，還有就是 x pox ypox,像素何以和%混用)，

　　background-repeat（是否重複，取值有 repeat no-repeat repeat-x repeat-y inherit），

　　background-clip（針對已經定位好的背景圖片進行裁切，取值有content-box,padding-box,border-box），

　　background-origin（設置定位區域，取值有content-box,padding-box,border-box，針對左上角），

　　background-size（設置大小，取值有length,若是隻設置一個，則後一個爲auto，percentage，cover圖片擴大至填充整個頁面，contain 把圖像擴大至最大尺寸，使其長度寬度適應於內容區域）。

　　漸變 這是在background中的一個取值，-*- linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )   point爲[top bottom right center left]中的一種或是兩兩組合，也能夠是角度。*爲webkit moz ms o  ms只支持IE10和IE11。 radial-gradient 徑向漸變 在chrome和Safari中須要前綴。radial-gradient（at x y ,color [,color]），-webkit-radial-gradient(x y, color[,color]).

.class{
      background:#ff0000 url(**.jpg) fixed no-repeat 20% 20% ;
      background-clip:comtent-box;
      background-orgin:padding-box;
      background-size:contain;

}      
.class2{
    background:-webkit-linear-gradient(top let,red,green);
　　background:-moz-linear-gradient(top let,red,green);
　　background:-ms-linear-gradient(top let,red,green);
　　background:-o-linear-gradient(top let,red,green);
　　background:linear-gradient(top let,red,green);
}                      

 

邊框屬性，主要包括

　　border(包含 border-width，border-style，border-color),

　　border-bottom(border-bottom-width,border-bottom-style,border-bottom-color)依次還有，border-left,border-right,border-top。

　　border-style(none  dotted   dashed  solid  double  groove凹線 ridge凸線 Insert outset inherit)

　　border-width(thin medium thick or length)

　　outline(設置輪廓屬性 outline-width style color)

　　border-radius(設置圓角 border-  bottom-left  |  bottom-right  | top-left  | top-rght -radius)

　　border-image(設置邊框圖片 包含三個參數 border-image-source border-image-slice border-image-repeat)

　　border-image-source(url(**.jpg))

　　border-image-slice(相似於clip屬性  值爲%或是 px,可設置1-4個參數 表示裁切大小)

　　border-image-repeat(round（平鋪 比較適用） repeat(重複) stretch（拉伸）)

　　box-shadow(像方框添加陰影，可疊加，h-shadow，v-shadow，blur(模糊距離,從陰影外邊算起),[spread(陰影尺寸)] ,color)

Box屬性，

　　　　overflow-x overflow-y(取值有 visible hidden  scroll auto inherit等 表示內容若是溢出，是否裁剪)

　　　　overflow-style rotation rotation-point 沒有瀏覽器支持。

Color屬性，

　  opacity 設置透明度  0-1

　　color-profile沒有瀏覽器支持。

尺寸屬性，

　　height width max-height max-width  min-height min-width

可伸縮屬性，支持狀況（Firefox 支持替代的 -moz-box-align 屬性。Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 屬性。）

　　首先要 display:-moz-box //-webkit-box

box-align(規定如何對齊框的子元素，取值start(對於正常方向的框，每一個子元素的上邊緣沿着框的頂邊放置。對於反方向的框，每一個子元素的下邊緣沿着框的底邊放置) center(均等地分割多餘的空間，一半位於子元素之上，另外一半位於子元素之下。) end baseline(若是 box-orient 是inline-axis或horizontal，全部子元素均與其基線對齊。)  stretch(拉伸子元素以填充包含塊) )

　　box-direction （規定如何顯示子元素順序，normal reverse inherit）

　　　　box-flex （規定子元素的可伸縮屬性，柔性是相對的，例如 box-flex 爲 2 的子元素兩倍於 box-flex 爲 1 的子元素。）

　　　　box-ordinal-group(一個整數，指示子元素的顯示次序。數越小，位置越靠前)

　　　　box-orient（子元素是否水平或垂直排列  horizontal vertical ）

　　　　box-pack(規定水平框中的水平位置，以及垂直框中的垂直位置。box-align表現的時候相對於垂直方向，而box-pack是相對於水平方向)

字體屬性，

　　font(依次設置 font-style font-variant font-weight font-size font-family)

　　font-style（規定字體樣式 normal italic oblique inherit）

　　font-variant(normal small-caps inherit 是否以小型大寫字母的方式顯示文本)

　　 font-weight(normal bold bolder  lighter 100-900)

　　font-size()　

　　font-family(sans-serif 無襯體字 適合正文閱讀  serif 襯體字 適合標題 cursive圓體)

font-size-adjust(字體的小寫字母 "x" 的高度與 "font-size" 高度之間的比率被稱爲一個字體的 aspect 值。當字體擁有高的 aspect 值時，那麼當此字體被設置爲很小的尺寸時會更易閱讀)

文本屬性，

　　color(設置文本顏色)

　　direaction(ltr rtl 設置文本方向)

　　letter-spacing（設置字符間距 只能是像素值）

　　line-height（設置行高）

　　text-align(設置文本對齊方式 left right center justify)

　　text-decoration(設置修飾 underline overline line-through blink none)

　　text-indent(設置首行縮進)

　　text-shadow 

　　text-transform(控制大小寫  capitalize uppercase lowercase none)

　　white-space(如何處理元素中的空白,normal 空白被忽略 pre 保留空白 nowrap 不換行。)

　　word-spacing(設置單詞間距)

　　text-overflow(clip裁剪 ellipsis 應省略號代替)

　　word-wrap(容許長單詞或 URL 地址換行到下一行，normal只容許在單詞斷點處出換行，break-word在長單詞中換行)

內容生成，

content（通常用於:before :after 僞類中 "content" 在選擇的元素後添加內容，  url(*.jpg) 添加圖片， attr(HTML屬性名) counter（用來獲取計數的值））

　　設置計數器：counter-reset && counter-increment,見下例，用於標籤或是Class類，用於ID沒有意義。

　　

body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h2:before 
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}

 

Grid屬性， 沒有支持

超連接屬性，沒有支持

列表屬性，

　　list-style(list-style-type list-style-position list-style-image的集合)

　　list-style-type(disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none  )

　　list-style-position(inside outside inherit)

　　list-style-image(url(*.jpg))

外邊距屬性，

　　margin, margin-top margin-left margin-right margin-bottom

內邊距屬性，

　　padding padding-left padding-right  padding-top  padding-bottom

多列屬性，

　　column-count(將內容劃分紅幾列 n  -webkit- -moz-  其餘都支持（IE10+）)

　　column-gap(規定列之間的間隔 length  加前綴 與上同)

　　column-rule（規定列之間的樣式  width style color  加前綴 與上同）

　　column-span(規定元素應該跨多少列 值有1和all 通常用於標題元素 加前綴 與上同)

　　column-width(列寬 length 加前綴 與上同)

　　column(寬度和列數的簡寫形式)

定位屬性，

position(absolute fixed relative static)

　　top bottom left right

　　float(left right none  inherit )

　　clear(left right both)

　　clip( auto rect(top right bottom left) inherit  rect中的四個值均是相對於左上角來講的，top表示從左上角向下到top值的位置裁切掉上邊的內容，bottom表示的是　　左上角向下到bottom值的位置裁切掉之下的內容，還有必須指定position:absolute纔有效。)

　　cursor（規定要顯示圖標的類型 可經過url自定義鼠標類型，不過要在末端定義一個經常使用的類型，以防不可用。）

　　display( block inline-block inline -webkit-box -moz-box)

　　overflow(visible hidden scroll auto)

　　vertical-align(設置元素的垂直對齊方式 baseline sub super top text-top text-bottom middle bottom  length %)

　　visibility(visiable hidden 雖然隱藏，可是佔據空間 collapse)

打印屬性，較少使用

表格屬性，　較少使用

2/3D轉換屬性，

　　transform(四種主要內核都要加前綴 參數主要有translate3d(x,y,z)移動元素 scale3d(x,y,z)縮放元素 rotate(angel) 2D中用到的選轉  rotate3d(x, y,z,angel) 3d　　選轉 x,y,z均是0-1之間的數，是後面指定的angel的倍數，skew(x-angle,y-angle)傾斜轉換)

　　　　transform-origin(加四種前綴，參數  x y z 的座標，設置選轉變換中心)

　　

過渡屬性，transition( transition-property transition-duration transition-timing-function transition-delay)

用戶界面屬性，

　　appearance(-moz-  -webkit-  其餘瀏覽器不支持，值中只有button獲得支持。)

　　　　box-sizing(-moz- -webkit-用於支持Safari 其餘瀏覽器均支持  content-box 寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框。　　　　　　border-box 爲元素設定的寬度和高度決定了元素的邊框盒。就是說，爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度　　　　分別減去邊框和內邊距才能獲得內容的寬度和高度。)

　　　　outline-offset(設置了outline後，對outline進行外移，除了IE均支持。length)

　　　　resize(both none horizontal vertical  IE不支持 必須設定overflow以後纔有效，針對的是DIV元素。)