1、信息發(fā)布與網(wǎng)頁設(shè)計(jì)DREAMWEAVER 11 CSS信息學(xué)院信息發(fā)布與網(wǎng)頁設(shè)計(jì)課題組13 十月 20222022/10/13111.1樣式表的的內(nèi)嵌、外連11.2創(chuàng)建樣式式表11.3創(chuàng)建外部部樣式表表11.4CSS編輯器11.5應(yīng)用CSS樣式表11.6管理CSS樣式表第11章 主要要內(nèi)容2020-02-10211.1 CSS介紹紹什么是CSS？CascadingStyleSheets，層疊樣式式表CSS的好處擴(kuò)展了HTML的顯示樣樣式；顯示樣式式與數(shù)據(jù)據(jù)內(nèi)容分分離，便便于修改改樣式或或數(shù)據(jù)；可共享，以統(tǒng)一一顯示風(fēng)風(fēng)格。當(dāng)前版本本：W3C制定的兩兩個(gè)版本本：CSS1、CSS2。2020-02-

2、103CSS語語法選擇符屬性名1:屬性性值1;屬性名n:屬性值n選擇符一一般是:標(biāo)記名稱稱：如h1、h2、p等類名稱：英文句句點(diǎn)開始始，以英英文字符符命名，如.abc擴(kuò)展：filterCSS語句樣例例：pfont-size:40pt; font-family:隸書;color:greenCSS中的注釋釋/*這是CSS中的注釋釋*/2020-02-104CSS的的使用兩種應(yīng)用用：外聯(lián)聯(lián)、內(nèi)嵌嵌內(nèi)嵌。外聯(lián)文件名.擴(kuò)展名名2020-02-105CSS的的使用導(dǎo)入在HTML中用import命令導(dǎo)入入樣式表表importurl( style.css)2020-02-106CSS內(nèi)內(nèi)嵌樣例例CSS樣例p

3、font-size:12pt;font-family:隸書p:first-letterfont-size:400%;float:left惠園是我我們共同同的家用style標(biāo)記內(nèi)嵌嵌樣式單單定義P標(biāo)記、首首字母大大小2020-02-107CSS的的代碼輸輸入在DW中輸入代代碼的技技巧在代碼視視圖狀態(tài)態(tài)下、;、左、右尖尖括號(hào)，大括號(hào)號(hào)、空格格、分號(hào)號(hào)的輸入入均可觸觸發(fā)供選選擇的下下拉列表表。雙擊擊其中的的列表項(xiàng)項(xiàng)，即可可擇其自自動(dòng)填入入。2020-02-10811.2 DW中創(chuàng)建建CSS方法一:“窗口”“CSS樣式”面面板上單單擊鼠標(biāo)標(biāo)右鍵，選擇“新建”；方法二:通過“CSS樣式”面面板上的的帶+

4、的的按鈕，打開“新建CSS樣式”對(duì)對(duì)話框。2020-02-10911.3 選用用外部CSS樣樣式方法一:“窗口” “CSS樣式”，打開“CSS樣式”面面板；單擊右上上角的下下拉菜單單；選擇“附附加樣式式表”；單擊“預(yù)預(yù)覽”，選擇外外部樣式式表文件件。方法二:通過“CSS樣式”面面板上的的“附加加樣式表表”按鈕鈕，打開開“附加加外部樣樣式表”對(duì)話框框。余同同方法一一。2020-02-1010CSS中中的類：CLASS及及IDCSS的類class和標(biāo)識(shí)id選擇符class可有區(qū)別別的表現(xiàn)現(xiàn)相同的的HTML元素；id可有區(qū)別別的表現(xiàn)現(xiàn)相同的的HTML元素，內(nèi)內(nèi)容必須須唯一；class類由半角角英文句

