LOJ #124. 除數函式求和 1 題解
阿新 • • 發佈:2021-07-25
-
結構 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新增的內容無法選中