當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS基础班笔记(三)

發布時間：2024/1/8 CSS 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS基础班笔记(三) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?web前端劍法之css

🔥web前端劍法之css地址

🔥CSS基礎班筆記(一)	https://blog.csdn.net/Augenstern_QXL/article/details/115560532
🔥CSS基礎班筆記(二)	https://blog.csdn.net/Augenstern_QXL/article/details/115560502
🔥CSS基礎班筆記(三)	https://blog.csdn.net/Augenstern_QXL/article/details/115726577
🔥CSS進階班筆記(四)	https://blog.csdn.net/Augenstern_QXL/article/details/119172527
🔥CSS進階班筆記(五)	https://blog.csdn.net/Augenstern_QXL/article/details/120374974

?目錄總覽

1、新增選擇器🔥

CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標元素。

屬性選擇器
結構偽類選擇器
偽元素選擇器

1.1、屬性選擇器🔥

屬性選擇器可以根據元素特定的屬性來選擇元素，這樣就可以不用借助于類或者id選擇器

選擇符簡介

E[att]	選擇具有att屬性的E元素
E[att=“val”]	選擇具有att屬性且屬性值等于val的E元素
E[att^=“val”]	匹配具有att屬性且值以val開頭的E元素
E[att$=“val”]	匹配具有att屬性且值以val結尾的E元素
E[att*=“val”]	匹配具有att屬性且值中含有val的E元素

利用屬性選擇器就可以不借助于類或者id選擇器

<head> <style>input[value] {color: pink;}</style> </head><body><input type="text" value="請輸入用戶名"><input type="text"> </body>

屬性選擇器還可以選擇屬性 = 值的某些元素

<head> <style>input[type=text] {color: pink;}</style> </head><body><input type="text" name="" id=""><input type="password" name="" id=""></body>

屬性選擇器可以選擇屬性值開頭的某些元素

<head> /* 選擇首先是div，然后具有class屬性，并且是icon開頭的值 */<style> div[class^=icon] {color: pink;}</style> </head><body><div class="icon1">小圖標1</div><div class="icon2">小圖標2</div><div class="icon3">小圖標3</div><div class="icon4">小圖標4</div></body>

屬性選擇器可以選擇屬性值結尾的某些元素

<head><style>section[class$=data] {color: pink;}</style> </head><body><section class="icon1-data">1</section><section class="icon2-data">2</section><section class="icon3-data">3</section> </body>

注意：類選擇器，屬性選擇器，偽類選擇器，權重為10

1.2、結構偽類選擇器🔥

結構偽類選擇器主要根據文檔結構來選擇元素
常用于根據父級選擇器選擇里面的子元素

選擇符簡介

E:first-child	匹配父元素中的第一個子元素E
E:last-child	匹配父元素中最后一個E元素
E:nth-child(n)	匹配父元素中的第n個子元素E
E:first-of-type	指定類型E的第一個
E:last-of-type	指定類型E的最后一個
E:nth-of-type（n）	指定類型E的第n個

①、E:first-child 和E:last-child

<head><style>/* 1.選擇ul里面的第一個孩子小li */ul li:first-child {background-color: pink;}/* 2.選擇ul里面的最后一個孩子小li */ul li:last-child {background-color: pink;}</style> </head><body><ul><li>我是第1個孩子</li><li>我是第2個孩子</li><li>我是第3個孩子</li><li>我是第4個孩子</li><li>我是第5個孩子</li><li>我是第6個孩子</li><li>我是第7個孩子</li><li>我是第8個孩子</li></ul>

②、nth-child(n)

nth-child(n)選擇某個父級元素的一個或多個特定的子元素（重點）

n可以是數字，關鍵字和公式

n如果是數字，就是選擇第n個子元素，里面數字從1開始

n可以是關鍵字：even 偶數，odd奇數

