CSS3學習筆記，css3學習
這兩天的CSS3學習筆記：
慕課網課程地址：http://www.imooc.com/learn/33
筆記：
X軸和Y軸位移量可以設定為負數：
Y：
為邊框應用圖片border-image：
顏色相關：
漸層色彩：
文字與字型：
word-wrap：當前行超過制定容器的邊界時是否斷開轉行；
嵌入字型@font-face：載入伺服器端的字型檔，讓瀏覽器端可以顯示使用者電腦裡沒有安裝的字型。
文本陰影text-shadow：
簡寫：text-shadow: 0 1px 1px #fff
與背景相關的樣式：
background-clip：用來將背景圖片做適當的裁剪以適應實際需要；
background-size：設定背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮；
multiple background：多重背景，也就是CSS2裡background的屬性外加origin、clip和size組成的新background的多次疊加，縮寫時為用逗號隔開的每組值；用分解寫法時，如果有多個背景圖片，而其他屬性只有一個（例如background-repeat只有一個），表明所有背景圖片應用該屬性值。
製作導覽功能表綜合練習：
CSS3選取器：
結構性偽類別選取器：
示範結果：
子類別選取器：
last-child：
nth-child(n)：用來定位某個父元素的一個或多個特定的子項目。其中“n”是其參數，而且可以是整數值(1,2,3,4)，也可以是運算式(2n+1、-n+5)和關鍵詞(odd-奇數、even-偶數)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值為0時，選取器將選擇不到任何匹配的元素。
nth-last-child(n)：從某父元素的最後一個子項目開始計算，來選擇特定的元素；
type選取器：
nth-of-type(n)：類似於“:first-child”選取器，不和“:nth-child(n)”選取器非常類似，不同的是它只計算父元素中指定的某種類型的子項目。當某個元素中的子項目不單單是同一種類型的子項目時，使用“:nth-of-type(n)”選取器來定位於父元素中某種類型的子項目是非常方便和有用的。在“:nth-of-type(n)”選取器中的“n”和“:nth-child(n)”選取器中的“n”參數也一樣，可以是具體的整數，也可以是運算式，還可以是關鍵詞。
last-of-type：
nth-last-of-type(n)：
only-child選取器：選擇的是父元素中只有一個子項目，而且只有唯一的一個子項目。也就是說，匹配的元素的父元素中僅有一個子項目，而且是一個唯一的子項目。
only-of-type選取器：表示一個元素他有很多個子項目，而其中只有一種類型的子項目是唯一的，使用“:only-of-type”選取器就可以選中這個元素中的唯一一個類型子項目。
偽類別選取器：
:read-only：用來指定處於唯讀狀態元素的樣式。簡單點理解就是，元素中設定了“readonly=’readonly’”
:read-write：剛好與“:read-only”選取器相反，主要用來指定當元素處於非唯讀狀態時的樣式。
::before和::after：::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常和"content"配合使用，使用的情境最多的就是清除浮動；
CSS3中的變形與動畫：
扭曲skew()：能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。
縮放scale()：讓元素根據中心原點對對象進行縮放。
scaleX(x)元素僅水平方向縮放（X軸縮放）：
scaleY(y)元素僅垂直方向縮放（Y軸縮放）：
位移translate()：可以將元素向指定的方向移動，類似於position中的relative。或以簡單的理解為，使用translate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件
矩陣matrix()：是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向（X軸）和垂直方向（Y軸）重新置放元素,此屬性值使用涉及到數學中的矩陣，我在這裡只是簡單的說一下CSS3中的transform有這麼一個屬性值；
原點（中心點）transform-origin()：對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置
動畫（transition）：可以通過一些簡單的CSS事件來觸發元素的外觀變化，讓效果顯得更加細膩。簡單點說，就是通過滑鼠的單擊、獲得焦點，被點擊或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值。
CSS3的過度transition屬性是一個複合屬性，主要包括以下幾個子屬性：
過渡屬性transition-property：用來指定過渡動畫的CSS屬性名稱，而這個過渡屬性只有具備一個中點值的屬性（需要產生動畫的屬性）才能具備過渡效果，其對應具有過渡的CSS屬性主要有：
過渡所需時間transition-duration：主要用來設定一個屬性過渡到另一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱期間
過渡函數transition-timing-function：指的是過渡的“easing 函式”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括以下幾種函數：
過渡延遲時間transition-delay：用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行。
小結：有時我們想改變兩個或者多個css屬性的transition效果時，只要把幾個transition的聲明串在一起，用逗號（“，”）隔開，然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點：第一個時間的值為 transition-duration，第二個為transition-delay。
Keyfranmes：主要畫面格，其類似於Flash中的主要畫面格。在CSS3中其主要以“@keyframes”開頭，後面緊跟著是動畫名稱加上一對花括弧“{…}”，括弧中就是一些不同時間段樣式規則。eg：@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }}
在一個“@keyframes”中的樣式規則可以由多個百分比構成的，如在“0%”到“100%”之間建立更多個百分比，分別給每個百分比中給需要有動畫效果的元素加上不同的樣式，從而達到一種在不斷變化的效果。
經驗與技巧：在@keyframes中定義動畫名稱時，其中0%和100%還可以使用關鍵詞from和to來代表，其中0%對應的是from，100%對應的是to。
注意：Chrome 和 Safari 需要首碼 -webkit-；Foxfire 需要首碼 -moz-。
設定動畫播放時間animation-duration：主要用來設定CSS3動畫播放時間，其使用方法和transition-duration類似，是用來指定元素播放動畫所持續的時間長，也就是完成從0%到100%一次動畫所需時間。單位：S秒
設定動畫播放方式animation-timing-function：主要用來設定動畫播放方式。主要讓元素根據時間的推進來改變屬性值的變換速率，簡單點說就是動畫的播放方式。
設定動畫開始播放的時間animation-delay：用來定義動畫開始播放的時間，用來觸發動畫播放的時間點。和transition-delay屬性一樣，用於定義在瀏覽器開始執行動畫之前等待的時間。
設定動畫播放次數animation-iteration-count：主要用來定義動畫的播放次數。
設定動畫播放方向animation-direction：主要用來設定動畫播放方向；
設定動畫的播放狀態animation-play-state：主要用來控制元素動畫的播放狀態。
設定動畫時間外屬性animation-fill-mode：定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值：none、forwards、backwords和both。
在預設情況之下，動畫不會影響它的主要畫面格之外的屬性，使用animation-fill-mode屬性可以修改動畫的預設行為。簡單的說就是告訴動畫在第一主要畫面格上等待動畫開始，或者在動畫結束時停在最後一個主要畫面格上而不回到動畫的第一幀上。或者同時具有這兩個效果。
配置樣式相關：
column-width：和CSS中的width屬性一樣，不過不同的是，column-width屬性在定義元素列寬的時候，既可以單獨使用，也可以和多列屬性中其他屬性配合使用。
column-count：主要用來給元素指定想要的列數和允許的最大列數。
column-gap：來設定列與列之間的間距，
column-rule：主要是用來定義列與列之間的邊框寬度、邊框樣式和邊框顏色。簡單點說，就有點類似於常用的border屬性。但column-rule是不佔用任何空間位置的，在列與列之間改變其寬度不會改變任何列的位置。
eg：為了能有效區分欄目列之間的關係，可以為其設定一個列邊框，代碼為：column-rule: 2px dotted green；
column- span：主要用來定義一個分列元素中的子項目能跨列多少。column-width、column-count等屬效能讓一元素分成多列，不管裡面元素如何排放順序，他們都是從左向右的放置內容，但有時我們需要基中一段內容或一個標題不進行分列，也就是橫跨所有列，此時column-span就可以輕鬆實現，
盒子模型：在CSS3中新增加了box-sizing屬性，能夠事先定義盒模型的尺寸解析方式
box-sizing中content-box和border-box兩者的區別通過來展示，其對盒模型的不同解析：
伸縮布局（Flexbox布局-大小是未知的或者動態）：
eg：
Flex項目顯示：
Flex項目列顯示：
Flex項目移動到頂部：
Flex項目移到左邊：
Flex項目移動右邊：
水平垂直置中：
Flex項目實現自動調整：
Media Queries與Responsive設計：
媒體類型的引用：
使用方法：
具體使用方式：
最小寬度min-width：
多個媒體特性使用：
裝置螢幕的輸出寬度Device Width：
not關鍵詞：
only關鍵詞：
註：到目前為止，CSS3 Media Queries得到了眾多瀏覽器支援，除了IE6-8瀏覽器不支援之外，在所有現代瀏覽器中都可以完美支援。還有一個與眾不同的時，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加首碼。
responsive設計（響應式設計）：
請注意：這僅僅是解決響應式圖片自適應的一種思路，但這種方案僅僅適配的斷點較少。並不太實用，此處僅為思路。
媒體查詢：媒體查詢在CSS3中得到了強大的擴充。使用這個屬性可以讓你的設計根據使用者終端裝置適配對應的樣式。這也是響應式設計中最為關鍵的。可以說Responsive設計離開了Medial Queries就失去了他生存的意義。簡單的說媒體查詢可以根據裝置的尺寸，查詢出適配的樣式。Responsive設計最關注的就是：根據使用者的使用裝置的當前寬度，你的Web頁面將載入一個備用的樣式，實現特定的頁面風格。
螢幕解析度：螢幕分辨簡單點說就是使用者顯示器的解析度，深一點說，螢幕解析度指的是使用者使用的裝置瀏覽您的Web頁面時的顯示螢幕的解析度，比如說智能手機瀏覽器、行動電腦瀏覽器、平板電腦瀏覽器和案頭瀏覽器的解析度。Responsive設計利用Media Queries屬性針對瀏覽器使用的解析度來適配對應的CSS樣式。因此螢幕解析度在Responsive設計中是一個很重要的東西，因為只有知道Web頁面要在哪種解析度下顯示何種效果，才能調用對應的樣式。
主要斷點：
布局技巧：
盡量使用：
小結：使用這些技巧，無非是為了保持你的HTML簡單乾淨，而且在你的頁面配置中的關鍵區段（元素）不要過分的依賴現代技巧來實現，比如說CSS3特效或者JS指令碼。說了這麼多，怎麼樣的布局或者說HTML結構才是簡單乾淨的呢？這裡教大家一個快速測試的方法。你首先禁掉你頁面中所有的樣式（以及與樣式相關的資訊），在瀏覽器中開啟，如果你的內容排列有序，方便閱讀，那麼你的這個結構不會差到哪裡去。
meta標籤（可視地區meta標籤）：
不同裝置的解析度設定：1024px顯屏@media screen and (max-width : 1024px) { /* 樣式寫在這裡 */ } 800px顯屏@media screen and (max-width : 800px) { /* 樣式寫在這裡 */ } 640px顯屏@media screen and (max-width : 640px) { /* 樣式寫在這*/ } iPad橫板顯屏@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 樣式寫在這 */ } iPad豎板顯屏@media screen and (max-device-width: 768px) and (orientation: portrait) { /* 樣式寫在這 */ } iPhone 和 Smartphones@media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 樣式寫在這 */ }
使用者介面與其他重要屬性：
外輪廓屬性outline：
產生內容：
eg：h1:before {
content:"我是被插進來的";
color: red;
}在h1標籤的前面插入“我是被插進來的”，並標記為紅色
效果：
