二、CSS筆記

（一）css概述

1、定義

CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁數據的表現，可以使網頁的表現與數據內容分離。

2、要點

怎么找到標簽
怎么操作標簽對象（element）

3、css的四種引入方式

3.1 行內式

在標簽的style屬性中設定CSS樣式。這種方式不需要再找標簽對象，但沒有體現出CSS樣式分離的優勢，不推薦使用。
<p style="background-color: rebeccapurple">hello yuan</p>

3.2 嵌入式：

將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
<head><style>p{background-color: #2b99ff;}</style>
</head>

3.3 鏈接式

通過html語言規范將一個.css文件引入到HTML文件中：
<head><link href="mystyle.css" rel="stylesheet" type="text/css"/>
</head>

3.4 導入式

將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：
<style type="text/css">@import"mystyle.css";   // 此處要注意.css文件的路徑
</style>　

3.5 推薦方式

導入式固有的一個缺陷：會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。
鏈接式會在網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。
推薦鏈接式。

（二）css選擇器

css的選擇器（Selector），指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素，是寫css代碼的第一個要點，找標簽

1、基礎選擇器

1.1 通用選擇器*

一個星號*，匹配任何元素，如：
* { margin:0; padding:0; }  // 設置所有標簽外邊距和內邊距為0像素

1.2 標簽選擇器E

直接匹配標簽本身，如：
p { color:green; }  // 設置所有<p>標簽的字體顏色是green

1.3 class選擇器.info或E.info

匹配所有class屬性中包含info的元素，可與標簽選擇器配合使用，如：
.info { background-color:#ff0; }  // 設置class屬性包含info的標簽背景顏色是#ff0
div.info { background-color:#ff0; }  // 設置class屬性包含info的<div>標簽背景顏色是#ff0

1.4 id選擇器#info

匹配id屬性等于info的元素，因為標簽的id是唯一標識的，所以只會匹配符合的那一個標簽，如：
#info { background-color:#ff0; }  // 設置id為info的標簽背景顏色是#ff0

2、組合選擇器

2.1 多元素選擇器E,F

同時匹配所有E元素和F元素，E和F之間用逗號分隔，如：
div,p { color:#f00; }  // 設置所有<div>標簽和<p>標簽的字體顏色是#f00

2.2 后代元素選擇器E F

匹配所有屬于E元素后代的F元素（嵌套在E標簽里的F標簽，不論多少層），E和F之間用空格分隔，如：
li a { font-weight:bold;}  // 設置所有<li>標簽的所有子孫<a>標簽的字體加粗

2.3 子元素選擇器E>F

匹配所有E元素的子元素F（只能是緊挨著嵌套的一層），如：
div > p { color:#f00; }  // 設置所有<div>標簽的所有子標簽<p>元素的字體顏色是#f00

2.4 毗鄰元素選擇器E+F

匹配所有緊隨E元素之后的同級元素F，如：
div + p { color:#f00; }  // 設置所有緊隨在<div>標簽之后的<p>標簽的字體顏色是#f00

3、屬性選擇器（主要用1和2，其他了解即可）

3.1 E[att]

匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如“[cheacked]”。以下同。），如：
p[title] { color:#f00; }  // 設置所有具有title屬性（不論何值）的<p>標簽字體顏色為#f00
[title] { color:#f00; }  // 設置所有具有title屬性（不論何值）的標簽字體顏色為#f00

3.2 E[att=val]

匹配所有att屬性等于“val”的E元素，如：

p[title="game"] { color:#f00; }  // 設置所有title屬性="game"的<p>標簽字體顏色為#f00
[title="game"] { color:#f00; }  // 設置所有title屬性="game"的標簽字體顏色為#f00

3.3 E[att~=val]

匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素，如：

p[title~="game"] { color:#f00; }  // 設置所有title屬性有多個值，其中一個值="game"的<p>標簽字體顏色為#f00
[title~="game"] { color:#f00; }  // 設置所有title屬性有多個值，其中一個值="game"的標簽字體顏色為#f00

3.4 E[att^=val]

匹配屬性值以指定值開頭的每個元素，如：

p[title^="ga"] { color:#f00; }  // 設置所有title屬性的值以"ga"開頭的<p>標簽字體顏色為#f00
[title^="ga"] { color:#f00; }  // 設置所有title屬性的值以"ga"開頭的標簽字體顏色為#f00

3.5 E[attr$=val]

匹配屬性值以指定值結尾的每個元素，如：

p[title$="ga"] { color:#f00; }  // 設置所有title屬性的值以"ga"結尾的<p>標簽字體顏色為#f00
[title$="ga"] { color:#f00; }  // 設置所有title屬性的值以"ga"結尾的標簽字體顏色為#f00

3.6 E[attr*=val]

匹配屬性值中包含指定值的每個元素，如：

p[title*="ga"] { color:#f00; }  // 設置所有title屬性的值包含"ga"的<p>標簽字體顏色為#f00
[title*="ga"] { color:#f00; }  // 設置所有title屬性的值包含"ga"的標簽字體顏色為#f00

4、偽類(Pseudo-classes)

CSS偽類是用來選擇元素的特定狀態或位置的選擇器。
以冒號(:)開頭，用于向特定元素在特定狀態下應用樣式。
偽類的作用是根據元素的狀態或位置來改變其樣式，這些狀態可能包括用戶交互（如鼠標懸停、點擊）或元素自身的狀態（如已訪問鏈接、禁用表單元素）。
偽類通常與元素選擇器結合使用，以選擇元素的特定狀態，如a:hover用于選擇鼠標懸停時的鏈接。
格式: 標簽:偽類名稱{ css代碼; }

4.1 anchor（錨點）偽類

又稱為鏈接偽類，主要用于選擇和樣式化HTML中的<a>標簽，控制鏈接的顯示效果，這些偽類根據錨點的不同狀態來應用特定的樣式。以下是常見的錨點偽類：

?:link?：

選擇所有尚未訪問過的鏈接（即默認狀態下的鏈接）。
用于定義了鏈接的常規狀態
示例：a:link { color: blue; } 會將所有未訪問的鏈接文本設置為藍色。

?:visited?：

選擇所有已經訪問過的鏈接。
用于閱讀文章，能清楚的判斷已經訪問過的鏈接。
示例：a:visited { color: purple; } 會將所有已訪問的鏈接文本設置為紫色。
出于隱私考慮，現代瀏覽器對:visited偽類能應用的樣式有所限制，通常只能改變顏色。

?:hover?：

選擇鼠標懸停時的鏈接。
用于產生視覺效果。
示例：a:hover { text-decoration: underline; } 會在鼠標懸停時給鏈接添加下劃線。

?:active?：

選擇被用戶激活（通常是點擊）時的鏈接。
用于表現鼠標按下時的鏈接狀態。
示例：a:active { color: red; } 會在鏈接被點擊時將其文本顏色改為紅色。

?:focus?：

選擇獲得焦點的鏈接（通常通過鍵盤（Tab）導航或點擊獲得）。
常用于添加表單元素的樣式
示例：a:focus { outline: 2px dashed #000; } 會在鏈接獲得焦點時給其添加一個黑色的外框虛線輪廓，焦點消失后消失。

這些偽類可以按照特定的順序來編寫（也稱為“Love-Hate”順序）：:link -> :visited -> :hover -> :active。這個順序是基于用戶與鏈接交互的自然流程，從未訪問到訪問，再到懸停和激活。按照這個順序編寫樣式規則可以確保它們按照預期的方式覆蓋和應用。
<head lang='zh-CN'>
<style type="text/css">a:link {color: blue;text-decoration: none;}a:visited {color: purple;}a:hover {text-decoration: underline;}a:active {color: red;}a:focus {outline: 2px dashed #000;}// 補充：可以懸浮一個區域更改另一個區域的樣式，如：.outer:hover .right{color: red}
</style>
</head>
<body><div class="outer"><a href="#">hello-world</a><a class="right" href="#">go-on</a></div>
</body>
</html>

4.2 其它偽類

動態偽類（如:hover、:active和:focus）不僅限于鏈接元素，還可以應用于任何HTML元素。在表單中，這些動態偽類可以用來增強用戶交互體驗，例如當用戶將鼠標懸停在按鈕上時改變按鈕的樣式，或者當輸入框獲得焦點時改變其邊框顏色。
結構偽類（如:first-child、:last-child、:nth-child、:nth-of-type(n)、:only-child?、:only-of-type?等）則用于選擇具有特定結構關系的元素，與anchor偽類不同，它們不依賴于元素的狀態，而是基于元素在文檔樹中的位置。

?否定偽類:not(selector)?：選擇不匹配指定選擇器的元素。例如，:not(.class)選擇沒有.class類的元素。

UI元素狀態偽類:checked?：選擇被選中的表單元素（例如，復選框或單選按鈕）。

UI元素狀態偽類:disabled?：選擇被禁用的表單元素。

:empty?：選擇沒有任何子元素（包括文本節點）的元素。

:target?：選擇當前活動的錨點目標元素。常用于制作頁面內跳轉。

:valid? 和 ?:invalid?：分別用于選擇通過驗證和未通過驗證的表單元素（如<input>元素）。

5、偽元素Pseudo-elements

概念與用途：
用來在元素的內容前面或后面插入額外的內容的選擇器。
它們以雙冒號(::)開頭（盡管在CSS2中偽元素也可以使用單冒號，但為了區分偽類和偽元素，CSS3規范推薦使用雙冒號），用于向元素的特定部分應用樣式。
偽元素的作用是在元素的內容前面或后面插入文檔樹之外的內容，并對其進行樣式修飾，雖然用戶可以看到這些偽元素生成的內容，但它們實際上并不存在于DOM樹中。
常見的偽元素包括::before、::after、::first-letter、::first-line等

使用方式?：在元素選擇器后添加雙冒號和偽元素名稱，如p::before用于在段落內容前插入額外內容。

5.1 before after偽元素

:before和:after是CSS中的偽元素（在CSS3中更推薦使用雙冒號形式::before和::after來表示偽元素，以與偽類區分開）
它們允許你在一個元素的內容之前或之后插入內容。這些插入的內容不會出現在DOM中，而是通過CSS生成的，通常用于添加裝飾性內容，如圖標、引號或其他視覺效果。

（1）基本用法

:before：在選定元素的內容之前插入內容。
:after：在選定元素的內容之后插入內容。
這兩個偽元素必須與content屬性一起使用，以定義要插入的內容，否則它們不會生效。
content屬性可以包含字符串、圖像或其他可用CSS生成的內容。
不改變DOM結構?：雖然:before和:after可以在視覺上添加內容，但這些內容不會出現在DOM中，因此不會改變文檔的實際內容。
可以像對待普通元素一樣對:before和:after偽元素應用樣式和行為，包括設置寬度、高度、背景、邊框等。
兼容性?：雖然:before和:after在大多數現代瀏覽器中都得到了很好的支持，但使用雙冒號形式::before和::after可以提高代碼的清晰度和兼容性，因為雙冒號形式是CSS3的推薦寫法。

（2）示例

p::before {content: "《";color: blue;
}p::after {content: "》";color: blue;
}
// 上面的CSS代碼會在每個<p>元素的內容之前插入一個藍色的“《”，在其內容之后插入一個藍色的“》”

（3）應用場景

添加裝飾性內容?：如圖標、引號、分隔符等。
?清除浮動?：通過:after偽元素和clear屬性來清除浮動元素對父元素高度的影響。
?創建自定義列表樣式?：在列表項前或后插入自定義樣式。

（4）注意事項

雖然:before和:after偽元素非常強大且靈活，但它們應該被用于添加裝飾性內容，而不是有實際意義的內容，因為用戶無法復制或與之交互這些通過CSS生成的內容。

（三）css優先級和繼承

1、優先級Specificity

CSS樣式在瀏覽器中被解析的先后順序，決定當多個樣式規則應用于同一個HTML元素時，哪個樣式規則最終會被應用的機制。
優先級由選擇器的類型決定，并且可以通過特定的計算方法來量化。

1.1 計分規則

CSS優先級由四個部分組成，按照優先級從高到低排列如下：

?內聯樣式（Inline Styles）?：

優先級最高，直接寫在HTML元素的style屬性中。
計算分數：1000分。

?ID選擇器（ID Selectors）?：

優先級次之，使用#符號標識。
計算分數：100分。

?類選擇器、偽類選擇器、屬性選擇器（Class Selectors, Pseudo-Class Selectors, Attribute Selectors）?：

優先級再次之，分別使用.、:和[]標識。
計算分數：10分。

?元素選擇器、偽元素選擇器（Element Selectors, Pseudo-Element Selectors）?：

優先級最低，使用HTML元素名稱標識。
計算分數：1分。

1.2 優先級算法

每個CSS選擇器都有一個特定的優先級分數，這個分數由選擇器的類型決定，參看1.1計分規則；
當存在多個選擇器組合時，分數累加；
總分越高，優先級越高；
特殊權重：!important，使一個樣式的優先級高于其他任何非內聯樣式的優先級，但低于內聯樣式的優先級。
如果!important聲明沖突，則比較優先權。
優先級相同，按照代碼順序，后定義的樣式覆蓋前面的。
由繼承而得到的樣式沒有specificity的計算，它低于一切其它規則，比如全局選擇符*定義的規則。
使用!important雖然可以強制某一條樣式規則生效，但應盡量避免濫用，因為它會破壞CSS的層疊特性，導致樣式難以維護。

1.3 應用技巧

合理組合選擇器?：當需要覆蓋某個樣式時，可以通過組合多個選擇器來提高優先級。
?避免過度復雜的選擇器?：雖然可以通過組合選擇器來達到較高的優先級，但也會使得選擇器變得過于復雜，不利于維護。
?使用源順序作為最后的手段?：當兩個選擇器具有相同的優先級時，源順序（即樣式表的出現順序）決定了哪一個規則將被應用，后面的會覆蓋前面的，因為CSS的層疊順序決定了樣式的應用方式? 。

1.4 示例

<head lang="en"><style>#p{color: rebeccapurple;}.p{color: #2459a2;}p{color: yellow;}</style>
</head>
<body><p id="p" class="p" style="color: deeppink">hello yuan</p> <!--最終顯示顏色：deeppink-->
</body>

1.5 注意事項

在實際開發中，合理利用優先級規則可以幫助我們更好地組織和管理樣式表。
使用瀏覽器的開發者工具來檢查元素的實際樣式，可以幫助診斷樣式未按預期顯示的原因。

2、css繼承

繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的。
繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代。
例如一個BODY定義了的顏色值也會應用到段落的文本中。
簡單來說，父標簽的樣式會被內嵌的子孫標簽所繼承，除非子元素顯式地設置了不同的值。
即使父元素的權重很高，子元素通過繼承得到的權重也是0，任何顯示申明的規則都可以覆蓋其繼承樣式。這是因為繼承的權重在CSS的優先級計算中是不被考慮的?。
實際開發中，可以利用CSS的繼承特性來簡化樣式表的編寫，避免在多個子元素上重復設置相同的樣式屬性。
同時，也需要注意非繼承屬性的使用，確保在需要時顯式地為子元素設置這些屬性?。

2.1 常見繼承屬性

字體（font）系列屬性、文本（text）系列屬性、顏色（color）屬性、可見性（visibility）屬性、光標（cursor）屬性等。這些屬性在父元素上設置后，子元素通常會繼承相同的值?

2.2 常見非繼承屬性

一些屬性是不會被繼承的，常見的非繼承屬性包括布局相關屬性，如寬度（width）、高度（height）、邊框（border）、外邊距（margin）、內邊距（padding）、背景（background）和顯示類型（display）等。這些屬性在父元素上設置后，子元素不會繼承相同的值，除非子元素顯式地設置了這些屬性?

（四）CSS的單位

在CSS中，單位用于指定元素的大小、間距、字體大小等屬性。這些單位可以分為絕對單位、相對單位和自動（auto）三種類型。

1、絕對單位

絕對單位表示一個固定的值，在不同設備和環境下保持固定，不會因屏幕大小或分辨率以及瀏覽器設置而改變。常見的絕對單位包括：

?px（像素）?：

最常用的絕對單位，基于屏幕的分辨率。一個像素通常對應于屏幕上的一個點。
由于不同設備和屏幕的像素密度不同，相同的像素值在不同設備上可能會呈現不同的物理尺寸。

?in（英寸）?：

基于實際物理長度，1英寸等于2.54厘米。

?cm（厘米）?：

基于實際物理長度。

?mm（毫米）?：

基于實際物理長度。

?pt（點）?：

通常用于打印樣式，1點等于1/72英寸。

2、相對單位

相對單位是基于其他元素的大小或視口（viewport）的大小來定義的，因此它們會根據父元素或視口的大小而改變，使得布局更加靈活和響應式，因為它們能夠根據屏幕尺寸或用戶設置自動調整元素的大小。常見的相對單位包括：
?%（百分比）?：

相對于父元素的大小。例如，如果父元素的寬度是200px，而子元素的寬度設置為50%，那么子元素的寬度就是100px。

?em?：

相對于當前元素的字體大小。例如，如果元素的字體大小為16px，那么1em就等于16px。
?rem?：
相對于根元素（<html>）的字體大小（很多瀏覽器的默認值是16px）的倍數。
使用場景：
響應式設計：通過簡單地改變根元素的字體大小來調整整個頁面的布局，而不需要逐個修改每個元素的 padding、margin 或其他長度屬性，這使得布局更加靈活和響應式

?一致性?：使用 rem 可以確保在整個頁面中，不同元素之間的間距保持一致性，特別是當你想要在不同的屏幕尺寸或設備上保持一致的視覺效果時。

可訪問性?：當用戶通過瀏覽器設置改變字體大小時，使用 rem 單位的布局會自動調整以適應新的字體大小，滿足可訪問性需求。
/* 設置所有段落元素的內邊距為 1rem */
p {padding: 1rem;
}/* 設置特定類的內邊距 */
.my-class {padding: 1rem;
}
/*在上述示例中，無論是段落元素還是具有特定類的元素，它們的內邊距都將被設置為 1rem。這意味著，如果根元素的字體大小是 16px，那么這些元素的內邊距將是 16px。如果根元素的字體大小改變，那么這些元素的內邊距也會相應地改變
*/
?vw和vh（視口寬度和高度）?：
相對于視口（視口是用戶網頁的可視區域，它隨著窗口的縮放而改變）寬度（Viewport Width）和高度（Viewport Height）的1%。
例如，1vw等于視口寬度的1%，1vh等于視口高度的1%，100vw等于當前視口的完整寬度，100vh 等于當前視口的完整高度。
使用場景：

全屏布局?：當你想要創建一個占據整個瀏覽器窗口高度的元素時，可以使用 height: 100vh;。這對于創建全屏背景、全屏圖像或全屏視頻等效果特別有用。

響應式設計?：雖然 vh 單位本身不是響應式的（因為它基于視口大小，而不是基于元素或父容器的大小），但你可以結合媒體查詢來使用它，以在不同的屏幕尺寸下調整元素的高度。

創建垂直滾動效果?：如果你有一個內容區，你希望它在垂直方向上滾動，并且這個區域的高度應該與視口高度相匹配，那么你可以使用 height: 100vh; 來設置這個區域的高度。

注意事項：
視口變化?：當瀏覽器窗口的大小改變時，使用 vh 單位設置的高度也會相應地改變。這意味著，如果你的布局依賴于特定的視口高度，你需要確保在視口大小變化時，布局仍然能夠保持可用和美觀。
兼容性?：雖然現代瀏覽器都支持 vw和vh 單位，但在一些較舊的瀏覽器或某些特定的瀏覽器環境中（如某些移動設備的瀏覽器），可能不支持或支持不完全。因此，在使用 vw或vh 單位時，最好進行跨瀏覽器測試。
內邊距、邊框和外邊距?：記得 height 屬性只設置內容區的高度。如果你想要包括內邊距、邊框或外邊距在內的總高度與視口高度相匹配，你可能需要使用 box-sizing 屬性來調整元素的盒模型。
示例：
示例
/* 設置全屏背景 */
.full-screen-background {height: 100vh;background-color: #333; /* 示例背景顏色 */
}/* 創建垂直滾動的內容區 */
.content-area {height: 100vh;overflow-y: auto; /* 允許垂直滾動 */
}
?vmin? 和 ?vmax?：

分別基于視口的最小和最大邊。1vmin等于視口最小邊的1%，1vmax等于視口最大邊的1%。

3、自動auto

auto不是一個具體的單位，而是一個特殊的關鍵字，用于讓瀏覽器自動計算元素的大小或位置，例如：

使用width: auto;可以讓瀏覽器根據內容的大小自動調整元素的寬度；
margin: auto;可以用于水平居中對齊塊級元素。

4、適用場景

在實際開發中，選擇合適的單位取決于具體的需求和上下文。
絕對單位適用于需要精確控制元素大小的情況；
相對單位則更適合創建響應式布局；
自動（auto）則提供了一種讓瀏覽器自動處理布局細節的方法，從而簡化了開發過程。

（五）CSS的常用屬性

1、顏色屬性color

值的表示方法：

顏色的英文單詞，如：<div style="color:blueviolet">ppppp</div>
顏色的十六進制代碼，如：<div style="color:#ffee33">ppppp</div>
用紅、綠、藍三種顏色的十進制調合表示，rgb(0~255，0~255， 0~255)，如：<div style="color:rgb(255,0,0)">ppppp</div>
用紅、綠、藍三種顏色的十進制調合表示+透明度，rgba(0~255，0~255， 0~255，0~1)，如：<div style="color:rgba(255,0,0,0.5)">ppppp</div>

各種表示方法的顏色表，可以參照：https://blog.csdn.net/2301_78888169/article/details/143754235

2、字體屬性font

字體大小：font-size，可用像素px/百分比%/較大larger或較小smaller表示: 20px/50%/larger(smaller)
字體類型：font-family:'Lucida Bright'
字體粗細：font-weight，用數字100到100以及lighter/bold/border表示
斜體：font-style: inherit/italic/normal/oblique

3、背景屬性background

背景顏色：background-color: cornflowerblue（值參考8.1顏色屬性）
背景圖片：background-image: url('圖片路徑');（圖片尺寸不會變化，如果小于背景區域，則空白部分會復制圖片平鋪滿）
背景圖片是否平鋪：background-repeat: no-repeat;(repeat:平鋪滿，repeat-x橫向平鋪，repeat-y縱向平鋪，no-repeat不平鋪)
背景位置：background-position: right top（或20px 20px）;(橫向位置：left center right)(縱向位置：top center bottom)（與左部橫向距離：20px）（與頂部縱向距離?