CSS快速入門
簡介
層疊樣式表 — 也就是CSS — 是你在HTML之後應該學習的第二門技術。HTML用於定義內容的結構和語義，CSS用於設計風格和佈局。比如，您可以使用CSS來更改內容的字型、顏色、大小、間距，將內容分為多列，或者新增動畫及其他的裝飾效果；
通俗理解為：CSS就是為了給HTML標籤修改樣式；
語法結構
語法結構：
選擇器 {
屬性名1:屬性值1;
屬性名2:屬性值2
}
如何註釋
/*註釋內容*/
快捷鍵：ctrl+? (pycharm)
引入方式
1.style內部直接編寫css程式碼,平時學習、練習的時候推薦使用
2.link標籤引入外部css檔案,正式工作、實際生產環境推薦使用
選擇器
簡介
CSS選擇器是CSS規則的第一部分。它是元素和其他部分組合起來告訴瀏覽器哪個HTML元素應當是被選為應用規則中的CSS屬性值的方式。選擇器所選擇的元素，叫做“選擇器的物件”；
css是用來調節標籤樣式的 那為什麼需要學選擇器呢?
因為同一個頁面上有很多相似的標籤 並且這些標籤在不同的位置有不同的樣式 所以為了能夠區分 ，我們肯定先需要學習如何查詢指定的標籤
選擇器列表
如果你有多個使用相同樣式的CSS選擇器，那麼這些單獨的選擇器可以被混編為一個“選擇器列表”，這樣，規則就可以應用到所有的單個選擇器上了。例如，如果我的
h1和.special類有相同的CSS，那麼我可以把它們寫成兩個分開的規則。
/*方式一*/
h1 {
color: blue;
}
.special {
color: blue;
}
/*方式二*/
h1, .special {
color: blue;
}
/*如果出現語法錯誤，那麼樣式不會生效*/
/*相同修改，優先順序一般最下面的生效*/
基本選擇器
標籤選擇器
通過標籤名直接查詢
/*查詢所有的div標籤*/
div {
color: red;
}
類選擇器
類選擇器的關鍵符號為
.句點符號，是通過class值查詢標籤；
/*查詢所有含有c1樣式類的標籤*/
.c1 {
color: red;
}
id選擇器
id選擇器關鍵符號位
#警號，通過id值查詢標籤；
/*查詢id為d1的標籤*/
#d1 {
color: orange;
}
通用選擇器（不重要）
修改body內所有的標籤；
/*body內所有的標籤*/
* {
color: darkgray;
}
組合選擇器
為了區分巢狀標籤之間的關係，我們發明了一種稱呼，如下：
<div>
<p>
<span></span>
</p>
</div>
/*
span是p的兒子 是div的孫子也可以說是div的後代
p是div的兒子也是div後代 是span的父親
div是p的父親是span的爺爺 也可以說是他們的祖先
*/
後代選擇器
特徵符號是
空格
/*查詢div內部所有的後代span*/
div span {
color: red;
}
兒子選擇器
特徵是
>大於號
/*查詢div內部所有的兒子span*/
div > span {
color: greenyellow;
}
相鄰選擇器
特徵為
+加號，這個查詢的是同級別下面緊挨著的第一個span
/*查詢同級別下面緊挨著的第一個span(不能有其他標籤間隔)*/
div + span {
color: pink;
}
弟弟選擇器
特徵為
~
/*查詢同級別下面所有的span(不需要緊挨著)*/
div ~ span {
color: deeppink;
}
屬性選擇器
CSS 屬性選擇器通過已經存在的屬性名或屬性值匹配元素;
語法
-
[attr]表示帶有以 attr 命名的屬性的元素。
-
[attr=value]表示帶有以 attr 命名的屬性，且屬性值為 value 的元素。
-
[attr~=value]表示帶有以 attr 命名的屬性的元素，並且該屬性是一個以空格作為分隔的值列表，其中至少有一個值為 value。
-
[attr|=value]表示帶有以 attr 命名的屬性的元素，屬性值為“value”或是以“value-”為字首（"
-"為連字元，Unicode 編碼為 U+002D）開頭。典型的應用場景是用來匹配語言簡寫程式碼（如 zh-CN，zh-TW 可以用 zh 作為 value）。 -
[attr^=value]表示帶有以 attr 命名的屬性，且屬性值是以 value 開頭的元素。
-
[attr$=value]表示帶有以 attr 命名的屬性，且屬性值是以 value 結尾的元素。
-
[attr*=value]表示帶有以 attr 命名的屬性，且屬性值至少包含一個 value 值的元素。
-
[attr operator value i]在屬性選擇器的右方括號前新增一個用空格隔開的字母
i（或I），可以在匹配屬性值時忽略大小寫（支援 ASCII 字元範圍之內的字母）。 -
[attr operator value s]在屬性選擇器的右方括號前新增一個用空格隔開的字母
s（或S），可以在匹配屬性值時區分大小寫（支援 ASCII 字元範圍之內的字母）。
示例
/* 存在title屬性的<a> 元素 */
a[title] {
color: purple;
}
/* 存在href屬性並且屬性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
color: green;
}
/* 存在href屬性並且屬性值包含"example"的<a> 元素 */
a[href*="example"] {
font-size: 2em;
}
/* 存在href屬性並且屬性值結尾是".org"的<a> 元素 */
a[href$=".org"] {
font-style: italic;
}
/* 存在class屬性並且屬性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
padding: 2px;
}
分組與巢狀
如果存在多個標籤需要調整為同一樣式，那麼使用分組和巢狀可以減少程式碼的冗餘；
匹配標籤之間用逗號隔開，標籤與標籤是或的關係；
並列寫可以標籤和標籤、標籤和選擇器、意思就是可以多個相同選擇器或多個不同選擇器都可以並列使用；
/*並列的情況*/
/* 多個相同選擇器並列使用*/
div,span,p { /*查詢div或者span或者p*/
color: red;
}
/*多個不同選擇器並列使用*/
div,#d1,.c1 { /*標籤查詢div id查詢d1 類查詢c1*/
color: red;
}
/*不併列的情況*/
/*不併列同樣可以使用組合選擇器*/
.c1 p { /*查詢class為c1的後代p標籤*/
color: red;
}
/*直接篩選*/
div#d1 { /*查詢id為d1的div標籤*/
color: red;
}
div.c1 { /*查詢class為c1的div標籤*/
color: red;
}
偽類選擇器
CSS 偽類 是新增到選擇器的關鍵字，指定要選擇的元素的特殊狀態。例如，
:hover可被用於在使用者將滑鼠懸停在按鈕上時改變按鈕的顏色。
語法
selector:pseudo-class {
property: value;
}
示例
/*滑鼠懸浮在上面*/
a:hover {
color: orange;
}
/*a標籤預設的顏色會變化 第一次是藍色 後面是紫色*/
input:focus {
background-color: red;
}
/*我們將input框被使用者點選即將錄入資料的過程看成是focus狀態(聚焦狀態)*/
標準偽類索引
:active:any-link:blank:checked:current(en-US):default:defined:dir():disabled:drop:empty:enabled:first:first-child:first-of-type:fullscreen:future(en-US):focus:focus-visible:focus-within:has():host:host():host-context():hover:indeterminate:in-range:invalid:is():lang():last-child:last-of-type:left:link:local-link(en-US):not():nth-child():nth-col()(en-US):nth-last-child():nth-last-col()(en-US):nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:past(en-US):placeholder-shown:read-only:read-write:required:right:root:scope:target:target-within(en-US):user-invalid(en-US):valid:visited:where()
選擇器參考表
| 選擇器 | 示例 | 學習CSS的教程 |
|---|---|---|
| 型別選擇器 | h1 { } |
型別選擇器 |
| 通配選擇器 | * { } |
通配選擇器 |
| 類選擇器 | .box { } |
類選擇器 |
| ID選擇器 | #unique { } |
ID選擇器 |
| 標籤屬性選擇器 | a[title] { } |
標籤屬性選擇器 |
| 偽類選擇器 | p:first-child { } |
偽類 |
| 偽元素選擇器 | p::first-line { } |
偽元素 |
| 後代選擇器 | article p |
後代運算子 |
| 子代選擇器 | article > p |
子代選擇器 |
| 相鄰兄弟選擇器 | h1 + p |
相鄰兄弟 |
| 通用兄弟選擇器 | h1 ~ p |
通用兄弟 |