【css中的背景屬性】
簡介:css中背景屬性用的是background它是一個復合屬性和border類似,也就是說它的內部有很多個值。對css來講背景圖是非常常用的就像我們做網站離不開圖片一樣,所以對于bg這個屬性必須要掌握的非常熟練。
《background基礎》
基本機構:
Background:顏色 圖片路徑 平鋪方式 水平位置 垂直位置 圖片模式;
舉例:background:#000 url(pic.jpg) no-repeat center top fixed;
其中最復雜的當屬圖片定位的兩個值;圖片定位可以用兩種方式來屬性第一是特殊值形式例如left,right,top,center,bottom第二是坐標形式可以通過先設置水平坐標后設置垂直坐標來控制圖片定位,注意它可以接受負值。整個網頁的左上角是坐標為0,0的原點。
圖片的平鋪方式 no-repeat表示不平鋪, repeat表示平鋪。
在所有值的最后添加一個fixed的話可以讓圖片跟隨屏幕滾動。
《知識點》
對于一個標簽如果沒有任何內容的前提下,這個標簽的默認狀態就和一條線一樣根本看不見。
【css復合選擇器】
簡介:css中一共有3種類型的復合選擇器分別是子代,并集,交集(指定式)
《子代選擇器》
選擇器中通過空格表示包含關系例如 ul li 表示選中ul中的所有li 也可以寫成 .class div表示某個類中的所有div標簽被選中。
《并集選擇器》
并集選擇器通過逗號來表示并列選擇關系。它可以將很多選擇器選中的內容合并到一起來書寫樣式。并集選擇器不區分前后。
《交集選擇器》
簡介:用的不多,但是見到以后需要知道是什么意思。
交集選擇器的作用是通過標簽名稱和標簽身上所具有的類名來直接選擇特定標簽。
例如 div.class 作用是 選中div并且身上帶有class類的那一個標簽。
交集選擇器中是沒有任何新的符號的就是連續書寫各種基礎選擇器。
【文字控制屬性】
Css中的所有屬性分為兩大類,文字控制屬性和區塊控制屬性。解釋一下區塊控制屬性指的就是對盒子進行的所有控制,例如實體化,邊距設置,定位,對齊等等。
《css中的bui設置》
Font-weight:bold 文本加粗;
Text-decoration:underline; 表示下劃線;
Overline ;上劃線;
Line-through;貫穿線; 實際上就是刪除線。none表示清除;
Font-style:italic ?表示文本傾斜。
【網頁布局】
對于任何復雜的網頁都是由盒子堆砌而成,那么布局指的是什么,布局是一個在網頁制作中非常麻煩的事情,但簡單的說布局指的就是網頁中形形色色的盒子的排列方式。 這些排列方式雖然看起來很多但實際上只有兩種排列類型就可以實現一切布局。首要的垂直排列,水平排列。 水平排列實際上是依附于垂直排列產生的。
《浮動屬性》
Float表示浮動對齊;它只有兩個值left,right沒有center。它最終實現的效果就是讓盒子能夠水平排列,并且浮動對齊了的盒子都能夠接受人為尺寸。
網頁的布局當中最穩定的盒子排列方式是垂直排列就是塊級元素垂直排列。而盒子水平排列一般都是在某個盒子內部進行拆分使用的。
*****浮動使用的原則:對于一個容器的內部同級的所有盒子只能接受一種排列方式要么是垂直要么是水平不能混用。
簡單理解為:同級標簽之間水平排列或垂直排列只能使用一種。
【網站制作】
《三步準備工作》
1. 清空默認邊距;
2. 設置正文默認樣式; 就是給body設置文字控制三屬性。
3. 修改超鏈接默認樣式;一般只需要改兩個,顏色,下劃線。
《水平排列結構的制作步驟》
分為三步:
1. 實體化盒子設置盒子的尺寸。
2. 實體化盒子好了以后設置浮動,左對齊右對齊或者一左一右的。
3. 一定要在最后一步再去確立內外間距的距離然后定位。
《清除列表樣式》
Css從來不用html當中默認的列表樣式所以在默認清空邊距的時候可以順帶清空。方法是;
List-style:none;
我再次強調一次,制作網頁布局的順序,一定是先實體化盒子,然后再添加浮動對齊,最后再處理間距用于定位。