目錄
- CSS
- 第一章 CSS概述
- 1.1、概述
- 1.2、語法
- 1.3、注釋
- 1.4、如何創建并參考
- 1.4.1、外部樣式表（外聯式）
- 1.4.2、內部樣式表（行內式）
- 1.4.3、行內樣式（行內式）
- 1.5、三種引入優先級
- 第二章 CSS選擇器
- 2.1、id選擇器
- 2.2、class選擇器
- 2.3、標簽選擇器
- 2.4、子代選擇器
- 2.5、后代選擇器
- 2.6、相鄰兄弟選擇器
- 2.7、后續兄弟選擇器
- 2.8、交集選擇器
- 2.9、并集選擇器
- 2.10、通配符選擇器
- 2.11、偽類選擇器
- 2.11.1、anchor偽類
- 2.11.2、input偽類
- 2.11.3、other偽類
- 2.12、屬性選擇器
- 2.13、子串匹配屬性選擇器
- 第三章 CSS常見樣式
- 3.1、背景樣式
- 3.2、文本樣式
- 3.3、字體樣式
- 3.4、鏈接樣式
- 3.5、串列樣式
- 3.6、表格樣式
- 3.7、輪廓樣式
- 第四章 CSS盒子模型
- 4.1、概述
- 4.2、內邊距
- 4.3、邊框
- 4.4、外邊距
- 4.5、外邊距合并
- 第五章 CSS顯示特性
- 5.1、塊級元素
- 5.2、行內元素
- 5.3、可變元素
- 5.4、類別修改
- 5.5、元素隱藏
- 第六章 CSS定位
- 6.1、概述
- 6.2、相對定位
- 6.3、絕對定位
- 6.4、浮動定位
- CSS3
- 第一章 CSS3概述
- 第二章 CSS3邊框
- 第三章 CSS3圓角
- 第四章 CSS3背景
- 第五章 CSS3漸變
- 5.1、線性漸變
- 5.2、徑向漸變
- 第六章 CSS3文本效果
- 第七章 CSS3字體
- 第八章 CSS3 2D 轉換
- 8.1、translate() 方法
- 8.2、rotate() 方法
- 8.3、scale() 方法
- 8.4、skew() 方法
- 8.5、matrix() 方法
- 第九章 CSS3 3D 轉換
- 9.1、rotateX() 方法
- 9.2、rotateY() 方法
- 第十章 CSS3過渡
- 第十一章 CSS3影片
- 第十二章 CSS3多列
- 第十三章 CSS3用戶界面
- 13.1、調整尺寸(resize)
- 13.2、方框大小調整(box-sizing)
- 13.3、外形修飾(outline-offset)
- 13.4、新的用戶界面特性
- 第十四章 CSS3彈性盒子
- 第十五章 CSS3多媒體大小
- 15.1、多媒體概述
- 15.2、多媒體型別
- 15.3、多媒體功能
- 15.4、多媒體實體
CSS
第一章 CSS概述
1.1、概述
CSS（層疊樣式表）是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言，CSS 不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化，
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁物件和模型樣式編輯的能力，
CSS 定義如何顯示 HTML 元素，就像 HTML 中的字體標簽和顏色屬性所起的作用那樣，樣式通常保存在外部的 .css 檔案中，我們只需要編輯一個簡單的 CSS 檔案然后參考該檔案就可以改變所有頁面的布局和外觀，
1.2、語法
CSS 規則由兩個主要的部分構成：選擇器以及一潭訓多條宣告
比如說，我們要讓p標簽內的文本都是紅色，字體居中，我們就可以這么來寫
p {color: red;text-align: center;}
為了讓CSS可讀性更強，你可以每行只描述一個屬性
p {
color: red;
text-align: center;
}
1.3、注釋
注釋是用來解釋你的代碼并且可以隨意編輯它，但是瀏覽器會忽略它，
CSS注釋以 /* 開始, 以 */ 結束，如下：
/* 這是一個注釋 */
p {
/* 這是一個注釋 */
color: red;
text-align: center;
}
1.4、如何創建并參考
1.4.1、外部樣式表（外聯式）
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引入外部樣式表-->
<link rel="stylesheet" href="main.css">
</head>
<body>
<p>外部樣式</p>
</body>
</html>
main.css
p {
color: red;
text-align: center;
}
1.4.2、內部樣式表（行內式）
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引入內部樣式表-->
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>外部樣式</p>
</body>
</html>
1.4.3、行內樣式（行內式）
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--引入行內樣式-->
<p style="color: red;text-align: center">外部樣式</p>
</body>
</html>
1.5、三種引入優先級
- 三種引入方式內容屬性不沖突：三種方式會同時起作用，
- 三種引入方式內容屬性會沖突：
- 行內式和外聯式沖突，行內式位于外聯式上方，— 由外聯式決定
- 行內式和外聯式沖突，外聯式位于行內式上方，— 由行內式決定
- 三種方式并存且沖突， — 由行內式決定
注意：當屬性值記憶體在**“!important ”**關鍵字的時候，優先使用該類方式匯入屬性值，
格式：key: value !important;
舉例：color: red !important;
第二章 CSS選擇器
2.1、id選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，一般來說，一個頁面中標簽的id的名稱，必須唯一且不能重復，
需求描述 ：為id為part1的段落添加紅色字體樣式
<p id="part1">段落1</p>
<p id="part2">段落2</p>
#part1 {
color: red;
}
2.2、class選擇器
class 選擇器可以為標有特定 class 的 HTML 元素指定特定的樣式，一般來說，一個頁面中標簽的class的名稱，可以不唯一且可以重復，
需求描述 ：為class為green的段落添加綠色字體樣式，為class為bold的段落添加加粗字體樣式
<p class="green">段落1</p>
<p class="bold">段落2</p>
<p class="green bold">段落3</p>
.green {
color: green;
}
.bold {
font-weight: bold;
}
2.3、標簽選擇器
除了使用id選擇器和class選擇器，我們也可以直接使用標簽選擇器，
需求描述 ：為所有段落標簽添加黃色字體樣式，為所有超鏈接標簽添加紅色字體樣式
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<a href="https://www.baidu.com/">打開百度，你就知道！</a>
p {
color: yellow;
}
a {
color: red;
}
2.4、子代選擇器
子代選擇器可以選擇當前元素的所有兒子元素，定義的時候用 > 隔開，
需求描述 ：為div標簽下所有h1兒子節點設定為紅色文本樣式
<div>
<h1>兒子標題</h1>
<span><h1>孫子標題</h1></span>
<h1>兒子標題</h1>
</div>
div>h1{
color: red;
}
2.5、后代選擇器
標簽元素除了并列書寫還可以嵌套書寫，后代選擇器就是用于選擇嵌套標簽元素的一種選擇器，定義的時候用 空格 隔開，
需求描述 ：為所有段落標簽中的超鏈接標簽添加紅色文本
<p class="part">
<a href="http://www.baidu.com/">打開百度，你就知道！</a>
</p>
<a href="http://www.baidu.com/">打開百度，你就知道！</a>
.part a {
color: red;
}
2.6、相鄰兄弟選擇器
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素，如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector），定義的時候用 + 隔開，
需求描述 ：為div之后的第一個p標簽元素設定為黃色文本樣式
<div>
<p>DIV 內部段落，</p>
</div>
<p>DIV 之后的第一個 P 元素，</p>
<p>DIV 之后的第二個 P 元素，</p>
div + p {
background-color: yellow;
}
2.7、后續兄弟選擇器
后續兄弟選擇器選取所有指定元素之后的相鄰兄弟元素，定義的時候用 ~ 隔開，
需求描述 ：為div之后的所有p標簽元素設定為黃色文本樣式
<div>
<p>DIV 內部段落，</p>
</div>
<p>DIV 之后的第一個 P 元素，</p>
<p>DIV 之后的第二個 P 元素，</p>
div ~ p {
background-color: yellow;
}
2.8、交集選擇器
選擇的元素必須同時滿足多個條件才可以被選擇，交集選擇器就是干這個的，定義的時候用 標簽名.ID名/類名 ，
需求描述 ：為所有p標簽且class為part的段落添加綠色文本樣式
<p class="part">段落</p>
<h1 class="part">標題</h1>
p.part {
color: red;
}
2.9、并集選擇器
多種元素共享某種屬性，這時候就可以使用并集選擇器，定義的時候用 逗號 隔開，
需求描述 ：為p標簽、h1標簽、class=‘link’、id='click’的這幾種元素添加紅色文本樣式
<p>段落</p>
<h1>標題</h1>
<a href="https://www.baidu.com/" class="link">打開百度，你就知道！</a>
<button id="click">我是按鈕</button>
p, h1, .link, #click {
color: red;
}
2.10、通配符選擇器
通配符選擇器可以匹配任何標簽，我們常用于統一頁面樣式，
需求描述 ：將頁面所有元素的字體設定為紅色文本樣式
<div>DIV文本</div>
<p>P文本</p>
<a href="https://www.baidu.com">打開百度，你就知道！</a>
* {
color: red;
}
2.11、偽類選擇器
CSS偽類是用來添加一些選擇器的特殊效果，
2.11.1、anchor偽類
<a href="https://www.baidu.com/">打開百度，你就知道！</a>
a:link {color:#FF0000;} /* 未訪問的鏈接樣式 */
a:visited {color:#00FF00;} /* 已訪問的鏈接樣式 */
a:hover {color:#FF00FF;} /* 滑鼠劃過鏈接樣式 */
a:active {color:#0000FF;} /* 已選中的鏈接樣式 */
注意：推薦使用順序為link、visited、hover、active
2.11.2、input偽類
| 選擇器 | 示例 | 示例說明 |
|---|---|---|
| :focus | input:focus | 選擇元素輸入后具有焦點 |
| :checked | input:checked | 選擇所有選中的表單元素 |
| :disabled | input:disabled | 選擇所有禁用的表單元素 |
| :enabled | input:enabled | 選擇所有啟用的表單元素 |
| :in-range | input:in-range | 選擇元素指定范圍內的值 |
| :out-of-range | input:out-of-range | 選擇元素指定范圍外的值 |
| :invalid | input:invalid | 選擇所有無效值的元素 |
| :valid | input:valid | 選擇所有有效值的元素 |
| :optional | input:optional | 選擇沒有"required"屬性的元素 |
| :required | input:required | 選擇含有"required"屬性的元素 |
| :read-only | input:read-only | 選擇只讀屬性的元素 |
| :read-write | input:read-write | 選擇可寫屬性的元素 |
2.11.3、other偽類
| 選擇器 | 示例 | 示例說明 |
|---|---|---|
| :not(selector) | :not§ | 選擇所有p元素以外的元素 |
| :empty | p:empty | 選擇所有沒有子元素的p元素 |
| :first-child | p:first-child | 選擇所有p元素的第一個子元素 |
| :first-of-type | p:first-of-type | 選擇的每個p元素是其父元素的第一個p元素 |
| :last-child | p:last-child | 選擇所有p元素的最后一個子元素 |
| :last-of-type | p:last-of-type | 選擇每個p元素是其父元素的最后一個p元素 |
| :nth-child(n) | p:nth-child(2) | 選擇所有p元素的父元素的正數第二個子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇所有p元素正數的第二個為p的子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 選擇所有p元素的父元素的倒數第二個子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 選擇所有p元素倒數的第二個為p的子元素 |
| :only-child | p:only-child | 選擇所有僅有一個子元素的p元素 |
| :only-of-type | p:only-of-type | 選擇所有僅有一個子元素為p的元素 |
| :first-letter | p:first-letter | 選擇每個p元素的第一個字母 |
| :first-line | p:first-line | 選擇每個p元素的第一行 |
| :before | p:before | 在每個p元素之前插入內容 |
| :after | p:after | 在每個p元素之后插入內容 |
2.12、屬性選擇器
屬性選擇器可以根據元素的屬性及屬性值來選擇元素，
需求描述 ：為型別為text和button的input標簽設定一下樣式
<input type="text" value="文本框">
<input type="button" value="按鈕">
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
需求描述 ：如果title中包含多個單詞并且以空格分隔，只要其中有hello，則為當前標簽設定為藍色字體樣式
<h2>將會適用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<h2>將不適用:</h2>
<p title="student">Hi CSS students!</p>
[title~=hello] {
color: blue;
}
需求描述 ：如果title中包含一個單詞，只要其中有zh，則為當前標簽設定為藍色字體樣式
<h2>將會適用:</h2>
<p lang="zh">Hello!</p>
<p lang="zh-cn">Hi!</p>
<h2>將不適用:</h2>
<p lang="us">Hello!</p>
<p lang="en">Hi!</p>
[lang|=zh] {
color: blue;
}
2.13、子串匹配屬性選擇器
下面為您介紹一個更高級的選擇器模塊，它是 CSS2 完成之后發布的，其中包含了更多的部分值屬性選擇器，按照規范的說法，應該稱之為“子串匹配屬性選擇器”，很多現代瀏覽器都支持這些選擇器，包括 IE7，
下表是對這些選擇器的簡單總結：
| 型別 | 描述 |
|---|---|
| [abc^=“def”] | 選擇 abc 屬性值以 “def” 開頭的所有元素 |
| [abc$=“def”] | 選擇 abc 屬性值以 “def” 結尾的所有元素 |
| [abc*=“def”] | 選擇 abc 屬性值中包含子串 “def” 的所有元素 |
如果希望對指向 baidu 的所有鏈接應用樣式，不必為所有這些鏈接指定 class，再根據這個類撰寫樣式，而只需撰寫以下規則：
a[href*="baidu.com"] {
color: red;
}
第三章 CSS常見樣式
3.1、背景樣式
CSS 背景屬性用于定義HTML元素背景的樣式，
| 屬性 | 描述 |
|---|---|
| background | 簡寫屬性，作用是將背景屬性設定在一個宣告中， |
| background-attachment | 背景影像是否固定或者隨著頁面的其余部分滾動， |
| background-color | 設定元素的背景顏色， |
| background-image | 把影像設定為背景， |
| background-position | 設定背景影像的起始位置， |
| background-repeat | 設定背景影像是否及如何重復， |
3.2、文本樣式
CSS 文本屬性用于定義HTML文本內容的樣式，
| 屬性 | 描述 |
|---|---|
| color | 設定文本顏色， |
| direction | 設定文本方向， |
| letter-spacing | 設定字符間距， |
| line-height | 設定行高， |
| text-align | 對齊元素中的文本， |
| text-decoration | 向文本添加修飾， |
| text-indent | 縮進元素中文本的首行， |
| text-shadow | 設定文本陰影， |
| text-transform | 控制元素中的字母， |
| unicode-bidi | 設定或回傳文本是否被重寫， |
| vertical-align | 設定元素的垂直對齊， |
| white-space | 設定元素中空白的處理方式， |
| word-spacing | 設定字間距， |
3.3、字體樣式
CSS 字體屬性用于定義HTML內容字體的樣式，
| 屬性 | 描述 |
|---|---|
| font | 在一個宣告中設定所有的字體屬性， |
| font-family | 指定文本的字體系列， |
| font-size | 指定文本的字體大小， |
| font-style | 指定文本的字體樣式， |
| font-variant | 以小型大寫字體或者正常字體顯示文本， |
| font-weight | 指定字體的粗細， |
3.4、鏈接樣式
<a href="https://www.baidu.com/">打開百度，你就知道！</a>
a:link {color:#FF0000;} /* 未訪問的鏈接樣式 */
a:visited {color:#00FF00;} /* 已訪問的鏈接樣式 */
a:hover {color:#FF00FF;} /* 滑鼠劃過鏈接樣式 */
a:active {color:#0000FF;} /* 已選中的鏈接樣式 */
注意：推薦使用順序為link、visited、hover、active
3.5、串列樣式
CSS 串列屬性用于定義HTML常見串列的樣式，
| 屬性 | 描述 |
|---|---|
| list-style | 簡寫屬性，用于把所有用于串列的屬性設定于一個宣告中， |
| list-style-image | 將影像設定為串列項標志， |
| list-style-position | 設定串列中串列項標志的位置， |
| list-style-type | 設定串列項標志的型別， |
3.6、表格樣式
CSS 表格屬性用于定義HTML表格的樣式，
| 屬性 | 描述 |
|---|---|
| border-collapse | 設定是否把表格邊框合并為單一的邊框， |
| border-spacing | 設定分隔單元格邊框的距離， |
| caption-side | 設定表格標題的位置， |
| empty-cells | 設定是否顯示表格中的空單元格， |
| table-layout | 設定顯示單元、行和列的演算法， |
3.7、輪廓樣式
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用，
| 屬性 | 描述 |
|---|---|
| outline | 在一個宣告中設定所有的輪廓屬性， |
| outline-color | 設定輪廓的顏色， |
| outline-style | 設定輪廓的樣式， |
| outline-width | 設定輪廓的寬度， |
第四章 CSS盒子模型
4.1、概述
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用，
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容，
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素，
下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
- Margin(外邊距) - 清除邊框外的區域，外邊距是透明的，
- Border(邊框) - 圍繞在內邊距和內容外的邊框，
- Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的，
- Content(內容) - 盒子的內容，顯示文本和影像，
為了正確設定元素在所有瀏覽器中的寬度和高度，你需要知道的盒模型是如何作業的，
當您指定一個 CSS 元素的寬度和高度屬性時，你只是設定內容區域的寬度和高度，要知道，完整大小的元素，你還必須添加內邊距、邊框和外邊距，
下面的例子中的元素的總寬度為300px：
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
讓我們自己算算：
300px (寬)
+ 50px (左 + 右填充)
+ 50px (左 + 右邊框)
+ 50px (左 + 右邊距)
= 450px
也就是如下的圖：
-
最終元素的總寬度計算公式是這樣的：總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
-
最終元素的總高度計算公式是這樣的：總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
4.2、內邊距
當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充，
單獨使用 padding 屬性可以改變上下左右的填充，
常用的屬性：
| 屬性 | 描述 |
|---|---|
| padding | 簡寫屬性，作用是在一個宣告中設定元素的所內邊距屬性， |
| padding-bottom | 設定元素的下內邊距， |
| padding-left | 設定元素的左內邊距， |
| padding-right | 設定元素的右內邊距， |
| padding-top | 設定元素的上內邊距， |
4.3、邊框
元素的邊框 (border) 是圍繞元素內容和內邊距的一潭訓多條線，CSS邊框屬性允許你指定一個元素邊框的樣式和顏色，
常用的屬性：
| 屬性 | 描述 |
|---|---|
| border | 簡寫屬性，用于把針對四個邊的屬性設定在一個宣告， |
| border-style | 用于設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式， |
| border-width | 簡寫屬性，用于為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度， |
| border-color | 簡寫屬性，設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色， |
| border-bottom | 簡寫屬性，用于把下邊框的所有屬性設定到一個宣告中， |
| border-bottom-color | 設定元素的下邊框的顏色， |
| border-bottom-style | 設定元素的下邊框的樣式， |
| border-bottom-width | 設定元素的下邊框的寬度， |
| border-left | 簡寫屬性，用于把左邊框的所有屬性設定到一個宣告中， |
| border-left-color | 設定元素的左邊框的顏色， |
| border-left-style | 設定元素的左邊框的樣式， |
| border-left-width | 設定元素的左邊框的寬度， |
| border-right | 簡寫屬性，用于把右邊框的所有屬性設定到一個宣告中， |
| border-right-color | 設定元素的右邊框的顏色， |
| border-right-style | 設定元素的右邊框的樣式， |
| border-right-width | 設定元素的右邊框的寬度， |
| border-top | 簡寫屬性，用于把上邊框的所有屬性設定到一個宣告中， |
| border-top-color | 設定元素的上邊框的顏色， |
| border-top-style | 設定元素的上邊框的樣式， |
| border-top-width | 設定元素的上邊框的寬度， |
4.4、外邊距
margin 清除周圍的（外邊距）元素區域，margin 沒有背景顏色，是完全透明的，margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性，
常用的屬性：
| 屬性 | 描述 |
|---|---|
| margin | 簡寫屬性，在一個宣告中設定所有外邊距屬性， |
| margin-bottom | 設定元素的下外邊距， |
| margin-left | 設定元素的左外邊距， |
| margin-right | 設定元素的右外邊距， |
| margin-top | 設定元素的上外邊距， |
4.5、外邊距合并
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距，合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者，外邊距合并（疊加）是一個相當簡單的概念，但是，在實踐中對網頁進行布局時，它會造成許多混淆，
當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并，請看下圖：
當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并，請看下圖：
盡管看上去有些奇怪，但是外邊距甚至可以與自身發生合并，假設有一個空元素，它有外邊距，但是沒有邊框或填充，在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并：
如果這個外邊距遇到另一個元素的外邊距，它還會發生合并：
這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距，
外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的，以由幾個段落組成的典型文本頁面為例，第一個段落上面的空間等于段落的上外邊距，如果沒有外邊距合并，后續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和，這意味著段落之間的空間是頁面頂部的兩倍，如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了，
注意：只有普通檔案流中塊框的垂直外邊距才會發生外邊距合并，行內框、浮動框或絕對定位之間的外邊距不會合并，
第五章 CSS顯示特性
5.1、塊級元素
塊級元素(block)特性：
- 總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示
- 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制
塊級元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
5.2、行內元素
行內元素(inline)特性：
- 和相鄰的行內元素在同一行
- 寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是里面文字或圖片的大小
行內元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
5.3、可變元素
**可變元素主要有：**根據背景關系關系確定該元素是塊元素還是行內元素
applet ,button ,del ,iframe , ins ,map ,object , script
5.4、類別修改
利用CSS我們可以擺脫上面表格里HTML標簽歸類的限制，自由地在不同標簽/元素上應用我們需要的屬性，
主要用的CSS樣式有以下三個：
- display:block – 顯示為塊級元素
- display:inline – 顯示為行內元素
- display:inline-block – 顯示為行內塊元素，表現為同行顯示并可修改寬高內外邊距等屬性
我們常將所有<li>元素加上display:inline-block樣式，原本垂直的串列就可以水平顯示了，
5.5、元素隱藏
隱藏一個元素可以通過把display屬性設定為"none"，或把visibility屬性設定為"hidden"，但是請注意，這兩種方法會產生不同的結果，
但兩者的區別在于：
- display:none ：使元素在網頁上不可見，元素不再占用空間，
- visibility: hidden ：使元素在網頁上不可見，元素仍會占用空間，
第六章 CSS定位
6.1、概述
CSS 定位和浮動
CSS 定位 (Positioning) 屬性允許你對元素進行定位，
CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務，
定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器視窗本身的位置，顯然，這個功能非常強大，也很讓人吃驚，要知道，用戶代理對 CSS2 中定位的支持遠勝于對其它方面的支持，對此不應感到奇怪，
另一方面，CSS1 中首次提出了浮動，它以 Netscape 在 Web 發展初期增加的一個功能為基礎，浮動不完全是定位，不過，它當然也不是正常流布局，我們會在后面的章節中明確浮動的含義，
CSS 定位機制
CSS 有三種基本的定位機制：普通流（相對定位）、絕對定位和浮動定位，
除非專門指定，否則所有框都在普通流中定位，也就是說，普通流中的元素的位置由元素在 HTML 中的位置決定，
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來，
行內框在一行中水平布置，可以使用水平內邊距、邊框和外邊距調整它們的間距，但是，垂直內邊距、邊框和外邊距不影響行內框的高度，由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框，不過，設定行高可以增加這個框的高度，
CSS 定位屬性
通過使用 position 屬性，我們可以選擇 4 種不同型別的定位，這會影響元素框生成的方式，
| 值 | 描述 |
|---|---|
| absolute | 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位，元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定， |
| fixed | 生成絕對定位的元素，相對于瀏覽器視窗進行定位，元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定， |
| relative | 生成相對定位的元素，相對于其正常位置進行定位，因此，“left: 20” 會向元素的 left 位置添加 20 像素， |
| static | 默認值，沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）， |
| inherit | 規定應該從父元素繼承 position 屬性的值， |
注意：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置，
6.2、相對定位
相對定位是一個非常容易掌握的概念，如果對一個元素進行相對定位，它將出現在它所在的位置上，然后，可以通過設定垂直或水平位置，讓這個元素“相對于”它的起點進行移動，
如果將 top 設定為 20px，那么框將在原位置頂部下面 20 像素的地方，如果 left 設定為 30 像素，那么會在元素左邊創建 30 像素的空間，也就是將元素向右移動，
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
如下圖所示：
注意：在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間，因此，移動元素會導致它覆寫其它框，
6.3、絕對定位
絕對定位使元素的位置與檔案流無關，因此不占據空間，這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置，
普通流中其它元素的布局就像絕對定位的元素不存在一樣：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
如下圖所示：
絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊，
對于定位的主要問題是要記住每種定位的意義，所以，現在讓我們復習一下學過的知識吧：相對定位是“相對于”元素在檔案中的初始位置，而絕對定位是“相對于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對于”最初的包含塊，
注意：根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素，因為絕對定位的框與檔案流無關，所以它們可以覆寫頁面上的其它元素，可以通過設定 z-index 屬性來控制這些框的堆放次序，
6.4、浮動定位
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止，
由于浮動框不在檔案的普通流中，所以檔案的普通流中的塊框表現得就像浮動框不存在一樣，
CSS 浮動演示
請看下圖，當把框 1 向右浮動時，它脫離檔案流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框 1 向左浮動時，它脫離檔案流并且向左移動，直到它的左邊緣碰到包含框的左邊緣，因為它不再處于檔案流中，所以它不占據空間，實際上覆寫住了框 2，使框 2 從視圖中消失，
如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框，
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間，如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：
CSS 浮動屬性
在 CSS 中，我們通過 float 屬性實作元素的浮動，
| 值 | 描述 |
|---|---|
| left | 元素向左浮動， |
| right | 元素向右浮動， |
| none | 默認值，元素不浮動，并會顯示在其在文本中出現的位置， |
| inherit | 規定應該從父元素繼承 float 屬性的值， |
行框和清理
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框，因此，創建浮動框可以使文本圍繞影像：
要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性，clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框，為了實作這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
這是一個有用的工具，它讓周圍的元素為浮動元素留出空間，
讓我們更詳細地看看浮動和清理，假設希望讓一個圖片浮動到文本塊的左邊，并且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中，您可能撰寫下面的代碼：
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
這種情況下，出現了一個問題，因為浮動元素脫離了檔案流，所以包圍圖片和文本的 div 不占據空間，
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：
不幸的是出現了一個新的問題，由于沒有現有的元素可以應用清理，所以我們只能添加一個空元素并且清理它，
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
這樣可以實作我們希望的效果，但是需要添加多余的代碼，常常有元素可以應用 clear，但是有時候不得不為了進行布局而添加無意義的標記，不過我們還有另一種辦法，那就是對容器 div 進行浮動：
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
這樣會得到我們希望的效果，不幸的是，下一個元素會受到這個浮動元素的影響，為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然后使用適當的有意義的元素（常常是站點的頁腳）對這些浮動進行清理，這有助于減少或消除不必要的標記，
CSS3
第一章 CSS3概述
CSS 用于控制網頁的樣式和布局，CSS3 是最新的 CSS 標準，
對CSS3已完全向后兼容，所以你就不必改變現有的設計，瀏覽器將永遠支持CSS2，
第二章 CSS3邊框
通過 CSS3，您能夠創建圓角邊框，向矩形添加陰影，使用圖片來繪制邊框，并且不需使用設計軟體，比如 PhotoShop，
| 屬性 | 說明 |
|---|---|
| border-image | 設定所有邊框影像的速記屬性， |
| border-radius | 一個用于設定所有四個邊框- *-半徑屬性的速記屬性 |
| box-shadow | 附加一個或多個下拉框的陰影 |
第三章 CSS3圓角
使用 CSS3 border-radius 屬性，你可以給任何元素制作 “圓角”，
| 屬性 | 描述 |
|---|---|
| border-radius | 所有四個邊角 border-radius 屬性的縮寫， |
| border-top-left-radius | 定義了左上角的弧度， |
| border-top-right-radius | 定義了右上角的弧度， |
| border-bottom-right-radius | 定義了右下角的弧度， |
| border-bottom-left-radius | 定義了左下角的弧度， |
第四章 CSS3背景
CSS3 中包含幾個新的背景屬性，提供更大背景元素控制，
| 順序 | 描述 |
|---|---|
| background-clip | 規定背景的繪制區域， |
| background-origin | 規定背景圖片的定位區域， |
| background-size | 規定背景圖片的尺寸， |
第五章 CSS3漸變
CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡，
以前，你必須使用影像來實作這些效果，但是，通過使用 CSS3 漸變（gradients），你可以減少下載的時間和寬帶的使用，此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的，
CSS3 定義了兩種型別的漸變（gradients）：
- 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
- 徑向漸變（Radial Gradients）- 由它們的中心定義
5.1、線性漸變
為了創建一個線性漸變，你必須至少定義兩種顏色節點，顏色節點即你想要呈現平穩過渡的顏色，同時，你也可以設定一個起點和一個方向（或一個角度），
線性漸變 - 從上到下（默認情況下）
#grad {
background-image: linear-gradient(#e66465, #9198e5);
}
線性漸變 - 從左到右
#grad {
background-image: linear-gradient(to right, red, yellow);
}
線性漸變 - 對角變化
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
如果你想要在漸變的方向上做更多的控制，你可以定義一個角度，而不用預定義方向（to bottom、to top、to right、to left、to bottom right，等等），語法如下：
background-image: linear-gradient(angle, color-stop1, color-stop2);
角度是指水平線和漸變線之間的角度，逆時針方向計算，換句話說，0deg 將創建一個從下到上的漸變，90deg 將創建一個從左到右的漸變，
但是，請注意很多瀏覽器（Chrome、Safari、firefox等）的使用了舊的標準，即 0deg 將創建一個從左到右的漸變，90deg 將創建一個從下到上的漸變，換算公式 90 - x = y 其中 x 為標準角度，y為非標準角度，
下面的實體演示了如何在線性漸變上使用角度：
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}
下面的實體演示了如何設定多個顏色節點：
#grad {
background-image: linear-gradient(red, yellow, green);
}
下面的實體演示了如何創建一個帶有彩虹顏色和文本的線性漸變：
#grad {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
下面的實體演示了從左邊開始的線性漸變，起點是完全透明，慢慢過渡到完全不透明的紅色：
#grad {
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
下面的實體演示了一個重復的線性漸變：
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
5.2、徑向漸變
徑向漸變由它的中心定義，為了創建一個徑向漸變，你也必須至少定義兩種顏色節點，顏色節點即你想要呈現平穩過渡的顏色，同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小，默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落），
徑向漸變 - 顏色節點均勻分布（默認情況下）
#grad {
background-image: radial-gradient(red, yellow, green);
}
徑向漸變 - 顏色節點不均勻分布
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
設定形狀
shape 引數定義了形狀，它可以是值 circle 或 ellipse，其中，circle 表示圓形，ellipse 表示橢圓形，默認值是 ellipse，
形狀為圓形的徑向漸變：
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
不同尺寸大小關鍵字的使用
size 引數定義了漸變的大小，它可以是以下四個值：
- closest-side
- farthest-side
- closest-corner
- farthest-corner
帶有不同尺寸大小關鍵字的徑向漸變：
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
重復的徑向漸變
repeating-radial-gradient() 函式用于重復徑向漸變：
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
第六章 CSS3文本效果
CSS3中包含幾個新的文本特征，
| 屬性 | 描述 |
|---|---|
| hanging-punctuation | 規定標點字符是否位于線框之外， |
| punctuation-trim | 規定是否對標點字符進行修剪， |
| text-align-last | 設定如何對齊最后一行或緊挨著強制換行符之前的行， |
| text-emphasis | 向元素的文本應用重點標記以及重點標記的前景色， |
| text-justify | 規定當 text-align 設定為 “justify” 時所使用的對齊方法， |
| text-outline | 規定文本的輪廓， |
| text-overflow | 規定當文本溢位包含元素時發生的事情， |
| text-shadow | 向文本添加陰影， |
| text-wrap | 規定文本的換行規則， |
| word-break | 規定非中日韓文本的換行規則， |
| word-wrap | 允許對長的不可分割的單詞進行分割并換行到下一行， |
第七章 CSS3字體
使用以前 CSS 的版本，網頁設計師不得不使用用戶計算機上已經安裝的字體，
使用 CSS3，網頁設計師可以使用它/她喜歡的任何字體，
當你發現您要使用的字體檔案時，只需簡單的將字體檔案包含在網站中，它會自動下載給需要的用戶，
您所選擇的字體在新的 CSS3 版本有關于 @font-face 規則描述，
您"自己的"的字體是在 CSS3 @font-face 規則中定義的，
如需為 HTML 元素使用字體，請通過 font-family 屬性來參考字體的名稱 (myFirstFont)：
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
</style>
下表列出了所有的字體描述和里面的@font-face規則定義：
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需，規定字體的名稱， |
| src | URL | 必需，定義字體檔案的 URL， |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | 可選，定義如何拉伸字體，默認是 “normal”， |
| font-style | normal italic oblique | 可選，定義字體的樣式，默認是 “normal”， |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | 可選，定義字體的粗細，默認是 “normal”， |
| unicode-range | unicode-range | 可選，定義字體支持的 UNICODE 字符范圍，默認是 “U+0-10FFFF”， |
第八章 CSS3 2D 轉換
CSS3 轉換可以對元素進行移動、縮放、轉動、拉長或拉伸，
在本章您將了解2D變換方法：
- translate()
- rotate()
- scale()
- skew()
- matrix()
8.1、translate() 方法
translate()方法，根據左(X軸)和頂部(Y軸)位置給定的引數，從當前元素位置移動，
translate(50px, 100px)是從左邊元素移動50個像素，并從頂部移動100像素，
div {
-webkit-transform: translate(50px, 100px);/*Safari/Chrome瀏覽器支持*/
-moz-transform: translate(50px, 100px);/*Firefox瀏覽器支持*/
-ms-transform: translate(50px, 100px);/*IE瀏覽器支持*/
-o-transform: translate(50px, 100px);/*Opera瀏覽器支持*/
transform: translate(50px, 100px);
}
8.2、rotate() 方法
rotate()方法，在一個給定度數順時針旋轉的元素，負值是允許的，這樣是元素逆時針旋轉，
rotate(30deg)代表元素順時針旋轉30度，
div {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
8.3、scale() 方法
scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的引數，
scale(2, 3)轉變寬度為原來的大小的2倍，和其原始大小3倍的高度，
div {
-webkit-transform: scale(2, 3);
-moz-transform: scale(2, 3);
-ms-transform: scale(2, 3);
-o-transform: scale(2, 3);
transform: scale(2, 3);
}
8.4、skew() 方法
skew() 方法包含兩個引數值，分別表示X軸和Y軸傾斜的角度，如果第二個引數為空，則默認為0，引數為負表示向相反方向傾斜，
skew(30deg, 20deg)元素在X軸和Y軸上傾斜20度30度，
div {
-webkit-transform: skew(30deg, 20deg);
-moz-transform: skew(30deg, 20deg);
-ms-transform: skew(30deg, 20deg);
-o-transform: skew(30deg, 20deg);
transform: skew(30deg, 20deg);
}
8.5、matrix() 方法
matrix()方法和2D變換方法合并成一個，
matrix 方法有六個引數，包含旋轉，縮放，移動（平移）和傾斜功能，
div {
-webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
-moz-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
-ms-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
-o-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}
2D 轉換屬性
| 屬性 | 描述 |
|---|---|
| transform | 適用于2D或3D轉換的元素 |
| transform-origin | 允許您更改轉化元素位置 |
2D 轉換方法
| 函式 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣， |
| translate(x,y) | 定義 2D 轉換，沿著 X 和 Y 軸移動元素， |
| translateX(n) | 定義 2D 轉換，沿著 X 軸移動元素， |
| translateY(n) | 定義 2D 轉換，沿著 Y 軸移動元素， |
| scale(x,y) | 定義 2D 縮放轉換，改變元素的寬度和高度， |
| scaleX(n) | 定義 2D 縮放轉換，改變元素的寬度， |
| scaleY(n) | 定義 2D 縮放轉換，改變元素的高度， |
| rotate(angle) | 定義 2D 旋轉，在引數中規定角度， |
| skew(x-angle,y-angle) | 定義 2D 傾斜轉換，沿著 X 和 Y 軸， |
| skewX(angle) | 定義 2D 傾斜轉換，沿著 X 軸， |
| skewY(angle) | 定義 2D 傾斜轉換，沿著 Y 軸， |
第九章 CSS3 3D 轉換
CSS3 允許您使用 3D 轉換來對元素進行格式化，
在本章中，您將學到其中的一些 3D 轉換方法：
- rotateX()
- rotateY()
9.1、rotateX() 方法
rotateX()方法，圍繞其在一個給定度數X軸旋轉的元素，
div {
-webkit-transform: rotateX(120deg);
-moz-transform: rotateX(120deg);
-ms-transform: rotateX(120deg);
-o-transform: rotateX(120deg);
transform: rotateX(120deg);
}
9.2、rotateY() 方法
rotateY()方法，圍繞其在一個給定度數Y軸旋轉的元素，
div {
-webkit-transform: rotateY(120deg);
-moz-transform: rotateY(120deg);
-ms-transform: rotateY(120deg);
-o-transform: rotateY(120deg);
transform: rotateY(120deg);
}
3D 轉換屬性
| 屬性 | 描述 |
|---|---|
| transform | 向元素應用 2D 或 3D 轉換， |
| transform-origin | 允許你改變被轉換元素的位置， |
| transform-style | 規定被嵌套元素如何在 3D 空間中顯示， |
| perspective | 規定 3D 元素的透視效果， |
| perspective-origin | 規定 3D 元素的底部位置， |
| backface-visibility | 定義元素在不面對螢屏時是否可見， |
3D 轉換方法
| 函式 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉換，使用 16 個值的 4x4 矩陣， |
| translate3d(x,y,z) | 定義 3D 轉化， |
| translateX(x) | 定義 3D 轉化，僅使用用于 X 軸的值， |
| translateY(y) | 定義 3D 轉化，僅使用用于 Y 軸的值， |
| translateZ(z) | 定義 3D 轉化，僅使用用于 Z 軸的值， |
| scale3d(x,y,z) | 定義 3D 縮放轉換， |
| scaleX(x) | 定義 3D 縮放轉換，通過給定一個 X 軸的值， |
| scaleY(y) | 定義 3D 縮放轉換，通過給定一個 Y 軸的值， |
| scaleZ(z) | 定義 3D 縮放轉換，通過給定一個 Z 軸的值， |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉， |
| rotateX(angle) | 定義沿 X 軸的 3D 旋轉， |
| rotateY(angle) | 定義沿 Y 軸的 3D 旋轉， |
| rotateZ(angle) | 定義沿 Z 軸的 3D 旋轉， |
| perspective(n) | 定義 3D 轉換元素的透視視圖， |
第十章 CSS3過渡
CSS3中，我們為了添加某種效果可以從一種樣式轉變到另一個的時候，無需使用Flash影片或JavaScript，
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果，
要實作這一點，必須規定兩項內容：
- 指定要添加效果的CSS屬性
- 指定效果的持續時間
應用于寬度屬性的過渡效果，時長為 2 秒：
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
-moz-transition: width 2s;
-ms-transition: width 2s;
-o-transition: width 2s;
transition: width 2s;
}
注意：如果未指定的期限，transition將沒有任何效果，因為默認值是0，
指定的CSS屬性的值更改時效果會發生變化，一個典型CSS屬性的變化是用戶滑鼠放在一個元素上時：
div:hover {
width: 300px;
}
注意：當滑鼠游標移動到該元素時，它逐漸改變它原有樣式，
要添加多個樣式的變換效果，添加的屬性由逗號分隔：
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s;
-moz-transition: width 2s, height 2s;
-ms-transition: width 2s, height 2s;
-o-transition: width 2s, height 2s;
transition: width 2s, height 2s;
}
div:hover {
width: 300px;
height: 300px;
}
過渡屬性
| 屬性 | 描述 |
|---|---|
| transition | 簡寫屬性，用于在一個屬性中設定四個過渡屬性， |
| transition-property | 規定應用過渡的 CSS 屬性的名稱， |
| transition-duration | 定義過渡效果花費的時間，默認是 0， |
| transition-timing-function | 規定過渡效果的時間曲線，默認是 “ease”， |
| transition-delay | 規定過渡效果何時開始，默認是 0， |
第十一章 CSS3影片
CSS3 可以創建影片，它可以取代許多網頁影片影像、Flash 影片和 JavaScript 實作的效果，
要創建 CSS3 影片，你需要了解 @keyframes 規則，
@keyframes 規則是創建影片，
@keyframes 規則內指定一個 CSS 樣式和影片將逐步從目前的樣式更改為新的樣式，
當在 @keyframes 創建影片，把它系結到一個選擇器，否則影片不會有任何效果，
指定至少這兩個CSS3的影片屬性系結向一個選擇器：
- 規定影片的名稱
- 規定影片的時長
把 “myfirst” 影片捆綁到 div 元素，時長：5 秒：
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-ms-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div {
width: 300px;
height: 300px;
background: black;
-webkit-animation: myfirst 5s;
-o-animation: myfirst 5s;
animation: myfirst 5s;
}
您可以改變任意多的樣式任意多的次數，
請用百分比來規定變化發生的時間，或用關鍵詞 “from” 和 “to”，等同于 0% 和 100%，
0% 是影片的開始，100% 是影片的完成，
為了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器，
影片屬性
| 屬性 | 描述 |
|---|---|
| @keyframes | 規定影片， |
| animation | 所有影片屬性的簡寫屬性， |
| animation-name | 規定 @keyframes 影片的名稱， |
| animation-duration | 規定影片完成一個周期所花費的秒或毫秒，默認是 0， |
| animation-timing-function | 規定影片的速度曲線，默認是 “ease”， |
| animation-fill-mode | 規定當影片不播放時（當影片完成時，或當影片有一個延遲未開始播放時），要應用到元素的樣式， |
| animation-delay | 規定影片何時開始，默認是 0， |
| animation-iteration-count | 規定影片被播放的次數，默認是 1， |
| animation-direction | 規定影片是否在下一周期逆向地播放，默認是 “normal”， |
| animation-play-state | 規定影片是否正在運行或暫停，默認是 “running”， |
第十二章 CSS3多列
CSS3 可以將文本內容設計成像報紙一樣的多列布局，如下實體：
下表列出了所有 CSS3 的多列屬性：
| 屬性 | 描述 |
|---|---|
| column-count | 指定元素應該被分割的列數， |
| column-fill | 指定如何填充列， |
| column-gap | 指定列與列之間的間隙， |
| column-rule | 所有 column-rule-* 屬性的簡寫， |
| column-rule-color | 指定兩列間邊框的顏色， |
| column-rule-style | 指定兩列間邊框的樣式， |
| column-rule-width | 指定兩列間邊框的厚度， |
| column-span | 指定元素要跨越多少列， |
| column-width | 指定列的寬度， |
| columns | column-width 與 column-count 的簡寫屬性， |
第十三章 CSS3用戶界面
在 CSS3 中, 增加了一些新的用戶界面特性來調整元素尺寸，框尺寸和外邊框，
在本章中，您將了解以下的用戶界面屬性：
- resize
- box-sizing
- outline-offset
13.1、調整尺寸(resize)
CSS3中，resize屬性指定一個元素是否應該由用戶去調整大小，
由用戶指定一個div元素尺寸大小：
div {
width: 300px;
height: 300px;
background: red;
/*div右下角會多出一個小三角*/
resize: both;
overflow: auto;
}
13.2、方框大小調整(box-sizing)
box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容，
規定兩個并排的帶邊框方框：
div {
width: 300px;
height: 300px;
background: red;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
13.3、外形修飾(outline-offset)
outline-offset 屬性對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓，
輪廓與邊框有兩點不同：
- 輪廓不占用空間
- 輪廓可能是非矩形
div {
width: 300px;
height: 300px;
background: red;
border: 2px solid black;
outline: 2px solid blue;
outline-offset: 15px;
}
13.4、新的用戶界面特性
| 屬性 | 說明 |
|---|---|
| resize | 指定一個元素是否是由用戶調整大小， |
| box-sizing | 允許你以適應區域而用某種方式定義某些元素， |
| outline-offset | 外輪廓修飾并繪制超出邊框的邊緣， |
第十四章 CSS3彈性盒子
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢屏大小以及設備型別時確保元素擁有恰當的行為的布局方式，引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間，
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成，
彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器，
彈性容器內包含了一個或多個彈性子元素，
注意：彈性容器外及彈性子元素內是正常渲染的，彈性盒子只定義了彈性子元素如何在彈性容器內布局，彈性子元素通常在彈性盒子內一行顯示，默認情況每個容器只有一行，
下表列出了在彈性盒子中常用到的屬性：
| 屬性 | 描述 |
|---|---|
| display | 指定 HTML 元素盒子型別， |
| flex-direction | 指定了彈性容器中子元素的排列方式， |
| justify-content | 設定彈性盒子元素在主軸（橫軸）方向上的對齊方式， |
| align-items | 設定彈性盒子元素在側軸（縱軸）方向上的對齊方式， |
| flex-wrap | 設定彈性盒子的子元素超出父容器時是否換行， |
| align-content | 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設定子元素對齊，而是設定行對齊， |
| flex-flow | flex-direction 和 flex-wrap 的簡寫， |
| order | 設定彈性盒子的子元素排列順序， |
| align-self | 在彈性子元素上使用，覆寫容器的 align-items 屬性， |
| flex | 設定彈性盒子的子元素如何分配空間， |
第十五章 CSS3多媒體大小
15.1、多媒體概述
CSS3 的多媒體查詢繼承了 CSS2 多媒體型別的所有思想： 取代了查找設備的型別，CSS3 根據設定自適應顯示，你可以針對不同的媒體型別(包括顯示幕、便攜設備、電視機，等等)設定不同的樣式規則，但是這些多媒體型別在很多設備上支持還不夠友好，
目前很多針對蘋果手機，Android 手機，平板等設備都會使用到多媒體查詢，媒體查詢可用于檢測很多事情，例如：
- viewport(視窗) 的寬度與高度
- 設備的寬度與高度
- 朝向 (智能手機橫屏，豎屏) ，
- 解析度
多媒體查詢由多種媒體組成，可以包含一個或多個運算式，運算式根據條件是否成立回傳 true 或 false，
@media not|only mediatype and (expressions) {
CSS 代碼...;
}
如果指定的多媒體型別匹配設備型別則查詢結果回傳 true，檔案會在匹配的設備上顯示指定樣式效果，
除非你使用了 not 或 only 運算子，否則所有的樣式會適應在所有設備上顯示效果，
- not: not是用來排除掉某些特定的設備的，比如 @media not print（非列印設備），
- only: 用來定某種特別的媒體型別，對于支持Media Queries的移動設備來說，如果存在only關鍵字，移動設備的Web瀏覽器會忽略only關鍵字并直接根據后面的運算式應用樣式檔案，對于不支持Media Queries的設備但能夠讀取Media Type型別的Web瀏覽器，遇到only關鍵字時會忽略這個樣式檔案，
- all: 所有設備，這個應該經常看到，
你也可以在不同的媒體上使用不同的樣式檔案：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
15.2、多媒體型別
| 值 | 描述 |
|---|---|
| all | 用于所有多媒體型別設備 |
| 用于列印機 | |
| screen | 用于電腦螢屏，平板，智能手機等， |
| speech | 用于螢屏閱讀器 |
15.3、多媒體功能
| 值 | 描述 |
|---|---|
| aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的比率 |
| color | 定義輸出設備每一組彩色原件的個數，如果不是彩色設備，則值等于0 |
| color-index | 定義在輸出設備的彩色查詢表中的條目數，如果沒有使用彩色查詢表，則值等于0 |
| device-aspect-ratio | 定義輸出設備的螢屏可見寬度與高度的比率， |
| device-height | 定義輸出設備的螢屏可見高度， |
| device-width | 定義輸出設備的螢屏可見寬度， |
| grid | 用來查詢輸出設備是否使用柵格或點陣， |
| height | 定義輸出設備中的頁面可見區域高度， |
| max-aspect-ratio | 定義輸出設備的螢屏可見寬度與高度的最大比率， |
| max-color | 定義輸出設備每一組彩色原件的最大個數， |
| max-color-index | 定義在輸出設備的彩色查詢表中的最大條目數， |
| max-device-aspect-ratio | 定義輸出設備的螢屏可見寬度與高度的最大比率， |
| max-device-height | 定義輸出設備的螢屏可見的最大高度， |
| max-device-width | 定義輸出設備的螢屏最大可見寬度， |
| max-height | 定義輸出設備中的頁面最大可見區域高度， |
| max-monochrome | 定義在一個單色框架緩沖區中每像素包含的最大單色原件個數， |
| max-resolution | 定義設備的最大解析度， |
| max-width | 定義輸出設備中的頁面最大可見區域寬度， |
| min-aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的最小比率， |
| min-color | 定義輸出設備每一組彩色原件的最小個數， |
| min-color-index | 定義在輸出設備的彩色查詢表中的最小條目數， |
| min-device-aspect-ratio | 定義輸出設備的螢屏可見寬度與高度的最小比率， |
| min-device-width | 定義輸出設備的螢屏最小可見寬度， |
| min-device-height | 定義輸出設備的螢屏的最小可見高度， |
| min-height | 定義輸出設備中的頁面最小可見區域高度， |
| min-monochrome | 定義在一個單色框架緩沖區中每像素包含的最小單色原件個數 |
| min-resolution | 定義設備的最小解析度， |
| min-width | 定義輸出設備中的頁面最小可見區域寬度， |
| monochrome | 定義在一個單色框架緩沖區中每像素包含的單色原件個數，如果不是單色設備，則值等于0 |
| orientation | 定義輸出設備中的頁面可見區域高度是否大于或等于寬度， |
| resolution | 定義設備的解析度，如：96dpi, 300dpi, 118dpcm |
| scan | 定義電視類設備的掃描工序， |
| width | 定義輸出設備中的頁面可見區域寬度， |
15.4、多媒體實體
以下實體中在螢屏可視視窗尺寸小于 480 像素的設備上修改背景顏色：
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
以下實體在螢屏可視視窗尺寸大于 480 像素時將選單浮動到頁面左側：
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/223564.html
標籤：其他