plt.annotate() 在圖中標註文字
為網頁新增樣式
術語解釋
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.上下外邊距的合併
兩個常規流塊盒,上下外邊距相鄰,會進行合併。
兩個外邊距不一樣則取最大值。