HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：設(shè)置段落格式_第1頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：設(shè)置段落格式_第2頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：設(shè)置段落格式_第3頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：設(shè)置段落格式_第4頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：設(shè)置段落格式_第5頁(yè)
已閱讀5頁(yè)，還剩40頁(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)介

HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作設(shè)置段落格式能夠使用CSS的多種選擇器選擇需設(shè)置的頁(yè)面格式。能夠使用合適的字體樣式代碼設(shè)置文字樣式。能夠使用合適的文本樣式代碼設(shè)置D清單頁(yè)面的段落樣式。任務(wù)目標(biāo)

設(shè)置段落格式本次任務(wù)要求在基礎(chǔ)上，根據(jù)D清單頁(yè)面效果圖，設(shè)置網(wǎng)頁(yè)各內(nèi)容的段落文本樣式，包括字體、風(fēng)格、顏色等，并統(tǒng)一網(wǎng)頁(yè)中的首行縮進(jìn)、行高等格式樣式。完成后的效果圖如2-2所示。任務(wù)描述圖2-2完成后的效果圖

設(shè)置段落格式要為D清單頁(yè)面中特定內(nèi)容設(shè)置文本和段落格式，需要：學(xué)習(xí)CSS的選擇器的使用方法；分析D清單頁(yè)面中的格式樣式，正確使用字體樣式及文本樣式代碼設(shè)置文字及段落樣式。D清單頁(yè)面格式樣式分析如圖2-2-1所示。任務(wù)分析圖2-2-1D清單頁(yè)面格式樣式分析圖

設(shè)置段落格式知識(shí)與技能準(zhǔn)備選擇器（Selector）也稱為選擇符，HTML5中所有標(biāo)記都是通過(guò)不同的CSS3選擇器進(jìn)行控制的。選擇器不只是HTML5文檔中的元素標(biāo)記，它還可以是類、ID或是元素的某種狀態(tài)。下面介紹幾種常用的CSS3選擇器。1.1標(biāo)簽選擇器也稱類型選擇器(TypeSelector)。1、CSS3的常用選擇器知識(shí)與技能準(zhǔn)備1.2類選擇器類選擇器用來(lái)為一系列標(biāo)記定義相同的呈現(xiàn)方式。其中classValue是類選擇器的名稱，具體名稱由CSS編寫者自己命名，但注意不能使用數(shù)字開頭，class中的多個(gè)選擇符名稱使用空格隔開。示例：1、CSS3的常用選擇器語(yǔ)法：.classValue{property:value}123456789101112<head><style>.a1{color:green;}/*作用于第9行*/.a2{color:blue;}/*作用于第10行*/.a3{color:yellow;}/*作用于第11行*/</style></head><body><pclass="a1">這是綠色字體</p><pclass="a2">這是藍(lán)色字體</p><pclass="a3">這是黃色字體</p></body>知識(shí)與技能準(zhǔn)備1.3ID選擇器ID選擇器定義的是某一個(gè)特定的HTML元素，一個(gè)網(wǎng)頁(yè)文件中只能有一個(gè)元素使用某一ID的屬性值。其中，idValue是ID選擇器的名稱，可以由CSS編者自己命名。示例如下：1、CSS3的常用選擇器語(yǔ)法：#idValue{property:value}123456789101112<head><style>#a1{color:green;}/*作用于第9行*/#a2{color:blue;}/*作用于第10行*/#a3{color:yellow;}/*作用于第11行*/</style></head><body><pid="a1">這是綠色字體</p><pid="a2">這是藍(lán)色字體</p><pid="a3">這是黃色字體</p></body>知識(shí)與技能準(zhǔn)備1.4全局選擇器也稱通配選擇符，如果想讓一個(gè)頁(yè)面中的所有HTML標(biāo)記使用同一種樣式，可以使用全局選擇器。其中“*”表示對(duì)所有元素起作用。使用示例如下：以上4種選擇器可以統(tǒng)稱為元素選擇器。1、CSS3的常用選擇器語(yǔ)法：*{property:value}1*{color:red;font-size:30px}知識(shí)與技能準(zhǔn)備1.5包含選擇器通過(guò)標(biāo)簽層次結(jié)構(gòu)選擇目標(biāo)，如果希望只對(duì)p中的span應(yīng)用樣式，可以這樣寫“pspan{}”，注意兩個(gè)名稱間要用空格隔開。使用包含選擇器的示例如下：1、CSS3的常用選擇器123456789101112<head><style>pspan{color:red}/*作用于第9、10行*/</style></head><body><h1class="aa">這是標(biāo)題</h1><p><span>文字一</span><spanclass="aa">文字二</span></p></body>知識(shí)與技能準(zhǔn)備1.6組合選擇器當(dāng)單一的基本選擇器不足以區(qū)分我們要渲染的元素的時(shí)候，要使用組合選擇器。組合選擇器連續(xù)書寫多個(gè)標(biāo)簽選擇器、類選擇器、id選擇器，中間不加空格，代表選擇同時(shí)符合多個(gè)選擇器條件的標(biāo)簽。如“p.aa”表示選擇“class=”aa””的<p>標(biāo)簽。使用組合選擇器的示例如下：1、CSS3的常用選擇器1234567891011<head><style>p#lit{/*組合選擇器：標(biāo)簽選擇器+id選擇器，作用于第14行*/

