《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 教案 項(xiàng)目3 CSS樣式_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 教案 項(xiàng)目3 CSS樣式_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 教案 項(xiàng)目3 CSS樣式_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 教案 項(xiàng)目3 CSS樣式_第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 教案 項(xiàng)目3 CSS樣式_第5頁(yè)
已閱讀5頁(yè)，還剩23頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

《網(wǎng)頁(yè)設(shè)計(jì)與制作》教學(xué)設(shè)計(jì)課程名稱：網(wǎng)頁(yè)設(shè)計(jì)與制作授課年級(jí)：20年級(jí)授課學(xué)期：20學(xué)年第一學(xué)期教師姓名：老師

20年月日課題名稱項(xiàng)目三CSS樣式計(jì)劃課時(shí)課時(shí)內(nèi)容分析設(shè)計(jì)出美觀、大方、簡(jiǎn)潔和高訪問(wèn)量的網(wǎng)站僅通過(guò)HTML5實(shí)現(xiàn)是非常困難的，HTML5僅定義了網(wǎng)頁(yè)結(jié)構(gòu)，對(duì)于文本樣式?jīng)]有過(guò)多涉及。這就需要一種能有效控制網(wǎng)頁(yè)布局、字體、顏色、背景和其他圖文效果的技術(shù)。采用CSS技術(shù)制作網(wǎng)頁(yè)，能對(duì)網(wǎng)頁(yè)的頁(yè)面布局、字體、顏色、背景等實(shí)現(xiàn)精準(zhǔn)的控制。本項(xiàng)目將通過(guò)實(shí)例介紹使用CSS樣式美化網(wǎng)頁(yè)的方法。教學(xué)目標(biāo)掌握CSS樣式的使用方法。掌握CSS語(yǔ)法。掌握CSS選擇器的使用。重點(diǎn)及措施教學(xué)重點(diǎn)：使用CSS美化文本；使用CSS美化頁(yè)面措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。難點(diǎn)及措施教學(xué)難點(diǎn)：CSS樣式的優(yōu)點(diǎn)，CSS常用選擇器措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。教學(xué)過(guò)程任務(wù)3.1CSS基礎(chǔ)知識(shí)3.1.1初識(shí)CSS樣式內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：為什么要用CSS樣式修飾網(wǎng)頁(yè)？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：CSS的語(yǔ)法簡(jiǎn)單，編寫(xiě)較容易。應(yīng)用CSS技術(shù)，可以減少程序代碼數(shù)量、提高網(wǎng)頁(yè)加載速度。熟練掌握CSS技術(shù)，可統(tǒng)一網(wǎng)站風(fēng)格，讓網(wǎng)頁(yè)更容易維護(hù)。CSS文件是文本文件，它包含了一些CSS標(biāo)簽，CSS文件必須使用CSS為文件名后綴。通過(guò)簡(jiǎn)單地更改CSS文件，可以改變網(wǎng)頁(yè)的整體表現(xiàn)形式，降低網(wǎng)頁(yè)設(shè)計(jì)的難度。知識(shí)點(diǎn)講解講解使用CSS修飾段落（1）教師展示PPT，對(duì)使用CSS修飾段落進(jìn)行具體講解。CSS可以給網(wǎng)頁(yè)文字設(shè)置不同的字體樣式，即建立一個(gè)CSS規(guī)則。如果想改變整個(gè)網(wǎng)頁(yè)上所有出現(xiàn)的顏色、尺寸、字體，只需要修改一些CSS規(guī)則即可。CSS文件是純文本格式文件。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。3.1.2HTML和CSS的對(duì)比內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：同樣是排版網(wǎng)頁(yè)，對(duì)比HTML和CSS有何不同？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：CSS樣式具有很多優(yōu)點(diǎn)，如可以大大縮減頁(yè)面代碼，提高頁(yè)面瀏覽速度。CSS結(jié)構(gòu)清晰，容易被搜索引擎抓取到內(nèi)容。知識(shí)點(diǎn)講解講解動(dòng)態(tài)網(wǎng)頁(yè)（1）教師展示PPT，對(duì)靜態(tài)網(wǎng)頁(yè)進(jìn)行具體講解。1.HTML的缺點(diǎn)在網(wǎng)頁(yè)設(shè)計(jì)與制作中，只依賴HTML標(biāo)簽樣式已經(jīng)不能滿足網(wǎng)頁(yè)設(shè)計(jì)者的需求，HTML的缺點(diǎn)表現(xiàn)在以下4個(gè)方面。（1）維護(hù)困難：修改某個(gè)特殊標(biāo)簽格式耗時(shí)較長(zhǎng)，尤其對(duì)整個(gè)網(wǎng)站而言，后期修改和維護(hù)成本較高。（2）標(biāo)簽不足：HTML本身標(biāo)簽非常少，很多標(biāo)簽都是為網(wǎng)頁(yè)內(nèi)容服務(wù)的，而關(guān)于內(nèi)容樣式標(biāo)簽，如文字間距、段落縮進(jìn)，很難在HTML中找到。（3）網(wǎng)頁(yè)體積大：由于沒(méi)有對(duì)各種風(fēng)格樣式進(jìn)行控制，HTML頁(yè)面往往體積過(guò)大，占用寬度。（4）定位困難：在整體布局頁(yè)面時(shí)，HTML對(duì)各個(gè)模塊的位置調(diào)整缺乏靈活，過(guò)多的<table>標(biāo)簽將會(huì)導(dǎo)致頁(yè)面的復(fù)雜和后期維護(hù)的困難。2.CSS樣式的優(yōu)點(diǎn)CSS樣式具有很多優(yōu)點(diǎn)，如可以大大縮減頁(yè)面代碼，提高頁(yè)面瀏覽速度。CSS結(jié)構(gòu)清晰，容易被搜索引擎抓取到內(nèi)容。其優(yōu)點(diǎn)表現(xiàn)在以下5個(gè)方面。（1）豐富的樣式定義：CSS提供了豐富的文檔樣式外觀，可以設(shè)置文本和背景屬性；允許為任何元素創(chuàng)建邊框，設(shè)置元素邊框與其他元素間的距離；允許隨意改變文本的大寫(xiě)和小寫(xiě)方式、修飾方式等效果。（2）易于使用和修改：CSS可以將樣式定義在HTML元素的style屬性中，也可以定義在header部分，還可以寫(xiě)在一個(gè)專門的CSS文件中(即CSS樣式表)，將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。如果要修改樣式，只需在樣式列表中修改。（3）多頁(yè)面應(yīng)用：CSS樣式表可以單獨(dú)存放在一個(gè)CSS文件中，這樣可以在多個(gè)頁(yè)面中使用同一個(gè)CSS樣式表。CSS樣式表不屬于任何頁(yè)面文件，在任何頁(yè)面文件中都可以引用，這樣可以實(shí)現(xiàn)多個(gè)頁(yè)面風(fēng)格的統(tǒng)一。（4）層疊：對(duì)一個(gè)元素多次設(shè)置同一個(gè)樣式，最后一次設(shè)置的屬性值有效。在瀏覽器中看到的將是最后一次設(shè)置的樣式效果。（5）頁(yè)面壓縮：在使用HTML定義頁(yè)面時(shí)需要大量或重復(fù)的表格和各種規(guī)格的文字樣式，這樣會(huì)產(chǎn)生大量的HTML標(biāo)簽，從而使頁(yè)面文件的大小增加，而使用CSS可以減少頁(yè)面文件體積，加載頁(yè)面時(shí)可提升速度。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。3.1.4CSS語(yǔ)法和樣式表分類內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：CSS樣式表分類分為幾類？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：行內(nèi)樣式表，內(nèi)部樣式表，外部樣式表。知識(shí)點(diǎn)講解講解CSS語(yǔ)法（1）教師展示PPT，對(duì)CSS語(yǔ)法進(jìn)行具體講解。CSS語(yǔ)法格式由若干樣式規(guī)則組成，這些樣式規(guī)則可以應(yīng)用到不同的元素或文檔中來(lái)定義它們顯示的外觀。每一條樣式規(guī)則都由選擇器（selector）、屬性（property）和屬性值（value）三部分組成。selector有多種形式，既可以是文檔中的HTML標(biāo)簽，如<body><table><p>標(biāo)簽等，也可以是XML文檔中的標(biāo)簽。property是選擇器制定的標(biāo)簽所包含的屬性。value是選擇器的多個(gè)屬性，屬性和屬性值為一組，組與組之間需要用分號(hào)隔開(kāi)。CSS語(yǔ)法格式為：selector{propertyl：valuel；property2：value2；}2.CSS樣式規(guī)則下面給出一條樣式規(guī)則，如p{color：red}。該樣式規(guī)則的選擇器為p，為段落標(biāo)簽<p>提供樣式，color為段落文字的顏色屬性，red為屬性值。此樣式表示標(biāo)簽<p>指定的段落文字為紅色。如果要為段落設(shè)置多種樣式，則可以使用下列語(yǔ)句：p{font-family："隸書(shū)"；color：red；font-size：40px；font-weight：bold}3.樣式表分類CSS的應(yīng)用樣式有行內(nèi)樣式表、內(nèi)部樣式表（內(nèi)嵌樣式表）和外部樣式表3類。（1）行內(nèi)樣式表當(dāng)需要對(duì)某個(gè)特定標(biāo)簽進(jìn)行單獨(dú)設(shè)置時(shí)使用行內(nèi)樣式表，應(yīng)用到各個(gè)頁(yè)面。在所修飾的標(biāo)簽內(nèi)加<style>屬性，如果后續(xù)為多條樣式規(guī)則，多條樣式規(guī)則用分號(hào)分開(kāi)。（2）內(nèi)部樣式表內(nèi)部樣式表與網(wǎng)頁(yè)內(nèi)容位于同一個(gè)文件中，在<head>標(biāo)簽中的<style>標(biāo)簽中。這種方式便于在同一頁(yè)面中修改樣式，但是不能徹底實(shí)現(xiàn)頁(yè)面內(nèi)容與樣式的分離，不利于在多頁(yè)面間共享復(fù)用代碼。（3）外部樣式表外部樣式表是指CSS代碼單獨(dú)寫(xiě)在一個(gè)或多個(gè)CSS文件中，需要時(shí)在<head>中通過(guò)<link/>標(biāo)簽引用，加載頁(yè)面時(shí)沒(méi)有加載樣式表，需要用到樣式表時(shí)才去尋找相應(yīng)的樣式。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。任務(wù)3.2CSS樣式代碼3.2.1CSS常用選擇器內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：CSS中選擇器有什么用？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：HTML5中的所有標(biāo)簽都是通過(guò)不同的CSS選擇器進(jìn)行控制的。根據(jù)CSS選擇器用途可把選擇器分為標(biāo)簽選擇器、類選擇器和ID選擇器。每個(gè)選擇器代碼可以一次聲明多個(gè)，也可以將選擇器聲明多個(gè)。。知識(shí)點(diǎn)講解講解動(dòng)態(tài)網(wǎng)頁(yè)（1）教師展示PPT，對(duì)標(biāo)簽選擇器進(jìn)行具體講解。HTML5文檔是由多個(gè)不同標(biāo)簽組成的，而CSS選擇器就是聲明這些標(biāo)簽所用的樣式，例如，p選擇器用于聲明頁(yè)面中所有<p>標(biāo)簽的樣式風(fēng)格，同樣也可以通過(guò)h1選擇器來(lái)聲明頁(yè)面中所有<h1>標(biāo)簽的風(fēng)格。標(biāo)簽選擇器的規(guī)則自動(dòng)應(yīng)用于文檔中對(duì)應(yīng)的標(biāo)簽，能夠?qū)ζ鋵傩赃M(jìn)行重新定義，同時(shí)會(huì)影響到網(wǎng)頁(yè)中所有此類標(biāo)簽元素。標(biāo)簽選擇器使用簡(jiǎn)單、明確且通用性強(qiáng)，但針對(duì)性較差。1）格式TagName{property：value}其中，TagName表示標(biāo)簽名稱，如<p><h1>等標(biāo)簽；property表示CSS屬性；value表示CSS屬性值。2）用途通過(guò)一個(gè)具體標(biāo)簽來(lái)命名，可以對(duì)文檔中每一個(gè)出現(xiàn)該標(biāo)簽的地方應(yīng)用樣式定義。這種做法通常用于設(shè)置整個(gè)網(wǎng)站中都會(huì)出現(xiàn)的基本樣式。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解類選擇器（1）教師展示PPT，對(duì)類選擇器進(jìn)行具體講解。在一個(gè)頁(yè)面中，使用標(biāo)簽選擇器會(huì)控制該頁(yè)面中所有此標(biāo)簽的顯示樣式，如果需要將此類標(biāo)簽中的其中一個(gè)標(biāo)簽重新設(shè)定，此時(shí)僅使用標(biāo)簽選擇器是無(wú)法達(dá)到效果的，還需要使用類選擇器。通過(guò)類選擇器設(shè)置樣式，可以將同一種樣式定義為一個(gè)類，在CSS中，類選擇器使用符號(hào)“.”開(kāi)頭。類選擇器有別于ID選擇器，屬性值可以重復(fù)在多個(gè)元素中使用，例如，class屬性可以在<div>和<p>標(biāo)簽中使用。1）格式.classValue{property：value}其中，classValue是選擇器的名稱，具體名稱由CSS制定者命名。如果一個(gè)標(biāo)簽具有class屬性且class屬性值為classValue，那么該標(biāo)簽的呈現(xiàn)樣式由該選擇器指定。在定義類選擇器時(shí)，需要在classValue前面加一個(gè)句點(diǎn)“.”表示標(biāo)簽名稱，如<p><h1>等HTML標(biāo)簽；property表示CSS屬性；value表示CSS屬性值。說(shuō)明：定義選擇器時(shí)需要使用英文的“.”符號(hào)加在選擇器的前面。2）用途下面定義了兩個(gè)類選擇器，分別為rd和se。類的名稱可以是任意英文字符串或是英文開(kāi)頭與數(shù)字的結(jié)合，一般情況下，其使用功能及效果的簡(jiǎn)要縮寫(xiě)語(yǔ)法格式為：.rd{color：red}.se{font-size：3px}（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解ID選擇器（1）教師展示PPT，對(duì)ID選擇器進(jìn)行具體講解。ID選擇器與類選擇器類似，都是針對(duì)特定屬性的屬性值匹配。ID選擇器是使用HTML標(biāo)簽的ID屬性值作為選擇器名，并以“#”開(kāi)頭進(jìn)行標(biāo)識(shí)。ID屬性類似于身份證，是HTML元素的唯一標(biāo)識(shí)，頁(yè)面內(nèi)不能有重復(fù)的ID標(biāo)識(shí)屬性。對(duì)應(yīng)的ID選擇器一般用于修飾對(duì)應(yīng)ID標(biāo)識(shí)的HTML標(biāo)簽內(nèi)容，實(shí)際應(yīng)用中常和<div>標(biāo)簽配合使用，表示修飾對(duì)應(yīng)ID標(biāo)識(shí)的某個(gè)<div>區(qū)塊。1）格式#idValue{property：value}其中，#idValue是選擇器的名稱，可以由CSS定義者自己命名。如果某標(biāo)簽具有ID屬性，并且該屬性值為idValue，那么該標(biāo)簽的呈現(xiàn)樣式可以由該ID選擇器制定。正常情況下，ID屬性值在文檔中具有唯一性。2）用途在頁(yè)面中具有ID屬性的標(biāo)簽才能夠使用ID選擇器定義樣式，所以與類選擇器相比，使用ID選擇器具有一定的局限性。類選擇器與ID選擇器的主要區(qū)別有：類選擇器可以給任意數(shù)量的標(biāo)簽定義樣式，而ID選擇器在頁(yè)面的標(biāo)簽中只能使用一次；ID選擇器比類選擇器具有更高的優(yōu)先級(jí)，即當(dāng)ID選擇器與類選擇器發(fā)生沖突時(shí)，優(yōu)先使用ID選擇器。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。3.2.2CSS選擇器聲明內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：CSS選擇器聲明有哪些方式？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：集體聲明，多重嵌套聲明。知識(shí)點(diǎn)講解講解集體聲明（1）教師展示PPT，對(duì)集體聲明進(jìn)行具體講解。在一個(gè)頁(yè)面中，有時(shí)不同種類的標(biāo)簽樣式要保持一致。例如，<p>標(biāo)簽和<h1>標(biāo)簽要保持一致，此時(shí)可以共同使用類選擇器，還可以使用集體聲明。集體聲明就是在聲明各種CSS選擇器時(shí)，風(fēng)格相同的CSS選擇器同時(shí)聲明。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解多重嵌套聲明（1）教師展示PPT，對(duì)多重嵌套聲明進(jìn)行具體講解。在CSS控制HTML標(biāo)簽樣式時(shí)，可以使用多重嵌套聲明，對(duì)指定位置的HTML標(biāo)簽進(jìn)行修飾，表示嵌套的選擇器間用空格隔開(kāi)。例如，當(dāng)<p>與</p>之間包含<a>和</a>標(biāo)簽時(shí)，可以使用多重嵌套聲明。超鏈接顯示為紅色字體，大小為30px，其原因是使用了多重嵌套聲明。當(dāng)<p>與</p>之間包含<a>和</a>標(biāo)簽時(shí)，就可以使用嵌套標(biāo)簽進(jìn)行聲明，表示<p>標(biāo)簽下面的<a>標(biāo)簽的CSS屬性樣式。同樣的道理，不僅可以嵌套標(biāo)簽本身，類選擇器和ID選擇器都可以進(jìn)行嵌套。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。3.2.3CSS屬性單位內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：CSS屬性單位有哪些？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：CSS顏色單位，CSS長(zhǎng)度單位。知識(shí)點(diǎn)講解講解CSS顏色單位（1）教師展示PPT，對(duì)CSS顏色單位進(jìn)行具體講解。CSS有很多設(shè)置字體與背景顏色參數(shù)的樣式，包括命名顏色、RGB顏色及十六進(jìn)制顏色等。1）命名顏色CSS中可以直接用英文單詞命名與之相對(duì)應(yīng)的顏色，這種方法的優(yōu)點(diǎn)是簡(jiǎn)單、直接、容易掌握。此處預(yù)設(shè)了16種顏色及其衍生色，這16種顏色是CSS規(guī)范推薦的，主流的瀏覽器能夠識(shí)別它們。2）RGB顏色如果要使用十進(jìn)制表示顏色，則需要使用RGB顏色。用十進(jìn)制表示顏色，最大值為255，最小值為0。要使用RGB顏色，必須使用rgb(R，G，B)，其中R、G、B分別表示紅、綠、藍(lán)的十進(jìn)制值，通過(guò)這3個(gè)值的組合便可以形成不同的顏色，例如，rgb(255，0，0)表示紅色，rgb(0，255，0)表示綠色，rgb(0，0，0)表示黑色，rgb(255，255，255)表示白色。RGB設(shè)置方法一般分為兩種：百分比設(shè)置和直接用數(shù)值設(shè)置。例如，為<p>標(biāo)簽設(shè)置顏色，兩種語(yǔ)法格式為：p{color：rgb(123，0，25)}p{color：rgb(45%，0%，25%)}3）十六進(jìn)制顏色十六進(jìn)制顏色是常用的定義方式，是由0~9和A~F組成的。十六進(jìn)制顏色的基本語(yǔ)法格式為：#RRGGBB其中，R表示紅色，G表示綠色，B表示藍(lán)色。而RR、GG、BB最大值為FF，表示十進(jìn)制中的255；最小值為00，表示十進(jìn)制中的0，例如，#FF0000表示紅色，#00FF00表示綠色，#0000FF表示藍(lán)色，#000000表示黑色，#FFFFFF表示白色。其他顏色是通過(guò)紅、綠、藍(lán)三種基本顏色組合而成的。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解CSS長(zhǎng)度單位（1）教師展示PPT，對(duì)CSS長(zhǎng)度單位進(jìn)行具體講解。為保證頁(yè)面元素能夠在瀏覽器中完全顯示并且布局合理，就需要設(shè)定元素間的間距和元素本身的邊界等，這就離不開(kāi)長(zhǎng)度單位的使用。CSS中長(zhǎng)度單位分為絕對(duì)單位和相對(duì)單位兩類。絕對(duì)單位：用于設(shè)定絕對(duì)位置，主要有英寸(in)、厘米(cm)、毫米(mm)、磅(pt)和pica(pc)。其中，英寸是國(guó)外常用的度量單位；厘米用于設(shè)定距離比較大的頁(yè)面元素框；毫米用于設(shè)定比較精確的元素距離和大?。话跻话阌糜谠O(shè)定文字的大小。相對(duì)單位：指在度量時(shí)需要參照其他頁(yè)面元素的單位值。使用相對(duì)單位所度量的實(shí)際距離可能會(huì)隨著這些單位值的改變而改變。CSS提供了三種相對(duì)單位：em、ex和px。其中px也叫像素，是目前廣泛使用的一種單位。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。任務(wù)3.3使用CSS樣式美化文本3.3.1設(shè)置字體屬性內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：字體有哪些屬性？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：字體，字體大小，字體風(fēng)格。知識(shí)點(diǎn)講解講解字體（1）教師展示PPT，對(duì)字體進(jìn)行具體講解。字體font-family屬性用于制定文字字體類型，如宋體、黑體、隸書(shū)等，即在網(wǎng)頁(yè)中展示不同的字體。1）格式{font-family：name}{font-family：cursive|fantasy|monospace|serif|sans-serif}從語(yǔ)法格式上可以看出，font-family有兩種聲明方式。第一種方式是使用name字體名稱，按優(yōu)先順序排列，以逗號(hào)隔開(kāi)，如果字體名稱包含空格，則應(yīng)使用引號(hào)括起，這種聲明方式比較常用；第二種方式是使用所列出的字體序列名稱，如果使用fantasy序列，則將提供默認(rèn)字體序列。font-family屬性值可以是一組值，即一次定義多個(gè)字體，當(dāng)瀏覽器讀取字體時(shí)，會(huì)按照字體排列的先后順序來(lái)決定使用哪種字體。若瀏覽器在計(jì)算機(jī)上找不到第一種字體，則自動(dòng)讀取第二種字體；若第二種字體也找不到，則自動(dòng)讀取第三種字體，依此類推。當(dāng)定義的所有字體都找不到時(shí)，會(huì)選用計(jì)算機(jī)系統(tǒng)的默認(rèn)字體。2）說(shuō)明在字體顯示時(shí)，如果指定了一種特殊字體類型，而在瀏覽器或者操作系統(tǒng)中該類型不能正確獲取，則可以通過(guò)font-family屬性預(yù)設(shè)多種字體類型。font-family屬性預(yù)設(shè)字體類型時(shí)，每種字體之間使用逗號(hào)隔開(kāi)。當(dāng)前面的字體類型不能正確顯示時(shí)，系統(tǒng)將自動(dòng)選擇后一種字體類型，依此類推。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解字體大小（1）教師展示PPT，對(duì)字體大小進(jìn)行具體講解。網(wǎng)頁(yè)中的標(biāo)題通常使用突出的字體顯示，用于引人注意。多種字體合理搭配形成的網(wǎng)頁(yè)，既吸引眼球，又能提高閱讀速度。CSS中通常使用font-size設(shè)置文字大小。1）格式{font-size：數(shù)值|inherit|xx-small|x-small|small|medium|large|...}從語(yǔ)法格式上可以看出，font-size可以通過(guò)數(shù)值來(lái)定義字體大小，如font-size：10px表示定義的字體大小為10px，還可以通過(guò)medium等參數(shù)定義字體的大小。對(duì)于font-size的屬性值，當(dāng)使用絕對(duì)值時(shí)要注意加上單位，當(dāng)沒(méi)有單位時(shí)瀏覽器會(huì)默認(rèn)以px為單位。這里的取值除使用px以外，還可以使用in(英寸)、cm(厘米)、mm(毫米)、pt(點(diǎn))、pc(皮卡)。另外，字號(hào)大小的取值還有一些關(guān)鍵字，分別為xx-small(極小)、x-small(較小)、small(小)、medium(標(biāo)準(zhǔn)大小)、large(大)、x-large(較大)、xx-large(極大)。網(wǎng)頁(yè)中文字被設(shè)置成不同的大小，其設(shè)置采用了絕對(duì)值、關(guān)鍵字和百分比等形式。font-size字體大小為200%時(shí)，其比較對(duì)象是上一級(jí)標(biāo)簽中的10pt。同樣，還可以使用inherit值，直接繼承上一級(jí)標(biāo)簽的字體大小。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解字體風(fēng)格（1）教師展示PPT，對(duì)字體風(fēng)格進(jìn)行具體講解。CSS通常使用font-style定義字體風(fēng)格，即字體的顯示樣式，如斜體，其語(yǔ)法格式為：{font-style：normal|italic|oblique|inherit}（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解字體加粗（1）教師展示PPT，對(duì)字體加粗進(jìn)行具體講解。通過(guò)設(shè)置字體粗細(xì)，可以使文字顯示不同的外觀。CSS中通常使用font-weight定義字體的粗細(xì)程度，其語(yǔ)法格式為：{font-weight：100-900|bold|bolder|lighter|normal；} font-weight屬性有五個(gè)有效值，分別是100~900、bold、bolder、lighter、normal。如果沒(méi)有設(shè)置該屬性，則使用默認(rèn)值normal。屬性值設(shè)置為100~900，值越大，加粗的程度就越高。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。3.3.2設(shè)置段落屬性內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：段落屬性有哪些？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：字符間隔，水平對(duì)齊，文本縮進(jìn)，文本行高。知識(shí)點(diǎn)講解講解字符間隔（1）教師展示PPT，對(duì)字符間隔進(jìn)行具體講解。字符文本之間可以通過(guò)letter-spacing進(jìn)行設(shè)置。在一個(gè)網(wǎng)頁(yè)中，會(huì)涉及多個(gè)字符文本，設(shè)置文本之間的各字符間隔一致，進(jìn)而保持頁(yè)面的整體性，是網(wǎng)頁(yè)設(shè)計(jì)者必須要考慮的。letter-spacing的語(yǔ)法如下：letter-spacing：normal|length CSS可以通過(guò)letter-spacing設(shè)置字符文本之間的距離，即在字符文本之間插入空間。這里允許使用負(fù)值，使字母之間更加緊湊。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解水平對(duì)齊（1）教師展示PPT，對(duì)水平對(duì)齊進(jìn)行具體講解。一般情況下，居中對(duì)齊適用于標(biāo)題類文本，其他對(duì)齊方式可以根據(jù)頁(yè)面布局來(lái)選擇使用。根據(jù)需要，可以設(shè)置多種對(duì)齊方式，如水平方向的居中、左對(duì)齊、右對(duì)齊和兩端對(duì)齊等。在CSS中，可以通過(guò)text-align屬性進(jìn)行設(shè)置，語(yǔ)法格式為：text-align：start|end|left|right|center|justify|match-parent|inherit（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解文本縮進(jìn)（1）教師展示PPT，對(duì)文本縮進(jìn)進(jìn)行具體講解。在普通段落中，通常首行縮進(jìn)兩個(gè)字符，用來(lái)表示這是一個(gè)段落的開(kāi)始。同樣在網(wǎng)頁(yè)的文本編輯中可以通過(guò)制定屬性，來(lái)控制文本縮進(jìn)。CSS中的text-indent屬性用于設(shè)定文本塊首行縮進(jìn)，語(yǔ)法格式為：text-indent：length 其中，length屬性值表示由百分比數(shù)字或由浮點(diǎn)數(shù)和單位標(biāo)識(shí)符組成的長(zhǎng)度，允許為負(fù)值。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解文本行高（1）教師展示PPT，對(duì)文本行高進(jìn)行具體講解。CSS中通常使用line-height設(shè)置行間距，即行高，語(yǔ)法格式為：line-height：normal|length（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。任務(wù)3.4使用CSS樣式美化頁(yè)面3.4.1設(shè)置圖片樣式內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：為什么要設(shè)置圖片樣式？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：使用CSS樣式，可以輕松設(shè)置圖片屬性、頁(yè)面背景、添加邊框，使網(wǎng)頁(yè)變得更加生動(dòng)、活潑。知識(shí)點(diǎn)講解講解設(shè)置圖片樣式（1）教師展示PPT，對(duì)設(shè)置圖片樣式進(jìn)行具體講解。在網(wǎng)頁(yè)中放置一張圖片，可以使用<img/>標(biāo)簽。當(dāng)圖片顯示之后，其邊框是否顯示，可以通過(guò)<img/>標(biāo)簽中的border屬性來(lái)設(shè)定。通過(guò)HTML標(biāo)簽設(shè)置圖片邊框，其邊框顯示都是黑色，并且風(fēng)格比較單一，唯一能夠設(shè)定的就是邊框的粗細(xì)，而無(wú)法對(duì)邊框樣式進(jìn)行設(shè)定。這時(shí)可以采用CSS對(duì)邊框樣式進(jìn)行美化，語(yǔ)法格式為：<imgsrc=“圖片位置”border=“值”/> 在CSS中，使用border-style屬性定義邊框樣式，即邊框風(fēng)格，如可以設(shè)置風(fēng)格為點(diǎn)線式邊框(dotted)、破折線式邊框(dashed)、直線式邊框(solid)、雙線式邊框(double)等。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。3.4.2設(shè)置背景與邊框內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：為什么要設(shè)置背景和邊框？如何設(shè)置？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：網(wǎng)頁(yè)的背景對(duì)網(wǎng)頁(yè)的整體效果有巨大影響，不同類型的網(wǎng)站有不同的背景和基調(diào)。網(wǎng)頁(yè)中的背景設(shè)置對(duì)網(wǎng)頁(yè)設(shè)計(jì)非常重要。對(duì)于單個(gè)HTML5元素，可以通過(guò)CSS屬性設(shè)置元素邊框樣式，包括寬度、顯示風(fēng)格和顏色等。知識(shí)點(diǎn)講解講解背景相關(guān)屬性（1）教師展示PPT，對(duì)背景相關(guān)屬性進(jìn)行具體講解。1）背景顏色background-color屬性用于設(shè)定網(wǎng)頁(yè)背景色，它接受任何有效的顏色值，而對(duì)于沒(méi)有設(shè)定背景色的標(biāo)簽，默認(rèn)背景色為透明，語(yǔ)法格式為：{background-color：transparent|color} 2）背景圖片網(wǎng)頁(yè)背景既可以使用背景色來(lái)填充，也可以使用背景圖片來(lái)填充。通過(guò)CSS屬性可以對(duì)背景圖片進(jìn)行精確定位。background-image屬性用于設(shè)定標(biāo)簽的背景圖片。通常情況下，在<body>標(biāo)簽中應(yīng)用，將圖片用于整個(gè)主體中，語(yǔ)法格式為：{background-image：none|url(url)} 從語(yǔ)法結(jié)構(gòu)上看，其默認(rèn)屬性為無(wú)背景圖片，當(dāng)需要使用背景圖片時(shí)可以用url進(jìn)行導(dǎo)入，url可以使用絕對(duì)路徑，也可以使用相對(duì)路徑。使用圖片設(shè)置背景時(shí)，還需要考慮圖片重復(fù)、圖片顯示、圖片位置、圖片大小、現(xiàn)實(shí)區(qū)域、裁剪區(qū)域等屬性。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解邊框?qū)傩裕?）教師展示PPT，對(duì)邊框?qū)傩赃M(jìn)行具體講解。邊框就是將元素內(nèi)容及間隙包含在其中的邊線，類似于表格的外邊線。每一個(gè)頁(yè)面元素的邊框都可以從寬度、樣式和顏色三個(gè)方面描述。這三個(gè)方面決定了邊框所顯示出來(lái)的外觀。CSS中分別使用邊框樣式（border-style)、邊框顏色（border-color)和邊框線寬（border-width）屬性設(shè)定邊框。1）邊框樣式border-style屬性用于設(shè)定邊框的樣式，即風(fēng)格。設(shè)定邊框樣式是邊框最重要的部分，語(yǔ)法格式為：{background-style：none|hidden|dotted|solid|…}2）邊框顏色border-color屬性用于設(shè)定與頁(yè)面元素不同的邊框顏色，語(yǔ)法格式

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論