連續多步驟業務流程的暫停、中斷和恢復
為網頁新增樣式
術語解釋
h1{
color:red;
background-color:lightblue;
text-align: center;
}
CSS規則 = 選擇器 + 宣告塊
選擇器
選擇器：選中元素，選擇樣式作用範圍
- ID選擇器：選中的是對應id值的元素 加#
- 元素選擇器 h1、p
- 類選擇器 class=" " 加.
宣告塊
出現在大括號中
宣告塊中包含很多宣告（屬性），每一個宣告（屬性）表達了某一方面的樣式。
CSS程式碼書寫位置
內部樣式表
書寫在style元素中,一般放在head中，讓它最先載入
<style> .red { color: red; } .big-center { font-size: 3em; text-align: center; } </style> <p class="red big-center">Lorem ipsum dolor sit amet.</p>
內聯樣式表，元素樣式表
直接書寫在元素的style屬性中
<h1 style="color:red; background-color:lightblue;">
現在開始新增樣式
</h1>
外部樣式表（推薦）
將樣式書寫到獨立的css檔案中。
<link rel="stylesheet" href="./css/index.css"> <!-- link寫在head中 --> <div class="red-big-center"> Lorem ipsum dolor sit amet. </div>
.red-big-center {
color: blue;
font-size: 5em;
text-align: center;
}
1). 外部樣式可以解決多頁面樣式重複的問題
2). 有利於瀏覽器快取，從而提高頁面響應速度
3). 有利於程式碼分離（HTML和CSS），更容易閱讀和維護
常見樣式宣告
color
元素內部的文字顏色
預設值：定義好的單詞
三原色，色值：光學三原色（紅、綠、藍），每個顏色可以使用0-255之間的數字來表達，色值。
rgb表示法：
rgb(0, 255, 0)
hex（16進位制）表示法：
#紅綠藍
淘寶紅：#ff4400, #f40
黑色：#000000，#000
白色：#ffffff, #fff
紅：#ff0000, #f00
綠：#00ff00, #0f0
藍：#0000ff, #00f
紫：#f0f
青：#0ff
黃：#ff0
灰色：#ccc
background-color
元素背景顏色
font-size
元素內部文字的尺寸大小
1）px：畫素，絕對單位，簡單的理解為文字的高度佔多少個畫素
2）em：相對單位，相對於父元素的字型大小
每個元素必須有字型大小，如果沒有宣告，則直接使用父元素的字型大小，如果沒有父元素（html），則使用基準字號。
user agent，UA，使用者代理（瀏覽器）
font-weight
文字粗細程度，可以取值數字，可以取值為預設值
strong元素，預設加粗。
font-family
文字型別
必須使用者計算機中存在的字型才會有效。
使用多個字型，以匹配不同環境
div{
font-family: consolas,翩翩體-簡,微軟雅黑,Arial,sans-serif
}
sans-serif，非襯線字型
font-style
字型樣式，通常用它設定斜體
i元素，em元素，預設樣式，是傾斜字型; 實際使用中，通常用它表示一個圖示（icon）
text-decoration
文字修飾，給文字加線。
a元素
del元素：錯誤的內容
s元素：過期的內容
text-indent
首行文字縮排
line-height
每行文字的高度，該值越大，每行文字的距離越大。
設定行高為容器的高度，可以讓單行文字垂直居中
p{
background:#008c8c;
color:#fff;
height: 50px;
line-height: 50px;
}
行高可以設定為純數字，表示相對於當前元素的字型大小
多少倍行距
p{
line-height: 1.5;
}
width
寬度
height
高度
letter-space
文字間隙
text-align
元素內部文字的水平排列方式
選擇器
選擇器：幫助你精準的選中想要的元素
簡單選擇器
1. ID選擇器
2. 元素選擇器
3. 類選擇器
4. 萬用字元選擇器 *，選中所有元素
* {
color: red;
}
5.屬性選擇器
根據屬性名和屬性值選中元素
<a href="https://www.baidu.com">百度</a>
/* 選中所有具有href屬性的元素 */
[href]{
color:red;
}
6. 偽類選擇器
選中某些元素的某種狀態
<a href="https://www.baidu.com">百度</a>
1）link: 超連結未訪問時的狀態
a:link {
color: chocolate;
}
2）visited: 超連結訪問過後的狀態
a:visited {
color: rgb(113, 133, 0);
}
3）hover: 滑鼠懸停狀態
/* 選中滑鼠懸停時的a元素 */
a:hover{
color:red;
}
4）active：啟用狀態，滑鼠按下狀態
/* 滑鼠按下時的a元素 */
a:active{
color:#008c8c;
}
l v h a
愛恨法則：love hate
7. 偽元素選擇器
before
after
<p>
袁老師和成老師的<span>HTML和CSS</span>課程真的是不錯呀！
</p>
span::before {
content: "《";
color: red;
}
span::after {
content: "》";
color: red;
}
選擇器的組合
並且
<p class="red">
Lorem, ipsum dolor sitpisicin
</p>
p.red {
color: red;
}
/* 選中p元素中class為redde */
後代元素 —— 空格
後代元素包括兒子孫子
<div class="red">
Lorem, ipsum dolor sit amet
<ul>
<li>Lorem.</li>
<li>Harum.</li>
<li>Eum!</li>
<li>Impedit?</li>
<li>Consequatur!</li>
</ul>
</div>
.red li {
color: #008c8c;
}
<div class="abc">
<p>Lorem.</p>
<p class="bcd">Sequi?</p>
<p>Quasi.</p>
</div>
<p class="bcd">
Lorem.
</p>
.abc .bcd{
color:red;
}
子元素 —— >
相鄰兄弟元素 —— +
後面出現的所有兄弟元素 —— ~
選擇器的並列
多個選擇器, 用逗號分隔
.special~li,p{
color: #008c8c;
}
語法糖:方便書寫
層疊
宣告衝突：同一個樣式，多次應用到同一個元素
層疊：解決宣告衝突的過程，瀏覽器自動處理（權重計算）
比較重要性
作者樣式表：開發者書寫的樣式
重要性從高到底：
1） 作者樣式表中的!important樣式
2) 作者樣式表中的普通樣式
3) 瀏覽器預設樣式表中的樣式
比較特殊性
看選擇器
總體規則：選擇器選中的範圍越窄，越特殊
具體規則：通過選擇器，計算出一個4位數（x x x x）
不是逢10進一，而是逢255進一
1.千位：如果是內聯樣式，記1，否則記0
<a href="" style="color: chocolate;">Perspiciatis</a>
2.百位：等於選擇器中所有id選擇器的數量
<a href="" id="mylink">Perspiciatis</a>
#mylink{
color:#ccc;
}
3.十位：等於選擇器中所有類選擇器、屬性選擇器、偽類選擇器的數量
類選擇器
<a href="" class="selected">Perspiciatis</a>
.selected{
color:#ccc;
}
4.個位：等於選擇器中所有元素選擇器、偽元素選擇器的數量
元素選擇器
<body>
<a href="" id="mylink" class="selected">Perspiciatis.</a>
</body>
a {
color: red;
}
body a {
color: #fff;
}
比較源次序
程式碼書寫靠後的勝出
應用
1.重置樣式表
書寫一些作者樣式，覆蓋瀏覽器的預設樣式
重置樣式表 -> 瀏覽器的預設樣式
常見的重置樣式表：normalize.css、reset.css、meyer.css
2.愛恨法則
link > visited > hover > active
從前往後，重要性以此增加，後面覆蓋前面
繼承
子元素會繼承父元素的某些CSS屬性
通常，跟文字內容相關的屬性都能被繼承
屬性值的計算過程
一個元素一個元素依次渲染，順序按照頁面文件的樹形目錄結構進行
渲染每個元素的前提條件：該元素的所有CSS屬性必須有值
一個元素，從所有屬性都沒有值，到所有的屬性都有值，這個計算過程，叫做屬性值計算過程
特殊的兩個CSS取值：
- inherit：手動（強制）繼承，將父元素的值取出應用到該元素
- initial：初始值，將該屬性設定為預設值
盒模型
box：盒子，每個元素在頁面中都會生成一個矩形區域（盒子）
盒子型別：
1.行盒，display等於inline的元素
2.塊盒，display等於block的元素
行盒在頁面中不換行、塊盒獨佔一行
display預設值為inline
瀏覽器預設樣式表設定的塊盒：容器元素、h1~h6、p
常見的行盒：span、a、img、video、audio
盒子的組成部分
無論是行盒、還是塊盒，都由下面幾個部分組成，從內到外分別是：
1.內容 content
width、height，設定的是盒子內容的寬高
內容部分通常叫做整個盒子的內容盒 content-box
2.填充(內邊距) padding
盒子邊框到盒子內容的距離
padding-left、padding-right、padding-top、padding-bottom
padding: 簡寫屬性
padding: 上 右 下 左
填充區+內容區 = 填充盒 padding-box
3.邊框 border
邊框 = 邊框樣式 + 邊框寬度 + 邊框顏色
邊框樣式：border-style 預設沒有
邊框寬度：border-width 預設為0
邊框顏色：border-color
邊框+填充區+內容區 = 邊框盒 border-box
4.外邊距 margin
邊框到其他盒子的距離
margin-top、margin-left、margin-right、margin-bottom
速寫屬性margin
盒模型應用
改變寬高範圍
預設情況下，width 和 height 設定的是內容盒寬高。
頁面重構師：將psd檔案（設計稿）製作為靜態頁面
衡量設計稿尺寸的時候，往往使用的是邊框盒，但設定width和height，則設定的是內容盒
- 精確計算
- CSS3：box-sizing
/* 改變寬高的影響範圍 */
box-sizing: border-box;
改變背景覆蓋範圍
預設情況下，背景覆蓋邊框盒
可以通過background-clip進行修改
溢位處理
overflow，控制內容溢位邊框盒後的處理方式
斷詞規則
word-break，會影響文字在什麼位置被截斷換行
normal：普通。CJK字元（文字位置截斷），非CJK字元（單詞位置截斷）
break-all：截斷所有。所有字元都在文字處截斷
keep-all：保持所有。所有文字都在單詞之間截斷
空白處理
overflow: hidden;
white-space: nowrap
text-overflow: ellipsis;
/*文字顯示溢位顯示三個點*/
white-space:pre;
/* 空白摺疊 */
行盒的盒模型
常見的行盒：包含具體內容的元素
span、strong、em、i、img、video、audio
顯著特點
1.盒子沿著內容沿伸，兩個相鄰的盒子連線
2.行盒不能設定寬和高
調整行盒的寬高，應該使用字型大小、行高、字型型別，間接調整。
3.內邊距（填充區）
水平方向有效，佔據空間
垂直方向不會實際佔據空間，只改變背景
4.邊框
水平方向有效，垂直方向不會實際佔據空間。
5.外邊距
水平方向有效，垂直方向不會實際佔據空間。
行塊盒
可以設定尺寸寬高的行盒(連著不獨佔一行)
display：inline-block 的盒子
1.不獨佔一行
2.盒模型中所有尺寸都有效
.pager a {
border: 1px solid #e1e2e3;
text-decoration: none;
color: #38f;
width: 34px;
height: 34px;
display: inline-block;
text-align: center;
line-height: 34px;
}
.pager a:hover {
border-color: #38f;
background: #f2f8ff;
}
.pager a.selected {
border: none;
color: #000;
background: initial;
}
<body>
<div class="pager">
<a href="">1</a>
<a href="">2</a>
<a href="" class="selected">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
</div>
</body>
空白摺疊
空白摺疊，發生在行盒（行塊盒）內部 或 行盒（行塊盒）之間
可替換元素 和 非可替換元素
大部分元素，頁面上顯示的結果，取決於元素內容，稱為非可替換元素
少部分元素，頁面上顯示的結果，取決於元素屬性，稱為可替換元素
可替換元素：img、video、audio
絕大部分可替換元素均為行盒。
可替換元素是行盒但是可以設定寬高，類似於行塊盒，盒模型中所有尺寸都有效。
object-fit:設定填充方式
常規流
盒模型：規定單個盒子的規則
視覺格式化模型（佈局規則）：頁面中的多個盒子排列規則
視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：
- 常規流
- 浮動
- 定位
常規流佈局
常規流、文件流、普通文件流、常規文件流
所有元素，預設情況下，都屬於常規流佈局
總體規則：塊盒獨佔一行，行盒水平依次排列
包含塊（containing block）：每個盒子都有它的包含塊，包含塊決定了盒子的排列區域。
絕大部分情況下：盒子的包含塊，為其父元素的內容盒
塊盒
1.每個塊盒的總寬度，必須剛好等於包含塊的寬度
寬度的預設值是auto
margin的取值也可以是auto，預設值0
auto：將剩餘空間吸收掉
width吸收能力強於margin
若寬度、邊框、內邊距、外邊距計算後，仍然有剩餘空間，該剩餘空間被margin-right全部吸收
在常規流中，塊盒在其包含快中居中，可以定寬、然後左右margin設定為auto。
2.每個塊盒垂直方向上的auto值
height:auto， 適應內容的高度
margin:auto， 表示0
3.百分比取值
padding、寬、margin可以取值為百分比
以上的所有百分比相對於包含塊的寬度。
高度的百分比：
1.包含塊的高度是否取決於子元素的高度，設定百分比無效
2.包含塊的高度不取決於子元素的高度，百分比相對於父元素高度
4.上下外邊距的合併
兩個常規流塊盒，上下外邊距相鄰，會進行合併。
兩個外邊距不一樣則取最大值。