標籤：基礎 文檔 技巧 接下來 部落格 嵌套 興趣 資料 test
最近在弄一個簡單管理系統的前端，所以打算將做項目的一些個人感想以及總結簡單羅列下，當然，主要針對前端的基礎部分以及一些常用的前端個人簡單技巧總結。主要分為js部分和css部分，下面是css的基礎部分總結
一、基礎知識
1、前端基本概念以及常識
web應用，主要分為前端和後端，而前端的話，主要是想使用者展示內容，後端的話主要是處理使用者資料。前端內容呈現中，主要有幾個問題：內容是什嗎？如何展示內容？如何展示頁面的行為？內容是什麼是通過html來標記的，內容如何呈現是通過css改變和調整的，頁面的前端行為則是通過js來控制。html和js這裡不詳解，主要這裡說說css。
css，可以理解為頁面格式，格式和內容的分離，使得html檔案大小縮小，條理清晰，格式可以多次利用，這裡和MVC模型有同工異曲。反正，css，用個人通俗的話語理解，就是拿來調節頁面格式的一種規則，這種規則可以同時作用於多個頁面，一次載入多次利用毫無疑問地使得網頁檔案大小大大縮小，同時，頁面可以統一風格，調節頁面也可以統一調節，方便高效。
然後，css的學習，個人的拙見就是：看完基本規則文法，就開始幹活，不懂去W3Cschool查資料，然後，做了一定頁面後看本系統的css說明書籍，帶著問題去本有系統的書籍會收穫很多，然後在繼續實踐。好了，廢話說了那麼多，進入乾貨總結環節。
2、css編寫的一些習慣（這裡看不懂或者不認同的就算了，畢竟只是個人拙見而已，不感興趣可以直接跳過的）
a、可以用css調樣式的地方，就不要用html屬性（html屬性具體是什麼各位百度去吧）
b、先布局，再確定具體樣式，個人覺得，合理的布局才是最重要的。
c、css有繼承關係，所以，盡量在開工前將公用的樣式抽出來先。
3、css內容
css的話，個人覺得學習分三part:頁面配置，具體樣式調整以及前端架構的使用。前兩個的話是基礎，後面的架構只是整合的一些類，可以提高工作效率。學習路線的話作為菜鳥的我不敢給什麼意見，不過我的學習方式是大概對前兩者有個概念之後，便開始著手去用前端架構了（畢竟是實際開發，講求效率），在用架構的過程如果發現自己哪部分基礎不瞭解不紮實的話回頭再回顧。
二、css基礎
好了，上面講了一大坨話，下面就正式進入主題啦，其實網上也有很多css的基礎總結，本人也只是將個人對編程的一些理解說出來而已，重複造輪子是避免不了的，但是有那麼一點收穫，便是值得的。
1、html的一些常識
恩，會用css的前提必須是有一定的html基礎，先簡單粗暴地講解下一些和css密切相關的html的一些知識吧，具體的html只是還是需要各位百度Google去的。
html節點：一個html文檔中標籤間的關係，可以形象地比喻為一顆樹中各個分叉節點的關係：每個標籤之間有嵌套關係，被嵌套的標籤是上一級的子節點，依次類推。
clss屬性：html中，每個標籤都有clss屬性，多個html節點可以有多個相同的clss屬性，class屬性，個人理解就是html節點擁有的樣式的一種說明方式。由於class的意思就是這個標籤所擁有的樣式，所以肯定是可以多個的，看一下代碼估計你也明白了：
<html> <head></head> <body> <p class="test"></p><!--clss就是表現了一個標籤有某個樣式的東東-->
<p class="test1 test2"></p><!--class可以有多個值，兩個不同類之間用空格隔開-->
</body> </html>
ID屬性：id ,是一個html節點對無二的標記，即正常情況下一個節點只是對應一個id,一個id 一般也是只是對應一個html節點（當然，一個id對應對個節點也不會出錯，只是瀏覽器解析時只會識別第一個節點的id），具體看代碼
<html> <head></head> <body> <p id="test"></p><!--id和html節點對應關係是一對一，每個id一般只是對應一個html節點--> </body> </html>
2、選取器
選取器，其實就是選擇頁面中你要修改的哪一部分的一種規則，可以利用選取器對文檔進行選擇，進而進行樣式的調整。css的基本結構便是：選取器+對應內容的樣式說明，格式如下：選取器{樣式說明代碼}
具體的，上代碼吧：
/*選取器*/.class1{ /*這是一個類別選取器，中括弧裡面可以填寫選中內容的相應樣式*/ font-size:20px;/*font-size是一中css屬性值，具體後面會介紹表示。所有擁有類名為class1的節點字型大小為20px*/ /*類別選取器以以個"."開頭加類名字構成*/}#id1{ /*這是一個id選取器，它由"#"和id名稱構成*/ font-size:20px;/*類似的，這裡表示擁有id名為id1的節點字型大小為20px*/}[title]{ /*屬性選取器，表示選擇具有title屬性的標籤節點*/ font-size:20px;}p { /*這個也是一個選取器，表示選擇所有p 標籤的節點,單純由標籤名字組成*/ font-size:20px;}
大概，各位對選取器的基本知識也多瞭解了吧，接下來，簡單說說怎麼用選取器吧
2、選取器的使用
在前面中，我們都是一個選取器一個選取器的單獨使用的，單獨使用的話，選擇的文檔就顯得比較粗糙不精確了。因此，各種選取器之間可以組合起來使用，具體的話，請看代碼吧：
/*選取器的組合使用*/.class1 p{ /*類別選取器+普通選取器，表示所有擁有class1 的<p>標籤節點*/ font-size:20px;}p .class1{ /*等效於上面的代碼*/ font-size:20px;}#id1 p{ /*id選取器+id1 的<p>標籤節點*/ font-size:20px;}p .id1{ /*等效於上面的代碼*/ font-size:20px;}head [title]{ /*有title的head標籤節點*/ font-size:20px;}
當然，以上只是簡單的組合使用，更詳細的組合使用以及選取器可以參考下一篇css基礎二
下一篇部落格將會繼續簡單總結下css進階的選取器以及布局的基本知識。
css基礎總結一
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
