javaweb視頻教程_day2-資料源碼ppt網(wǎng)頁設(shè)計(jì)_css

1、高級(jí)軟件人才實(shí)作培訓(xùn)專家!CSS語言傳智.廣陵散北京傳智播客教育高級(jí)軟件人才實(shí)作培訓(xùn)專家!CSS概述 CSS（Cascading Style Sheets）是層疊樣式表用來定義網(wǎng)頁的顯示效果?？梢越鉀Qhtml代碼對(duì)樣式定義的重復(fù)，提高了后期樣式代碼的可維護(hù)性，并增強(qiáng)了網(wǎng)頁的顯示效果功能。簡單一句話：CSS將網(wǎng)頁內(nèi)容和顯示樣式進(jìn)行分離，提高了顯示功能。北京傳智播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家!CSS和HTML結(jié)合的方式 sytle屬性方式 style標(biāo)簽方式(內(nèi)嵌方式) 導(dǎo)入方式 import url(css_3.css); 鏈接方式北京傳智

2、播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家!CSS樣式優(yōu)先級(jí)和代碼規(guī)范 樣式優(yōu)先級(jí)由上到下，由外到內(nèi)。優(yōu)先級(jí)由低到高。 代碼規(guī)范選擇器名稱 屬性名：屬性值；屬性名：屬性值；.屬性與屬性之間用 分號(hào) 隔開屬性與屬性值直接按用 冒號(hào) 連接如果一個(gè)屬性有多個(gè)值的話，那么多個(gè)值用空格 隔開。北京傳智播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家!CSS選擇器 就是指定CSS要作用的標(biāo)簽，那個(gè)標(biāo)簽的名稱就是選擇器。意為：選擇哪個(gè)容器。 CSS選擇器的類型 html標(biāo)簽名選擇器。使用的就是html的標(biāo)簽名 class選擇器(.)。其實(shí)使用的標(biāo)簽中的class屬性 id選擇器

3、(#)。其實(shí)使用的是標(biāo)簽的中的id屬性。 優(yōu)先級(jí)：style屬性idclass標(biāo)簽名北京傳智播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家!CSS擴(kuò)展選擇器 關(guān)聯(lián)選擇器標(biāo)簽是可以嵌套的，兩個(gè)或多個(gè)選擇器之間產(chǎn)生關(guān)系，就可以用此選擇器。 組合選擇器對(duì)多個(gè)不同選擇器進(jìn)行相同樣式設(shè)置的時(shí)候應(yīng)用此選擇器。 偽元素選擇器其實(shí)就在html中預(yù)先定義好的一些選擇器?；蛘哒f當(dāng)前元素處于的狀態(tài)。北京傳智播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家!CSS盒子模型 在進(jìn)行布局前需要把數(shù)據(jù)封裝到一塊一塊的區(qū)域內(nèi)，這個(gè)區(qū)域的專業(yè)術(shù)語叫盒子。 邊框（border）分為上下左下右左 內(nèi)邊距（

4、padding）分為上右 外邊距（margin）分為上下左右北京傳智播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家!CSS布局漂浮屬性 float（漂浮）none :left :right :默認(rèn)值。對(duì)象不飄浮文本流向?qū)ο蟮挠疫呂谋玖飨驅(qū)ο蟮淖筮叡本﹤髦遣タ徒逃?高級(jí)軟件人才實(shí)作培訓(xùn)專家!CSS布局定位屬性 positionstatic :默認(rèn)值。無特殊定位，對(duì)象遵循HTML定位規(guī)則absolute :將對(duì)象從文檔流中拖出，使用 left ，right ， top ， bottom 等屬性相對(duì)于其進(jìn)行絕對(duì)定位。relative :對(duì)象不可層疊，但將依據(jù) left ， right ，top ， bottom 等屬性在正常文檔流中偏移位置北京傳智播客教育