暢讀版
CSS是用來修飾網(wǎng)頁元素的,其中重要的知識點就是屬性和定位,屬性譬如文字的字號\字體\顏色,文本的對齊方式\修飾元素\是否加粗;定位用來指定譬如屬性的有效范圍,可以通過標簽名稱指定,也可以通過類名和id名稱來指定,標簽與標簽之間可能是并列關(guān)系,也可能是嵌套關(guān)系,我們可以通過父子后代來指定嵌套關(guān)系的元素,可以通過序列,交集,并集指定并列關(guān)系的元素,通過屬性值來指定屬性為某一值的元素,通過通配符遍歷所有元素.
元素的定位有三大特性,分別是繼承性,層疊性,優(yōu)先級,用于表示當多個定位器指向同一個元素時,元素應該聽哪一個定位器的.
元素的顯示模式有三種分別是行內(nèi)\塊級\行內(nèi)塊級,行內(nèi)對應元素的內(nèi)容元素,塊級對應元素的容器元素,內(nèi)容元素中只有p是默認的塊級元素,其余都是行內(nèi)元素,三種顯示模式之間可以相互轉(zhuǎn)換,其中塊級元素獨占一行可以設置寬高,行內(nèi)元素相反.
屬性中經(jīng)常用的有背景,包括背景顏色,背景圖片,背景平鋪方式,背景定位,相對于插入圖片,背景圖片的檢索優(yōu)先級低,但是能設置定位,要學會利用FW分析精靈圖.
盒模型時完成網(wǎng)頁布局的重要元素,有內(nèi)容寬高,內(nèi)邊距,邊框,外邊距組成,一般添加盒模型的邊框和內(nèi)邊距時,元素的寬高會跟著變化,要想元素的寬高始終與內(nèi)容的寬高一樣,就要設置box-sizing屬性,這也是經(jīng)常用到的.
之前說的三種顯示模式都屬于標準流,實際上標準流中除了行內(nèi)\塊級\行內(nèi)塊級三種外,還有flex這種,經(jīng)常用于調(diào)劑列表元素胡列表之間的水平等間隔排版,需結(jié)合另外一個語句一起使用.除了上述說的四種標準流,還有浮動流,浮動流會脫離標準流,貼靠同一邊的元素,如果后面貼靠的元素寬度超過父元素的寬度,就會出現(xiàn)換行的現(xiàn)象,貼靠到父元素一側(cè),如果寬度還是大于父元素就不用管了.在設置浮動流時margin-top屬性會失效,我們?nèi)绻朐谏舷聝尚兄虚g流出間隔,有很多方法,最常用的是給第一個元素設置overflow屬性.
要使元素在想要的為止除了前面講的標準流和浮動流外還有定位流,定位流分為絕對定位,相對定位,固定定位,和靜止定位,其中靜止定位就是指元素默認的定位方式,絕對定位默認是相對于body定位,如果祖先元素有定位元素,就改成相對于離得最近的祖先定位元素定位,絕對定位會脫離標準流,不分行內(nèi)塊級元素,相對定位不會脫離標準流,是相對于標準流中原來的位置定位,分行內(nèi)塊級元素,固定定位不會隨網(wǎng)頁的下拉而移動.
過渡模塊是通過鼠標的狀態(tài)觸發(fā)動畫,三要素包括要素狀態(tài)的變化,轉(zhuǎn)化要素,轉(zhuǎn)化時間,還可以設置轉(zhuǎn)化的速度,是來回或者單向.
動畫模塊是自動播放的,不需要觸發(fā),包括變化要素,變化內(nèi)容,變化時間,變化速度,延遲時間,動畫次數(shù).
2D轉(zhuǎn)換模塊和3D轉(zhuǎn)化模塊是CSS3新加的特性,2D轉(zhuǎn)換模塊有旋轉(zhuǎn),移動,形變,形變默認的中心點是中心位置,可以通過轉(zhuǎn)換定位屬性重新設置中心點,只有在父元素中設置透視屬性,才能看到近大遠小的效果,如果相體現(xiàn)3d效果就必須活用2D屬性,并且在父元素中設置3d-preserve屬性.
編寫網(wǎng)頁中最常用的就是元素居中,盒子居中,我們用margin屬性設置,文字居中我們用text-align屬性設置,如果插入圖片大于父元素,上述兩種居中方法失效,我們用子絕父相的定位方法,也可以用父元素設置text-align屬性,子元素設置margin:0 -100%來設定.
編寫網(wǎng)頁的步驟是先創(chuàng)立站點文件夾,在創(chuàng)立其下的子文件夾和子文件,一般一個網(wǎng)頁占用一個css文件和一個html文件,圖片/css外聯(lián)文件/js文件夾是必須的子文件,css文件一般通過link連接到html文件,這樣的好處是先加載樣式在加載元素,便于讀寫,然后通過創(chuàng)建html文件,編寫注釋,理清編程思路,消除元素默認樣式,這里body也就是整個網(wǎng)頁的默認樣式,一般包括默認字體大小,顏色,網(wǎng)頁背景顏色.然后就通過盒子模型創(chuàng)建網(wǎng)頁的垂直布局,通過浮動元素常見網(wǎng)頁的水平布局,通過定位元素創(chuàng)建多個背景圖片疊加.在通過過渡屬性設置一些觸發(fā)動畫效果.
我們對于文件的切換只要按住ctrl鍵選中定位的元素就可以切換到外聯(lián)的CSS文件了,定位技巧除了巧用類名和祖先元素外,還用通過設置公用屬性類名來簡化樣式的編寫.
助記視頻:
