2020年CSS基礎(chǔ)知識(shí)總結(jié)

1、css基礎(chǔ)知識(shí)總結(jié)css 是一種用來(lái)表現(xiàn) HTML 標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或 XML 標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。下面 為大家了相關(guān) css 基礎(chǔ)知識(shí)總結(jié)，希望大家喜歡。1 、前端基本概念以及常識(shí)web 應(yīng)用，主要分為前端和后端，而前端的話(huà)，主要是想用戶(hù) 展示內(nèi)容，后端的話(huà)主要是處理用戶(hù)數(shù)據(jù)。前端內(nèi)容呈現(xiàn)中，主要有 幾個(gè)問(wèn)題：內(nèi)容是什么 ?如何展示內(nèi)容 ?如何展示頁(yè)面的行為 ?內(nèi)容是 什么是通過(guò)html 來(lái)標(biāo)記的，內(nèi)容如何呈現(xiàn)是通過(guò) css 改變和調(diào)整的， 頁(yè)面的前端行為則是通過(guò) js 來(lái)控制。 html 和 js 這里不詳解，主要 這里說(shuō)說(shuō) css。css ，可

2、以理解為頁(yè)面格式，格式和內(nèi)容的分離，使得 html 文 件大小縮小，條理清晰，格式可以多次利用，這里和 MVC 模型有同工 異曲。反正， css， 用個(gè)人通俗的話(huà)語(yǔ)理解， 就是拿來(lái)調(diào)節(jié)頁(yè)面格式 的一種規(guī)則，這種規(guī)則可以同時(shí)作用于多個(gè)頁(yè)面， 一次加載多次利用 毫無(wú)疑問(wèn)地使得網(wǎng)頁(yè)文件大小大大縮小，同時(shí)，頁(yè)面可以統(tǒng)一風(fēng)格， 調(diào)節(jié)頁(yè)面也可以統(tǒng)一調(diào)節(jié)，方便高效。然后， css 的學(xué)習(xí)，個(gè)人的拙見(jiàn)就是：看完基本規(guī)則語(yǔ)法，就 開(kāi)始干活，不懂去 W3Cschool 查資料，然后，做了一定頁(yè)面后看本系 統(tǒng)的 css說(shuō)明書(shū)籍， 帶著問(wèn)題去本有系統(tǒng)的書(shū)籍會(huì)收獲很多， 然后在 繼續(xù)實(shí)踐。好了，廢話(huà)說(shuō)了那么多，進(jìn)入干貨

3、總結(jié)環(huán)節(jié)。2、css 編寫(xiě)的一些習(xí)慣（這里看不懂或者不認(rèn)同的就算了，畢竟只是個(gè)人拙見(jiàn)而已，不感興趣可以直接跳過(guò)的 ）a 、可以用 css 調(diào)樣式的地方，就不要用 html 屬性 （html 屬性 具體是什么各位百度去吧 ）、先布局，再確定具體樣式，個(gè)人覺(jué)得，合理的布局才是最重、 css 有繼承關(guān)系，所以，盡量在開(kāi)工前將公共的樣式抽出來(lái)、 css 內(nèi)容的話(huà)，個(gè)人覺(jué)得學(xué)習(xí)分三 part: 頁(yè)面布局， 具體樣式調(diào)整以 及前端框架的使用。 前兩個(gè)的話(huà)是基礎(chǔ)， 后面的框架只是集成的一些 類(lèi)， 可以提高工作效率。 學(xué)習(xí)路線的話(huà)作為菜鳥(niǎo)的我不敢給什么意見(jiàn)，不過(guò)我的學(xué)習(xí)方式是大概對(duì)前兩者有個(gè)概念之后， 便開(kāi)始

4、著手去用前 端框架了 （畢竟是實(shí)際開(kāi)發(fā)， 講求效率 ） ，在用框架的過(guò)程如果發(fā)現(xiàn)自 己哪部分基礎(chǔ)不了解不扎實(shí)的話(huà)回頭再回顧。好了，上面講了一大坨話(huà)，下面就正式進(jìn)入主題啦，其實(shí)網(wǎng)上 也有很多 css 的基礎(chǔ)總結(jié)，本人也只是將個(gè)人對(duì)編程的一些理解說(shuō)出 來(lái)而已，重復(fù)造輪子是避免不了的，但是有那么一點(diǎn)收獲，便是值得要的先。css1、 html 的一些常識(shí)11恩，會(huì)用 css 的前提必須是有一定的 html 基礎(chǔ)， 先簡(jiǎn)單粗暴地 講解下一些和 css 密切相關(guān)的 html 的一些知識(shí)吧， 具體的 html 只是 還是需要各位百度谷歌去的。html 節(jié)點(diǎn)：一個(gè) html 文檔中標(biāo)簽間的關(guān)系，可以形象地比喻

