1. 程式人生 > >CSS基礎知識01

CSS基礎知識01

borde 總結 CI spec 背景 我們 -- 無法 寬度

一、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