color:red;font-size:40px;}div.one{/*組合選擇器：標(biāo)簽選擇器+class選擇器，作用于第16行*/

color:blue;}12131415161718192021</style></head><body><div>hellodiv</div><pid="lit">hellop</p><pid="lit2"class="one">hellop</p><divid="lit3"class="one">hellodiv</div></body>知識(shí)與技能準(zhǔn)備1.7分組選擇器當(dāng)我們需要同時(shí)渲染多個(gè)元素時(shí)，可使用分組選擇器。分組選擇器將不同的選擇器使用“，”相連，如“h1,h2,h3,h4{}”，可對(duì)多種選擇符同時(shí)應(yīng)用相同的樣式。使用分組選擇器的示例如下：1、CSS3的常用選擇器12345678910111213<head><style>#lit,div.one{/*作用于第10、12行*/

color:blue;}</style></head><body><div>hellodiv</div><pid="lit">hellop</p><pid="lit2"class="one">hellop</p><divid="lit3"class="one">hellodiv</div></body>知識(shí)與技能準(zhǔn)備1.8偽選擇器偽選擇器包括偽類和偽對(duì)象選擇器，偽選擇器以冒號(hào)（：）作為前綴標(biāo)識(shí)符。冒號(hào)前可以添加選擇符，限定偽類應(yīng)用的范圍，冒號(hào)后為偽類和偽對(duì)象名，冒號(hào)前后沒有空格，否則將錯(cuò)認(rèn)為類選擇器。1、CSS3的常用選擇器屬性值說(shuō)明E::first-letter設(shè)置對(duì)象內(nèi)的第一個(gè)字符的樣式。E::first-line設(shè)置對(duì)象內(nèi)的第一行的樣式。E::before設(shè)置在對(duì)象前（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來(lái)和content屬性一起使用E::after設(shè)置在對(duì)象后（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來(lái)和content屬性一起使用表2-2-1常見偽對(duì)象選擇器知識(shí)與技能準(zhǔn)備常見的字體屬性有font-family、font-style、font-size、font-weight、color等。2.1字體類型：font-familyfont-family屬性用于指定文字字體類型，如宋體、黑體、隸書等，即在網(wǎng)頁(yè)中展示字體不同的形狀。第一種方式，使用name字體名稱，按優(yōu)先順序排列，以逗號(hào)隔開，如果字體名稱包含空格，則應(yīng)使用引號(hào)括起。第二種方式使用所列出的字體序列名稱，如果使用fantasy序列，將提供默認(rèn)字體序列。2、CSS字體樣式效果語(yǔ)法：{font-family：name；}{font-family：cursive|fantasy|monospace|serif|sans-serif}知識(shí)與技能準(zhǔn)備2.2字體風(fēng)格：font-stylefont-style通常用來(lái)定義字體風(fēng)格，即字體的顯示樣式。其中normal為默認(rèn)值，表示正常的字體；italic表示斜體；oblique表示傾斜的字體，效果介于normal和italic之間。2、CSS字體樣式效果語(yǔ)法：font-style：normal|italic|oblique將下面的代碼設(shè)置為圖2-2-2所示的效果，要求”news”內(nèi)的<h1>標(biāo)簽字體為黑體，大小為30px；<p>標(biāo)簽的字體為宋體，大小為18px；<span>標(biāo)簽的字體加粗、斜體，顏色為藍(lán)色。課堂練習(xí)2-2-1使用CSS設(shè)置文字樣式HTML代碼：CSS代碼：1234567891011<divclass=”news”><p>HTML5</p><span>HTML5</span>是構(gòu)建Web內(nèi)容的一種語(yǔ)言描述方式。HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語(yǔ)言方式，被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)，并廣泛應(yīng)用于互聯(lián)網(wǎng)應(yīng)用的開發(fā)。</div>12345678910111213.newsh1{font-family:"黑體";/*設(shè)置字體為黑體*/

font-size:30px;/*設(shè)置字體大小為30px*/}.newsp{font-family:"宋體";

font-size:18px;}.newsspan{

font-weight:bold;/*設(shè)置字體加粗*/font-style:italic;/*設(shè)置字體為斜體*/color:blue;}課堂練習(xí)2-2-1使用CSS設(shè)置文字樣式效果圖如下：圖2-2-2使用CSS設(shè)置文字樣式知識(shí)與技能準(zhǔn)備2.3字體大小寫：font-variantCSS使用font-variant屬性來(lái)定義字體大小效果。其中normal表示默認(rèn)值，即正常的字體；small-caps表示小型的大寫字母字體。注意：font-variant僅支持英文為代表的西文字，中文字體沒有大小寫效果區(qū)分。如果設(shè)置了小型大寫字體，但是該字體沒有找到原始小型大寫字體，則瀏覽器會(huì)模擬一個(gè)。2、CSS字體樣式效果語(yǔ)法：font-variant：normal|small-caps知識(shí)與技能準(zhǔn)備2.4字體的復(fù)合屬性：fontfont是一個(gè)復(fù)合屬性，所謂復(fù)合屬性，就是可以設(shè)置多種字體屬性。font屬性中的屬性排列順序是font-style、font-variant、font-weight、font-size/line-height和font-family，各屬性的屬性值之間使用空格隔開。但是，如果font-family屬性要定義多個(gè)屬性值，則需要使用逗號(hào)（，）隔開。注意：屬性排列中，font-style、font-variant和font-weight這3個(gè)屬性值是可以自由調(diào)換或省略的。而font-size和font-family則必須按照固定的順序出現(xiàn)，而且還必須都出現(xiàn)在font屬性中。如果這兩者的順序不對(duì)，或缺少一個(gè)，那么整條樣式規(guī)則可能就會(huì)被忽略。2、CSS字體樣式效果語(yǔ)法：font：font-stylefont-variantfont-weightfont-size/line-heightfont-family將練習(xí)2-2-1的CSS代碼，不改變?cè)瓨邮叫Ч?，使用font屬性進(jìn)行簡(jiǎn)寫。CSS樣式設(shè)置如下，注意<h1>的字體默認(rèn)是加粗的，使用font設(shè)置時(shí)需要添加“bold”，否則將自動(dòng)使用“normal”取消加粗樣式。課堂練習(xí)2-2-2使用font屬性簡(jiǎn)寫文字樣式代碼123456.newsh1{font:bold30px"黑體"}.newsp{font:18px"宋體"}.newsspan{font:italicbold18px"宋體";color:blue;}知識(shí)與技能準(zhǔn)備3.1文本水平對(duì)齊方式：text-alignCSS使用text-align屬性來(lái)定義文本的水平對(duì)齊方式。該屬性取值包括4個(gè)：其中l(wèi)eft表示默認(rèn)值，左對(duì)齊；right表示右對(duì)齊；center表示居中對(duì)齊；justify表示兩端對(duì)齊。3.2文本行高：line-height在CSS中，line-height屬性用來(lái)設(shè)置行間距，即行高。其中normal表示默認(rèn)值，一般為1.2em，length表示百分比數(shù)字，或者由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，允許為負(fù)值。3、CSS文本樣式效果語(yǔ)法：text-align：left|right|center|justify語(yǔ)法：line-height：normal|length設(shè)置<div>內(nèi)的字體大小為20像素，<p>字體大小為父標(biāo)簽的1.5倍，字體加粗，<span>字體顏色為紅色。CSS標(biāo)簽代碼：課堂練習(xí)2-2-3使用CSS設(shè)置文本樣式HTML代碼：CSS代碼：1234567891011121314<divclass="news"><h2>習(xí)主席再談這個(gè)全球抗疫根本大計(jì)</h2><pclass="p1">新冠疫情發(fā)生以來(lái)，習(xí)主席親力親為推動(dòng)疫情防控國(guó)際合作，呼吁國(guó)際社會(huì)團(tuán)結(jié)抗疫、共同構(gòu)建人類衛(wèi)生健康共同體。</p><pclass="p2">共同構(gòu)建人類衛(wèi)生健康共同體，是人類立足當(dāng)前戰(zhàn)勝新冠疫情、著眼長(zhǎng)遠(yuǎn)應(yīng)對(duì)重大公共衛(wèi)生突發(fā)事件的根本大計(jì)。在11日晚同菲律賓、白俄羅斯領(lǐng)導(dǎo)人通話中，習(xí)主席再次談到“人類衛(wèi)生健康共同體”。</p></div>1234567891011121314.newsh2{text-align:center;/*設(shè)置字體居中*/}.newsp{font-size:14px;text-align:justify;/*設(shè)置字體兩端對(duì)齊*/}.news.p1{line-height:10px;/*設(shè)置行高為10px*/}.news.p2{line-height:1.5em;/*設(shè)置行高為字體大小1.5倍*/}課堂練習(xí)2-2-3使用CSS設(shè)置文本樣式效果圖如下：圖2-2-3使用CSS設(shè)置文字樣式知識(shí)與技能準(zhǔn)備3.3首行縮進(jìn)：text-indentCSS的text-indent屬性可用來(lái)設(shè)定文本塊中首行的縮進(jìn)。length表示百分比數(shù)字，或者由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，允許為負(fù)值。建議在設(shè)置縮進(jìn)單位時(shí)，以em為設(shè)置單位，它表示一個(gè)字距，這樣能比較精確地確定首行縮進(jìn)效果。例如“text-indent：2em；”無(wú)論字體大小固定縮進(jìn)2個(gè)字符的距離。3.4文本修飾：text-decorationCSS使用text-decoration屬性來(lái)定義字體下劃線效果。其中none表示默認(rèn)值，即無(wú)裝飾字體；underline表示下劃線效果；blink表示閃爍效果；overline表示上劃線效果；line-through表示貫穿線效果。3、CSS文本樣式效果語(yǔ)法：text-indent：length語(yǔ)法：text-decoration：none|underline|blink|overline|line-through制作如圖2-2-4所示的樣式效果，網(wǎng)頁(yè)的標(biāo)簽結(jié)構(gòu)自行制作，標(biāo)題居中對(duì)齊，文章內(nèi)容左對(duì)齊，段落首行縮進(jìn)2個(gè)字符，行高為文字大小的1.5倍，文字“人類衛(wèi)生健康共同體”為紅色字體，有下劃線。效果圖如下：課堂練習(xí)2-2-4使用CSS設(shè)置文本樣式圖2-2-4使用CSS設(shè)置文本樣式課堂練習(xí)2-2-4使用CSS設(shè)置文本樣式HTML代碼：CSS代碼：1234567891011121314<divclass="news"><h1>習(xí)主席再談這個(gè)全球抗疫根本大計(jì)</h1><p>新冠疫情發(fā)生以來(lái)，習(xí)主席親力親為推動(dòng)疫情防控國(guó)際合作，呼吁國(guó)際社會(huì)團(tuán)結(jié)抗疫、共同構(gòu)建人類衛(wèi)生健康共同體。共同構(gòu)建人類衛(wèi)生健康共同體，是人類立足當(dāng)前戰(zhàn)勝新冠疫情、著眼長(zhǎng)遠(yuǎn)應(yīng)對(duì)重大公共衛(wèi)生突發(fā)事件的根本大計(jì)。在11日晚同菲律賓、白俄羅斯領(lǐng)導(dǎo)人通話中，習(xí)主席再次談到“<span>人類衛(wèi)生健康共同體</span>”。

