2020年CSS基礎知識總結

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

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

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

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

5、 為一顆樹中各個分叉節(jié)點的關系： 每個標簽之間有嵌套關系， 被嵌套 的標簽是上一級的子節(jié)點，依次類推。clss 屬性： html 中，每個標簽都有 clss 屬性，多個 html 節(jié)點 可以有多個相同的 clss 屬性， class 屬性，個人理解就是 html 節(jié)點 擁有的樣式的一種說明方式。 由于 class 的意思就是這個標簽所擁有 的樣式，所以肯定是可以多個的，看一下代碼估計你也明白了：1234ID 屬性： id, 是一個 html 節(jié)點對無二的標記，即正常情況下一 個節(jié)點只是對應一個 id, 一個 id 一般也是只是對應一個 html 節(jié)點（ 當 然，一個 id 對應對個節(jié)點也不會出

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

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