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

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

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

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

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

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