</p></div>1234567891011121314.newsh1{text-align:center;}.newsp{text-indent:2em;line-height:1.5em;}.newsspan{text-decoration:underline;color:red;}知識(shí)與技能準(zhǔn)備CSS文字、文本樣式效果具有繼承性，如果某一標(biāo)簽設(shè)置了文字顏色為藍(lán)色，那么它的所有后代標(biāo)簽都會(huì)具有該屬性，除非后代標(biāo)簽自帶同種的文字屬性，或通過(guò)CSS設(shè)置新的屬性將其覆蓋。非文字、文本類型的樣式效果不具備繼承特性。為父層<div>標(biāo)簽設(shè)置文字屬性，觀察底層<h2>、<p>標(biāo)簽文字是否有繼承效果。4、CSS文字、文本樣式效果的繼承性HTML代碼：CSS代碼：1234567<div><h2>繼承性</h2><p>繼承了父層標(biāo)簽的文字屬性</p><pclass="child">覆蓋了父層標(biāo)簽的文字屬性</p></div>123456789div{text-decoration:underline;color:blue;font-size:16px;}.child{color:red;font-size:20px;}知識(shí)與技能準(zhǔn)備顯示效果如下：4、CSS文字、文本樣式效果的繼承性圖2-2-5CSS文字、文本樣式效果的繼承性知識(shí)與技能準(zhǔn)備一般情況，都是通過(guò)<img>標(biāo)簽或者標(biāo)簽的背景屬性（background）來(lái)添加圖標(biāo)，但使用的圖片都是位圖圖片，放大會(huì)產(chǎn)生鋸齒，且無(wú)法隨意修改顏色，如圖2-2-6所示：圖標(biāo)字體（IconFont），是一種字體,可以隨意縮放不失真，只需要給出對(duì)應(yīng)的字符就可以了。并且改變圖標(biāo)大小、顏色只需要通過(guò)設(shè)置CSS的字體大小、顏色等屬性就可以了。5、圖標(biāo)字體圖2-2-6添加圖標(biāo)知識(shí)與技能準(zhǔn)備5.1字體文件的下載在使用圖標(biāo)字體的功能前，需要有記錄圖標(biāo)數(shù)據(jù)的字體文件，這種類型的文件可在互聯(lián)網(wǎng)中免費(fèi)下載，這里介紹IcoMoon具體使用方法。（1）打開IcoMoon網(wǎng)站/，點(diǎn)擊IconMoonApp，如圖2-2-7所示：5、圖標(biāo)字體圖2-2-7IcoMoon網(wǎng)站知識(shí)與技能準(zhǔn)備（2）打開后是具體圖標(biāo)的界面，可以自己添加自己的圖標(biāo)進(jìn)行生成，也可以選用他給出的圖標(biāo)，在默認(rèn)圖標(biāo)的下方會(huì)有addIconsFromLibrary點(diǎn)擊后可以看到更多的圖標(biāo)供選擇（有免費(fèi)的有付費(fèi)的），如圖2-2-8所示：5、圖標(biāo)字體圖2-2-8具體圖標(biāo)界面知識(shí)與技能準(zhǔn)備（3）點(diǎn)擊GenerateFont后會(huì)生成當(dāng)前選擇的圖標(biāo)的界面，右下角的GenerateFont也會(huì)變成Download，也可以進(jìn)行相關(guān)的下載設(shè)置（例如：讓其支持ie6/7之類的）。（4）下載完成后會(huì)有以下文件（如圖2-2-9），這些文件最好都保存下來(lái)，不要隨意刪掉。5、圖標(biāo)字體圖2-2-9下載文件知識(shí)與技能準(zhǔn)備5.2圖標(biāo)字體的具體使用方法（1）將字體文件夾復(fù)制到項(xiàng)目中并且在CSS中聲明字體?！癅font-face{}”屬于固定的語(yǔ)法結(jié)構(gòu)，表示在網(wǎng)頁(yè)中定義一種新的字體；“font-family：“定義字體名稱”；”用于設(shè)置該字體的名稱，字體名稱自行定義，以后一般標(biāo)簽可通過(guò)字體屬性“font-family”使用該名稱的字體；“src:：url（“字體路徑”）”通過(guò)設(shè)置的路徑加載字體文件，后面的“format（“格式名”）”用于聲明該字體格式，便于瀏覽器識(shí)別，該部分也可不添加。如果要加載多種字體格式的文件，可使用逗號(hào)分隔依次填寫，如“src:：url（“路徑1”），url（“路徑2”），url（“路徑3”）”。5、圖標(biāo)字體語(yǔ)法：@font-face{font-family：“定義字體名稱”；

src:：url（“字體路徑”）format（“格式名”）；

}知識(shí)與技能準(zhǔn)備考慮到瀏覽器的兼容問(wèn)題，代碼可寫為（注釋部分是兼容的瀏覽器及版本）：5、圖標(biāo)字體12345678910@font-face{font-family:'icomoon';src:url('fonts/icomoon.eot?dvdt0g');/*IE9+*/src:url('fonts/icomoon.eot?dvdt0g#iefix')format('embedded-opentype'),/*IE6-IE8*/url('fonts/icomoon.ttf?dvdt0g')format('truetype'),/*chrome、firefox、opera、Safari、Android、ios4.2+*/url('fonts/icomoon.woff?dvdt0g')format('woff'),/*chrome、firefox*/url('fonts/icomoon.svg?dvdt0g#icomoon')format('svg');/*ios4.1-*/}知識(shí)與技能準(zhǔn)備（2）圖標(biāo)字體的使用網(wǎng)頁(yè)中加載了字體文件后，便可讓標(biāo)簽使用該字體，但由于圖標(biāo)字體不屬于文字?jǐn)?shù)據(jù)，無(wú)法直接寫為文字顯示，需要使用特定的編碼代表圖標(biāo)。圖標(biāo)的編碼在字體文件制作時(shí)已被設(shè)定好，具體可打開我們前面下載的demo.html文件查看，如圖2-2-10中的“e900”、“e906”等就是圖標(biāo)對(duì)應(yīng)的編碼。5、圖標(biāo)字體圖2-2-10圖標(biāo)對(duì)應(yīng)的編碼知識(shí)與技能準(zhǔn)備圖標(biāo)的編碼不能直接寫在標(biāo)簽內(nèi)，標(biāo)簽無(wú)法正確識(shí)別，需要使用偽對(duì)象選擇器：before或：after，該選擇器的作用是通過(guò)CSS的方式在標(biāo)簽內(nèi)插入一個(gè)標(biāo)簽和數(shù)據(jù)。語(yǔ)法格式如下：“：before”選擇器在被選元素的內(nèi)容前面插入內(nèi)容；“：after”選擇器在被選元素的內(nèi)容后面插入內(nèi)容。注意：before和after必須和content結(jié)合使用，即使沒有內(nèi)容插入也要寫content：“”。5、圖標(biāo)字體E：before{content：“內(nèi)容”；其他屬性……}知識(shí)與技能準(zhǔn)備使用偽對(duì)象選擇器的示例如下：5、圖標(biāo)字體顯示效果如下圖所示：圖標(biāo)字體的編碼以“content：“\編碼”；”的格式添加到偽對(duì)象選擇器中，并設(shè)置當(dāng)前使用的字體為圖標(biāo)字體，便可被正確識(shí)別并顯示。HTML代碼：CSS代碼：1<p>：before或：after</p>1234567p:before{content:"偽對(duì)象選擇器";}p:after{content:"有什么用？";color:red;}圖2-2-11使用偽對(duì)象選擇器知識(shí)與技能準(zhǔn)備添加圖標(biāo)字體的示例如下：5、圖標(biāo)字體顯示效果如下圖所示：顯示效果如下圖所示：HTML代碼：123<spanclass="ico-newspaper"></span><spanclass="ico-home"></span><spanclass="ico-pencil2"></span>CSS代碼：1234567891011121314.ico-newspaper:before{font-family:"icomoon";/*使用字體圖標(biāo)*/content:"\e904";/*圖標(biāo)編碼*/}.ico-home:before{font-family:"icomoon";content:"\e900";color:blue;}.ico-pencil2:before{font-family:"icomoon";content:"\e906";font-size:30px;}圖2-2-12添加圖標(biāo)字體知識(shí)與技能準(zhǔn)備如果要使用的圖標(biāo)字體較多，建議統(tǒng)一圖標(biāo)字體的類名稱格式以便方便管理，如上面代碼的“icon-名稱”，之后可使用屬性選擇符統(tǒng)一設(shè)置，如上述例子中的CSS代碼可修改為：5、圖標(biāo)字體CSS代碼：123456789101112/*對(duì)有“icon-”類名稱的標(biāo)簽使用統(tǒng)一的字體設(shè)置*/[class*="ico-"]:before{font-family:"icomoon";}/*設(shè)置類名稱對(duì)應(yīng)的圖標(biāo)*/.ico-newspaper:before{content:"\e904";}.ico-home:before{content:"\e900";}.ico-pencil2:before{content:"\e906";}/*設(shè)置獨(dú)立的樣式*/.ico-home{color:blue}.ico-pencil2{font-size:30px;}效果圖如下：課堂練習(xí)2-2-5使用圖標(biāo)字體制作如圖2-2-13所示的樣式圖2-2-13圖標(biāo)字體樣式課堂練習(xí)2-2-5使用圖標(biāo)字體制作如圖2-2-13所示的樣式HTML代碼：CSS代碼：1234567891011121314<ul> <li><spanclass="icon-home">home圖標(biāo)</span></li><li><spanclass="icon-office">office圖標(biāo)</span></li><li><spanclass="icon-newspaper">newspaper圖標(biāo)</span></li><li><spanclass="icon-quill">quill圖標(biāo)</span></li><li><spanclass="icon-eyedropper">eyedropper圖標(biāo)</span></li></ul>123456789101112@font-face{/*字體設(shè)置省略*/}ul{list-style:none;}/*不使用項(xiàng)目符號(hào)*/li{line-height:30px;}/*列表項(xiàng)行高30px*/[class*="icon-"]:before{font-family:'icomoon';

color:burlywood;}.icon-home:before{content:"\e900";}.icon-office:before{content:"\e903";}.icon-newspaper:before{content:"\e904";}.icon-quill:before{content:"\e907";}.icon-eyedropper:before{content:"\e90a";}任務(wù)實(shí)施1、為網(wǎng)頁(yè)中的h1，h3設(shè)置字體樣式，并設(shè)置網(wǎng)頁(yè)中所有標(biāo)簽行高為“l(fā)ine-height：1.5em”，使用選擇符“*”，這樣每種標(biāo)簽會(huì)根據(jù)自身的文字大小得出對(duì)應(yīng)的行高。2、設(shè)置超鏈接的樣式。3、使用類選擇器設(shè)置文本居中。12345h1,h3{ font-family:"微軟雅黑""黑體"; font-weight:600;}*{line-height:1.5em;}/*所有標(biāo)簽的行高*/1234a{text-decoration:none;color:white;/*因設(shè)置字體顏色為白色后無(wú)法看到效果，可先用其它顏色代替

溫馨提示

  • 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ù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 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)論