北京傳智播客教育DIV+CSS基礎(chǔ)講師：蔣坤CSS簡介->CascadingStyleSheets->HTML的不足->維護(hù)困難->標(biāo)記不足->頁面過胖->定位困難->作用：為網(wǎng)頁設(shè)置外觀，相當(dāng)于華麗的衣服CSS體驗->寫一個完整的HTML頁->新建一個css文件->添加樣式->引入樣式樣式分類->行內(nèi)樣式(內(nèi)聯(lián)樣式)style="“->內(nèi)嵌樣式<styletype="text/css"></style>->外部樣式<linktype="text/css"href="URL"rel="stylesheet"/>->導(dǎo)入樣式@importurl();->優(yōu)先級行內(nèi)>內(nèi)嵌>外部>導(dǎo)入就近原則盒子模型(牢記)常見CSS樣式1->任何元素均可使用樣式，這里使用div演示->添加顏色color屬性(foreColor)style="color:blue;“->修改字體大小，這里px必須加font-sizestyle="font-size:50px;“->控制字體font-familystyle="font-family:華文行楷;“->添加邊框border->邊框粗細(xì)border-weightstyle="border-weight:2px;“->邊框樣式border-stylestyle=“border-style:dashed;”//點線->邊框顏色border-colorstyle="border-color:yellow;“->邊框樣式可以合并(順序)style="border:1pxsolidpink;"常見CSS樣式2->修改寬高(width,height)style="width:300px;height:200px;“->修改邊框不同的屬性(border-[position]-[style])->添加背景色background-colorstyle="background-color:purple;“->背景圖片background-imagestyle="background-image:url(地址);“->控制圖片背景位子background-position(頁面上圖片展示為一幅圖)style="background-position:-[width]px-[height]px;“->控制鼠標(biāo)光標(biāo)樣式cursorstyle=“cursor:pointer;”//hand老的寫法常見CSS樣式3->控制元素顯示displaystyle="display:none;“->設(shè)定div行內(nèi)displaystyle="display:inline;“->設(shè)定span為行間displaystyle="display:block;“->列表樣式->去掉前面引導(dǎo)list-style-typetype="list-style-type:none;"常見CSS樣式4->邊界margin->邊界距離其他元素的距離->填充padding->元素的邊框與內(nèi)容填充的距離->邊界順序->單值，全->雙值，上下，左右->三值，上，左右，下->四值，上右下左ssCSS的效果需要文檔定義約束<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns="">細(xì)邊框表格與菜單->生成表格(關(guān)于元素的邊框)->設(shè)定cellpadding,cellspacing為0->設(shè)定表格的邊框合并border-collapse:collapse->列表橫菜單list-style-type:nonefloat:leftmargin-right:100px->二級菜單(*)選擇器(重要、非常重要、還難)->如何引用<styletype="text/css"></style>->標(biāo)簽選擇器[mark]{

屬性:值;}->類選擇器(標(biāo)簽類選擇器*).[class]{

屬性:值;}多個類選擇器可以應(yīng)用于同一個標(biāo)簽，空格分開->id選擇器#[id]{

屬性:值;}注意(掌握)->注釋編碼習(xí)慣->選擇器的優(yōu)先級(公用低，特有高)id>類>標(biāo)簽樣式優(yōu)先級可以使用!important調(diào)整有先->選擇器聲明->集體聲明，逗號隔開->全局聲明，*引導(dǎo)(小頁面等使用)->嵌套聲明，空格隔開(層次約束)->子選擇聲明(>),相鄰選擇聲明(+)偽選擇器(偽class屬性)->為a標(biāo)簽的狀態(tài)設(shè)定不同樣式->進(jìn)入時,點擊前,點擊時,點擊后a:hovera:linka:activea:visited->并非所有瀏覽器都支持偽選擇器->針對特定鏈接使用偽選擇器(.class:link,div包)->去掉下劃線text-decoraction:none文檔流與定位->什么是文檔流(壘砌)->float的使用->定位樣式position->絕對定位absolute->固定定位fixed(相對于屏幕,視區(qū))IE6不支持->相對定位relative(相對文檔流偏移)->靜態(tài)定位static(默認(rèn))->定位距離使用left,top,right,bo