《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第12課 CSS與CSS3（三）_第1頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第12課 CSS與CSS3（三）_第2頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第12課 CSS與CSS3（三）_第3頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第12課 CSS與CSS3（三）_第4頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第12課 CSS與CSS3（三）_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

課題第12課CSS與CSS3（三）課時2課時（90min）教學(xué)目標(biāo)知識技能目標(biāo)：（1）熟悉CSS的特性（2）熟悉CSS樣式中的尺寸和顏色表達(dá)方式（3）熟悉CSS樣式中的文本控制素質(zhì)目標(biāo)：掌握CSS的相關(guān)知識，加深學(xué)生對網(wǎng)頁制作的進(jìn)一步了解，提升學(xué)生的知識儲備教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：CSS的繼承性、層疊性與優(yōu)先級教學(xué)難點(diǎn)：CSS的尺寸與顏色、CSS字體樣式和文本樣式教學(xué)方法問答法、討論法、講授法、實(shí)踐練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（25min）→頭腦風(fēng)暴（13min）第2節(jié)課：→傳授新知（37min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)請大家了解CSS的相關(guān)特性?！緦W(xué)生】完成課前任務(wù)通過課前任務(wù)，使學(xué)生了解本次課的相關(guān)內(nèi)容，增加學(xué)生的學(xué)習(xí)興趣考勤

（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問題導(dǎo)入（5min）【教師】提出以下問題CSS三個非常重要的特性分別是什么？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知

（25min）3.5CSS的繼承性、層疊性與優(yōu)先級【教師】講解CSS的繼承性、層疊性與優(yōu)先級等相關(guān)內(nèi)容3.5.1繼承性【課堂互動】?【教師】提問什么是CSS的繼承性？?【學(xué)生】聆聽、思考、回答CSS的繼承性是指書寫CSS樣式時，子元素會自動繼承為父元素設(shè)置的某些屬性?！臼纠?-5-1】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<div> <p>這是一個段落</p> <p>這是一個段落</p></div> <p>這是一個段落</p>在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：div{color:red;}效果：<div>標(biāo)簽的紅色屬性繼承給子標(biāo)簽<p>，<div>標(biāo)簽之外的<p>標(biāo)簽文本為默認(rèn)的黑色，沒有變化?！臼纠?-5-2】在【示例3-5-1】的div選擇器中追加邊框相關(guān)聲明，代碼如下：border:2pxredsolid;效果：為<div>加了一個2px的紅色實(shí)線邊框，但沒有繼承給子元素<p>?！咎崾尽浚?）關(guān)于文字樣式的屬性都具有繼承性，包括color和以text-、line-、font-開頭的屬性。（2）所有關(guān)于盒子的、定位的、布局的屬性都不能繼承，但一般可以將子元素的相關(guān)屬性的值設(shè)為inherit，來繼承父元素的相關(guān)屬性。3.5.2層疊性使用相同的選擇器為同一個元素設(shè)置相同的聲明時，一個聲明會覆蓋另一個有沖突的聲明。層疊性主要解決聲明沖突的問題，其原則是哪個聲明書寫在最后就執(zhí)行哪個聲明?！臼纠?-5-3】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<div>長江后浪推前浪，前浪推在沙灘上</div>在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：div{color:red; font-weight:700;}div{color:blue;}【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“層疊性效果”圖片（詳見教材），并講解效果：<div>標(biāo)簽的文本顏色屬性設(shè)置層疊，第二次設(shè)置的藍(lán)色覆蓋第一次設(shè)置的紅色；加粗樣式只設(shè)置了一次，不層疊。3.5.3優(yōu)先級在CSS樣式中，當(dāng)為同一元素設(shè)置多個聲明時，會涉及聲明的優(yōu)先級問題，即優(yōu)先執(zhí)行哪些CSS聲明。這主要通過各聲明在CSS樣式中的權(quán)重來實(shí)現(xiàn)?！菊n堂互動】?【教師】提問CSS樣式中有哪些規(guī)則？?【學(xué)生】聆聽、思考、回答1.選擇器的優(yōu)先級CSS為每種基礎(chǔ)選擇器都分配了一個權(quán)重，權(quán)重大小如下：內(nèi)聯(lián)樣式>id選擇器>類選擇器（偽類選擇器、屬性選擇器）>標(biāo)簽選擇器（偽元素選擇器）>通配符選擇器?！臼纠?-5-4】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<p>猜猜我什么顏色，紅色？黃色？綠色？</p><pclass="content-class">猜猜我什么顏色，紅色？黃色？綠色？</p><pclass="content-class"id="content-id">猜猜我什么顏色，紅色？黃色？綠色？</p><pclass="content-class"id="content-id"style="color:purple;"> 猜猜我什么顏色，紅色？黃色？綠色？</p>在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：#content-id{color:red;}.content-class{color:yellow;}p{color:green;}【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“選擇器的優(yōu)先級”圖片（詳見教材），并講解效果：內(nèi)聯(lián)樣式的優(yōu)先級最高，所以第四行為紫色；id選擇器的優(yōu)先級高于類選擇器，所以第三行為紅色；類選擇器的優(yōu)先級高于標(biāo)簽選擇器，所以第二行為黃色；標(biāo)簽選擇器p控制第一行，顏色為綠色。2.!important權(quán)重最大【教師】講解!important權(quán)重最大CSS樣式屬性中有“!important”標(biāo)識的優(yōu)先級最高?！臼纠?-5-5】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<divclass="content-class"id="content-id">猜猜我什么顏色，紅色？黃色？綠色？</div>在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：#content-id{color:red;}.content-class{color:yellow;}div{color:green!important;}【教師】ppt展示“!important的優(yōu)先級”圖片（詳見教材），并講解效果：雖然標(biāo)簽選擇器的優(yōu)先級低于類選擇器和id選擇器，但因?yàn)樵跇?biāo)簽選擇器div中有“!important”標(biāo)識代碼，所以最終執(zhí)行該選擇器中的屬性設(shè)置，文本顏色為綠色。3.復(fù)合選擇器的權(quán)重疊加對于由多個基礎(chǔ)選擇器構(gòu)成的復(fù)合選擇器（并集選擇器除外），其權(quán)重值可表示為a，b，c。其中，a，b，c分別為復(fù)合選擇器中id選擇器、類選擇器（或同級選擇器）和標(biāo)簽選擇器（或同級選擇器）出現(xiàn)的次數(shù)。無論b有多大，只要a大于0，b的權(quán)重都小于a；以此類推。例如，有兩個選擇器，一個選擇器的權(quán)重為a=1，b=0，c=0，另外一個選擇器的權(quán)重為a=0，b=15，c=11，則前者的權(quán)重更大。【示例3-5-6】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<divid="father"class="c1"><pid="son"class="c2">試問這行字體是什么顏色的？</p></div>在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：#father#son{color:blue;}#fatherp.c2{color:black;}div.c1p.c2{color:red;}#father{color:green!important;}效果：個【提示】開發(fā)者通常用自己慣用的方式控制樣式，并不會過多進(jìn)行權(quán)重計(jì)算?！緦W(xué)生】聆聽、記錄、理解3.6CSS的尺寸與顏色【教師】講解CSS樣式中尺寸和顏色表達(dá)方式3.6.1CSS尺寸1.絕對尺寸CSS樣式中的絕對尺寸主要有以下幾種單位：（1）cm：厘米。（2）mm：毫米。（3）in：英寸，1in=96px=2.54cm=72pt。（4）px：像素。（5）pt：點(diǎn)。（6）pc：派卡，1pc=12pt。2.相對尺寸CSS樣式中的相對尺寸主要有以下幾種表示方式：（1）em：相對于當(dāng)前容器內(nèi)的字體尺寸，可用nem表示（n表示倍數(shù)，如1，2，3。下同）。（2）ex：相對于當(dāng)前字體的高度，可用nex表示。（3）ch：相對于數(shù)字“0”的寬度，可用nch表示。（4）rem：相對于根元素的字體尺寸，可用nrem表示?！ㄔ斠娊滩模菊n堂互動】?【教師】提問CSS絕對尺寸和相對尺寸有什么異同點(diǎn)？?【學(xué)生】聆聽、思考、回答3.6.2CSS顏色1.使用顏色關(guān)鍵字顏色關(guān)鍵字即顏色英文名稱，共有140種，如紅色的顏色關(guān)鍵字為red。2.使用十六進(jìn)制顏色十六進(jìn)制顏色是以“#”開頭的6位十六進(jìn)制數(shù)。從開始到結(jié)尾，每兩位十六進(jìn)制依次代表紅色、綠色、藍(lán)色，最終顯示的顏色是這3種顏色的混合色。在CSS樣式中使用十六進(jìn)制表達(dá)顏色時，通常其中的A-F寫成大寫。此外，當(dāng)六位十六進(jìn)制數(shù)全部相同時，可以簡寫為三位十六進(jìn)制數(shù)，如“#FFFFFF”可簡寫為“#FFF”。3.使用RGB顏色RGB顏色是用紅、綠、藍(lán)三色混合而成的顏色。其在CSS樣式中的表達(dá)格式為：rgb(red,green,blue)其中的red、green、blue的值均可以是整數(shù)0～255，分別表示紅色、綠色、藍(lán)色的強(qiáng)度。例如，rgb(255,0,0)表示紅色；rgb(238,130,238)表示紫色，rgb(0,0,255)表示藍(lán)色。4.使用RGBA顏色RGBA顏色是CSS3新增的顏色表示方法。其在CSS樣式中的表達(dá)格式為：rgba(red,green,blue,alpha)其中前三個參數(shù)同RGB。alpha是介于完全透明0.0和完全不透明1.0之間的數(shù)字。【示例3-6-1】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<divid="box"> <imgsrc="img/btn.jpg"width="150"></div>在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：#box{width:300px; height:300px;background-color:rgba(20,200,200);}將CSS代碼中的background-color屬性改寫為以下代碼。background-color:rgba(20,200,200,0.3);【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“rgba屬性設(shè)置透明度效果的前后對比”圖片（詳見教材），并講解效果：圖片不透明，#box盒子為半透明?！緦W(xué)生】聆聽、記錄、理解5.使用HSL顏色HSL顏色是用色相、飽和度和明度表示的顏色。其在CSS樣式中的表達(dá)格式為：hsl(hue,saturation,lightness)（1）色相（hue）是指顏色的相貌（就是我們通常說的各種顏色），用色輪上從0到360的度數(shù)表示。（2）飽和度（saturation）是指顏色的純度，用百分比值表示，如100%表示顏色最純。（3）亮度（lightness）是指顏色的明暗度，也用百分比值表示。6.使用HSLA顏色hsla(hue,saturation,lightness,alpha)其中前三個參數(shù)同HSL表達(dá)方式，alpha參數(shù)取值同RGBA。7.使用opacity屬性【示例3-6-2】修改【示例3-6-1】CSS樣式中的顏色屬性，具體代碼如下：#box{width:300px; height:300px; background-color:rgb(20,200,200); opacity:0.3;}【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“opacity屬性設(shè)置效果”圖片（詳見教材），并講解效果：圖片和#box盒子均為半透明?！咎崾尽縭gba()、hsla()和opacity都能實(shí)現(xiàn)透明效果。它們最大的不同是opacity除作用于元素外，還同時作用于元素內(nèi)的所有內(nèi)容；而rgba()和hsla()只作用于元素本身，即背景色或文本顏色的透明度。【學(xué)生】聆聽、記錄、理解通過教師講解、課堂互動、演示操作等方式，使學(xué)生了解CSS的繼承性、層疊性與優(yōu)先級，以及CSS樣式中的尺寸和顏色表達(dá)方式頭腦風(fēng)暴（13min）【教師】根據(jù)頭腦風(fēng)暴主題，組織學(xué)生分組開展討論根據(jù)各隊(duì)伍的網(wǎng)站主題，討論如何將文本顏色屬性設(shè)置層疊、第二次設(shè)置的藍(lán)色覆蓋第一次設(shè)置的紅色？【學(xué)生】思考、討論通過頭腦風(fēng)暴的形式，活躍課堂氣氛，引發(fā)學(xué)生思考，培養(yǎng)學(xué)生的創(chuàng)新能力和團(tuán)隊(duì)精神第二節(jié)課問題導(dǎo)入（3min）【教師】提出以下問題CSS是通過哪些樣式來設(shè)置文本外觀的？【學(xué)生】思考、舉手回答通過提問引導(dǎo)學(xué)生思考本節(jié)課內(nèi)容傳授新知

（37min）3.7CSS文本控制文本是網(wǎng)頁的主要元素，CSS通過字體樣式和文本樣式等來設(shè)置文本的外觀。3.7.1字體樣式【教師】講解字體樣式的內(nèi)容與示例【課堂互動】?【教師】提問CSS中的字體樣式主要包括哪些內(nèi)容？?【學(xué)生】聆聽、思考、回答CSS中的字體樣式主要包括文字的字體、大小、粗細(xì)、樣式和行高。1.字體font-family屬性名稱：font-family。屬性的值：字體1名稱，字體2名稱，……。屬性作用：為元素指定字體屬性，按照優(yōu)先級順序，當(dāng)字體1存在時，優(yōu)先使用字體1；如果字體1不存在，則優(yōu)先使用字體2；以此類推。字體之間用英文逗號分隔?！臼纠?-7-1】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<pclass="p1">從本質(zhì)上講，“工匠精神”是一種職業(yè)精神，它是職業(yè)道德、職業(yè)能力、職業(yè)品質(zhì)的體現(xiàn)，是從業(yè)者的一種職業(yè)價值取向和行為表現(xiàn)。在新的時代弘揚(yáng)和踐行“工匠精神”，須深入把握其基本內(nèi)涵與當(dāng)代價值。</p>……（詳見教材）在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：*{ box-sizing:border-box; font-size:14px; margin:0;}.p1{width:500px;……（詳見教材）效果：【提示】（1）中文字體名稱或英文字體名稱中包含空格、#、$等符號時，需要添加英文標(biāo)點(diǎn)引號。（2）引用多種字體時，英文字體位于中文字體之前。2.字體大小font-size【課堂互動】?【教師】提問字體大小font-size在CSS文本控制中有什么作用？?【學(xué)生】聆聽、思考、回答屬性名稱：font-size。屬性的值：字體大小?？梢允墙^對單位，最常用的是px；也可以是相對單位。屬性作用：為元素指定字體大小?！臼纠?-7-2】為【示例3-7-1】中的選擇器“.p1”添加聲明：font-size:20px;效果：與【示例3-7-1】相比，字體變大。3.字體粗細(xì)font-weight【課堂互動】?【教師】提問字體粗細(xì)font-weight的屬性值有哪些？其具有什么作用？?【學(xué)生】聆聽、思考、回答屬性名稱：font-weight。屬性的值：normal（字體為正常的字體，相當(dāng)于參數(shù)為400）；bold（字體為粗體，相當(dāng)于參數(shù)為700）；bolder（字體為特粗體）；lighter（字體為細(xì)體）；inherit（字體粗細(xì)為繼承上級元素的font-weight屬性設(shè)置）；100-900（設(shè)置不同的字體粗細(xì)）。屬性作用：為元素指定字體的粗細(xì)?！臼纠?-7-3】為【示例3-7-2】中的選擇器“.p1”添加聲明：font-weight:bold;效果：與【示例3-7-2】相比，字體變粗。4.字體樣式font-style屬性名稱：font-stlye。屬性的值：normal（字體為標(biāo)準(zhǔn)字體樣式）；italic（字體為斜體）；oblique（字體為傾斜）。屬性作用：為元素指定字體的樣式，包括標(biāo)準(zhǔn)、斜體和傾斜。【示例3-7-4】為【示例3-7-2】中的CSS選擇器“.p1”添加聲明：font-style:italic;效果：與【示例3-7-3】相比，字體變?yōu)樾斌w。5.行高line-height屬性名稱：line-height。屬性的值：行間距（常用單位為px）。屬性作用：為元素指定行間距?！臼纠?-7-5】為【示例3-7-4】中的CSS選擇器“.p1”添加聲明：line-height:40px;效果：與【示例3-7-4】相比，行高變?yōu)?0px。6.font綜合設(shè)置字體樣式font是對字體樣式進(jìn)行綜合設(shè)置，格式如下：選擇器{font:font-stylefont-weightfont-size/line-heightfont-family;}使用font綜合設(shè)置字體樣式時，需要按照以上順序書寫，各個屬性以空格分隔。其中不需要設(shè)置的值可以省略，但是必須保留font-size和font-family屬性?！臼纠?-7-6】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<pclass="p1">美文欣賞</p><pclass="p2">美文欣賞</p>在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：.p1{line-height:60px; font-family:"楷體"; font-size:40px; font-weight:bold;……（詳見教材）【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“font綜合設(shè)置字體樣式效果”圖片（詳見教材），并講解效果：使用.p1和.p2選擇器設(shè)置的文字樣式完全相同。7.定義服務(wù)器字體@font-face在網(wǎng)頁設(shè)計(jì)中，可以使用@font-face定義服務(wù)器字體，以顯示客戶端未安裝的字體。其語法格式如下：@font-face{font-family:字體名稱;src:url(字體路徑);}【示例3-7-7】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<p>熱烈慶祝中國共產(chǎn)黨成立一百周年</p>在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：@font-face{ font-family:newfontface; src:url(zzgf.otf);}p{ font-family:newfontface; font-size:25px; color:red;}【教師】ppt展示“@font-face定義服務(wù)器字體效果”圖片（詳見教材），并講解效果：為文字設(shè)置了新的服務(wù)器字體樣式。【提示】上述示例中，字體文件zzgf.otf需與HTML文檔在同一目錄。【學(xué)生】聆聽、記錄、理解3.7.2文本樣式【教師】講解文本樣式的內(nèi)容與示例【課堂互動】?【教師】提問CSS的文本樣式主要包括哪些內(nèi)容？?【學(xué)生】聆聽、思考、回答CSS的文本樣式主要包括文本的顏色、對齊方式、修飾、縮進(jìn)和間距等。1.文本顏色color屬性名稱：color。屬性的值：顏色。屬性作用：為元素指定文本顏色?！臼纠?-7-8】為【示例3-7-1】中的選擇器“.p1”添加聲明：color:blue;效果：與【示例3-7-1】相比，字體顏色變?yōu)樗{(lán)色。2.文本水平對齊方式text-align【教師】文本水平對齊方式text-align的示例屬性名稱：text-align。屬性的值：left（向左對齊）；right（向右對齊）；center（水平居中對齊）；justify（水平兩端對齊）。屬性作用：指定文本段落的水平對齊方式?！臼纠?-7-9】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<pclass="p1">美文欣賞</p>在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：.p1{width:200px; height:30px; border:1pxsolid#B91720; font-size:20px; line-height:30px; text-align:center;}【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“文本對齊屬性應(yīng)用效果”圖片（詳見教材），并講解效果：段落中的文字水平居中在盒子中。3.文本修飾text-decoration【教師】文本修飾text-decoration的示例屬性名稱：text-decoration。屬性的值：none（無修飾）；underline（為文本添加下劃線效果）；overline（為文本添加頂劃線效果）；line-through（為文本添加刪除線效果）。屬性作用：為文本指定修飾效果?！臼纠?-7-10】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<ahref="">百度</a><p>百度一下你就知道</p>在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：a{text-decoration:none;}p{text-decoration:underline;}效果：<a>標(biāo)簽無文本修飾；<p>標(biāo)簽的文本修飾為下劃線。4.文本首行縮進(jìn)text-indent屬性名稱：text-indent。屬性的值：縮進(jìn)距離。屬性值可以使用不同單位的數(shù)值、em字符寬度的倍數(shù)或者相對于瀏覽器窗口設(shè)百分比，可以使用負(fù)值，建議使用em做單位。屬性作用：為文本段落指定首行縮進(jìn)?！臼纠?-7-11】為【示例3-7-1】中的選擇器“.p1”添加聲明：text-indent:2em;效果：與【示例3-7-1】相比，段落首行縮進(jìn)兩個字符寬度。5.英文字體大小寫text-transform【教師】英文字體大小寫text-transform的示例屬性名稱：text-transform。屬性的值：capitalize（首字母大寫）；uppercase（所有字母全部大寫）；lowercase（所有字母全部小寫）。屬性作用：為文本指定英文字母大小寫規(guī)則?！臼纠?-7-11】在HTML文檔<body>標(biāo)簽內(nèi)布局以下元素：<pclass="p1"> Let'slookbackalltheseyearsyou'vegonethrough,whathaveyoudoneforyourlife?</p>在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：.p1{text-transform:capitalize;}效果：每個單詞的首字母均為大寫。6.字間距l(xiāng)etter-spacing屬性名稱：letter-spaing。屬性的值：字間距（常用單位為px）。屬性作用：為文本指定字間距。【示例3-7-13】為【示例3-7-12】中的選擇器“.p1”添加聲明：letter-spacing:7px;【教師】ppt展示圖片“字符間距設(shè)置效果”（詳見教材），輔助并講解字符間距設(shè)置效果效果：每個字符之間的間距變?yōu)?px。7.空白符處理white-space【課堂互動】?【教師】提問空白符處理應(yīng)該有哪些屬性值？?【學(xué)生】聆聽、思考、回答屬性名稱：white-space。屬性的值：normal（忽略空白符，且保留換行符，即文本碰到容器邊界時自動換行）；nowrap（空白符無效，且文本不會換行，直到遇到<br>標(biāo)簽）；pre-wrap（保留空白符，且保留換行符，即文本碰到容器邊界時自動換行）；pre-line（將多個連續(xù)的空白符合并成一個空格，且保留換行符）；pre（保留空白符，且文本不會換行，直到遇到<br>標(biāo)簽）；inherit（從父元素繼承該屬性的值）。屬性作用：設(shè)置空白符（如空格、回車）和換行的處理方式。【示例3-7-14】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<pclass="p1">從本質(zhì)上講，“工匠精神”是一種職業(yè)精神，它是職業(yè)道德、職業(yè)能力、職業(yè)品質(zhì)的體現(xiàn)，是從業(yè)者的一種價值取向和行為表現(xiàn)。<br/>在新的時代弘揚(yáng)和踐行“工匠精神”，須深入把握其基本內(nèi)涵與當(dāng)代價值。<br/></p>在HTML文檔<style>標(biāo)簽內(nèi)寫入css選擇器：.p1{width:500px; padding:5px; font-family:"楷體","微軟雅黑"; font-size:20px; background:pink; white-space:pre-wrap;}效果：段落中的文字保留空格且正常換行。【示例3-7-15】將【示例3-7-14】中white-space屬性修改為以下值：white-space:nowrap;【教師】ppt展示“空白符處理效果（nowrap）”圖片（詳見教材），并講解效果：段落中的文字不換行，直到遇到換行符<br/>，且不保留多余空格。8.文本溢出處理text-overflow屬性名稱：text-overflow。屬性的值：clip（不顯示省略標(biāo)記“…”，只簡單地裁切）；ellipsis（文本溢出時顯示省略標(biāo)記“…”）。屬性作用：指定元素中文本溢出的處理方式?！臼纠?-7-16】為【示例3-7-15】中的選擇器“.p1”添加聲明：.p1{width:500px; padding:5px; font-family:"楷體"; font-size:20px;……（詳見教材）效果：對文本中的溢出部分進(jìn)行簡單裁切?！臼纠?-7-17】將【示例3-7-16】中的text-overflow屬性值修改如下：text-overflow:ellipsis;【教師】ppt展示圖片“文本溢出處理（ellipsis）”（詳見教材），輔助并講解文本溢出處理（ellipsis）效果：對于文本中溢出的部分顯示省略標(biāo)記，如圖3-7-12所示。9.文字陰影text-shadow【教師】文字陰影text-shadow的示例【課堂互動】?【教師】提問文字陰影text-shadow應(yīng)該有哪些屬性值？?【學(xué)生】聆聽、思考、回答屬性名稱：text-shadow。屬性的值：陰影水平延伸值陰影垂直延伸值陰影模糊作用距離陰影顏色屬性作用：設(shè)置文本陰影樣式?！臼纠?-7-18】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<pclass="p1">美文欣賞</p>在HTML文檔<style>標(biāo)簽內(nèi)寫入CSS選擇器：.p1{line-height:60px; font-family:"宋

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論