css屬性整理

1. 背景background

簡寫順序
background-color
background-image
background-repeat
background-attachment
background-position

background: #ffffff url("img_tree.png") repeat-x fixed right top;

2. 文字屬性

• text-transform 文字轉換

uppercase // 大寫
lowercase //小寫
capitalize // 首字母大寫

• 文字裝飾text-decoration

text-decoration: none;
text-decoration: overline //上劃線
text-decoration: line-through // 穿過文字
text-decoration: underline // 下劃線
 

• 文字縮排text-indent
• 字元間距letter-spacing（可設定負值）
• 文字方向direction:rtl
• 字間隔word-spacing
• 不換行white-space:nowrap
• 新增陰影text-shadow
• 垂直對齊vertical-align

3. 字型樣式

• font-style

normal - 正常顯示文字
italic - 以斜體字顯示的文字
oblique - 文字向一邊傾斜 （和斜體非常類似，但不太支援）

• 字型大小

絕對大小(如px)：
設定一個指定大小的文字
不允許使用者在所有瀏覽器中改變文字大小
確定了輸出的物理尺寸時絕對大小很有用
相對大小（如em）：
相對於周圍的元素來設定大小
允許使用者在瀏覽器中改變文字大小

為了避免瀏覽器中無法調整文字的問題，許多開發者使用 em 單位代替畫素。
em的尺寸單位由W3C建議。
1em和當前字型大小相等。在瀏覽器中預設的文字大小是16px。
因此，1em的預設大小是16px。可以通過下面這個公式將畫素轉換為em：px/16=em
 

• font-variant 屬性設定小型大寫字母的字型顯示文字，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字型的字母與其餘文字相比，其字型尺寸更小。 該屬性主要用於定義小型大寫字母文字。理論上，使用者代理可以根據正常字型計算出小型大寫字母字型。

4. 連結 連結有四種狀態

a:link - 正常，未訪問過的連結
a:visited - 使用者已訪問過的連結
a:hover - 當用戶滑鼠放在連結上時
a:active - 連結被點選的那一刻

當設定為若干鏈路狀態的樣式，也有一些順序規則：
a:hover 必須跟在 a:link 和 a:visited 後面
a:active 必須跟在 a:hover 後面
 

5. 列表樣式

• list-style-type

circle|square|upper-roman(大寫羅馬數字)|lower-alpha（小寫字母）|cjk-ideographic(一二三)

• list-style-image(圖片)
• list-style-position

inside|outside

6. 表格

table|tr（一行）|th（表頭）|td

• 摺疊邊框

 border-collapse: collapse

• 水平對齊text-align和垂直對齊vertical-align
• 條紋表格

使用 nth-child() 選擇器和新增 background-color 屬性到所有的奇數（或偶數）列即可形成斑馬條紋樣式的表格：
tr:nth-child(even) {
	background-color: #f2f2f2
}

• 表格標題 <caption>

caption-side: bottom; // 表格標題位置

7. 盒子模型：CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距margin，邊框border，填充padding，和實際內容content。

元素的總寬度應該這樣計算：
元素總寬度 = width + left padding + right padding + left border + right border + left margin + right margin
元素的總高度應該這樣計算：
元素總高度 = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

8. css輪廓屬性outline

輪廓（outline）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。outline在border外面。
outline不佔空間，可能非矩形
outline-offset設定偏移量

9. 浮動與清除

• 元素浮動之後，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。

css3屬性整理

1. background 新的背景屬性

• background-clip background-clip: border-box|padding-box|content-box|initial|inherit;

• background-origin指定背景影象的位置 background-origin: padding-box|border-box|content-box|initial|inherit
• background-size定義大小

2. css3漸變（Gradient Background）

• 線性漸變-向下/向上/向左/向右/對角方向 預設情況下，從上到下漸變

• 徑向漸變-由它們的中心定義 為了建立一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸變的中心、形狀（原型或橢圓形）、大小。預設情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。 語法：background: radial-gradient(center, shape size, start-color, …, last-color)

3. css3陰影效果

• box-shadow（用法與text-shadow類似）
• text-shadow

4. css3文字效果

• text-overflow:clip(隱藏) | ellipsis(省略號)
• word-wrap:break-word(換行)
• word-break(定義換行時單詞是否拆分的規則): break-all(拆) | keep-all(不拆)

5. 字型 使用自定義字型

   @font-face {
       font-family: myFirstFont;
       src: url(sansation_light.woff);
   }
   
   div {
       font-family: myFirstFont;
   }
   

6. css3的2D轉換

