《CSS DIV網(wǎng)頁(yè)樣式與布局案例教程》課件 項(xiàng)目三 使用CSS設(shè)置文字效果

項(xiàng)目三

使用CSS設(shè)置文字效果任務(wù)一

制作個(gè)人博客首頁(yè)——設(shè)置文字樣式任務(wù)二

制作個(gè)人博客子頁(yè)——設(shè)置段落和其他文字樣式任務(wù)三

制作個(gè)人博客排行榜——設(shè)置列表樣式任務(wù)一

制作個(gè)人博客首頁(yè)——設(shè)置文字樣式眾所周知，文字是網(wǎng)頁(yè)中最為重要的設(shè)計(jì)元素，因此在網(wǎng)頁(yè)中對(duì)文字的修飾也是不可或缺的。在項(xiàng)目二中，我們已經(jīng)學(xué)會(huì)了如何在網(wǎng)頁(yè)中插入文字、段落和標(biāo)題等，在本任務(wù)中，我們將通過制作個(gè)人博客首頁(yè)，學(xué)習(xí)如何運(yùn)用CSS對(duì)文字進(jìn)行美化和修飾，包括設(shè)置文字的字體、字號(hào)、顏色和加粗效果等。支撐知識(shí)點(diǎn)在上面的實(shí)例中，我們運(yùn)用了CSS屬性對(duì)網(wǎng)頁(yè)文字進(jìn)行修飾操作，CSS文字屬性包括文字字體、文字大小、文字加粗及文字顏色等，這些屬性主要是以font為前綴。下面我們開始CSS各個(gè)文字樣式屬性的具體學(xué)習(xí)。一、CSS文字樣式常用屬性設(shè)置字體：font-family設(shè)置字號(hào)：font-size設(shè)置斜體：font-style設(shè)置加粗：font-weight設(shè)置顏色：color設(shè)置變體：font-variant組合設(shè)置字體屬性：font1．設(shè)置文字字體屬性為font-family，基本語(yǔ)法：font-family:字體1,字體字體3;。例如：p{font-family:宋體，楷體，隸書;}以上語(yǔ)句聲明了頁(yè)面中使用<p>標(biāo)簽的字體，并且同時(shí)聲明了3個(gè)字體名稱，分別是宋體、楷體和隸書。整句代碼告訴瀏覽器首先在瀏覽者的計(jì)算機(jī)中尋找宋體，如果該用戶的計(jì)算機(jī)中沒有安裝宋體，則接著尋找楷體，以此類推。2．設(shè)置文字大小屬性為font-size，基本語(yǔ)法：font-size:尺寸|百分比|關(guān)鍵。其屬性值可以是關(guān)鍵字、尺寸或百分比，意義如下。尺寸：使用尺寸設(shè)置文字的大小，一般使用的單位為px（像素）。百分比：以父元素中的字體大小為參考值，如果沒有設(shè)置父元素的字體大小，則是相對(duì)于瀏覽器默認(rèn)字體大小的百分比。關(guān)鍵字：使用關(guān)鍵字設(shè)置文字大小，從小到大包括xx-samll（極?。?、x-small（較?。mall（?。edium（標(biāo)準(zhǔn)大）、large（大）、x-large（較大）和xx-large（極大）7個(gè)關(guān)鍵字。3．設(shè)置斜體屬性為font-style，基本語(yǔ)法：font-style:normal|italic|oblique;。其各屬性值的意義如下表所示。4．設(shè)置文字粗細(xì)屬性為font-weight，基本語(yǔ)法：font-weight:normal|bold|bolder|lighter|number;。例如：p{font-weight:600;}。其各屬性值的意義如下表所示。5．設(shè)置文字顏色屬性為color，基本語(yǔ)法：color:顏色的名稱|RGB值|十六進(jìn)制數(shù);。其屬性值可以是顏色的英文名稱，如red、blue；也可以是顏色的RGB值，如rgb(255,0,0)；還可以是顏色的十六進(jìn)制值，如#ff0000。我們將在后面介紹顏色的選擇方法。6．設(shè)置變體屬性為font-variant，作用是將所有小寫字母轉(zhuǎn)換為小型大寫字母，基本語(yǔ)法：font-variant:normal|small-caps;其各屬性值的意義如下表所示。小型大寫字母與其余文

