CSS入門介紹

2022-02-19 23:32:15 字數 1704 閱讀 4410

一.背景

這裡將陸續介紹前端css中相關知識,先介紹css2.1,後續會介紹css3的相關屬性,通過該系列的文章,希望能給準備轉戰前端的人員一些幫助,同時也幫助自己梳理知識,文章中如有錯誤,歡迎指出。

下面是css2.1第乙個階段的知識框圖,後面會陸續更新該系列後續文章。

二.整體介紹

(一).基礎介紹

1. 七個基本的入門屬性首先要記住,顏色:color,背景顏色:background-color,字型大小:font-size,加粗:font-weight:bold,傾斜:font-style:italic, 文字居中:text-align:center,

下劃線:text-decoration:underline。

2. 相對路徑的寫法:  ../../     a/b/

3. 七個基本選擇器:id選擇器、標籤選擇器、類選擇器、交集選擇器、並集選擇器、後代選擇器、萬用字元。

4. 四個css3選擇器:子代選擇器、序選擇器、相鄰選擇器、兄弟選擇器。

5. 行高(line-height):行高的作用範圍、單行文字豎直居中、多行文字豎直居中。

6. font屬性:等價於(font-size, line-height, font-family),比例寫法,font-family的規則和特殊寫法。

7. a標籤:偽類(link、visited、hover、active)、a標籤的美化(常規寫法和簡介寫法)。

8. background屬性:background-color、background-image、background-repeat、background-attachment、background-position;顏色的三種表示方法。 

(二).繼承性和層疊性

1. 繼承性:作用範圍。

2. 權重的計算規則:①如果標籤被選中,比較權重,id選擇器》類選擇器》標籤選擇器,如果權重相同,以後面寫的為主。②如果標籤沒被選中,權重為0,就近原則,哪個離目標標籤近,以哪個為主。

3. !important的性質。

(三).盒模型

1. 包含:width、height、padding、border、margin。

2. padding的兩種寫法。

3. border的三種拆分形式。

4. margin在標準流中的塌陷現象以及利用「margin:0 auto」特性居中的條件。

5. 瀏覽器相容性。

(四).標準文件流

1. 塊級元素和行內元素各自的特性以及分別包括什麼。

2. 相互轉換的方法: 塊→行(display:inline)、行→塊(display:block)。

3. 引出脫離標準文件流的三種方法:浮動、絕對定位、固定定位。

(五).浮動

1. 浮動(float)的性質:脫標、相互依靠、字圍效果。

2. 清除浮動的五種方法以及各自的優缺點。

3. 引出脫離標準文件流的三種方法:浮動、絕對定位、固定定位。

(六).定位

1. 相對定位:含義、性質(不脫標,老家留坑,形影分離)、作用(微調位置、字絕父相)。

3. 固定定位:性質(脫標)、作用。

4. z-index:性質、從父現象。

後續文章,會詳細介紹css2.1基礎入門的六個板塊。

CSS入門介紹

1.w3c標準 w3c標準是由全球資訊網聯盟制定的一系列標準,包括 結構化標準語言 html和xml 表現標準語言 css 行為標準語言 dom和ecmascript w3c標準倡導結構,樣式,行為分離 2.css中的定位機制 css中存在3種定位機制 標準文件流 normal flow 從上到下,...

css入門介紹

css 層疊樣式表 英文名 cascading style sheets 主要用於美化網頁 1 css的表現形式 1.1 行內樣式 內嵌樣式 寫在標籤內的樣式,寫在標籤的開始部分的內部,style屬性當中,即 1.2 內部樣式 內聯樣式 寫在html頁面中,存放於標籤當中,樣式則寫在style標籤中...

CSS入門介紹

為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆分開,css由此思想而誕生,css是 cascading style sheets 的首字母縮寫,意思是層疊樣式表。有了css,html中大部分表現樣式的標籤就廢棄不用了,html只負責文件的結構和內容,表現形式完全交給css,html文件變...