n可以是公式：常見的公式如下（如果n是公式，則從0開始計算，但是第0個元素或者超出了元素的個數會被忽略）

公式取值

2n	偶數（等價于even）
2n+1	奇數（等價于odd）
5n	5 10 15 …（5的倍數）
n+5	從第5個開始（包含第五個）到最后
-n+5	前5個（包含第5個）

<head><style>/* 選擇ul里面的第2個孩子小li */ul li:nth-child(2) {background-color: pink;}</style> </head><body><ul><li>我是第1個孩子</li><li>我是第2個孩子</li><li>我是第3個孩子</li><li>我是第4個孩子</li><li>我是第5個孩子</li><li>我是第6個孩子</li><li>我是第7個孩子</li><li>我是第8個孩子</li></ul> </body> <style>/* 1.把所有的偶數 even的孩子選出來 */ul li:nth-child(even) {background-color: #ccc;}/* 2.把所有的奇數 odd的孩子選出來 */ul li:nth-child(odd) {background-color: gray;}/* 3.nth-child(n) 從0開始每次加1 往后面計算這里面必須是n 不能是其他的字母選擇了所有的孩子*//* ol li:nth-child(n) {background-color: pink;} *//* 4.nth-child(2n)母選擇了所有的偶數孩子等價于 even*//* ol li:nth-child(2n) {background-color: pink;}ol li:nth-child(2n+1) {background-color: skyblue;} *//* ol li:nth-child(n+3) {background-color: pink;} */ol li:nth-child(-n+3) {background-color: pink;}</style> </head><body><ul><li>我是第1個孩子</li><li>我是第2個孩子</li><li>我是第3個孩子</li><li>我是第4個孩子</li><li>我是第5個孩子</li><li>我是第6個孩子</li><li>我是第7個孩子</li><li>我是第8個孩子</li></ul><ol><li>我是第1個孩子</li><li>我是第2個孩子</li><li>我是第3個孩子</li><li>我是第4個孩子</li><li>我是第5個孩子</li><li>我是第6個孩子</li><li>我是第7個孩子</li><li>我是第8個孩子</li></ol> </body>

③、E:first-of-type和E:last-of-type

E:first-of-type指定類型E的第一個

E:last-of-type

指定類型E的最后一個

<head><style>ul li:first-of-type {background-color: pink;}ul li:last-of-type {background-color: pink;}ul li:nth-last-child(2) {background-color: pink;}</style> </head><body><ul><li>我是第1個孩子</li><li>我是第2個孩子</li><li>我是第3個孩子</li><li>我是第4個孩子</li><li>我是第5個孩子</li><li>我是第6個孩子</li><li>我是第7個孩子</li><li>我是第8個孩子</li></ul> </body>

④、區別

nth-child(n)和nth-of-type(n)區別?
nth-child 對父元素里面所有孩子排序選擇(序號是固定的)，先找到第n個孩子，然后看看是否和E匹配
nth-of-type 對父元素里面指定子元素進行排序選擇，先去匹配E,然后再根據E 找第n個孩子

⑤、小結

結構偽類選擇器一般用于選擇父級里面的第幾個孩子

nth-child 對父元素里面所有孩子排序選擇（序號是固定的），先找到第n個孩子，然后看看是否和E匹配

nth-of-type 對父元素里面指定子元素進行排序選擇，先去匹配E，然后再根據E找第n個孩子

關于nth-child(n)，我們要知道n是從0開始計算的，要記住常用的公式

如果是無序列表，我們肯定用 nth-child 更多

類選擇器，屬性選擇器，偽類選擇器，權重為10

1.3、偽元素選擇器🔥

偽元素選擇器可以幫我們利用CSS創建新標簽元素，而不需要HTML標簽，從而簡化HTML結構

選擇符簡介

::before	在元素內部的前面插入內容
::after	在元素內部的后面插入內容

注意：

before 和 after 創建一個元素，但是是屬于行內元素

before和after 都是一個盒子，都作為父元素的孩子

新創建的這個元素在文檔樹中是找不到的，所以我們稱為偽元素

語法：

element::before {}

before是放在內容的前面，after是放在了內容的后面

<head><style>div {width: 200px;height: 200px;background-color: pink;}/* div::before 權重是2 */div::before {/* 這個content是必須要寫的 */content: '我';}div::after {content: '小豬佩奇';}</style> </head><body><div>是</div>

before 和 after 必須有 content 屬性
before 在父元素內容的前面創建元素，after 在父元素內容的后面插入元素
偽元素選擇器 和 標簽選擇器 一樣，權重為1

2、CSS3盒子模型🔥

CSS3 中可以通過box-sizing 來指定盒模型
有2個值：這樣我們計算盒子大小的方式就發生了改變
- content-box
- border-box

2.1、content-box

box-sizing: content-box;

第一種情況是 CSS 的盒子模型，盒子大小為 width + padding + border
此種情況盒子大小為寬度 + 內邊距 + 邊框，這也是我們之前寫盒子所默認的

2.2、border-box🔥

box-sizing: border-box;

第二種情況是 CSS3 的盒子模型，盒子大小為 width
此種情況盒子大小為寬度，不包括內邊距和邊框，這樣 padding 和 border 就不會撐大盒子了(前提是 padding 和 border 不會超過 width 寬度)
我們可以在以后的 css 通配符中添加 CSS3 盒子模型

* {margin: 0;padding: 0;box-sizing: border-box;/* 這樣的話padding和border就不會撐大盒子了 */ }

3、C3其他特性

3.1、濾鏡filter

filter: CSS屬性將模糊或顏色偏移等圖形效果應用于元素(圖片變模糊)
語法：
filter: 函數();
模糊處理：blur,數值越大越模糊

<head><style>img {/* blur 是一個函數，小括號里面的數值越大，圖片越模糊，注意數值要加px單位 */filter: blur(5px);}</style> </head><body><img src="images/pink.jpg" alt=""> </body>

3.2、calc函數

calc() 此CSS函數讓你在聲明CSS屬性值時執行一些計算（計算盒子寬度 width: calc 函數）
width:calc(100% - 80px);
括號里面可以使用 + - * / 來進行計算

<head> <style>.father {width: 300px;height: 200px;background-color: pink;}.son {/* width: 150px; *//* son盒子和父親一樣寬，都是100%，son盒子-30px */width: calc(100%-30px);height: 30px;background-color: skyblue;}</style> </head><body><div class="father"><div class="son"></div></div> </body>

3.3、transition過渡🔥

過渡（transition) 是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動畫或JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果
過渡動畫：是從一個狀態漸漸的過渡到另外一個狀態
過渡經常和：hover一起搭配使用

