HTML CSS DIV網(wǎng)頁設(shè)計與布局（第3版）（微課版）-教案 第8章 設(shè)置文字和文本樣式

電子商務(wù)網(wǎng)頁設(shè)計與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實踐□理實一體習(xí)題復(fù)習(xí)□考核評價□其他活動□學(xué)習(xí)量安排課內(nèi)：課外形式調(diào)查分析小組研討□實踐任務(wù)理論探究□考核評價□匯報展示□其他活動課外：序號8授課日期月日月日月日月日授課班級課內(nèi)教學(xué)內(nèi)容：第8章設(shè)置文字和文本樣式課外學(xué)習(xí)任務(wù)：（1）課前：以小組為單位，討論使用CSS設(shè)置文字和文本樣式的相關(guān)知識并以PPT的形式記錄下來。（2）課后：=1\*GB3①使用font屬性的多個屬性值設(shè)置網(wǎng)頁中指定文字的樣式。=2\*GB3②使用文本樣式設(shè)置中的各個屬性來設(shè)置網(wǎng)頁中文本的樣式。=3\*GB3③使用CSS中的line-height屬性和letter-spacing屬性來設(shè)置網(wǎng)頁中文本的間距。教學(xué)目標(biāo)：知識目標(biāo)掌握設(shè)置文字樣式。掌握設(shè)置文本樣式。掌握空格與換行。掌握設(shè)置間距。能力目標(biāo)能夠?qū)崿F(xiàn)為文字添加樣式；能夠靈活使用文本樣式。素質(zhì)目標(biāo)較強的專業(yè)知識和自學(xué)能力；豐富知識結(jié)構(gòu)，提升專業(yè)知識；掌握jQuery動畫效果的使用，理解并應(yīng)用專業(yè)知識。重點難點及解決方法：（1）重點：使用CSS為文字添加樣式解決方法：通過知識點講解+課堂示例相結(jié)合的方法，教師講解使用CSS為文字添加樣式，引導(dǎo)學(xué)生積極思考，掌握相應(yīng)知識；同時通過課堂示例展示，使學(xué)生可以掌握使用CSS為文字添加樣式的能力；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點：使用CSS添加文本樣式解決方法：通過案例解析+啟發(fā)式教學(xué)講解的方式，細致講解使用CSS添加為網(wǎng)頁中的文本添加樣式。從實用的角度幫助學(xué)生提高專業(yè)知識。課內(nèi)教學(xué)授課地點：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計算機、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習(xí)效果評價方式：對理論知識學(xué)習(xí)效果評價：采用課堂提問、課后習(xí)題和查閱技術(shù)論文研讀筆記的方式；對技能的評價：教師對學(xué)生上交網(wǎng)頁作品按制作要求進行綜合性評價；對職業(yè)素養(yǎng)的評價：采用學(xué)生自評、小組內(nèi)評價和教師評價相結(jié)合的方式。課后小結(jié)：填表說明：1.序號，指該課程授課的順序號，應(yīng)與授課計劃一致；2.授課形式在相應(yīng)的選項打“√”。課內(nèi)教學(xué)內(nèi)容及過程時間分配方法及手段1.設(shè)置文字樣式【設(shè)置文字字體】在HTML中可以使用<fontface="字體名">來設(shè)置文字字體。在CSS中設(shè)置文字字體的屬性是font-family，其語法格式如下。font-family:"字體1","字體2","字體3",…可以為文字設(shè)置多個字體，當(dāng)在運行頁面的瀏覽器中找不到第一種字體時，就會以第二種字體顯示；如果也找不到第二種字體，則會以第三種字體顯示，以此類推。如果設(shè)置的幾種字體在瀏覽器中都無法找到，就自動以瀏覽器設(shè)置的默認字體顯示?！驹O(shè)置文字大小】設(shè)置文字大小是指為頁面中的文字設(shè)置絕對大小或相對大小。設(shè)置相對大小是指文字為相對父對象文字尺寸來設(shè)置的，包括larger和smaller，它使用成比例的em單位計算。設(shè)置絕對大小是指設(shè)置固定的文字大小，包括xx-small、x-small、larger等。說明：雖然這里可以用英文單詞設(shè)置絕對大小，但是這些文字在瀏覽器中的顯示效果與瀏覽器的設(shè)置有關(guān)，而不是真正絕對不變的。這些表示絕對大小的詞就是針對瀏覽器設(shè)置的字體而定的。除了使用英文單詞表示文字大小之外，還有一種設(shè)置文字大小的方式是使用具體的長度值或百分比。CSS樣式表中可設(shè)置的文字大小如表8.1所示。表8.1CSS樣式表中可設(shè)置的文字大小類型font-size取值或單位含義用英文單詞表示絕對大小xx-small極小x-small很小small小medium中l(wèi)arge大x-large很大xx-large極大用英文單詞表示相對大小larger較大，一般比父對象中的字體大一些smaller較小，一般比父對象中的字體小一些采用具體的長度值（浮點數(shù)+單位）pt點，1pt=1/72inpx像素in英寸采用百分比%相對父對象中字體尺寸的比例使用CSS樣式設(shè)置文字大小的語法格式如下。font-size:文字的大小這里的文字大小取值就是表8.1中的幾種，不同取值的運行效果也不相同?！驹O(shè)置粗體】在頁面中經(jīng)常會使用加粗的字體表示強調(diào)，在HTML標(biāo)簽中加粗的程度只有一種；通過CSS樣式可以為文字設(shè)置不同程度的加粗效果，其語法格式如下。font-weight:字體的粗度字體的粗細程度可以使用數(shù)值表示，也可以使用英文單詞表示，具體如表8.2所示。表8.2設(shè)置字體的粗細字體粗細取值含義100~900數(shù)值越小，字體也越細，要求所取的數(shù)值是整百的，即只有100、200、300等normal正常字體效果bold加粗字體，其字體的粗細與字體設(shè)置為700時的效果基本相同bolder特粗字體，就是在加粗字體的基礎(chǔ)上再加粗，基本相當(dāng)于設(shè)置為900的效果lighter細體字，相對默認字體更細一些在頁面中經(jīng)常會使用加粗的字體表示強調(diào)，在HTML標(biāo)簽中加粗的程度只有一種；通過CSS樣式可以為文字設(shè)置不同程度的加粗效果，其語法格式如下。font-weight:字體的粗度字體的粗細程度可以使用數(shù)值表示，也可以使用英文單詞表示，具體如表8.2所示。表8.2設(shè)置字體的粗細字體粗細取值含義100~900數(shù)值越小，字體也越細，要求所取的數(shù)值是整百的，即只有100、200、300等normal正常字體效果bold加粗字體，其字體的粗細與字體設(shè)置為700時的效果基本相同bolder特粗字體，就是在加粗字體的基礎(chǔ)上再加粗，基本相當(dāng)于設(shè)置為900的效果lighter細體字，相對默認字體更細一些【設(shè)置文字顏色】CSS樣式表中設(shè)置文字顏色的屬性是color，其語法格式如下。color:顏色代碼/顏色名稱顏色代碼是指顏色的十六進制數(shù)，顏色名稱是顏色的英文名。【設(shè)置斜體】在CSS樣式表中，也可以將文字設(shè)置為斜體顯示，而且傾斜的程度有傾斜字體和偏斜體兩種。設(shè)置斜體文字的語法格式如下。font-style:normal｜italic｜obliquefont-style可以取normal（正常字體）、italic（傾斜）和oblique（偏斜體）3種?！揪C合設(shè)置】前面介紹的幾種屬性都是以font開始的，其表示這幾種屬性都屬于同一類別，都用來設(shè)置文字的字體效果。在CSS樣式表中，還可以很方便地設(shè)置字體屬性，即直接使用font屬性進行設(shè)置。其語法格式如下。font:字體屬性取值可以直接設(shè)置字體的各種屬性值，各屬性值之間用空格隔開。2.設(shè)置文本樣式【設(shè)置陰影效果】CSS3中允許設(shè)置文本的陰影，讓文本看起來更有立體感。設(shè)置陰影的屬性為text-shadow，其語法格式如下。text-shadow:none|color|length|length|length|inherit各屬性值的含義如下。none：不設(shè)置陰影。color：陰影的顏色。length：長度值。inherit：繼承父級樣式。CSS中的陰影有3個length要設(shè)置，第一個是水平方向的距離，可以為負值；第二個是垂直方向的距離，可以為負值；第三個為模糊半徑的長度，不能為負值。例如：選擇器{text-shadow:black0px0px5px;}以下代碼為class屬性值為e的元素設(shè)置了陰影，并且陰影在文字的右上方，但是該代碼并沒有指定陰影的顏色，因此陰影的顏色與文字本身顏色相同。.e{text-shadow:5px5px5px;}模糊半徑也可以省略，如果不指定模糊半徑，則陰影不存在模糊效果。例如：.e{text-shadow:5px5px;}陰影還可以設(shè)置多組效果，每組效果之間用逗號分隔開。例如：.e{text-shadow:black0px0px5px,0px0px10pxorange,red5px-5px;}【設(shè)置大小寫轉(zhuǎn)換】在CSS中處理大小寫都是通過text-transform屬性完成的，其語法格式如下。text-transform:capitalize|uppercase|lowercase|none|inherit各屬性值的含義如下。capitalize：將每個文字的第一個字母大寫。uppercase：將整個文字都變成大寫。lowercase：將整個文字都變成小寫。none：不改變文字的大小寫。inherit：繼承父級樣式?！驹O(shè)置文本縮進】在沒有使用CSS之前，一段文字的首行縮進都是使用空格來實現(xiàn)的。有了CSS之后，就不再需要在每個段落之前都加上兩個空格了。使用CSS中的text-indent屬性可以輕易實現(xiàn)縮進。text-indent屬性的語法格式如下。text-indent:length|百分數(shù)|inherit各屬性值的含義如下。length：縮進量，可以使用絕對單位值與相對單位值。百分數(shù)：相對父級元素的百分比來縮進。inherit：繼承父級樣式?！驹O(shè)置文本的水平對齊方式】使用text-align屬性可以在CSS樣式表中設(shè)置文本的水平對齊屬性，包括左對齊、右對齊、居中對齊和兩端對齊，其語法格式如下。text-align:left|right|center|justify【設(shè)置文本的水平對齊方式】文本垂直對齊屬性vertical-align相當(dāng)于HTML中的垂直對齊標(biāo)簽。它用于設(shè)置文本和其他元素（一般是上一級元素或者同行的其他元素）的垂直對齊方式，其語法格式如下。這個屬性可取的值較多，其含義也各不相同。表8.3對各個取值進行了詳細說明。表8.3垂直對齊的取值含義垂直對齊的取值含義baseline設(shè)置文本和上級元素的基線對齊sub設(shè)置文本顯示為上級元素的下標(biāo)，常在數(shù)組中使用super設(shè)置文本顯示為上級元素的上標(biāo)，常用于設(shè)置某個數(shù)值的乘方數(shù)top使文本元素與同行中最高的元素上端對齊bottom使文本元素與同行中高度最低的元素向下對齊text-top使文本元素與上級元素的文本向上對齊middle使文本垂直居中對齊。假如元素的基線與上級元素x高度的一半相加的值為H，則文本與高度H的中點垂直對齊。其中，x是指字母“x”的高度text-bootom使文本元素和上級元素的文本向下對齊百分比是相對元素行高屬性的百分比，它會在上級元素基線上增加指定的百分比。如果取值為正數(shù)，則表示增加設(shè)置的百分比；反之取值為負數(shù)，則表示減少相應(yīng)的百分比【設(shè)置文本流入方向】CSS中的direction屬性用來設(shè)置文本流入的方向。direction屬性的語法格式如下。direction:ltr|rtl|inherit各屬性值的含義如下。ltr：ltr（lefttoright）用于設(shè)置文本從左向右流入。該值為direction屬性的默認值。rtl：rtl（righttoleft）用于設(shè)置文本從右向左流入。inherit：繼承父級樣式?！驹O(shè)置文本修飾】文本修飾一般包括設(shè)置文字下畫線、上畫線、刪除線等，這些都可以使用text-decoration屬性來設(shè)置，其語法格式如下。text-decoration:underline|overline|line-through|blink|nonetext-decoration屬性可以取5種值，其含義分別如表8.4所示。表8.4文本的修飾屬性值及其含義文本修飾屬性值含義underline給文本添加下畫線overline給文本添加上畫線line-through給文本添加刪除線blink給文本添加閃爍效果，該屬性的效果兼容性很差不建議使用none不設(shè)置任何修飾屬性3.空格與換行【空格的處理方式】在HTML中，瀏覽器會自動將連續(xù)多個空格處理成為一個空格，此時可以使用pre元素來讓瀏覽器在顯示時不更改源代碼中的排版方式。這些在CSS中都可以統(tǒng)一使用white-space屬性來完成。white-space屬性的語法格式如下。white-space:normal|pre|nowrap|inherit各屬性值的含義如下。normal：默認值，瀏覽器會自動忽略多余的空格，連續(xù)多個空格只顯示一個。pre：與pre元素類似，瀏覽器不忽略源代碼中的空格。nowrap：設(shè)置文本不自動換行。inherit：繼承父級樣式。【字內(nèi)換行】當(dāng)文本寬度超出瀏覽器寬度時，默認情況下會自動換行，但如果正好是在較長的英文單詞中間，那么整個單詞都會被移動到下一行顯示，這樣本行的右側(cè)就有較大的空白，影響美觀。使用word-break（字內(nèi)換行）屬性可以將英文單詞打散顯示，也可以設(shè)置在換行前或換行后整體顯示，其語法格式如下。word-break:normal/break-all/keep-all其中，normal是正常情況下的顯示方式，即當(dāng)單詞中需要換行時，該單詞會在下一行顯示，而本行后面保留空白；break-all允許在單詞內(nèi)換行；keep-all只能在半角空格或連字符處換行。4.設(shè)置間距【設(shè)置行間距】圖8.17行高示意圖行間距是指文本行與行之間的距離。在CSS中不能直接定義行間距，只能通過line-height屬性來定義行高。行高是指上一行文字的基線與下一行文字的基線之間的距離。行高等于行間距加上文字高度，如圖8.17所示。圖8.17行高示意圖設(shè)置line-height屬性的語法格式如下。line-height:normal|number|length|百分數(shù)|inherit各屬性值的含義如下。normal：默認值，使用的是默認行高。number：在當(dāng)前文字大小的基礎(chǔ)上增加來設(shè)置行高，不能為負值。length：指定行高數(shù)，可以是絕對長度單位，也可以是相對長度單位，不能是負值。百分數(shù)：用百分數(shù)指定行高，相當(dāng)于字體大小的百分比。inherit：繼承父級屬性?！驹O(shè)置字間距】在CSS中可以通過letter-spacing屬性來設(shè)置字間距。對于英文來說，字間距是指每個字母之間的距離。對于中文來說，字間距是每個字之間的距離。設(shè)置letter-spacing屬性的語法格式如下。letter-spacing:normal|length|inherit各屬性值的含義如下。normal：默認值，使用默認的字間距。length：設(shè)置字間距，可以是絕對單位值或相對單位值。inherit：繼承父級屬性?！驹O(shè)置詞間距】在CSS中可以使用word-spacing來設(shè)置詞間距，詞間距是針對英文而言的。目前，瀏覽器還不能區(qū)分中文的“詞”與“字”。設(shè)置word-spacing屬性的語法格式如下。word-spacing:normal|<length>|inherit各屬性值的含義如下。normal：默認值，即使用默認的詞間距。length：設(shè)置詞間距的大小，可以是絕對單位值或相對單位值。inherit：繼承父級屬性。5.教學(xué)評價【組織階段考核與學(xué)生自評互評、展示考核結(jié)果】本次課的考核注重過程評價：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評價表》，組織學(xué)生自評、互評。6．上機指導(dǎo)1．使用font屬性的多個屬性值設(shè)置網(wǎng)頁中指定文字的樣式。2．使用文本樣式設(shè)置中的各個屬性來設(shè)置網(wǎng)頁中文本的樣