5、句點(diǎn)(.)開始始；標(biāo)識(shí)id由半角英英文井號(hào)號(hào)(#)定義之之前。.intro color:red; font-weight:bold;#studentidbackground-color:silver2020-02-1011CSS中中的類CLASS及IDHTML中應(yīng)用如如下：網(wǎng)頁制作作id和class不同之處處在于：id用在內(nèi)容容唯一的的元素上上，class可用在多多個(gè)元素素上。2020-02-101211.4 CSS編輯輯器-1類字體字號(hào)樣式行高粗細(xì)變量大、小寫寫顏色修飾2020-02-101311.4 CSS編輯輯器-2背景、?？赏ㄟ^添添加BGCOLOR屬性，來來設(shè)置不不同區(qū)域域的背景景顏色

6、或或圖象。設(shè)置 重復(fù)水平位置置垂直位置置2020-02-101411.4 CSS編輯輯器-3區(qū)塊單詞間距距字母間距距垂直對(duì)齊齊文本對(duì)齊齊文字縮進(jìn)進(jìn)2020-02-101511.4 CSS編輯輯器-3標(biāo)簽SPAN和DIV的區(qū)別DIV(division)是一個(gè)塊塊級(jí)元素素，其左左、右無無法再放放置其它它內(nèi)容。SPAN是行內(nèi)元元素，SPAN的前后是是不會(huì)換換行的，它沒有有結(jié)構(gòu)的的意義，純粹是是應(yīng)用樣樣式，當(dāng)當(dāng)其他行行內(nèi)元素素都不合合適時(shí)，可以使使用SPAN。2020-02-101611.4 CSS編輯輯器-4盒子寬、高 浮動(dòng) 清除 填充 邊界2020-02-101711.4 CSS編輯輯器-5邊框

7、樣式 寬度 顏色2020-02-101811.4 CSS編輯輯器-6列表 類型圓點(diǎn)、圓圓圈方快、數(shù)數(shù)字大、小寫寫羅馬數(shù)數(shù)字大、小寫寫字母2020-02-101911.4 CSS編輯輯器-7定位層的類型型顯示：繼繼承、可可見、隱隱藏Z-index層的位置置、大小小益處處理理剪輯：定定義層的的可見部部分2020-02-102011.4 CSS編輯輯器-8擴(kuò)展 分頁 光標(biāo) 濾鏡2020-02-1021CSS樣樣式單的的使用-濾鏡效效果filter:屬性名（參數(shù)列列表）Alpha(90%)透明度設(shè)設(shè)置Blur()高速度移移動(dòng)的模模糊效果果Chroma()將指定的的顏色設(shè)設(shè)置為透透明Fliph/flip

8、v水平/垂直翻轉(zhuǎn)轉(zhuǎn)Glow()發(fā)光Gray()灰度2020-02-1022CSS樣樣式單的的使用-濾鏡效效果Dropshadow()投影Shadow()陰影Xray只顯示輪輪廓例filter:xray只顯示文文字、圖圖片的輪輪廓，似似X光效果。2020-02-102311.5 應(yīng)用用CSS樣式擴(kuò)展 分頁 光標(biāo) 濾鏡2020-02-102411.6 管理理CSS樣式編輯CSS樣式修改CSS樣式拷貝CSS樣式刪除CSS樣式2020-02-1025CSS中中定義背背景圖片片bodydisplay:block;background-image:url(lspbh.jpg);background-rep

9、eat:no-repeat也可以為為某個(gè)元元素定義義背景圖圖片，只只要將根根元素名名換成相應(yīng)應(yīng)的元素素名即可可。2020-02-1026CSS中中使用中中文在CSS中顯示中中文在CSS第1行添添加如下下語句，即可在在CSS中使用各各種中文文字體charset gb2312;2020-02-1027CSS樣樣式單中中的主要要屬性名稱說明font-family字型族名名稱font-style字型樣式font-weight字型粗細(xì)font-stretch緊縮、擴(kuò)擴(kuò)張font-size字型大小小color顏色text-indent文字縮排方式text-align文字對(duì)齊方式text-shadows文字

10、陰影text-transform文字變化2020-02-1028CSS版版面屬屬性名稱說明display顯示狀態(tài)width寬度background-color背景顏色2020-02-1029屬性值的設(shè)定Display屬性Block塊Inline字符顯示示在同一行l(wèi)ist-item列表顯示None不顯示的內(nèi)容background-color屬性設(shè)定背景景顏色rgb指定法Border屬性top、bottom、left、right。2020-02-1030CSS樣樣式單的的使用絕對(duì)英寸（in）1 in =2.54cm厘米（cm）1 cm =0.3937 in毫米（mm）1 mm =0.1 cm磅（p

11、t）1 pt =1/72in= 0.3528mm派卡（pc）1 pc =12pt=1/6in2020-02-1031CSS樣樣式單的的使用相對(duì)單位位em字母M的寬度；Ex字母X的高度px像素點(diǎn)%百分分比絕對(duì)單位位In英寸(1 英寸寸 =2.54厘厘米)。Cm厘米Mm毫米。Pt磅(1磅磅= 1/72英英寸)Pc皮卡(1 皮卡卡 =12磅磅)。如父元素素指定font-size=12pt,則其子元元素定義義Font-size=150%，即18pt。2020-02-1032CSS樣樣式單的的使用塊級(jí)(block)內(nèi)聯(lián)(inline)列表項(xiàng)(list-item)不可見(none)2020-02-1033

12、CSS樣樣式單的的使用-顏色單單位四種顏色名稱稱、十進(jìn)進(jìn)制(0255)、十六進(jìn)進(jìn)制(00ff)、百分比比。contentcolor:redcontentcolor:rgb(silvercontentcolor:rgb(0%,50%,50%)contentcolor:rgb(00,00, ff)紅綠綠黃黃2020-02-1034CSS中中的定位位CSS定位：相相對(duì)/絕絕對(duì)定位位position屬性決定定元素位位置類型型Position=absolute| relative |staticabsolute：屏幕上的的絕對(duì)位位置。relative：屏幕上的的相對(duì)位位置。static：固有位置置。2020-02-1035CSS中中的定位位頁面位置元素區(qū)域頁邊距margin填充距Padding2020-02-1036CSS中中的定位位z-index屬性：CSS允許元素素重疊顯顯示，z-index屬性用整