【動畫消消樂】HTML+CSS 自定義載入動畫：清新摺疊方塊效果 063（附原始碼及原理詳解）
阿新 • • 發佈：2021-07-22
-
結構 HTML
-
表現 CSS
-
行為 JS
CSS
CSS
---層疊樣式表
---網頁實際是一個多層結構，通過css可以分別為網頁的每一個層來設定樣式
---總之一句話，css用來設定網頁中元素的樣式
一個樣式的列表
層疊？ 樣式是分層的結構，一層壓一層，俯視
1、行內樣式 內聯樣式（不推薦使用）
<body>
<p style="color: darkred; font-size: 210px;"> 少小離家老大回</p>
</body>
2、樣式編寫到head中的styple標籤中 內部樣式表，通過css選擇器選中元素，併為其設定各種樣式，
可以同時為多個標籤設定樣式，並且修改時只需要修改一處
內部樣式更加方便複用
<style>
p{
color:darksalmon;
font-size: 110px;
}
</style>
3、外部樣式表，將css樣式編寫到一個檔案中，然後引入
CSS語法
selectors 選擇器
宣告塊 通過宣告塊，指定要為元素設定的樣式
CSS常用選擇器
簡單選擇器
元素選擇器：根據標籤名來選中指定元素
p{} h1{} div{}
id選擇器：根據元素id屬性值選中一個元素
#box{} #red{}
class 是一個標籤屬性，它和id類似，不同的是class可以重複，通過class屬性來為元素分組
class選擇器：根據元素的class來選中一組元素
.blue{} .abc{}
通配選擇器，選中頁面中的所有元素
*{}
交集選擇器
div.red{
font-size: 30px;
}
必須使用元素選擇器開頭
.a.b.c{
font-size: 14px;
}
選擇器分組 並集選擇器
h1, span{}
子元素選擇器
父元素 > 子元素{}
div > span{
}
後代元素選擇器 選中指定元素內的指定後代元素
祖先 後代{}
div span{
}
選擇下一個兄弟
前一個 + 後一個
p + span {}
選擇後邊的所有兄弟
p ~ span{}
屬性選擇器
p[title]{
color: orange;
}
[屬性名] ： 選擇含有指定屬性的元素
[屬性名=屬性值] ：選擇含有指定屬性和屬性值的元素
[屬性名^=屬性值]: 選擇屬性值以指定值開始的元素
[屬性名$=屬性值]: 選擇屬性值以指定值結尾的元素
[屬性名*=屬性值]: 萬用字元
偽類選擇器
不存在的類，特殊的類
偽類用來描述一個元素的特殊狀態
比如第一個子元素、被點選的元素、滑鼠移入的元素...
偽類一般情況下都使用：開頭
:first-child 第一個子元素
:last-child 最後一個子元素
:nth-child() 第n個
特殊值：
n 0-+無窮
even / 2n 選擇偶數位元素
odd / 2n+1 選擇奇數位
以上偽類都是根據所有的子元素進行排序
:first-of-type
:last-of-type
:nth-of-type
這幾個偽類的功能和上述類似，不同點是他們是在同類型中進行排序
:not 否定偽類 將符合條件的元素從選擇器中去除
超連結的偽類
偽元素
::first-letter 第一個字母
::first-line 第一行
::selection 選中的
::before{
content: "abc"
}
::after{
content:"abc"
}
通過befroe after新增的內容無法選中