一文带你认识CSS
??前面的話??
本篇文章將介紹一些CSS相關的知識，CSS能夠將HTML頁面優化，變得更加的細膩，并且頁面的創造性更高，可以理解為“化妝術”。
📒博客主頁：未見花聞的博客主頁
🎉歡迎關注🔎點贊👍收藏??留言📝
📌本文由未見花聞原創，CSDN首發！
📆首發時間：🌴2022年5月20日🌴
??堅持和努力一定能換來詩與遠方！
💭參考書籍：📚《MDN》
💬參考在線編程網站：🌐牛客網🌐力扣
博主的碼云gitee，平常博主寫的程序代碼都在里面。
博主的github，平常博主寫的程序代碼都在里面。
🍭作者水平很有限，如果發現錯誤，一定要及時告知作者哦！感謝感謝！
📌導航小助手📌
- 1.什么是CSS？
- 2.CSS基本知識
- 2.1在HTML引入CSS
- 2.2選擇器
- 2.3CSS屬性
- 2.3.1文本屬性
- 2.3.2文本格式
- 2.3.3背景屬性
- 2.3.4設計圓角矩形與圓
- 2.3.5CSS顯示模式
- 2.3.6邊距與邊框
- 2.3.7彈性布局
- 3.CSS案例：實現一個經典的布局案例
1.什么是CSS？
CSS是什么呢？去一趟韓國你就知道了（一個梗，開玩笑）,它可以將一個漂亮的小姐姐整成美若天仙，沉魚落雁，神采奕奕的神仙小姐姐，反正就是非常牛逼就是了。停，說錯了，不是給小姐姐化，而是給我們的網頁頁面進行化妝。
我們知道使用HTML寫出來的頁面，我們只能呵呵，太丑了，而CSS可以將頁面優化的非常好看，具體有多好看，找一個你最喜歡的網頁，就是那么好看。
換句話說，CSS可以自由地設置網頁的布局，只要你能想到的展示頁面，都能做出來，如果做不出來，那做不出來咯。
正式點，CSS即層疊樣式表，CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
2.CSS基本知識
2.1在HTML引入CSS
內部樣式
<!-- 內部樣式 --><style>div{color: orange;}</style><div>內部樣式使用CSS，建議在CSS代碼比較簡單的時候這么寫。</div>內聯樣式
<!-- 內聯樣式 --><div style="color: orange;">內聯樣式使用CSS，建議在CSS代碼特別簡單的時候這么寫，多數情況也會搭配JS。<br>只對當前所在的標簽生效。</div>外部樣式
顯示效果：
2.2選擇器
像上面我們使用內部或外部樣式引用CSS代碼時，那個大括號前面帶的一個標簽名就是一個選擇器，這種選擇器顧名思義，就叫做標簽選擇器。針對選擇的這個標簽，一個html里面所有帶此標簽的代碼都會生效。
選擇的標簽 {CSS屬性; }CSS的選擇器包括兩類，一類是基礎選擇器，另一類是復合選擇器。
基礎選擇器又包括標簽選擇器，類選擇器，id選擇器，通配符選擇器等。
復合選擇器包括后代選擇器
類選擇器可以隨心所欲地選擇想要的元素，前提得先為標簽添加class屬性，選擇時需要使用.+class屬性名來進行元素的選擇。
.class屬性值 {CSS屬性; }id選擇器，可以根據標簽的id屬性來找到對應的元素，同一頁面中id屬性不能重復。
通配符選擇器，直接使用*來直接選擇頁面上所有的元素。
演示：
這個可以用來設置頁面的默認樣式。
后代選擇器，可以通過基礎選擇器組合找到某一元素的子元素或更后代的元素。
/*選擇器中間必須有空格*/ 選擇器1 選擇器2{屬性; }演示：
如果空格漏掉了就會去找元素標簽為ol并且class值為java的元素。
子選擇器，能夠選擇某個元素中的子元素，子元素后代元素不能被選擇，這是和后代選擇器的區別。
選擇器1>選擇器2{CSS屬性; }演示：
并集選擇器，其實就是同時選擇多個類型的元素。
選擇器可以是基礎的，也可以是復合的。
演示：
偽類選擇器，就是當遇到不同的事件時，有不同的格式反應，也就是添加一些過渡的樣式，這方面JS做得更加豐富一點，比如鼠標觸碰文字是一種樣式，不觸碰是另外的一種樣式。
如：
hover 選擇鼠標指針懸停上的元素
active 選擇鼠標按下了但是未彈起的元素
鼠標懸停：
效果：
鼠標按住：
效果：
當然選擇器還有很多很多，我們介紹了最常用的幾個。當多個選擇器選擇同一個元素時，會進行屬性的疊加，具體疊加規則就不細說了，因為我也不知道。
2.3CSS屬性
2.3.1文本屬性
文字的顏色與大小前面演示的時候有寫，常用文本CSS屬性如下：
- color，表示字體顏色，可以使用常用顏色的英文或使用rgb或rgba（比rgb多一維透明度）比例調色，十六進制也可以表示rgb的顏色。
- font-size，表示字體大小，常用單位為px。
- font-family，表示字體格式，比如宋體，楷體等。
- font-weight，表示字體粗細，可以使用數字和常用英文單詞設置。
- font-style，表示字體樣式，如傾斜，值為italic表示設置傾斜，值為normal表示取消傾斜，多用于取消傾斜。
- text-align，表示文本對齊，left左對齊，right右對齊，center居中對齊。
- text-decoration，表示文本裝飾，可以設置和取消下劃線或刪除線，值為un表示取消下劃線和刪除線，underline表示下劃線，line-through表示刪除線，overline上劃線。
對于字體的顏色標注，可以使用顏色的英文單詞來表示，但是顏色種類受限，除了這個方案，我們更常用的是使用rgb色光三原色（紅 綠 黃）來調制各種各樣的顏色，理論上顏色種類是無限的，使用方法是設置color屬性的值為rgb(紅色比例(0-255)，綠色比例(0-255)，黃色比例(0-255))比如紅色就是rgb(255,0,0)，或者使用十六進制來表示，每4位表示一種顏色的比例，比如紅色格式為#ff0000,可以縮寫成#f00。
2.3.2文本格式
常用文本格式屬性如下：
- text-indent，表示段落縮進，單位為px或em，em表示自適應字符數，具體大小取決于文字大小，比如如果文字大小為16px，則1em=16px，文字大小為8px，則1em=8px，當text-indent為正值為正向縮進（向右邊縮進），為負值為反向縮進（向左邊縮進）。
- line-height，行高就是文本頂線與頂線的距離，或者是中線到中線的距離，或者是底線到底線的距離，對上下兩個方向有影響，并且相同，如果兩行有不同的行高，實際行高值為兩個行高值中最大的一個值，如果行高與元素高度相同，表示垂直居中。
2.3.3背景屬性
- background-color，背景顏色，與設置字體顏色一樣，可以使用英文單詞，可以使用rgb和十六進制表示，還可以設置透明度，需要用到rgba，如果屬性的值為transparent，則該元素的背景顏色會跟隨父元素的背景顏色變化而變化。
- background-image，表示設置背景圖片。
- background-repeat，表示背景圖片平鋪效果。
- background-position，表示背景圖片出現的位置，值的格式為橫坐標 縱坐標，橫坐標向右生長，縱坐標向下生長，除了使用坐標值表示位置，還可以使用百分數與常用的單詞表示，如center表示居中，left表示左對齊，bottom表示下對齊，top表示上對齊。
- background-size，表示背景圖片的大小，格式為寬度 高度單位為px，還可以使用contain（盡可能的充滿背景，可能會露出背景色），cover（完全充滿背景，不會露出背景色，auto（自動）等。
當行高與元素高度相同時，可以設置垂直居中的效果。
使用background-image屬性添加背景圖片，背景圖片在背景顏色之上，并且默認情況下，如果背景圖片較小，會自動平鋪多張相同的背景圖片填滿元素區域，如果背景圖片較大，會截取一部分填滿元素區域。
可以使用background-repeat設置平鋪與取消平鋪效果。
使圖片與文字處于元素中心位置。
效果圖：
盡量讓背景圖填滿元素區域與完全填滿元素區域的區別。
2.3.4設計圓角矩形與圓
- border-radius，表示將元素的邊框的四角設為弧形，當元素為正方形且border-radius的值與元素寬高一致時，表現為圓形。
- border-top-left-radius，設置左上角的圓角。
- border-top-right-radius，設置右上角的圓角。
- border-bottom-left-radius，設置左下角的圓角。
- border-bottom-left-radius，設置右下角的圓角。
沒有經過處理的矩形邊框：
使用border-radius屬性后的矩形：
如果原來的元素區域是正方形，當border-tadius屬性的值為該區域邊長的一半時，可以生成圓形區域，border-tadius屬性的值為50%也可以做到相同的效果。
分別對四個角處理也可以達到同樣的效果。
2.3.5CSS顯示模式
顯示模式有三種，分別為塊級元素，行內元素和行內塊元素。
塊級元素：獨占一行，可以設置寬度高度等屬性。
行內元素：不獨占一行，不可以設置寬度高度等屬性。
行內塊元素：不獨占一行，可以設置寬度高度等屬性。
CSS中可以通過display屬性修改在顯示模式，我們知道a標簽是行內元素，因此修改寬高是無效的，并且不獨占一行。
我們可以通過display修改樣式。
行內元素修改為行內元素。
display還可以隱藏元素，當display的值為none時，元素不被顯示，但是可以通過開發者工具查看到該元素。
2.3.6邊距與邊框
CSS元素由外邊距，邊框，內邊距，內容由外到里四部分組成。
- margin，外邊距大小。
- border，邊框，設置邊框會撐大原有元素大小（不推薦，容易破壞格式）。
- padding，內邊距大小，邊框與內容之間的距離，默認設置四周所有的內邊距，如果需要單獨設置可以通過padding-left/right/bottom/top，border， margin也是如此。
設置邊框，邊框屬性的值分別為線粗細 顏色 線型，前面我們說過設置邊框會改變原有元素的大小，不僅只有邊框，內外邊距也是如此，容易破壞頁面的整體格式，我們可以通過設置box-sizing的值為border-box來改變這種特性，即使用邊框不會撐大原有的元素。
設置內邊距：
設置外邊距：
當兩個元素的外邊距不同時，對于豎直方向元素的外邊距會變為兩者邊距的最大值，這種現象也稱為外邊距塌陷，對于水平方向，最終外邊距是兩個元素的外邊距之和。
元素水平居中：margin可以設置，但是豎直方向居中不行。
2.3.7彈性布局
默認情況下網頁布局是從上到下的，但是實際生活中看到的網頁水平布局到處都是，為了實現水平方向的布局，我們可以綜合利用CSS的一些屬性，來進行排版。
原始的垂直方向的布局：
設置display屬性值為flex就能將原來向下生長的元素轉變為向右生長，這樣就可以在該元素上進行水平方向進行布局了，也可以說以在一行上進行布局，這就叫彈性布局。
對于水平方向，可以設置justify-content屬性來決定水平方向的排列方式，start表示靠左排列，end表示靠右排列，center表示居中排列。
除了這些，還可以在水平方向對排列的元素進行有間隔的排列：
- space-between，靠左右邊界的有間隔均勻排列。
- space-around，與左右邊界有間隔對水平的元素進行均分排列。
- space-evenly，與左右邊界有間隔，且間隔比space-around要小一點，均分排列。
對于豎直方向，可以設置align-items屬性，start頂端排列，end底端排列，cneter垂直居中排布。
3.CSS案例：實現一個經典的布局案例
基本布局模型：
實現代碼：
注意：代碼中的字體“漢儀南宮體簡”不是電腦默認自帶的字體，建議替換為你電腦有安裝的字體。
實際效果：
好了，CSS的基本用法就介紹到這里了，下篇文章開始介紹js。
覺得文章寫得不錯的老鐵們，點贊評論關注走一波！謝謝啦！
總結
- 上一篇： 一个计算机网络典型系统可由,计算机网络基
- 下一篇： mtk android关机铃声,mtk