HTML|css選擇器模型
- 2019 年 12 月 24 日
- 筆記
問題描述
我們在做前端網頁的時候需要簡單的布局形式使網頁變得美觀好看。一些尺寸，顏色，背景等形式都可以通過CSS選擇器模型來解決。往往布局網頁形式的方法很多，但CSS選擇器模型比較清晰方便而且效率高。怎樣才能做一個盒模型呢？
解決方案
選擇器模型就是將一些形式對象裝在一個CSS模型中，我們在使用這些對象時就可以直接通過寫模型的名稱就可以將其帶入進網頁改變其格式。對特定的元素的樣式進行定義。要清楚有幾種選擇器：CSS派生選擇器，CSSid選擇器，CSS類選擇器，屬性選擇器。下面我主要對id和類兩種選擇器進行描述。
id選擇器：①id選擇器可以為標有特定id的HTML元素指定特定的樣 式。
②Id選擇器以「#」來定義
圖3.1
首先在css文件中新建一個文檔，在裡面寫上你要的形式。
a.「#」為定義
b.「#」後面的為名稱
c.所定義的樣式要用{}
圖3.2
圖3.3
圖3.4
d.在你所需要使用樣式的地方插入id=「名稱（盡量英文）」
圖3.5
圖3.6
類選擇器：以一個點號來顯示
用點號來定義
後加名稱
用{}來寫樣式
圖3.7
在你所需要使用樣式的地方插入class=「名稱（盡量英文）」
圖3.8
還有另外一種簡單的方法就是直接使用<style>
圖3.9
結語
掌握這些選擇器的格式，有很多注意事項。格式不能寫錯不然運行不出來，命名盡量不要用中文或數字，標籤該對齊的要對齊。CSS很方便快捷不用重複去寫程式碼，比較有結構性。深入學習CSS可以對前端網頁的製作有很大的幫助。
END
實習編輯 | 王文星
責 編 | 江汪霖