• translate() 平移 例： transform: translate(20px, 10px) //向右平移20px,向下平移10px
• rotate() 旋轉 例：transform: rotate(30deg) //順時針旋轉30°
• scale()放縮 例：transform: scale(.5) //縮小為原來的一半
• skew() 包含兩個引數值，分別表示X軸和Y軸傾斜的角度，如果第二個引數為空，則預設為0，引數為負表示向相反方向傾斜。 例：transform: skew(30deg,20deg) //元素在X軸和Y軸上傾斜30度20度
• matrix() matrix 方法有六個引數，包含旋轉，縮放，移動（平移）和傾斜功能 例：transform: matrix(1, -0.3, 0, 1, 0, 0) 矩陣的問題可能有點難以理解，這裡涉及到線性代數以及三角函式的知識。接下來我們一起來補補課吧（每天進步一點點） 重新開了一篇部落格，有興趣的朋友們可以去看看，fighting！！！

7. css3的3D轉換

• translate3d(x,y,z)
• scale3d(x,y,z)
• rotate3d(x,y,z,angle)
• perspective(n) //定義 3D 轉換元素的透視檢視。
• matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) //定義 3D 轉換，使用 16 個值的 4x4 矩陣。 學習3D轉換的連結同上，fighting！！！

8. 過渡transition

   div {
   width: 50px;
   }
   div:hover {
   width: 100px;
   transition: width 2s;
   }
   // 滑鼠移到div上的時候，div的寬度逐漸變大，2s後停止變化，寬度100px
   // 滑鼠離開div時，div寬度逐漸變小，2s後停止變化，寬度50px
   

   div {
       transition-property: width;
       transition-duration: 2s;
       transition-timing-function: linear;
       transition-delay: 1s;
   }
   等同於
   div {
   	transition: width 2s linear 1s;
   }
   

   transition-timing-function 屬性表

9. css3動畫

   // 定義動畫
   @keyframes example {
       from {background-color: red;}
       to {background-color: yellow;}
   }
   
   // 使用百分比分割
   @keyframes example1 {
       0%   {background-color: red;}
       25%  {background-color: yellow;}
       50%  {background-color: blue;}
       100% {background-color: green;}
   }
   
   // 使用動畫
   div {
       width: 100px;
       height: 100px;
       background-color: red;
       animation-name: example;
       animation-duration: 4s;
   }
   

• animation-name // 動畫名稱
• animation-duration //動畫時長
• animation-delay //延遲時長
• animation-iteration-count // 執行次數，infinite 指定動畫應該播放無限次（永遠）
• animation-direction // 反向或交替迴圈執行動畫

• animation-play-state: paused|running|initial|inherit; // 動畫執行狀態

11. 響應式圖片

    img {
    	max-width: 100%;
    	height: auto;
    }
    

12. 功能強大的圖片濾鏡（CSS filter屬性用為元素新增可視效果 (例如：模糊與飽和度) 語法：filter:none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()| invert() | opacity() | saturate() | sepia() | url();

13. 多列效果

• column-count // 列數
• column-gap // 列與列間的間隙
• column-rule-style // 列邊框 // 如：solid
• column-rule-width // 邊框寬度
• column-rule-color // 邊框顏色
• column-rule // 如：column-rule: 1px solid red;
• column-span //指定元素跨越多少列
• column-width //指定列的寬度

14. 使用者介面

• resize //調整尺寸(Resizing)
• outline-offset //外形修飾

15. 多媒體查詢——針對不同媒體型別可以定製不同的樣式規則 多媒體查詢由多種媒體組成，可以包含一個或多個表示式，表示式根據條件是否成立返回 true 或 false。

    @media not|only mediatype and (expressions) {
        CSS-Code;
    }
    

如果指定的多媒體型別匹配裝置型別則查詢結果返回 true，文件會在匹配的裝置上顯示指定樣式效果。 除非你使用了 not 或 only 操作符，否則所有的樣式會適應在所有裝置上顯示效果。 not:用來排除掉某些特定的裝置的，比如 @media not print（非列印裝置）。 only:用來定某種特別的媒體型別。對於支援Media Queries的移動裝置來說，如果存在only關鍵字，移動裝置的Web瀏覽器會忽略only關鍵字並直接根據後面的表示式應用樣式檔案。對於不支援Media Queries的裝置但能夠讀取Media Type型別的Web瀏覽器，遇到only關鍵字時會忽略這個樣式檔案。 all:所有裝置，這個應該經常看到。 你也可以在不同的媒體上使用不同的樣式檔案：<linkrel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css" >

```
// 在螢幕可視視窗尺寸大於 480 畫素的裝置上修改背景顏色
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
```