整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1.CSS介紹：
引題：
網站中的所有頁面的標題都是黑色
老板需要將頁面中的所有的標題改為紅色
定義：
Cascade Style Sheet 層疊樣式表
html 在一個網頁中負責的事情是一個頁面的結構
css(層疊樣式表) 在一個網頁中主要負責了頁面的數據樣式。
優勢：
使得頁面的結構和表現分離
2.CSS引入方式：
行內樣式：
<h2 style="color:#0F0">Hello World</h2>
內部樣式：
內部樣式
外部樣式：
外部樣式
優先級問題？？？
行內樣式 > 內部樣式 > 外部樣式 就近原則
link和@import引入外部樣式的區別？？？
link與@import區別
3.CSS選擇器
作用：選擇器的作用就是找到對應的數據進行樣式化
格式：選擇器{ 屬性：屬性值; }
常見的選擇器
4.偽類和偽元素：
它們允許應用的樣式用于文檔不存在的結構上，或者是通過當前元素的狀態甚至是文檔自身的狀態而推斷的某些東西上。偽類選擇器就是對元素處于某種狀態下進行樣式的。
<a>標簽的偽使用
案例嘗試
5.常用操作屬性
背景與文本
表格
邊框
6.盒子模型
盒子模型就是把一個html邊框比作成了一個盒子的邊框，盒子模型要做用于操作數據與邊框之間的距離或者 是邊框與邊框之間的距離。
盒子模型主要是用于操作內邊距(padding)與外邊距（margin）
盒子模型
嘗試代碼
絕對定位與相對定位區別：
position: absolute;絕對定位：絕對定位是相對于元素最近的已定位的祖先元素（即是設置了絕對定位或者相對定位的祖先元素）。如果元素沒有已定位的祖先元素，那么它的位置則是相對于最初的包含塊（body）。
絕對定位本身與文檔流無關，因此不占空間，普通文檔流中的元素的布局就當絕對定位的元素不存時一樣，所以 它們可以覆蓋頁面上其他的元素，且可以通過z-index屬性來控制這些層的對方順序。
絕對定位
position: relative;相對定位：相對定位是相對于元素在文檔中的初始位置——首先它出現在它所在的位置上（即不設置position時的位置，然后通過設置垂直或水平位置，讓這個元素“相對于”它的原始起點進行移動；
注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。
相對定位
PS:這里只是對css的簡單使用總結，里面還有很多技術，可以參考菜鳥教程，W3CSCHOOL等在線教程
如果我們的頁面上存在非常多的樣式，譬如有我們開發頁面的時候的自定義樣式，也有引入的組件庫樣式。這時候樣式將會非常混亂難以管理。
當我們想覆蓋一些本身非我們書寫的樣式時候，往往不得不通過使用優先級權重更高的樣式名，去覆蓋那些樣式。
同時，當樣式優先級感到難以控制時，開發者習慣濫用 !important 去解決，這又循環導致了后續更混亂的樣式結構。
基于讓 CSS 得到更好的控制和管理的背景，CSS @layer 應運而生。
CSS Cascade Layers，也叫做CSS級聯層，是Cascading and Inheritance Level5 規范中新增了一個新的 CSS 特性。
@layer聲明了一個 級聯層， 同一層內的規則將級聯在一起， 這給予了開發者對層疊機制的更多控制。語法也非常簡單，看這樣一個例子：
@layer utilities {
/* 創建一個名為 utilities 的級聯層 */
}這樣，我們就創建一個名為 utilities 的 @layer 級聯層。
@layer規則可以通過三種方式其一來創建級聯層。第一種方法如上方代碼所示，它創建了一個塊級的@規則，其中包含作用于該層內部的CSS規則。
@layer utilities {
.padding-sm {
padding: .5rem;
}
.padding-lg {
padding: .8rem;
}
}一個級聯層同樣可以通過 @import 來創建，規則存在于被引入的樣式表內：
@import(utilities.css) layer(utilities);你也可以創建帶命名的級聯層，但不指定任何樣式。例如，單一的命名層：
@layer utilities或者，多個命名層也可以被同時定義。例如：
@layer theme, layout, utilities這一做法很有用，因為層最初被指定的順序決定了它是否有父級層。對于聲明而言，如果同一聲明在多個級聯層中被指定，最后一層中的將優先于其他層。
因此，在上面的例子中，如果 theme 層和 utilities 層中存在沖突的規則，那么 utilities 層中的將優先被應用。
即使 utilities 層中規則的 優先級低于 theme 層中的，該規則仍會被應用。一旦級聯層順序建立之后，優先級和出現順序都會被忽略。
這將使創建CSS選擇器變得更加簡單，因為你不需要確保每一個選擇器都有足夠高的優先級來覆蓋其他沖突的規則，你只需要確保它們出現在一個順序更靠后的級聯層中。
注：在已經聲明級聯層的名字后，它們的順序隨即被確立，你可以重復聲明某級聯層的名字來向其添加CSS規則。這些樣式將被附加到該層的末尾，且級聯層之間的順序不會改變。
其他不屬于任何一級聯層的樣式將被集中到同一匿名層，并置于所有層的前部，這意味著任何級聯層內定義的規則都將覆蓋外部聲明的規則。
級聯層允許嵌套，例如：
@layer framework {
@layer layout {
}
}向 layout 層內部的 framework 層附加規則，只需用 . 連接這兩層。
@layer framework.layout {
p {
margin-block: 1rem;
}
}如果創建了一個級聯層但并未指定名字，例如：
@layer {
p {
margin-block: 1rem;
}
}那么則稱為創建了一個匿名層。除創建后無法向其添加規則外，該層和其他命名層功能一致。
@layer [ <layer-name># | <layer-name>? {
<stylesheet>
} ]級聯層可以通過多種方式聲明：
1、使用@layer 塊規則，并立即為其分配樣式：
@layer reset {
* { /* Poor Man's Reset */
margin: 0;
padding: 0;
}
}2、使用規則@layer 語句，沒有指定任何樣式：
@layer reset;3、將@import 與layer關鍵字或layer()函數一起使用
@import(reset.css) layer(reset);以上每一個都創建了一個名為 的級聯層reset。
級聯層會按它們聲明的順序排序。
在下面的例子中，我們建立四個級聯層：reset，base，theme，和utilities。
@layer reset { /* 創建級聯層 “reset” */
* {
margin: 0;
padding: 0;
}
}
@layer base { /* 創建級聯層 “base” */
…
}
@layer theme { /* 創建級聯層 “theme” */
…
}
@layer utilities { /* 創建級聯層 “utilities” */
…
}按照它們的聲明順序，層順序變為：
reset
base
theme
utilities重復使用級聯層名稱時，樣式將附加到現有級聯層。級聯層的順序保持不變，因為只有第一次的出現已經確定順序：
@layer reset { /* 創建第一個級聯層 “reset” */
…
}
@layer base { /* 創建第二個級聯層 “base” */
…
}
@layer theme { /* 創建第三個級聯層 “theme” */
…
}
@layer utilities { /* 創建第四個級聯層 “utilities” */
…
}
@layer base { /* 會將樣式添加至級聯層“base” */
…
}重新使用級聯層名稱時層順序保持不變的使@layer 語法變得更加方便和嚴謹。使用它，可以預先建立圖層順序，然后將所有 CSS 附加到它：
@layer reset; /* 創建第一個級聯層 “reset” */
@layer base; /* 創建第二個級聯層 “base” */
@layer theme; /* 創建第三個級聯層“theme” */
@layer utilities; /* 創建第四個級聯層 “utilities” */
@layer reset { /* 添加樣式至級聯層 “reset” */
…
}
@layer theme { /* 添加樣式至級聯層 “theme” */
…
}
@layer base { /* 添加樣式至級聯層 “base” */
…
}
@layer theme { /* 添加樣式至級聯層 “theme” */
…
}當然你可以用更短的語法來聲明級聯層，
@layer reset, base, theme, utilities;從上面可以看出，多個級聯層被聲明時，最后一個級聯層的聲明會獲勝。像這樣，
@import(reset.css) layer(reset); /* 第一個級聯層 */
@layer base { /* 第二個級聯層 */
form input {
font-size: inherit;
}
}
@layer theme { /*第三個級聯層 */
input {
font-size: 2rem;
}
}按以往CSS級聯來進行分析的話，form input（多層級）的優先級會大于input,但是由于級聯層所起的作用，@layer theme的input會取勝。
級聯層支持嵌套使用，如下：
@layer base { /* 第一個級聯層*/
p { max-width: 70ch; }
}
@layer framework { /* 第二個級聯層 */
@layer base { /* 第二級聯層的嵌套子級聯層1 */
p { margin-block: 0.75em; }
}
@layer theme { /* 第二級聯層的嵌套子級聯層2 */
p { color: #222; }
}
}在這個例子中有兩個級聯外層：
base
framework
該framework層本身也包含兩層：
base
theme
如果要將樣式附加到嵌套級聯層，需要使用以下全名來引用它，
@layer framework {
@layer default {
p { margin-block: 0.75em; }
}
@layer theme {
p { color: #222; }
}
}
@layer framework.theme {
/* 這些樣式會被添加到@layer framework層里面的theme層 */
blockquote { color: rebeccapurple; }
}@media (min-width: 30em) {
@layer layout {
.title { font-size: x-large; }
}
}
@media (prefers-color-scheme: dark) {
@layer theme {
.title { color: white; }
}
}如果第一個@media (min-width: 30em)匹配（基于視口尺寸），則layout級聯層層將在圖層順序中排在第一位。如果只有@media (prefers-color-scheme: dark)匹配，theme則將是第一層。
如果兩者匹配，則圖層順序將為layout, theme。如果沒有匹配，則不定義層。
CSS的全稱是
Cascading Style Sheets，
中文翻譯為“層疊樣式表”。
1、聲明沖突
● 什么是聲明沖突？
舉個栗子：
【1】代碼：
【2】顯示效果：
通過上述栗子，我們可以看出什么是“聲明沖突”。
所謂“聲明沖突”就是同一樣式，多次應用到同一元素。
● 怎么解決聲明沖突？
沖突 !=錯誤
通過CSS層疊解決聲明沖突，瀏覽器會自動處理。
2、層疊
● 層疊的三部曲
● 比較重要性（優先級）
先了解幾個概念：
① 樣式表的分類：
I、用戶樣式表
瀏覽器的用戶提供。
II、作者樣式表
網頁開發者提供。
III、默認樣式表
瀏覽器自身提供。
② 重要聲明與普通聲明
若屬性值后跟上! important 就表示這是一條重要聲明，反之則是普通聲明。
注意：一般不建議使用! important ，在實際開發中，需求在不斷變化，重要聲明可能變成普通申明。
③ 重要性（優先級）從高到低：
重要性（優先級）高的會替換重要性（優先級）低的樣式。
● 比較特殊性
比較特殊性，看選擇器的適用范圍的大小。
總體規則：選擇器選中的范圍越窄，越特殊。
越特殊的樣式會被最終應用。
特殊性從高到低：內聯樣式——id選擇器——類選擇器——元素選擇器——通配符選擇器
在比較特殊性時，每個沖突的聲明會生成四位數（a b c d）來比較特殊性，值越大，越特殊。
千位：如果是內聯樣式，記1，否則記0。
看下面
百位：等于選擇器中id選擇器的數量
十位：等于選擇器中所有類選擇器、屬性選擇器、偽類選擇器的數量
個位：等于選擇器中所有元素選擇器、偽元素選擇器的數量
● 比較源次序
當CSS樣式的重要性和特殊性都相同時，
比較源次序，簡單說就是最后出現的聲明勝出，其他的淘汰。
3、小試牛刀
● html代碼
● css代碼
當元素的一個繼承屬性 （inherited property）沒有指定值時，則取父元素的同屬性的計算值 computed value。只有文檔根元素取該屬性的概述中給定的初始值（initial value）（這里的意思應該是在該屬性本身的定義中的默認值）。
通常，跟文字內容相關的屬性都能被繼承。
1、繼承屬性的一個典型例子就是 color 屬性。給出以下樣式規則：
p { color: green; }
<p>This paragraph has <em>emphasized text</em> in it.</p>
…文本 "emphasized text" 就會呈現為綠色，因為 em 元素繼承了 p 元素 color 屬性的值，而沒有獲取 color 屬性的初始值（這個 color 值用于頁面沒有指定 color 時的根元素）。
2、非繼承屬性的一個典型例子就是 border 屬性。給出以下樣式規則：
p { border: medium solid; }
<p>This paragraph has <em>emphasized text</em> in it.</p>
…文本 "emphasized text" 就沒有邊框，因為 border-style 屬性的初始值為none。
3、如何查看一個元素是默認繼承還是默認不繼承？
● 查看權威網站：
https://developer.mozilla.org/zh-CN/docs/Web/HTML
● 比如查看background是否默認繼承
4、特殊CSS屬性值
- inherit：手動（強制）繼承，將父元素的值取出應用到該元素
- initial：初始值，將該屬性設置為默認值
1、CSS渲染過程
● 確定聲明值
參考樣式表中沒有沖突的聲明，作為CSS屬性值
● 層疊沖突
對樣式表有沖突的聲明使用層疊規則，確定CSS屬性值
● 使用繼承
對仍然沒有值的屬性，若可以繼承，則繼承父元素的值
● 使用默認值
對仍然沒有值的屬性，使用默認值
2、小試牛刀
問題：
a元素中的“”顯示的是什么顏色？
p元素中的“Python大星”顯示的是什么顏色？
why？歡迎評論區留言。
>>>《Python Web全棧之旅04--Web前端●走入CSS的世界》
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