本相比，其字體尺寸更小。7．組合設(shè)置文字屬性可以用font來組合設(shè)置文字的屬性。例如：p{font:italic

bold

small-caps

15pt宋體;}表示該段落文字為斜體加粗體的宋體文字，大小為15像素，其中英文采取大寫字母顯示。二、網(wǎng)頁(yè)中元素的長(zhǎng)度單位1．絕對(duì)長(zhǎng)度單位絕對(duì)長(zhǎng)度單位所定義的元素大小一般都比較固定，大小顯示不受其他因素影響，一般在網(wǎng)頁(yè)制作中使用較少。2．相對(duì)長(zhǎng)度單位相對(duì)長(zhǎng)度單位是指網(wǎng)頁(yè)元素的大小相對(duì)于某個(gè)參照物來確定，如使用屏幕分辨率、父元素或?yàn)g覽器作為參照物等。相對(duì)長(zhǎng)度單位在網(wǎng)頁(yè)設(shè)計(jì)中較常用，如下表所示。三、為網(wǎng)頁(yè)元素設(shè)置顏色的技巧在HTML頁(yè)面中，顏色統(tǒng)一使用RGB顏色模式，該模式下，顏色由紅、綠、藍(lán)三原色按一定的比例混和而成。這三種原色的取值范圍均為0~255，共可混合出一千多萬種顏色。例如，當(dāng)將這三種原色的值都設(shè)為255時(shí)，顏色為白色；都設(shè)為0時(shí)，顏色為黑色。RGB顏色也可以使用十六進(jìn)制表示，如#ff0000，其中前兩位為紅色分量，中間兩位為綠色分量，最后兩位是藍(lán)色分量。任務(wù)二

制作個(gè)人博客子頁(yè)——設(shè)置段落和其他文字樣式在CSS中除了可以對(duì)文字本身設(shè)置樣式外，還可以對(duì)多個(gè)文字的集合，即段落設(shè)置樣式。下面，我們通過制作個(gè)人博客子頁(yè)，來學(xué)習(xí)設(shè)置段落樣式和其他文字樣式的方法，包括設(shè)置段落的對(duì)齊方式、縮進(jìn)、行間距和段間距，以及英文字母大小寫，文字的上劃線、下劃線效果等。支撐知識(shí)點(diǎn)一、CSS段落和其他文字樣式屬性修飾文字：text-decoration轉(zhuǎn)換英文字母大小寫：text-transform設(shè)置中文字符間距：letter-spacing設(shè)置英文單詞間距：word-spacing設(shè)置段落的水平對(duì)齊方式：text-align設(shè)置段落縮進(jìn)：text-indent設(shè)置行間距（行高）：line-height1．修飾文字修飾文字是指為文字添加下劃線、刪除線和上劃線等，

屬性為text-decoration，基本語(yǔ)法：text-decoration:underline|overline|line-through|blink|none;。其各屬值的意義如下表所示。2．轉(zhuǎn)換英文字母大小寫屬性為text-transform，基本語(yǔ)法：text-transform:capitalize|uppercase|lowercase;。其各屬性值的意義如下表所示。3．設(shè)置中文字符間距屬性為letter-spacing，用來調(diào)整中文字符或英文字母之間的間距，基礎(chǔ)語(yǔ)法：letter-spacing:normal|長(zhǎng)度;。中，“長(zhǎng)度”有兩種表示方法，一種是使用絕對(duì)數(shù)值，一種是使用字體高（即字體大小）的倍數(shù)。4．調(diào)整英文單詞間距屬性為word-spacing，用來調(diào)整英文單詞之間的間距，屬性值和使用方法與letter-spacing屬性相同。5．設(shè)置段落的水平對(duì)齊方式屬性為text-align，可以設(shè)置段落的左、中、右和兩端對(duì)齊。該屬性可應(yīng)用于HTML中的任何塊級(jí)標(biāo)簽，如<p>、<h1>~<h6>、<div>等?；A(chǔ)語(yǔ)法：text-align:left|right|center|justify;，其各屬性值的意義表所示。6．設(shè)置段落首行縮進(jìn)屬性為text-indent，基礎(chǔ)語(yǔ)法：text-indent:長(zhǎng)度|百分。一般我們使用text-indent:2em;，表示首行縮進(jìn)2個(gè)字符。7．調(diào)整行高指調(diào)整行與行之間的距離，屬性為line-height，還可以利用該屬性讓文字縱向居中?；A(chǔ)語(yǔ)法：line-height:normal|數(shù)字|長(zhǎng)度|百分比;。其中，“數(shù)字”表示使用絕對(duì)數(shù)值，如8px；“長(zhǎng)度”表示設(shè)置為當(dāng)前字