transition: 要過渡的屬性花費時間運動曲線何時開始

要過渡的屬性：想要變化的 CSS 屬性，寬度高度，背景顏色，內外邊距都可以，如果想要所有的屬性都變化過渡，寫一個all就可以。

花費時間：單位是秒(必須寫單位) 比如0.5s

運動曲線：默認是ease(可以省略)

何時開始：單位是秒(必須寫單位)，可以設置延遲觸發事件，默認是0s(可以省略)

過渡的口訣：誰做過渡給誰加

<head><style>div {width: 200px;height: 100px;background-color: pink;/* transition: 變化的屬性花費時間運動曲線何時開始; *//* 如果想要寫多個屬性，利用逗號進行分割 */transition: width 0.5s, height 0.5s;/* 如果想要多個屬性都變化，屬性寫all就可以了 */transition: all 0.5s;}div:hover {width: 400px;height: 200px;background-color: red;}</style> </head><body><div></div> </body>

3.4、2D轉換🔥

轉換(transform)是CSS3中具有顛覆性的特征之一，可以實現元素的位移，旋轉，縮放等效果

移動：translate
旋轉：rotate
縮放：scale

二維坐標系：

2D轉換是改變標簽在二維平面上的位置和形狀的一種技術，先來學習二維坐標系

①移動translate🔥

