小饶学编程之JAVA SE第二部分——Web 前端基础：09CSS3
CSS3
- 一、CSS簡介
- 二、入門
- 三、CSS的分類
- 四、選擇器
- 4.1 基本選擇器
- 4.2 層次選擇器
- 4.3 結構偽類選擇器
- 4.4 屬性選擇器
- 4.5 優先級
- 五、 元素的分類
- 六、常用樣式
- 6.1 文本字體樣式
- 6.2 偽類
- 6.3 列表
- 6.4 背景
- 6.5 盒子模型
- 6.6 邊框
- 6.7 浮動
- 6.8 定位
- 6.9 動畫
- 6.10 兼容性
- 七、總結
- 7.1基本選擇器
- 7.2結構偽類選擇器
- 7.3 優先級
- 7.4元素的分類
一、CSS簡介
? 層疊樣式表(Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
? CSS自1994年CSS1發展至今到CSS3。1998年5月W3C發表了CSS2，緊接著2001年微軟發布了IE6，很大程度推動了CSS發展。CSS2 的規范是基于 CSS1 設計的，包含了 CSS1 所有的功能，并擴充和改進了很多更加強大的屬性。包括選擇器、位置模型、布局、表格樣式、媒體類型、偽類、光標樣式。然后接著就是CSS3，事實上，CSS3早于1999年已經開始制訂，直到2011年6月7日，CSS 3 Color Module終于發布為W3C Recommendation。從CSS3開始，CSS規范就被拆成眾多模塊（module）單獨進行升級，或者將新需求作為一個新模塊來立項并進行標準化。因此今后不會再有CSS4、CSS5這種所謂大版本號的變更，有的只是CSS某個模塊級別的躍遷。
二、入門
-
CSS是基于結構，美化結構的，所以結構是基礎。
<body><h1>標題標簽</h1> </body> -
CSS代碼我們寫在head的style標簽中，對這個h1標簽進行修飾，改變文字顏色問紅色。
<style type="text/css">h1{color: red;} </style>在游覽器中運行，我們發現標題文字已經成功變成紅色了。
三、CSS的分類
? CSS根據導入的位置可以分為3類：行內樣式、內部樣式、外部樣式。
行內樣式
? 行內樣式是定義在標簽內部的style屬性中。語法為：
<元素 style=" key1: value1 ; key2: value2 ; …" >
<h1 style="color: red;">標題標簽</h1>缺點：結構跟樣式混亂，不具有重用性。
內部樣式
? 內部樣式是定義在style標簽中，語法為：
<style type="text/css">選擇器{key1: value1;key2: value2;......} </style> <html><head><meta charset="utf-8" /><title></title><style type="text/css">h1{color: red;}</style></head><body><h1 style="color: red;">標題標簽</h1></body> </html>缺點：如果有多個文件需要引用這個樣式的話，無法重用
外部樣式
? 外部樣式把CSS樣式定義在外部的CSS文件中。語法同內部樣式。
- ? style.css
-
? 將外部樣式文件引入到需要的文件中
<html><head><meta charset="utf-8" /><title></title><!-- 引入需要的外部樣式 --> <link rel="stylesheet" href="css/style.css" /></head><body><h1 style="color: red;">標題標簽</h1></body> </html>
四、選擇器
? 作用：把定義的樣式跟想生效的元素進行配對連接。
4.1 基本選擇器
| 類選擇器 | .class | .intro | 選擇 class=“intro” 的所有元素。 |
| id選擇器 | #id | #firstname | 選擇 id=“firstname” 的所有元素。 |
| 標簽選擇器 | element | p | 選擇所有 元素。 |
| 通配符選擇器 | * | * | 選擇所有元素。 |
4.2 層次選擇器
| 群組選擇器 | element,element | div,p | 選擇所有 元素和所有 元素。 |
| 后代選擇器 | element element | div p | 選擇 元素后代中所有 元素。 |
| 子選擇器 | element>element | div>p | 選擇 元素的所有兒子 元素。 |
| 相鄰弟弟選擇器 | element+element | div+p | 選擇緊接在 元素之后的弟弟 元素。 |
| 所有弟弟選擇器 | element1~element2 | div~p | 選擇 元素的所有弟弟 元素。 |
4.3 結構偽類選擇器
| 第一個子元素 | :first-child | p:first-child | 選擇屬于父元素的第一個子元素且這個元素為 元素。 |
| 最后一個子元素 | :last-child | p:last-child | 選擇屬于父元素最后一個子元素且這個元素為 元素。 |
| 第一個子元素 | :first-of-type | p:first-of-type | 選擇在父元素中第一個p元素。不受其它元素影響。 |
| 最后一個子元素 | :last-of-type | p:last-of-type | 選擇在父元素中最后一個p元素。不受其它元素影響。 |
| 第N個子元素 | :nth-child(n) | p:nth-child(3) | 選擇屬于父元素的第3個子元素且這個元素為 元素。 |
| 第N個子元素 | :nth-of-type(n) | p:nth-of-type(3) | 選擇在父元素中第3個p元素。不受其它元素影響。 |
| 倒數第N個子元素 | :nth-last-child(n) | p:nth-last-child(3) | 選擇屬于父元素的倒數第3個子元素且這個元素為 元素。 |
| 倒數第N個子元素 | :nth-last-of-type(n) | p:nth-last-of-type(3) | 選擇在父元素中倒數第3個p元素。不受其它元素影響。 |
4.4 屬性選擇器
| [attribute] | [target] | 選擇帶有 target 屬性所有元素。 |
| [attribute=value] | [target=_blank] | 選擇 target="_blank" 的所有元素。 |
| [attribute*=value] | a[src*=“abc”] | 選擇其 src 屬性中包含 “abc” 子串的每個 元素。 |
| [attribute$=value] | a[src$=".pdf"] | 選擇其 src 屬性以 “.pdf” 結尾的所有 元素。 |
| [attribute^=value] | a[src^=“https”] | 選擇其 src 屬性值以 “https” 開頭的每個 元素。 |
4.5 優先級
| 通用選擇器(*) | 0 |
| 元素選擇器 | 1 |
| 類選擇器 / 屬性選擇器 / 偽類選擇器 | 10 |
| id選擇器 | 100 |
| 內聯樣式 | 1000 |
| !important | 無窮大 |
-
優先級的高低根據權值來計算，權值大的生效。
-
優先級相同的情況下，就近原則。
-
繼承的樣式沒有權值。
五、 元素的分類
-
塊元素
可以設置寬度，獨占1行，比如p 。可以通過display:block;來設置成塊元素。
-
行內元素
不可以設置寬高，不獨占1行，比如strong。可以通過display:inline;來設置成行元素。
-
行內塊元素
不獨占1行，可以設置寬高。比如img。可以通過display:inline-block;來設置成行內塊元素。
行內塊元素不能轉成行內元素
?
六、常用樣式
6.1 文本字體樣式
-
color
字體顏色。顏色的表示方式有多種：
- 顏色單詞，如red。
- 顏色值，如#FF0000，可簡寫為#F00
- rgb函數，比如rgb(255,0,0)
- rgba函數，rgba(255,0,0,0.5) 。最后一個參數表示透明度。
-
font-family
字體名稱，按優先順序排列，以逗號隔開。如果字體名稱包含空格，用引號引起來。設置的字體需要系統中存在。
font-family: 楷體,"arial black"; -
font-size
字體大小。系統默認的字體大小是16px。px是絕對單位，表示的是字體的豎直方向上的高度。我們還可以使用em作為單位，em比較靈活，是個相對單位，表示的是不設置之前的字體大小的百分比。
font-size: 16px; /* 字體大小為16px，固定值 */font-size:2em ; /* 字體大小為不設置時的2倍，具體多少像素視具體情況而定 */ -
font-weight
文本字體的粗細。常用的值有normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-weight:bold ; -
font-style
字體樣式。常用值有normal | italic | oblique默認normal，italic、oblique都是表示斜體。
font-style: italic; -
line-height
字體行高。一般可用于文字豎直方向居中。
line-height:300px;line-height:2em; -
text-decoration
-
none : 默認值。無裝飾 。
-
blink : 閃爍 。以前只有FF支持，現在都不支持了。
-
underline : 下劃線 。
-
line-through : 貫穿線 。
-
overline : 上劃線 。
text-decoration:line-through;
-
-
letter-spacing
文字間的距離。單位px。
letter-spacing:10px; -
word-spacing
單詞間的距離，單位px。中文沒有單詞。
word-spacing: 20px; -
text-shadow
文本的文字是否有陰影及模糊效果。有4個值的復合屬性。color || length || length || opacity
-
color : 陰影的顏色。
-
length / length : 分別表示x軸跟y軸上陰影其實的偏移量。單位px或者em。可以為負數。
-
opacity：表示默認的距離，不能為負數。值越大越模糊。
text-shadow: #FF0000 0px 0px 15px;
-
-
text-align
文本水平對齊方式。常用值有left/right/center。
text-align: center ; -
text-indent
設置文本的縮進，單位px或者em。建議使用em。
text-indent : 2em ; -
white-space
空格字符的處理方式。
-
normal : 默認值，文本自動處理換行。假如抵達容器邊界內容會轉到下一行。
-
nowrap ：強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。
<style type="text/css">div{white-space:nowrap;} </style><div style="border: 1px solid red;width: 100px;">歡迎來到百里半學習JAVA。 </div>
-
-
text-overflow
是否使用一個省略標記(…)標示對象內文本的溢出。
-
clip：默認值，不顯示省略標記(…)，而是簡單的裁切。
-
ellipsis：當對象內文本溢出時顯示省略標記(…)
要顯示效果一般可以跟white-space跟overflow: hidden搭配一起使用達到單行文本溢出省略號的效果。
<style type="text/css">div{white-space:nowrap;text-overflow: ellipsis;overflow: hidden;} </style><div style="border: 1px solid red;width: 100px;">歡迎來到百里半學習JAVA。 </div>
-
6.2 偽類
-
:hover
設置對象在其鼠標懸停時的樣式。
<style type="text/css"> a{color: red; }/* 超鏈接懸停的時候顯示成藍色 */ a:hover{color: blue; } </style><a href="">bailiban</a>
6.3 列表
-
list-style-type
設置列表前面的樣式符號。常用值有很多。
-
disc : 實心圓
-
circle : 空心圓
-
square : 實心方塊
-
decimal : 阿拉伯數字
-
lower-roman : 小寫羅馬數字
-
upper-roman : 大寫羅馬數字
-
lower-alpha : 小寫英文字母
-
upper-alpha : 大寫英文字母
-
none : 不使用項目符號
<style type="text/css"> ol{list-style-type: square ;} </style> <ul><li>蘋果</li><li>香蕉</li><li>西瓜</li> </ul>
-
-
list-style-position
符號的位置。
-
outside ：默認值。列表項目標記放置在文本以外。
-
inside : 列表項目標記放置在文本以內 。
ul{list-style-type: square ;list-style-position: outside; }
-
-
list-style-image
符號顯示的圖片。默認值none不顯示圖片。
list-style-image :url(img/arrow.jpg); -
list-style
設置列表項目相關樣式。是一個復合屬性。list-style-type || list-style-position || list-style-image
list-style: upper-alpha inside none ;list-style:none ; /* 直接去掉列表標記 */
6.4 背景
-
background-image
設置背景圖像。
background-image: url(img/xiaojiejie.jpg); -
background-repeat
設置背景圖像是否及如何鋪排。必須先指定對象的背景圖像( background-image )。
- repeat ：默認值，背景圖像在縱向和橫向上平鋪 。
- no-repeat ： 背景圖像不平鋪。
- repeat-x : 背景圖像僅在橫向上平鋪 。
- repeat-y : 背景圖像僅在縱向上平鋪。
-
background-color
設置背景顏色。當背景顏色與背景圖像( background-image )都被設定了時，背景圖片將覆蓋于背景顏色之上。
background-color: red; -
background-position
設置背景圖像位置。必須先指定 background-image 屬性。復合屬性，分別設置水平跟豎直方向上的位置。如果只指定了一個值，該值將用于橫坐標。縱坐標將默認為 50% 。
- top | center | bottom | left | center | right
- percentage
- length
-
background-size
設置背景圖片的大小。
- length：設置背景圖片寬度和高度。如果只給出一個值，第二個是設置為 auto(自動)。
- percentage：相對于背景定位區域寬度和高度的百分比。如果只給出一個值，第二個為"auto(自動)"
- cover：此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小。背景區域一定會顯示滿，如果有多余的會裁剪。
- contain：此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區域的最大大小。背景圖片會顯示全，但背景區域不會顯示滿。
? 精靈圖（雪碧圖）：很多大型網頁在首次加載的時候都需要加載很多的小圖片，而考慮到在同一時間，服務器擁堵的情況下，為了解決這一問題，采用了精靈圖這一技術來緩解加載時間過長從而影響用戶體驗的這個問題。所謂精靈圖就是把很多的小圖片合并到一張較大的圖片里，所以在首次加載頁面的時候，就不用加載過多的小圖片，只需要加載出來將小圖片合并起來的那一張大圖片也就是精靈圖即可，這樣在一定程度上減少了頁面的加載速度，也一定程度上緩解了服務器的壓力。
? 精靈圖雖然實現了緩解服務器壓力以及用戶體驗等問題，但還是有一個很大的不足，那就是牽一發而動全身。這些圖片的背景都是我們詳細測量而得出來的，如果需要改動頁面，將會是很麻煩的一項工作。
6.5 盒子模型
? 所有HTML元素可以看作盒子，CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
- Border(邊框)：圍繞在內邊距和內容外的邊框。
- Content(內容) ：盒子的內容，顯示文本和圖像。
- Padding(內邊距) ： 清除內容周圍的區域，內邊距是透明的。
- Margin(外邊距) ：清除邊框外的區域，外邊距是透明的。外邊距不計算在盒子的寬度跟高度上。
問題：請問上面代碼的盒子的寬度跟高度分別是多少？
補白（內邊距）
-
padding-top
設置對象上邊的內補丁。
-
padding-right
設置對象右邊的內補丁。
-
padding-bottom
設置對象底邊的內補丁。
-
padding-left
設置對象左邊的內補丁。
padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; -
padding
設置對象四邊的內補丁。
如果只提供一個，將用于全部的四條邊。
如果提供兩個，第一個用于上下，第二個用于左右。
如果提供三個，第一個用于上，第二個用于左右，第三個用于下。
如果提供全部四個參數值，將按上－右－下－左的順序作用于四邊。
padding: 10px; padding: 10px 20px; padding: 10px 20px 30px; padding: 10px 20px 30px 40px;如果有沖突，后面覆蓋前面的。
邊界（外邊距）
-
margin-top
設置對象上邊的外補丁。
-
margin-right
設置對象右邊的外補丁。
-
margin-bottom
設置對象底邊的外補丁。
-
margin-left
設置對象左邊的外補丁。
margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; -
margin
設置對象四邊的外補丁。
如果只提供一個，將用于全部的四條邊。
如果提供兩個，第一個用于上下，第二個用于左右。
如果提供三個，第一個用于上，第二個用于左右，第三個用于下。
如果提供全部四個參數值，將按上－右－下－左的順序作用于四邊。
margin: 10px; margin: 10px 20px; margin: 10px 20px 30px; margin: 10px 20px 30px 40px;margin: 0 auto; /* 水平居中 */如果有沖突，后面覆蓋前面的。
6.6 邊框
-
border-style
設置對象邊框的樣式。
-
none：默認值。
-
dotted : 點線 。
-
dashed : 虛線。
-
solid : 實線邊框。
-
double : 雙線邊框。
如果只提供一個，將用于全部的四條邊。
如果提供兩個，第一個用于上－下，第二個用于左－右。
如果提供三個，第一個用于上，第二個用于左－右，第三個用于下。
如果提供全部四個參數值，將按上－右－下－左的順序作用于四個邊框。
- border-style可以分成border-top-style、border-right-style、border-bottom-style、border-left-style分別設置。
-
-
border-width
設置一個元素的四個邊框的寬度.
-
thin：定義細的邊框。
-
medium ： 默認。定義中等的邊框。
-
thick：定義粗的邊框。
-
length：自定義邊框的寬度。
如果只提供一個，將用于全部的四條邊。
如果提供兩個，第一個用于上－下，第二個用于左－右。
如果提供三個，第一個用于上，第二個用于左－右，第三個用于下。
如果提供全部四個參數值，將按上－右－下－左的順序作用于四個邊框。
- border-width可以分成border-top-width、border-right-width、border-bottom-width、border-left-width分別設置。
-
-
border-color
設置對象邊框的顏色。
如果提供全部四個參數值，將按上－右－下－左的順序作用于四個邊框。
如果只提供一個，將用于全部的四條邊。
如果提供兩個，第一個用于上－下，第二個用于左－右。
如果提供三個，第一個用于上，第二個用于左－右，第三個用于下。
border-color: red; border-color: #FF0000;border-color可以分成border-top-color、border-right-color、border-bottom-color、border-left-color分別設置。
-
border
設置邊框。是一個復合屬性， border-width || border-style || border-color。
border:red soild 1px ;transparent表示透明色。
-
border-radius
設置弧度。
-
length：半徑的圓所對應的弧度。
-
percentage：圓的半徑為對象的百分比，50%對應的弧度到上限。
每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。
如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。
如果省略右上角，左上角是相同的。
- border-radius也可以分成border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius分別設置。
-
6.7 浮動
? 普通文檔流: 簡單說就是元素按照其在 HTML 中的位置順序決定排布的過程。自上而下的過程好像水流一樣，我們成為文檔流。
? 特殊文檔流：普通文檔流我們可以想象成一個平面的2維世界，在這個平面的上面還有另外一層平面，叫做特殊文檔流，我們看到的頁面的效果其實是2個平面疊加在一起的效果。
? 讓元素從脫離普通文檔流進入特殊文檔流的方式有float、絕對位置、固定定位。
-
float
-
left：脫離普通文檔流，浮動在父容器的左邊。
-
right：脫離普通文檔流，浮動在父容器的右邊。
-
- 浮動會帶來3個"副作用"。
?
-
clear
該屬性用在普通文檔流中的對象，表示上面不允許有浮動對象覆蓋。如果作用的對象已經是浮動的表示前面不能有其它的浮動對象。
-
left：不允許左邊有浮動對象 。
-
right：不允許右邊有浮動對象 。
-
both：不允許有浮動對象 。
使用clear可以解決浮動坍縮的問題，達到布局的效果。
-
-
頁面布局
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>#div_parent{width: 800px;border: 1px red solid;margin: 0 auto;}#head{ height: 100px;border: 1px red solid;background-color: #FFFF00;}#left{ height: 200px;width: 20%;border: 1px red solid;background-color: aquamarine;float: left;box-sizing: border-box;/* 把邊框也計算在內 */}#center{ height: 500px;width: 60%;border: 1px red solid;background-color: #FF0000;float: left;box-sizing: border-box;/* 把邊框也計算在內 */}#right{ height: 400px;width: 20%;border: 1px red solid;background-color: mediumorchid;float: left;box-sizing: border-box;/* 把邊框也計算在內 */}#foot{height: 100px;background-color: #FFFF00;clear:both;}</style></head><body><div id="div_parent"><div id="head"></div><div id="left"></div><div id="center"></div><div id="right"></div><div id="foot"></div></div></body> </html>
6.8 定位
我們經常需要把元素放入我們想放到合適的位置，我們可以使用position屬性達到目的。
相對定位
-
position: relative;
相對定位是相對于自身原來的位置而言的。通過top/left/right/bottom來調節偏移位置。偏移后原位置是保留的。
絕對定位
-
position: absolute;
絕對定位也是通過top/left/right/bottom來偏移的，它是基于具有position（一般用relative）屬性的父容器而言。會脫離文檔流，原位置不保留。
固定定位
-
position: fixed;
固定定位，也是通過top/left/right/bottom來偏移的。它是基于屏幕而言。會脫離文檔流，原位置不保留。
z-index
? 設置對象的層疊順序。值為一個無單位的整數，可為負數。當多個定位塊疊在一起時可以通過z-index屬性來設置層的顯示順序，較大 number 值的對象會覆蓋在較小 number 值的對象之上。值相同的話看定義的順序。
6.9 動畫
2D轉換（transform）
-
translate
translate(x,y)方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。負值是允許的。
transform: translate(50px,100px);/* 把元素從左側移動 50 像素，從頂端移動 100 像素。*/- translate可以分成translateX、translateY分別設置。
-
rotate
rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
transform: rotate(30deg);/*把元素順時針旋轉 30 度。*/ -
scale
scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數。
transform: scale(2,3);/* 轉變寬度為原來的大小的2倍，和其原始大小3倍的高度。 */- scale可以分成scaleX、scaleY分別設置。
-
skew
包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數為空，則默認為0，參數為負表示向相反方向傾斜。
transform: skew(20deg,30deg);/* 元素在X軸和Y軸上傾斜20度30度。 */- skew可以分成skewX、skewY分別設置。
transform可以同時定義多個效果
transform: translateX(50px) translateY(50px) scale(0.8) rotate(360deg);過渡（transition）
? 我們在2D轉換的時候發現都是瞬時完成的，如果想看到類似動畫的效果可以通過transition屬性設置過渡。
-
transition-property
表示需要過渡的屬性列表，如果有多個屬性用逗號隔開。默認值none，表示無過渡屬性。屬性值all表示所有的變化屬性都進行過渡。一般要跟transition-duration一起使用才看得到效果。
div{margin: 120px auto;border: #FF0000 solid 1px;width: 100px;height: 100px;background-color: red;transition-property:height,width;/* 對長度跟寬度屬性進行過渡 */transition-duration: 2s;/* 過渡時間為2s */ }div:hover{width: 200px;height: 200px;background-color: #FFFF00; } -
transition-duration
定義過渡效果花費的時間。默認是 0。
transition-duration: 1s; -
transition-timing-function
此屬性允許一個過渡效果，以改變其持續時間的速度。
值描述 linear 規定以相同速度開始至結束的過渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
-
transition-delay
transition-delay 屬性指定何時將開始切換效果。
transition-delay: 2s; -
transition
transition 屬性設置元素當過渡效果，四個簡寫屬性為:
-
transition-property
-
transition-duration
-
transition-timing-function
-
transition-delay
transition還可以設置多個過渡屬性列表，用逗號隔開。
transition: width 2s , height 2s linear 2s ; -
動畫（@keyframes ）
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
您可以改變任意多的樣式任意多的次數。
請用百分比來規定變化發生的時間，或用關鍵詞 “from” 和 “to”，等同于 0% 和 100%。
0% 是動畫的開始，100% 是動畫的完成。
-
創建動畫
@keyframes myanimation {0% {background: red;width: 200px;}25% {background: yellow;width: 250px;}50% {background: blue;width: 300px;}100% {background: green;width: 350px;} } -
元素綁定
當在 @keyframes 創建動畫，需要把它綁定到一個選擇器，否則動畫不會有任何效果。我們通過animation屬性來綁定。animation是一個復合屬性，主要包含以下主要的屬性，其中animation-name跟animation-duration是必須的。
-
animation-name： 要執行的動畫名稱。
-
animation-duration：定義動畫完成一個周期需要多少秒或毫秒。
-
animation-timing-function：指定動畫將如何完成一個周期。
-
animation-delay：定義動畫什么時候開始。
-
animation-iteration-count:定義動畫應該播放多少次。infinite表示永遠。
-
animation-direction：定義是否循環交替反向播放動畫。
- normal，默認值。動畫按正常播放。
- reverse,動畫反向播放。
- alternate:動畫在奇數次（1、3、5…）正向播放，在偶數次（2、4、6…）反向播放。
- alternate-reverse:動畫在奇數次（1、3、5…）反向播放，在偶數次（2、4、6…）正向播放。
-
animation-play-state：指定動畫是否正在運行或已暫停。值為paused|running。
div{margin: 120px auto;border: #FF0000 solid 1px;width: 200px;height: 200px;background-color: red;/* 開啟動畫，名稱為myfirst，2s，無限循環，奇數次正向，歐數次反向。 */animation: myfirst 2s infinite alternate;}/* */ @keyframes myfirst {0% {background: red;width: 200px;}25% {background: yellow;width: 250px;}50% {background: blue;width: 300px;}100% {background: green;width: 350px;} }div:hover{/* 懸停的時候停止動畫 */animation-play-state: paused ; }
-
6.10 兼容性
我們設置樣式的時候不同的游覽器可能識別不同的屬性，考慮游覽器間的兼容性的問題，我們可以通過前綴來分別設置不同的游覽器的樣式。
-
-webkit-： Safari and Chrome
-
-ms-：IE
-
-o-：opera
-
-moz-：firefox
div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* opera */ -moz-transform: rotate(30deg); /* firefox */ }
七、總結
7.1基本選擇器
| 類選擇器 | .class | .intro | 選擇 class=“intro” 的所有元素。 |
| id選擇器 | #id | #firstname | 選擇 id=“firstname” 的所有元素。 |
| 標簽選擇器 | element | p | 選擇所有 元素。 |
| 通配符選擇器 | * | * | 選擇所有元素。 |
- id選擇器：唯一性，只能有一個。比如一個人只有一個身份證號碼
- 類選擇器：可以有很多，將同一類名稱相同的標簽分為一組。
7.2結構偽類選擇器
| 第一個子元素 | :first-child | p:first-child | 選擇屬于父元素的第一個子元素且這個元素為 元素。 |
| 最后一個子元素 | :last-child | p:last-child | 選擇屬于父元素最后一個子元素且這個元素為 元素。 |
| 第一個子元素 | :first-of-type | p:first-of-type | 選擇在父元素中第一個p元素。不受其它元素影響。 |
| 最后一個子元素 | :last-of-type | p:last-of-type | 選擇在父元素中最后一個p元素。不受其它元素影響。 |
| 第N個子元素 | :nth-child(n) | p:nth-child(3) | 選擇屬于父元素的第3個子元素且這個元素為 元素。 |
| 第N個子元素 | :nth-of-type(n) | p:nth-of-type(3) | 選擇在父元素中第3個p元素。不受其它元素影響。 |
| 倒數第N個子元素 | :nth-last-child(n) | p:nth-last-child(3) | 選擇屬于父元素的倒數第3個子元素且這個元素為 元素。 |
| 倒數第N個子元素 | :nth-last-of-type(n) | p:nth-last-of-type(3) | 選擇在父元素中倒數第3個p元素。不受其它元素影響。 |
- p:first-child：①選擇屬于父元素的第一個子元素；②這個元素必須為
元素。
- p:first-of-type ： ①把p元素分類排序；② 選擇屬于父元素的第一個p元素。不受其它元素影響。
7.3 優先級
| 通用選擇器(*) | 0 |
| 元素選擇器 | 1 |
| 類選擇器 / 屬性選擇器 / 偽類選擇器 | 10 |
| id選擇器 | 100 |
| 內聯樣式 | 1000 |
| !important | 無窮大 |
-
優先級的高低根據權值來計算，權值大的生效。
-
優先級相同的情況下，就近原則。
-
繼承的樣式沒有權值。
-
越精細，權值越大
7.4元素的分類
-
塊元素
可以設置寬度，獨占1行，比如p 。可以通過display:block;來設置成塊元素。
-
行內元素
不可以設置寬高，不獨占1行，比如strong、span。可以通過display:inline;來設置成行元素。
-
行內塊元素
不獨占1行，可以設置寬高。比如img。可以通過display:inline-block;來設置成行內塊元素。
行內塊元素不能轉成行內元素
總結
以上是生活随笔為你收集整理的小饶学编程之JAVA SE第二部分——Web 前端基础：09CSS3的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在一家地产公司搞销售
- 下一篇： ⑦Java SE知识点回顾与小结(面向对