css--之初級

1屬性選擇器

E[att]{} 對標籤值爲E,屬性是att的全部標籤進行設置.注:此處的E,能夠是空,能夠是標籤,也能夠是肯定標籤的選擇器如  .class值,#id值.而att是標籤中的屬性,通常是人爲添加的沒有什麼特殊意義的,主要起識別做用.

E[att=val]{} 對標籤值爲E,屬性是att,且其值是val的全部標籤進行設置

2選擇器的優先級

Css有繼承設置,可是也有覆蓋.因此出現了選擇器的優先級.

注:有一些屬性不能被繼承,如:border,margin,padding,background等

Css的優先級基本規則是:1 行內式最高,2  id選擇器  3   class 選擇器  4  標籤選擇器

這些規則將數字符串逐位相加,就獲得最終的權重,而後執行權重最大的,最後從上到下順序執行

注:有!important聲明的規則高於一切,如

Div{

Color:red!important

}即div標籤中,字體是紅色

3 css中對文本的操做

經過color對文本中的文字顏色進行設置

經過text-align對文本的水平位置進行設置,left是居左,right居右,center居中,justify實現兩端對齊.注:它們的位置是至關於它們所在框的

4  css對背景的設置

經過backgroud設置背景

Background-color 設置背景顏色,background-image:url(‘’)設置背景圖片,圖片的地址放url中,Background-repeat 圖片平鋪滿,background-repeat:no-repeat 圖片不平鋪滿所在框,background:repeat-x,把所在框的橫向鋪滿,repeat-y縱向鋪滿

Background-position背景圖片相對於框中的位置,background-position:right  top 表示圖片的位置是在右上角,還能夠是background-position:20px 10px,圖片的位置在離左邊框20px,離上邊框10px的位置.

注:它們能夠簡寫:background:#ffffff  url(‘1.png’)  no-repeat  right top   表示背景顏色是紅色,背景圖片是1.png 圖片沒有平鋪滿,只有一個圖片,圖片在所在框的右上角

5  display屬性    它的做用是對標籤是否顯示和對塊級與內聯的進行轉換,

Display:none  隱藏某個元素,且讓隱藏的元素不佔任何空間

Display:block  把內聯轉換成塊級,讓它獨佔一行

Display:inline  把塊級轉換成內聯,讓它不用獨佔一行

Display:inline-block  ,讓標籤具備能設置範圍,但不獨佔一行

注:塊級標籤獨佔一行,同時能設置範圍,即寬和高.內聯標籤不獨佔一行,可是不能設置範圍

Display屬性最重要的是Display:none和Display:inline-block,其中inline-block可作列表佈局,其中的相似於圖片間的間隙小bug能夠經過以下設置解決:

Div{

Border:3px   dashed; 邊框3px粗,是實線

Word-spacing:-5px; 調整圖片之間的距離

}