一、CSS基礎知識介紹

1.css是cascading style sheet層疊式樣式表的簡寫

2.css小用法

加粗：font-weight:bold; 正常用：normal;

斜體：font-style:italic; 正常用：normal;

下劃線：text-decoration:underline; 正常用：none;

加粗快捷鍵：fwb+tab

不加粗快捷鍵：fwn+tab

斜體快捷鍵：fsi+tab

不斜體快捷鍵：fsn+tab

下劃線快捷鍵：tdu+tab

沒有下劃線快捷鍵：tdn+tab

3.class類

1）class可以重復，同一個頁面能有多個標簽同時屬於某一個類。

2）同一個標簽可以同時攜帶多個類，用空格隔開。

註意：在頁面中盡量用class，id是js用的，js要通過id屬性得到標簽。

二、CSS的高級選擇器

1.交集選擇器

交集選擇器可以連續交，例如：

html:

<h3 class="spacial zhangyao">

<h3 class="spacial">

css:

h3.spacial.zhangyao { }

選擇的元素同時滿足兩個條件：必須是h3標簽，然後必須是special標簽，交集選擇器沒有空格。

2.通配符*

*就表示所有元素，效率不高，盡量不要使用。

3.css的繼承性和層疊性

可繼承的屬性：

color、text-開頭的、line-開頭的、font-開頭的

這些關於文字樣式的都能夠繼承；所有關於盒子的、定位的、布局的屬性都不能繼承。

層疊性

4.權重問題大總結

1）先看有沒有選中的，如果選中了，那麽就以（id數、類數、表簽數）來計權重。誰大聽誰的，如果都一樣，挺後寫的為準。

2）如果沒有選中，那麽權重是0。如果大家都是0，就近原則。

5.important屬性

k:v!important; 來給一個屬性提高權重，無窮大。

強調3點：

1）！important 提升的是一個屬性，而不是一個選擇器；

2）！important 無法提升繼承的權重，該是0還是0；

3）！important 不影響就近原則。

三、盒模型

1.盒子中的區域

一個盒子中主要的屬性就5個：width、height、padding、border、margin

2.padding

padding區域有背景顏色，也就是說，background-color講填充所有border以內的區域。

註：以下寫法錯誤：不能把小屬性寫在大屬性前面

padding-left：30px； padding：20px；

padding：20px；錯誤 padding-left：30px；正確

3.一些元素默認帶有padding（如ul)

因此，我們為了做站方便控制，總喜歡清除這個默認的padding

*{ margin：0；

padding：0；}

但是，*的效率不高，所以我們選擇使用並集選擇器。如：

h1,h2,h3······dl { margin：0；padding：0；}

4.border-->是一個大綜合屬性

比較穩定的就幾個：solid、dashed、dotted

border屬性能夠被拆開，有兩大拆開方式：

1）按3要素來拆：

border-width:10px 20px 10px 30px;

border-style:solid dashed dotted ;

border-color:red green blue yellow;

2)按方向來拆：

border-top:10px solid red;

border-right:10px solid red;

border-bottom:10px solid red;

border-left:10px solid red;

按方向拆還能再拆一層：

border-top-width:10px;

border-top-style:solid;

border-top-color:red;

某一條邊沒有：border-left:none;

也可以調整左邊邊距寬度為0 border-left-width:0;

CSS基礎知識01