高的倍數(shù)，如2em；百分比在設(shè)置行高時(shí)很少用。二、HTML常用符號(hào)在Dreamweaver的設(shè)計(jì)視圖中輸入一些符號(hào)時(shí)，由于它們與HTML代碼的關(guān)鍵字有沖突，因此不能直接在代碼

視圖中顯示，而是轉(zhuǎn)化成了相應(yīng)的HTML代碼。我們可

以在設(shè)計(jì)視圖中利用鍵盤或“插入”>“HTML”>“特

殊字符”菜單來輸入這些符號(hào)，也可以直接在代碼視圖中輸入這些符號(hào)的HTML代碼（注意大小寫）。任務(wù)三

制作個(gè)人博客排行榜——設(shè)置列表樣式列表能夠?qū)⑽淖职匆欢ǖ姆绞脚帕姓R，從而使內(nèi)容井然有序。通過對(duì)列表設(shè)置CSS樣式，可以制作出較好的版式效果。本任務(wù)通過制作博客排行榜頁(yè)面，來學(xué)習(xí)為列表設(shè)置CSS樣式的方法。支撐知識(shí)點(diǎn)一、CSS列表樣式常用屬性關(guān)于列表的相關(guān)知識(shí)，讀者可參考項(xiàng)目二任務(wù)一中的相關(guān)內(nèi)容。無論是有序列表還是無序列表，在CSS中都可以使用相同的屬性值，而且效果完全相同。以下是CSS列表樣式的常用屬性。設(shè)置列表符號(hào)：list-style-type使用圖片符號(hào)：list-style-image調(diào)整列表位置：list-style-position1．設(shè)置列表符號(hào)屬性為list-style-type，用來設(shè)置列表項(xiàng)的符號(hào)類型，本語(yǔ)法：list-style-type:屬性值;。其常用的屬性值及義如下表所示。2．使用圖片符號(hào)屬性為list-style-image，用來將圖片作為列表的符號(hào)，從而豐富和美化列表符號(hào)，其基本語(yǔ)法為：list-style-image:url;。輸入圖像的路徑時(shí)，可以參考項(xiàng)目二中介紹的方法。此外，在Dreamweaver的代碼界面中輸入CSS代碼會(huì)出現(xiàn)代碼提示，添加列表圖像也同樣會(huì)出現(xiàn)對(duì)應(yīng)的代碼提示。單擊“瀏覽”按鈕，然后在打開的對(duì)話框中選擇需要的

列表圖像。3．調(diào)整列表位置屬性為list-style-position，用來設(shè)置列表符號(hào)的縮進(jìn)即列表項(xiàng)的位置，其基本語(yǔ)法為：list-style-position:outside|inside;各屬性值的意義如下表所示。二、清除列表的默認(rèn)邊距列表在HTML頁(yè)面中默認(rèn)是有空白距離的，當(dāng)我們用CSS對(duì)其進(jìn)行操作時(shí)，需要將默認(rèn)的距離消除，以方便使用

CSS對(duì)其精確控制。在實(shí)際操作時(shí)，可以使用以下CSS

選擇器來消除列表的默認(rèn)內(nèi)邊距及外邊距。ul、ol{padding:0;margin:0;}三、<div>與<span>標(biāo)簽補(bǔ)充講解使用HTML和CSS設(shè)計(jì)網(wǎng)頁(yè)時(shí)，<div>與<span>是兩個(gè)常用的標(biāo)簽。利用這兩個(gè)標(biāo)簽，加上CSS對(duì)其樣式的控制，可以很方便地實(shí)現(xiàn)各種效果以及對(duì)網(wǎng)頁(yè)進(jìn)行布局。<div>標(biāo)簽對(duì)相當(dāng)于一個(gè)容器，在它里面（<div>與</div>之間）可以容納各種HTML元素，如段落<p>、

圖片<img>、標(biāo)題<h>、表格<table>，以及其他<div>標(biāo)簽等。我們可以把<div>標(biāo)簽及其包含的內(nèi)容視為一個(gè)獨(dú)立的對(duì)象，用CSS進(jìn)行控制。例如，設(shè)置<div>標(biāo)簽的高度、寬度、背景、位置、邊框，以及其包含的內(nèi)容的