2D移動是2D轉換里面的一種功能，可以改變元素在頁面中的位置，類似定位。

語法：

transform:translate(x,y); /* 或者分開寫 */ transform:translateX(n); transform:translateY(n);transform:translate(100px,100px); /* 如果只移動X軸 */ transform:translate(100px,0); translateX(100px);

定義2D轉換中的移動，沿著X和Y軸移動元素

translate 最大的優點：不會影響到其他元素的位置

translate 中的百分比單位是相對于自身元素的

translate:(50%,50%);

對行內標簽沒有效果

②旋轉rotate🔥

2D旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉。

transform: rotate(度數)

rotate 里面跟度數，單位是 deg 比如 rotate(45deg)

角度為正時，順時針，負時，為逆時針

默認旋轉的中心點是元素的中心點

<head><style>img {width: 150px;border-radius: 50%;border: 5px solid pink;/* 過渡寫到本身，誰做動畫給誰加 */transition: all 0.3s;}img:hover {transform: rotate(360deg);}</style> </head><body><img src="#" alt=""> </body>

③旋轉中心點transform-origin🔥

2D轉換中心點：我們可以設置元素轉換的中心點 transform-origin

transform-origin: x y;

注意后面的參數x 和 y 用空格隔開

x y 默認轉換的中心點是元素的中心點(50% 50%)

還可以給x y 設置像素或者方位名詞(top bottom left right center)

<head><style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;transition: all 1s;/* 1.可以跟方位名詞 ,以左下角為軸進行旋轉*/transform-origin: left bottom;}div:hover {transform: rotate(360deg);}</style> </head><body><div></div> </body>

3.5、縮放scale🔥

縮放：scale,只要給元素添加上了這個屬性就能控制它放大還是縮小

transform: scale(x,y);

注意其中的x和y用逗號分割

transform:scale(1,1): 寬和高都放大一倍，相當于沒有放大

transform:scale(2,2)：寬和高都放大了2倍

transform:scale(2)：只寫一個參數，第二個參數則和第一個參數一樣，相當于 scale(2,2)

transform:scale(0.5,0.5)：縮小

sacle縮放最大的優勢：可以設置轉換中心點縮放，默認以中心點縮放的，而且不影響其他盒子

<head><style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;}div:hover {/* 1.里面寫的數字不跟單位就是倍數的意思 1就是1倍，2就是2倍 */transform: scale(2, 2);}</style> </head><body><div></div> </body>

3.6、2D轉換綜合寫法🔥

同時使用多個轉換，其格式為: transform:translate() rotate() scale() 移動-旋轉-縮放

其順序會影響轉換的效果(先旋轉會改變坐標軸方向)

當我們同時有位移和其他屬性時候，記得要將位移放到最前面

<head> <style>div {width: 200px;height: 200px;background-color: pink;transition: all .5s;}div:hover {/* 我們同時有位移和其他屬性，我們需要把位移放到最前面位移，旋轉，縮放*/transform: translate(150px, 50px) rotate(180deg) scale(1.2);}</style> </head><body><div></div> </body>

3.7、2D轉換總結🔥

轉換transform 我們簡單理解就是變形有2D 和 3D 之分
我們暫且學了三個分別是位移旋轉和縮放
2D 移動 translate(x, y) 最大的優勢是不影響其他盒子，里面參數用%，是相對于自身寬度和高度來計算的
可以分開寫比如 translateX(x) 和 translateY(y)
2D 旋轉 rotate(度數) 可以實現旋轉元素度數的單位是deg
2D 縮放 sacle(x,y) 里面參數是數字不跟單位可以是小數最大的優勢不影響其他盒子
設置轉換中心點 transform-origin : x y; 參數可以百分比、像素或者是方位名詞
l當我們進行綜合寫法，同時有位移和其他屬性的時候，記得要將位移放到最前