5、 為一顆樹(shù)中各個(gè)分叉節(jié)點(diǎn)的關(guān)系： 每個(gè)標(biāo)簽之間有嵌套關(guān)系， 被嵌套 的標(biāo)簽是上一級(jí)的子節(jié)點(diǎn)，依次類(lèi)推。clss 屬性： html 中，每個(gè)標(biāo)簽都有 clss 屬性，多個(gè) html 節(jié)點(diǎn) 可以有多個(gè)相同的 clss 屬性， class 屬性，個(gè)人理解就是 html 節(jié)點(diǎn) 擁有的樣式的一種說(shuō)明方式。 由于 class 的意思就是這個(gè)標(biāo)簽所擁有 的樣式，所以肯定是可以多個(gè)的，看一下代碼估計(jì)你也明白了：1234ID 屬性： id, 是一個(gè) html 節(jié)點(diǎn)對(duì)無(wú)二的標(biāo)記，即正常情況下一 個(gè)節(jié)點(diǎn)只是對(duì)應(yīng)一個(gè) id, 一個(gè) id 一般也是只是對(duì)應(yīng)一個(gè) html 節(jié)點(diǎn)（ 當(dāng) 然，一個(gè) id 對(duì)應(yīng)對(duì)個(gè)節(jié)點(diǎn)也不會(huì)出

6、錯(cuò)，只是瀏覽器解析時(shí)只會(huì)識(shí)別 第一個(gè)節(jié)點(diǎn)的 id） ，具體看代碼2 、選擇器 選擇器，其實(shí)就是選擇頁(yè)面中你要修改的哪一部分的一種規(guī)則， 可以利用選擇器對(duì)文檔進(jìn)行選擇，進(jìn)而進(jìn)行樣式的調(diào)整。 css 的基本 結(jié)構(gòu)便是：選擇器 +對(duì)應(yīng)內(nèi)容的樣式說(shuō)明，格式如下：選擇器 樣式說(shuō) 明代碼具體的，上代碼吧：/* 選擇器 */.class1/* 這是一個(gè)類(lèi)選擇器，中括號(hào)里面可以填寫(xiě)選中內(nèi)容的相應(yīng)樣 式*/font-size:20px;/*font-size 是一中 css 屬性值，具體后面會(huì) 介紹表示。所有擁有類(lèi)名為 class1 的節(jié)點(diǎn)字體大小為 20px*/* 類(lèi)選擇器以以個(gè) . 開(kāi)頭加類(lèi)名字構(gòu)成 */#

7、id1/* 這是一個(gè) id 選擇器，它由 # 和 id 名稱(chēng)構(gòu)成 */font-size:20px;/* 類(lèi)似的，這里表示擁有 id 名為 id1 的節(jié)點(diǎn) 字體大小為 20px*/title/* 屬性選擇器，表示選擇具有 title 屬性的標(biāo)簽節(jié)點(diǎn) */font-size:20px;p/* 這個(gè)也是一個(gè)選擇器， 表示選擇所有 p 標(biāo)簽的節(jié)點(diǎn) , 單純由標(biāo) 簽名字組成 */font-size:20px;大概，各位對(duì)選擇器的基本知識(shí)也多了解了吧，接下來(lái)，簡(jiǎn)單 說(shuō)說(shuō)怎么用選擇器吧2 、選擇器的使用在前面中，我們都是一個(gè)選擇器一個(gè)選擇器的單獨(dú)使用的，單 獨(dú)使用的話(huà)，選擇的文檔就顯得比較粗糙不精確了。因此，各種選擇 器之間可以組合起來(lái)使用，具體的話(huà)，請(qǐng)看代碼吧：/* 選擇器的組合使用 */.class1p/* 類(lèi)選擇器 +普通選擇器，表示所有擁有 class1 的標(biāo)簽節(jié)點(diǎn) */font-size:20px;p.class1/* 等效于上面的代碼 */font-size:20px;#id1p/*id 選擇器 +id1 的標(biāo)簽節(jié)點(diǎn) */font-size:20px;p.id1/* 等效于上面的代碼 */font-size:20px;headti