網(wǎng)頁設(shè)計(jì)_CSS

1、高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 CSS王友軍高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !主要內(nèi)容lCSS概述lCSS和HTML結(jié)合的四種方式lCSS樣式優(yōu)先級(jí)和代碼規(guī)范lCSS三種常用選擇器lCSS三種擴(kuò)展選擇器lCSS的常見操作北京傳智播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 CSS概述lCSS （Cascading Style Sheet）是層疊樣式表.作用來定義網(wǎng)頁的顯示效果。簡(jiǎn)單一句話：CSS將網(wǎng)頁內(nèi)容和顯示樣式進(jìn)行分離，提高了顯示功能。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !北京傳

2、智播客教育 CSS和HTML結(jié)合的方式lsytle屬性方式(行內(nèi)樣式)lstyle標(biāo)簽方式(內(nèi)嵌樣式)l導(dǎo)入方式l鏈接方式高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !style屬性方式(行內(nèi)方式)l利用標(biāo)簽中style屬性來改變每個(gè)標(biāo)簽的顯示樣式。例：p標(biāo)簽段落內(nèi)容。l該方式比較靈活，但是對(duì)于多個(gè)相同標(biāo)簽的同一樣式定義比較麻煩，適合局部修改。北京傳智播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !style標(biāo)簽方式：（內(nèi)嵌方式）l在head標(biāo)簽中加入style標(biāo)簽，對(duì)多個(gè)標(biāo)簽進(jìn)行統(tǒng)一修改。p color:#FF0000;l該方式可以對(duì)單個(gè)頁面的樣式進(jìn)行統(tǒng)一設(shè)置，但對(duì)于

3、局部不夠靈活。北京傳智播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !鏈接方式l通過head標(biāo)簽中l(wèi)ink標(biāo)簽來實(shí)現(xiàn)，前提也是先要有一個(gè)已定好的CSS文件。例：注：可以通過多個(gè)link標(biāo)簽鏈接進(jìn)來多個(gè)CSS文件。重復(fù)樣式以最后鏈接進(jìn)來的CSS樣式為準(zhǔn)。北京傳智播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !導(dǎo)入方式l前提是已經(jīng)存在一個(gè)定義好的CSS文件。網(wǎng)頁的一部分樣式需要用到，那么就用到這種方式。l例：limport url(css_3.css);ldiv color:#FF0000;ll注：url括號(hào)后面必須要用分號(hào)結(jié)束。如果導(dǎo)入進(jìn)來的樣式與本頁面定義的樣式

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

5、s選擇器。其實(shí)使用的標(biāo)簽中的class屬性 id選擇器。其實(shí)使用的是標(biāo)簽的中的id屬性。高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 CSS擴(kuò)展選擇器l關(guān)聯(lián)選擇器l組合選擇器l偽元素選擇器高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !關(guān)聯(lián)選擇器l標(biāo)簽是可以嵌套的，要讓相同標(biāo)簽中的不同標(biāo)簽顯示不同樣式，就可以用此選擇例：p color:#00FF00;p b color:#FF000;P標(biāo)簽劉德華段落樣式P標(biāo)簽段落北京傳智播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !組合選擇器l對(duì)多個(gè)不同選擇器進(jìn)行相同樣式設(shè)置的時(shí)候應(yīng)用此選擇器。 p,div

6、color:#FF0000;P標(biāo)簽顯示段落。DIV標(biāo)簽顯示段落注：多個(gè)不同選擇器要用逗號(hào)分隔開。北京傳智播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !偽元素選擇器l其實(shí)就在html中預(yù)先定義好的一些選擇器。稱為偽元素。是因?yàn)镃SS的術(shù)語。l格式：標(biāo)簽名：偽元素。a:link 超鏈接未點(diǎn)擊狀態(tài)。a:visited 被訪問后的狀態(tài)。a:hover 光標(biāo)移到超鏈接上的狀態(tài)（未點(diǎn)擊）a:active 點(diǎn)擊超鏈接時(shí)的狀態(tài)。北京傳智播客教育 高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 CSS的常見操作CSS中尺度單位的介紹字體設(shè)置文本設(shè)置背景設(shè)置列表設(shè)置盒子模型(border margin padding)定位設(shè)置(position,float,clear,z-index)鼠標(biāo)樣式設(shè)置(cursor)高級(jí)軟件人才實(shí)作培訓(xùn)專家高級(jí)軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 CSS濾鏡效果l濾鏡一詞是從攝影方面引過來的，就是濾光鏡，濾色