4、C3動畫🔥

動畫 animation是CSS3中具有顛覆性的特征之一，可通過設置多個節點來精確控制一個或一組動畫，常用來實現復雜的動畫效果。

相比較過渡，動畫可以實現更多變化，更多控制，連續自動播放等效果。

制作動畫分為兩步：

先定義動畫
再使用（調用）動畫

4.1、用keyframs定義動畫🔥

用 keyframes 定義動畫（類似定義類選擇器）

@keyframes 動畫名稱 {0%{width:100px;} 100%{width:200px;} }

0% 是動畫的開始，100% 是動畫的完成。這樣的規則就是動畫序列。
在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意多的次數。
請用百分比來規定變化發生的時間，或用關鍵詞 “from” 和 “to”，等同于 0% 和 100%。

4.2、使用動畫🔥

div {width: 200px;height: 200px;background-color: aqua;margin: 100px auto;/* 調用動畫 */animation-name: 動畫名稱;/* 持續時間 */animation-duration: 持續時間;}

4.3、示例

需求：我們想頁面一打開，一個盒子就從左邊走到右邊

<head> <style>/* 需求：我們想頁面一打開，一個盒子就從左邊走到右邊 *//* 1.定義動畫 */@keyframes move {/* 開始狀態 */0% {transform: translateX(0px);}/* 結束狀態 */100% {transform: translateX(1000px);}}div {width: 200px;height: 200px;background-color: pink;/* 使用動畫 */animation-name: move;/* 持續時間 */animation-duration: 2s;}</style> </head><body><div></div> </body>

from to 語法

<head> <style>/* 需求：我們想頁面一打開，一個盒子就從左邊走到右邊 *//* 1.定義動畫 */@keyframes move {from {transform: translate(0, 0);}to {transform: translate(1000px, 0);}}div {width: 200px;height: 200px;background-color: pink;/* 使用動畫 */animation-name: move;/* 持續時間 */animation-duration: 2s;}</style> </head><body><div></div> </body>

4.4、動畫常用屬性🔥

屬性描述

@keyframes	規定動畫。
animation	所有動畫屬性的簡寫屬性，除了animation-play-state屬性。
animation-name	規定@keyframes動畫的名稱。（必須的）
animation-duration	規定動畫完成一個周期所花費的秒或毫秒，默認是0。（必須的）
animation-timing-function	規定動畫的速度曲線，默認是“ease”。
animation-delay	規定動畫何時開始，默認是0。
animation-iteration-count	規定動畫被播放的次數，默認是1，還有infinite
animation-direction	規定動畫是否在下一周期逆向播放，默認是“normal“,alternate逆播放
animation-play-state	規定動畫是否正在運行或暫停。默認是"running",還有"paused"。
animation-fill-mode	規定動畫結束后狀態，保持forwards回到起始backwards

動畫的簡寫屬性

/* animation：動畫名稱持續時間運動曲線何時開始播放次數是否反方向動畫起始或者結束的狀態 */animation: myfirst 5s linear 2s infinite alternate;

4.5、動畫簡寫屬性🔥

animation：動畫名稱持續時間運動曲線何時開始播放次數是否反方向動畫起始或者結束的狀態;

animation: myfirst 5s linear 2s infinite alternate;

簡寫屬性里面不包含 animation-play-state
暫停動畫：animation-play-state: puased; 經常和鼠標經過等其他配合使用
l想要動畫走回來，而不是直接跳回來：animation-direction: alternate
盒子動畫結束后，停在結束位置： animation-fill-mode : forwards

4.6、速度曲線細節

animation-timing-function：規定動畫的速度曲線，默認是“ease”

值描述

linear	動畫從頭到尾的速度是相同的。勻速
ease	默認。動畫以低速開始，然后加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
steps()	指定了時間函數中的間隔數量（步長）

5、3D轉換🔥

我們生活的環境是3D的，照片就是3D物體在2D平面呈現的例子.

3D轉換的特點：

近大遠小。
物體后面遮擋不可見

當我們在網頁上構建3D效果的時候參考這些特點就能產出3D效果。

5.1、三維坐標系🔥

三維坐標系其實就是指立體空間，立體空間是由3個軸共同組成的。

x軸：水平向右 注意： x 右邊是正值，左邊是負值
y軸：垂直向下 注意： y 下面是正值，上面是負值
z軸：垂直屏幕 注意：往外面是正值，往里面是負值

3D 轉換我們主要學習工作中最常用的 3D 位移和 3D 旋轉

5.2、3D位移translate3d🔥

3D移動在2D移動的基礎上多加了一個可以移動的方向，就是z軸方向

translform:translateX(100px)：僅僅是在x軸上移動
translform:translateY(100px)：僅僅是在Y軸上移動
translform:translateZ(100px)：僅僅是在Z軸上移動（注意：translateZ一般用px單位）
transform:translate3d(x,y,z)：其中 x、y、z 分別指要移動的軸的方向的距離

因為z軸是垂直屏幕，由里指向外面，所以默認是看不到元素在z軸的方向上移動

5.3、透視perspective🔥

透視：在2D平面產生近大遠小視覺立體，但是只是效果二維的

如果想要在網頁產生3D效果需要透視（理解成3D物體投影在2D平面內）
模擬人類的視覺位置，可認為安排一只眼睛去看
透視我們也稱為視距：視距就是人的眼睛到屏幕的距離
距離視覺點越近的在電腦平面成像越大，越遠成像越小
透視的單位是像素

透視寫在被觀察元素的父盒子上面的

d：就是視距，視距就是一個距離人的眼睛到屏幕的距離。

z：就是 z軸，物體距離屏幕的距離，z軸越大（正值）我們看到的物體就越大

①translateZ🔥

translform:translateZ(100px)：僅僅是在Z軸上移動。
有了透視，就能看到translateZ 引起的變化了
- translateZ：近大遠小
- translateZ：往外是正值
- translateZ：往里是負值

5.4、3D旋轉rotate3d🔥

3D旋轉：3D旋轉指可以讓元素在三維平面內沿著 x軸，y軸，z軸或者自定義軸進行旋轉。

transform: rotateX(45deg) ：沿著X軸正方向旋轉45度
transform: rotateY(45deg) ：沿著Y軸正方向旋轉45度
transform: rotateZ(45deg) ：沿著Z軸正方向旋轉45度
transform: rotate3d(x,y,z,deg) ：沿著自定義軸旋轉 deg為角度(了解即可)

xyz是表示旋轉軸的矢量，是標示你是否希望沿著該軸旋轉，最后一個標示旋轉的角度。

/*沿著X軸旋轉45deg*/ transform: rotate3d(1,0,0,45deg) /*沿著對角線旋轉45deg*/ transform: rotate3d(1,1,0,45deg)

👉左手準則①

左手的手拇指指向 x軸的正方向
其余手指的彎曲方向就是該元素沿著x軸旋轉的方向

👉左手準則②

左手的手拇指指向 y軸的正方向
其余手指的彎曲方向就是該元素沿著y軸旋轉的方向（正值）

5.5、3D呈現transform-style🔥

3D呈現：transform-style

控制子元素是否開啟三維立體環境

transform-style: flat 子元素不開啟3d立體空間默認的

transform-style: preserve-3d 子元素開啟立體空間

代碼寫給父級，但是影響的是子盒子

這個屬性很重要

總結

以上是生活随笔為你收集整理的CSS基础班笔记(三)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 2021年美容师（中级）新版试题及美容师
下一篇： python开发要学哪些内容_Pytho