第三章網(wǎng)頁(yè)中的文本_第1頁(yè)
第三章網(wǎng)頁(yè)中的文本_第2頁(yè)
第三章網(wǎng)頁(yè)中的文本_第3頁(yè)
第三章網(wǎng)頁(yè)中的文本_第4頁(yè)
第三章網(wǎng)頁(yè)中的文本_第5頁(yè)
已閱讀5頁(yè)，還剩75頁(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è)中的文本本章要點(diǎn)3.1文本的基本編輯3.1.1插入文本、符號(hào)、日期、水平線3.1.2添加字體3.1.3設(shè)置文本的屬性3.1.4建立列表3.2超鏈接3.2.1路徑3.2.2建立超鏈接3.3樣式3.3.1CSS語(yǔ)法3.3.2CSS樣式應(yīng)用3.3.3引用外部CSS文件與導(dǎo)出樣式表3.1文本的基本編輯互聯(lián)網(wǎng)上大量信息的傳播以文本為主。因此，對(duì)于網(wǎng)頁(yè)制作人員來(lái)說(shuō)，文本的處理是最基本而重要的技巧之一。學(xué)習(xí)網(wǎng)頁(yè)制作首先應(yīng)掌握網(wǎng)頁(yè)中文本的制作和編輯方法。3.1.1插入文本、符號(hào)、日期、水平線Enter插入<p> </p>（硬回車）shift＋enter

插入<br/>（軟回車）Ctrl＋shift＋space

插入一個(gè) 特殊字符日期分段換行<html><head><title>分段換行與預(yù)格式</title></head><body><h3>以下是直接寫文本的情況：</h3>星期一、星期二、星期三、星期四、星期五、星期六、星期日。<h3>以下是使用了三個(gè)換行標(biāo)記的情況：</h3>星期一、星期二、<br/>星期三、星期四、<br/>星期五、星期六、星期日。<br/><h3>以下使用分段標(biāo)記（分為兩段）：</h3><p>星期一、星期二、星期三、</p><p>星期四、星期五、星期六、星期日。</p><h3>以下使用預(yù)格式：</h3><pre>星期一、星期二、星期三、星期四、星期五、星期六、星期日。</pre></body></html>以下HTML代碼顯示了如何用HR標(biāo)記符的各種屬性控制水平線的顯示，效果如下圖所示。<HTML><HEAD><TITLE>水平線效果</TITLE></HEAD><BODY>以下是默認(rèn)水平線：<HR>以下是粗為5像素的水平線：<HRsize="5">以下是長(zhǎng)度為100像素的水平線：<HRwidth="100">以下是長(zhǎng)度為屏幕寬度50%的水平線：<HRwidth="50%">以下是粗為5像素的實(shí)心水平線：<HRsize="5"noshade>以下是紅色的水平線：<HRcolor="red"></BODY></HTML>插入水平線3.1.2添加字體執(zhí)行菜單命令“文本”|“字體”|“編輯字體列表”3.1.3設(shè)置文本的屬性圖3-4文本的“屬性”面板【例3-1】設(shè)計(jì)一個(gè)只有文字的頁(yè)面，以下網(wǎng)頁(yè)為例，對(duì)文字的格式、字體、字號(hào)、顏色以及對(duì)齊格式等屬性進(jìn)行設(shè)置。學(xué)習(xí)雙標(biāo)簽<h1></h1>、</p></p>、<span></span>、<pre></pre>及單標(biāo)簽<br/>、<hr/>的使用文本的字體、字號(hào)、風(fēng)格等屬性以CSS樣式寫在<head></head>中自定義的CSS樣式優(yōu)先級(jí)高于網(wǎng)頁(yè)樣式body,td,th{}的優(yōu)先級(jí)用<hn>設(shè)置標(biāo)題的大小。<html> <head> <title> 網(wǎng)頁(yè)設(shè)計(jì) </title> </head> <body> <h1>今天天氣真好!</hl> <h2>今天天氣真好!</h2> <h3>今天天氣真好!</h3> <h4align=left>今天天氣真好!</h4> <h5align=center>今天天氣真好!</h5> <h6align=right>今天天氣真好!</h6> <h>今天天氣真好!<h> </body></html>強(qiáng)制換行標(biāo)記的使用

<html> <head> <title>強(qiáng)制換行標(biāo)記的使用</title> </head> <body> 歡迎進(jìn)入牡丹園!<br><br> 新聞<br>

影視<p> 聊

天

室<br> </body></html>強(qiáng)制不換行標(biāo)記<nobr>……</nobr>，常用英文人名<nobr>BillGates</nobr>“計(jì)算機(jī)簡(jiǎn)史”網(wǎng)頁(yè)的顯示效果設(shè)置文字格式1設(shè)置文字的大小設(shè)置文字的大小的格式為：<fontsize=數(shù)字face=字體名color=顏色>被設(shè)置的文字<／font><font>標(biāo)記可設(shè)定文字的字體、字號(hào)和顏色。size用來(lái)設(shè)置文字的大小。數(shù)字的取值范圍從1～7，size取1時(shí)最小，取7時(shí)最大。face用來(lái)設(shè)置字體。如黑體、宋體、楷體—GB2312、仿宋—GB2312、隸書、TimesNewRoman等。color用來(lái)設(shè)置文字顏色。<font>和<hn>標(biāo)記都可以設(shè)置文字的大小，當(dāng)<font>中的size取7時(shí)的文字比<h1>要大?！纠?-5】用<font>設(shè)置文字的大小。<html> <head>

<title>用<font>設(shè)置文字的大小<／title> </head> <body> <h1>文字的大小!</h1> <fontsize=1>文字的大小size=1</font><br> <fontsize=2>文字的大小size=2</font><br> <fontsize=3>文字的大小size=3</font><br> <fontsize=4>文字的大小size=4</font><br> <fontsize=5>文字的大小size=5</font><br> <fontsize=6>文字的大小size=6</font><br> <fontsize=7>文字的大小size=7</font><br> </body></html>上標(biāo)（sup）和下標(biāo)（sub）標(biāo)記用于書寫數(shù)學(xué)公式或分子式。如：H<sub>2</sub>O<!--H2O-->X<sup>2</sup> <!--X2-->由于字體標(biāo)記屬于對(duì)文本外觀進(jìn)行修飾的標(biāo)記，是由于當(dāng)時(shí)CSS語(yǔ)言尚未出現(xiàn)時(shí)html定義的表現(xiàn)的范疇，隨著CSS的出現(xiàn)，這些表現(xiàn)功能均可以由CSS完成，所以不含有語(yǔ)義的字體標(biāo)記慢慢過(guò)時(shí)了。3.1.4建立列表

與列表有關(guān)的標(biāo)簽為<ul>、<ol>、<li>、<menu>、<lh>、<dl>、<dt>、<dd>等，格式。通過(guò)文本的“屬性”面板建立列表創(chuàng)建有序列表創(chuàng)建有序列表創(chuàng)建有序列表需要使用有序列表標(biāo)記符OL和列表項(xiàng)標(biāo)記符LI，其中LI標(biāo)記符的結(jié)束標(biāo)記符可以省略，基本語(yǔ)法如下：<OL><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LI>列表項(xiàng)3</OL>OL標(biāo)記符具有兩個(gè)常用的屬性：type和start，分別用來(lái)設(shè)置數(shù)字序列樣式和數(shù)字序列的起始值。start屬性的值可以是任意整數(shù)，type屬性的值如表2-3所示：有序列表的type屬性值值含義1阿拉伯?dāng)?shù)字：1、2、3等，此選項(xiàng)為默認(rèn)值A(chǔ)大寫字母：A、B、C等a小寫字母：a、b、c等I大寫羅馬數(shù)字：I、II、III、IV等i小寫羅馬數(shù)字：i、ii、iii、iv等

當(dāng)位于OL標(biāo)記符內(nèi)時(shí)，LI標(biāo)記符具有兩個(gè)常用的屬性：type和value。type屬性用于設(shè)置數(shù)字樣式，取值與OL的type屬性相同；value屬性用于指定一個(gè)新的數(shù)字序列起始值，以獲得非連續(xù)性的數(shù)字序列。例如以下HTML代碼顯示了如何創(chuàng)建不同的有序列表，效果如下圖所示。<pclass="STYLE2">用大寫羅馬字母表示的有序列表：</p><oltype="I"class="STYLE2"><li>列表值1</li><li>列表值2</li><li>列表值3</li></ol><pclass="STYLE2">數(shù)字序列的有序列表<

/p><oltype="1"><liclass="STYLE2">張三</li><liclass="STYLE2">李四</li><liclass="STYLE2">王五</li></ol><pclass="STYLE3"><strong>字母序列的有序列表</strong>：</p><oltype="A">

<liclass="STYLE2">列表值1</li><liclass="STYLE2">列表值1</li><liclass="STYLE2">列表值1</li></ol><pclass="STYLE3"><strong>編號(hào)不連續(xù)的有序列表</strong>：</p><oltype="1"><liclass="STYLE2">列表值1</li><liclass="STYLE2">列表值1</li><livalue="5"class="STYLE2">列表值1</li></ol><pclass="STYLE2">其實(shí)數(shù)字為3的有序列表：</p><olstart="3"><liclass="STYLE2">列表值1</li><liclass="STYLE2">列表值2</li><liclass="STYLE2">列表值3</li></ol><HTML><HEAD><TITLE>有序列表示例</TITLE></HEAD><BODY>用大寫羅馬字母表示的有序列表：<OLtype="I"><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LI>列表項(xiàng)3</OL>起始數(shù)字為3的有序列表：<OLstart="3"><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LI>列表項(xiàng)3</OL>編號(hào)不連續(xù)的有序列表<OL><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LIvalue="5">列表項(xiàng)3</OL>變換了數(shù)字樣式的有序列表<OL><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LItype="A">列表項(xiàng)3</OL></BODY></HTML>有序列表的嵌套

以下HTML代碼即顯示了一個(gè)嵌套的有序列表，效果如下圖所示。<HTML><HEAD><TITLE>嵌套的有序列表</TITLE></HEAD><BODY><H2>嵌套的有序列表</H2><OLtype="A"><LI>列表項(xiàng)1<OL><LI>子列表項(xiàng)1<LI>子列表項(xiàng)2<LI>子列表項(xiàng)3</OL><LI>列表項(xiàng)2<LI>列表項(xiàng)3</OL></BODY></HTML>創(chuàng)建無(wú)序列表無(wú)序列表使用<ul>和</ul>標(biāo)記，它包含的內(nèi)容項(xiàng)沒(méi)有指定順序，表示彼此相關(guān)但卻不遵循某一順序的一組信息。無(wú)序列表的每一項(xiàng)不再用編號(hào)表示，而是用某種類型的標(biāo)志（如實(shí)心圓、空心圓圈等）表示。一個(gè)典型的無(wú)序列表如下定義：<ul> <li>第1項(xiàng)</li> <li>第2項(xiàng)</li> …… <li>第n項(xiàng)</li></ul>列表項(xiàng)標(biāo)志可以通過(guò)<ul>標(biāo)記的type屬性來(lái)設(shè)置。type屬性可以選擇以下幾項(xiàng)之一：circle：空心圓點(diǎn)square：方塊disc：實(shí)心圓點(diǎn)無(wú)序列表

以下HTML代碼顯示了如何創(chuàng)建無(wú)序列表，效果如下圖所示。<HTML><HEAD><TITLE>無(wú)序列表示例</TITLE></HEAD><BODY>默認(rèn)無(wú)序列表：<UL><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LI>列表項(xiàng)3</UL>使用方塊作為列表項(xiàng)標(biāo)記的無(wú)序列表：<ULtype="square"><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LI>列表項(xiàng)3</UL></BODY></HTML>嵌套的無(wú)序列表示例<ulid="nav"><li><ahref="">文章</a><ul> <li><ahref="">CSS教程</a></li> <li><ahref="">DOM教程</a></li> <li><ahref="">XML教程</a></li></ul></li><li><ahref="">參考</a><ul> <li><ahref="">XHTML</a></li> <li><ahref="">XML</a></li> <li><ahref="">CSS</a></li></ul></li></ul>定義項(xiàng)目列表定義項(xiàng)目列表用項(xiàng)目列表表示單詞或語(yǔ)句,使之具有交互凹進(jìn)的特點(diǎn).定義項(xiàng)目列表使用標(biāo)記<dl>、<dt>和<dd>。<dt>往往用于定義單詞，<dd>用于定義語(yǔ)句。由<dt>定義的項(xiàng)目會(huì)自動(dòng)換行左對(duì)齊，但項(xiàng)目之間沒(méi)有空行。格式為：<dl><dt>定義單詞1<dd>單詞1的說(shuō)明<dt>定義單詞2<dd>單詞2的說(shuō)明…….</dl>項(xiàng)目列表應(yīng)用示例<html><head><title>項(xiàng)目列表應(yīng)用</title></head><body><palign=center>院系設(shè)置</p><dl><dt>計(jì)算機(jī)應(yīng)用專業(yè)<dd>專業(yè)內(nèi)容有……<dt>計(jì)算機(jī)軟件專業(yè)<dd>專業(yè)內(nèi)容有……<dt>計(jì)算機(jī)網(wǎng)絡(luò)專業(yè)<dd>專業(yè)內(nèi)容有……</dl></body></html>課堂練習(xí)：定義列表項(xiàng)目<dl><dt>湖南城市</dt><dd>長(zhǎng)沙</dd><dd>衡陽(yáng)</dd><dd>常德</dd></dl><dl><dt>湖北城市</dt><dd>武漢</dd><dd>襄樊</dd><dd>宜昌</dd></dl>混合嵌套列表有序列表和無(wú)序列表也可互相嵌套，如以下HTML代碼所示：<OL><LI>列表項(xiàng)1<LI>列表項(xiàng)2

<UL><LI>子列表項(xiàng)1<LI>子列表項(xiàng)2</UL>

<LI>列表項(xiàng)3</OL><spanclass="STYLE2">超鏈接</span><oltype="1"><liclass="STYLE2">站內(nèi)文檔鏈接

<ultype="disc"><li>要點(diǎn)1</li><li>要點(diǎn)2</li></ul><liclass="STYLE2">站外文檔鏈接</li></ol>課堂練習(xí)：制作詩(shī)歌目錄3.2超鏈接

3.2.1路徑絕對(duì)路徑：是Internet上資源的完整地址。包括3部分：協(xié)議種類、放有所須文件的計(jì)算機(jī)地址（計(jì)算機(jī)域名）、具體文件的路徑及文件名。協(xié)議://計(jì)算機(jī)域名/文件路徑及文件名創(chuàng)建對(duì)站點(diǎn)以外的鏈接必須用絕對(duì)路徑。根相對(duì)路徑：從站點(diǎn)根文件夾到文檔所經(jīng)過(guò)的路程，以斜杠/開(kāi)始，例如：/support/tips.html就是站點(diǎn)根文件夾下的support子文件夾中的一個(gè)文件的根相對(duì)路徑。瀏覽器不能像服務(wù)器那樣識(shí)別站點(diǎn)根目錄，故與根目錄相對(duì)的路徑必須放在遠(yuǎn)程服務(wù)器上才能瀏覽。文檔相對(duì)路徑：相對(duì)當(dāng)前文檔的路徑。3.2.2建立超鏈接建立超鏈接由錨點(diǎn)（anchor）標(biāo)簽<a></a>定義：它在網(wǎng)頁(yè)上建立超文本鏈接。通過(guò)單擊一個(gè)詞、句或圖片，可從此處轉(zhuǎn)到另一個(gè)鏈接資源(目標(biāo)資源)，這個(gè)目標(biāo)資源有唯一的地址(URL)。以上特點(diǎn)的詞、句或圖片就稱為熱點(diǎn)。<ahref="地址"target="打開(kāi)窗口方式">熱點(diǎn)</a>屬性href指定超鏈接的目標(biāo)網(wǎng)頁(yè)地址，包括路徑和文件名屬性target指定超鏈接文件被打開(kāi)的目標(biāo)窗口，有如下4個(gè)選項(xiàng)：_blank：將鏈接的文件載入到新的無(wú)標(biāo)題瀏覽器窗口中。_parent：將鏈接的文件載入到父框架，若該框架非嵌入式框架，則鏈接到整個(gè)瀏覽器窗口。3.2.2建立超鏈接_self（默認(rèn)值）：將鏈接的文件載入到自身框架或自身窗口中。_top：將鏈接的文件載入到整個(gè)瀏覽器窗口中，并刪除所有框架。在Dreamweaver中提供了6種常用的鏈接：外部文檔鏈接、書簽鏈接、E-mail鏈接、無(wú)址鏈接、腳本鏈接和指向下載文件的鏈接。1．外部文檔鏈接指鏈接到本文檔之外的文檔，包括站內(nèi)和站外的網(wǎng)頁(yè)。

在熱字“屬性”面板的“鏈接”框中填入超鏈接的外部文檔地址（屬性href的值)；在“目標(biāo)”下拉列表框中設(shè)置超鏈接的目標(biāo)窗口(屬性target的值)。標(biāo)記的格式為：<ahref=”地址”或name=”字符串”>熱點(diǎn)</a>屬性href為超文本引用，它的值為一個(gè)URL，是目標(biāo)資源的有效地址。屬性name指定當(dāng)前文檔內(nèi)的一個(gè)字符串，作為鏈接時(shí)可以使用的有效的目標(biāo)資源的地址。熱點(diǎn)可以根據(jù)需要設(shè)置顏色，利用<body>標(biāo)記中相關(guān)的屬性。建立指向其他頁(yè)面的鏈接其格式為：

<ahref=”目標(biāo)文件的路徑／目標(biāo)文件名.html”>熱點(diǎn)文本</a>根據(jù)目標(biāo)文件與當(dāng)前文件的目錄關(guān)系，有如以下4種寫法。1）鏈接到同一目錄內(nèi)的網(wǎng)頁(yè)文件鏈接到同—目錄內(nèi)的網(wǎng)頁(yè)文件的格式為：<ahref=”目標(biāo)文件名.html”>熱點(diǎn)文本</a>2）鏈接到下一級(jí)目錄中的網(wǎng)頁(yè)文件鏈接到下一級(jí)目錄中的網(wǎng)頁(yè)文件的格式為：<ahref=”子目錄名／目標(biāo)文件名．html”>熱點(diǎn)文本<／a>3）鏈接到上一級(jí)目錄中的網(wǎng)頁(yè)文件鏈接到上一級(jí)目錄中的網(wǎng)頁(yè)文件的格式為：<ahref=”.／目標(biāo)文件名．Html”>熱點(diǎn)文本<／a>其中“．／”表示退到上一級(jí)目錄中。4）鏈接到同級(jí)目錄中的網(wǎng)頁(yè)文件鏈接到同級(jí)目錄中的網(wǎng)頁(yè)文件的格式為：

<ahref=”..／子目錄名／目標(biāo)文件名．html”>熱點(diǎn)文本<／a>5）創(chuàng)建指向本頁(yè)中的鏈接要在當(dāng)前頁(yè)面內(nèi)實(shí)現(xiàn)超鏈接，需要定義兩個(gè)標(biāo)記：一個(gè)為超鏈接標(biāo)記，另一個(gè)為書簽標(biāo)記。超鏈接標(biāo)記的格式為：

<ahref=”#記號(hào)名”>熱點(diǎn)文本<／a>即單擊熱點(diǎn)文本，將跳轉(zhuǎn)到“記號(hào)名”開(kāi)始的文本。書簽就是用<a>標(biāo)記對(duì)該文本做一個(gè)記號(hào)。若有多個(gè)鏈接的書簽名，書簽名在<a>的name屬性中定義。格式為：

<aname=”記號(hào)名”>目標(biāo)文本附近的字符串<／a>使用了name屬性的錨站稱為命名錨站，它用于創(chuàng)建指向同一頁(yè)面中指定位置的鏈接，以便直接跳到此位置，而不是像一般錨站那樣在不同頁(yè)面間跳轉(zhuǎn)。命名錨站的一般語(yǔ)法格式為： <aname="書簽名">錨站A</a>屬性name的值“書簽名”用來(lái)標(biāo)示“錨站A”在HTML文檔中的位置。要找到命名錨站所在的位置，就必須使用<ahref=“”></a>。例如，要找到上述錨站，就要編寫如下代碼：<ahref="#書簽名">點(diǎn)擊此處將使瀏覽器跳到錨站A處</a>注意：href屬性賦的值若是錨站的name屬性值，則必須在書簽名前邊加一個(gè)“#”號(hào)。2．書簽鏈接<ahref="地址#書簽名"target="打開(kāi)窗口方式">熱點(diǎn)</a>建立書簽：“插入”面板的“命名錨記”按鈕鏈接書簽：#書簽名。3．無(wú)址鏈接返回頁(yè)面的無(wú)址連接<ahref=“#">熱點(diǎn)</a>不返回頁(yè)面頂端，形成手形光標(biāo)<ahref="javascript:;">熱點(diǎn)</a>4．E-mail鏈接（電子郵件鏈接） <ahref="mailto:郵件地址">熱點(diǎn)</a>“插入”面板中的“電子郵件鏈接”按鈕3.2.2建立超鏈接5．腳本鏈接在選中熱字的link框中直接寫入腳本。例：JavaScript:alert('確定刪除嗎')6．指向下載文件的鏈接鏈接的目標(biāo)文件不是HTML文件，則作為下載文件，格式：<ahref="路徑及文件名">熱點(diǎn)</a>【例3-3】試制作外部文檔鏈接、外部文檔書簽鏈接、本文檔書簽鏈接、E-mail鏈接、無(wú)址鏈接和腳本鏈接。

3.3CSS樣式樣式是一組可以控制文本塊、段落或整篇文檔外觀的格式屬性。使用外部樣式文件可以一次控制若干篇文檔的格式。CSS（CascadingStyleSheets）即級(jí)聯(lián)樣式表或?qū)盈B樣式表通過(guò)樣式名或HTML標(biāo)簽表示，可以控制絕大多數(shù)的傳統(tǒng)文本格式，如字體、字號(hào)和對(duì)齊方式等，還可以指定位置、鼠標(biāo)指針形狀和其他特殊效果。為了防止某些瀏覽器不識(shí)別某些CSS樣式，可以用注釋標(biāo)簽<!---->將CSS樣式括起來(lái)。

樣式設(shè)計(jì)是指應(yīng)用HTML樣式和CSS（層疊樣式表）設(shè)計(jì)網(wǎng)頁(yè)的外觀樣式。CSS是CascadingStyleSheet的縮寫，我們把它譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”。1．樣式表的優(yōu)點(diǎn)（1）同時(shí)更新站點(diǎn)的許多頁(yè)面，更快更容易（2）制作體積小，下載頁(yè)面快（3）樣式和結(jié)構(gòu)分離2．CSS的基本語(yǔ)法和定義（1）CSS的基本語(yǔ)法CSS樣式表的樣式規(guī)則是由三個(gè)部分構(gòu)成：Selector（選擇器），Property（屬性）和Value（屬性的取值）?；镜母袷饺缦隆elector{properties1:value1;/*第1個(gè)屬性名及屬性值*/properties2:value2;/*第2個(gè)屬性名及屬性值*/…} ●selector：第一種是HTML標(biāo)簽選擇器，只對(duì)該標(biāo)簽起作用，例如body，p，a等。第二種叫class，即類選擇器，必須以“．”開(kāi)始，名稱可以是字母和數(shù)字的組合，可應(yīng)用到任何對(duì)象。第三種叫ID選擇器，和類選擇器類似，必須以“#”開(kāi)始，名稱也是字母和數(shù)字的組合，可應(yīng)用到任何對(duì)象，但其有一定的局限性。如：#right{text-align:right}/*只對(duì)id="right"的段落起作用*/●property：就是指將要被修改的性質(zhì)，例如color。●value：給property的值，例如給color的值可以設(shè)置為red或#00ff00。（2）CSS的定義CSS允許網(wǎng)站作者的網(wǎng)頁(yè)外觀以及表示方式更多控制。它們擴(kuò)展能夠精確頁(yè)上指定元素的位置和外觀并創(chuàng)建特殊效果。

優(yōu)先級(jí)內(nèi)聯(lián)嵌入樣式表外部樣式表低高共有三種類型的級(jí)聯(lián)樣式表：外部樣式表、嵌入樣式表和內(nèi)聯(lián)樣式表。先創(chuàng)建CSS樣式，再對(duì)選定文本應(yīng)用CSS樣式。對(duì)選定文本用了某CSS樣式后，若又改變了該樣式的格式，則修改之前用了該樣式的文本自動(dòng)更新格式。圖3-15“CSS樣式”面板CSS樣式創(chuàng)建之后，只對(duì)本網(wǎng)頁(yè)有效。以往創(chuàng)建的CSS樣式不存在于新開(kāi)文件的CSS樣式列表中，新網(wǎng)頁(yè)須重新附加CSS文件。3.3.3使用CSS樣式在新建CSS樣式窗口中，需要設(shè)置3個(gè)參數(shù)：選擇器類型樣式名稱樣式定義的范圍邊框?qū)傩?b{font-family:"新宋體"; font-size:24pt;border-top-width:medium; border-right-width:medium;border-bottom-width:medium; border-left-width:medium;border-top-style:dotted; border-right-style:dotted;border-bottom-style:dotted; border-left-style:dotted;border-top-color:#FF0000; border-right-color:#000000;border-bottom-color:#0000FF; border-left-color:#00FFFF;font-style:italic; line-height:normal;color:#99FF00; margin:0.2in;padding:0.2in;}邊框?qū)傩砸韵率纠@示了邊框?qū)傩缘挠梅?，效果如圖所示。代碼.title{font:bolderitalic;font-family:楷體_GB2312;text-align:center;background-image:url(background.jpg);border-width:thinmediumthick;border-style:solid;border-color:gray}.content{border:solid#5f9ea0thin}.author{text-align:right}BODY{ background:#f0f8ff; background-image:url();}<body><H1class="title">惜春</H1><DIVclass="content"><P>黑發(fā)不知勤學(xué)早，白首方悔讀書遲。</P><Pclass=“author”>——顏真卿</P></DIV><DIVclass="content"><P>莫等閑白了少年頭，空悲切。</P><Pclass=“author”>——岳飛</P></DIV></body></html>頁(yè)面元素周圍的空白以下示例可以顯示出這三種空白的區(qū)別，效果如圖所示（A表示邊界、B表示邊框、C表示填充）。P{margin:0.25in;border:0.25insolidblack;padding:0.25in;background:gray}頁(yè)面元素周圍的空白

1．“類”選擇器【例3-4】在文字上應(yīng)用樣式。.Glow{ font-size:24pt; line-height:25pt; filter:Glow(Color=#ff0000,Strength=4); color:#FFFFFF;.glow{ font-family:"隸書","華文中宋"; font-size:36px; font-weight:normal; color:#FFFFFF; filter:Glow(Color=#ff0000,Strength=2);}.blur{ font-family:"隸書","華文中宋"; font-size:36px; color:#0000ff; filter:Blur(Add=true,Direction=135,Strength=3);}.shadow2{ font-family:"隸書","華文中宋"; font-size:36px; color:#0000ff; filter:Shadow(Color=#cccccc,Direction=135);}.shadow1{ font-family:"隸書","華文中宋"; font-size:36px; color:#0000ff; filter:DropShadow(Color=#999999,OffX=3,OffY=3,Positive=1);}【例3-5】為圖片設(shè)置具有透明效果（Alpha濾鏡）、風(fēng)吹效果（Blur濾鏡）、黑白效果（Gray濾鏡）、反相效果（Invert濾鏡）的樣式。.Alpha

{ filter:Alpha(Opacity=100,FinishOpacity=5,Style=2,StartX=30,StartY=20,FinishX=120,FinishY=50);}<HTML><HEAD><TITLE>過(guò)濾器效果之二</TITLE><STYLE><!--.blur{filter:blur(strength=6,direction=135);width=800}.dropShadow{filter:dropShadow(color=gray,offX=3,offY=3);width=800}.glow{filter:glow(color="#ff7f00",strength=10);width=800}.mask{filter:mask(color="#238e68");width=800}.shadow{filter:shadow(color=gray,direction=135);width=800}--></STYLE></HEAD><BODY><DIValign="center"><H2>此段文本未使用效果</H2><H2class="blur">此段文本使用了blur效果</H2><H2class="dropShadow">此段文本使用了dropShadow效果</H2><H2class="glow">此段文本使用了glow效果</H2><H2class="mask">此段文本使用了mask效果</H2><H2class="shadow">此段文本使用了shadow效果</H2></DIV></BODY></HTML>CSS豎排文字樣式表的文字處理屬性中有兩個(gè)重要的屬性：writing-mode和text-align。讓我們先看看它們的用法：1.writing-mode（設(shè)置對(duì)象書寫方向）語(yǔ)法：writing-mode:lr-tb、tb-rl

參數(shù)：lr-tb：從左向右，從上往下tb-rl：從上往下，從右向左

示例：div{writing-mode:tb-rl;}2.text-align（設(shè)置對(duì)象中文本的對(duì)齊方式）語(yǔ)法：text-align:left、right、center、justify

參數(shù)：left：左對(duì)齊right：右對(duì)齊center：居中justify：兩端對(duì)齊

示例：div{text-align:center;}課堂練習(xí)：使用CSS豎排詩(shī)歌2．“標(biāo)簽”選擇器3．“高級(jí)”選擇器body{scrollbar-face-color:#3399FF;//立體滾動(dòng)條凸出部分的顏色scrollbar-highlight-color:#FFFFFF;//滾動(dòng)條空白部分的顏色scrollbar-3dlight-color:#FFC097;//立體滾動(dòng)條亮邊的顏色scrollbar-darkshadow-color:#FFFFFF;//立體滾動(dòng)條強(qiáng)陰影的顏色scrollbar-shadow-color:#FF3300;//立體滾動(dòng)條陰影的顏色scrollbar-arrow-color:#FF3300;//上下按鈕上三角箭頭的顏色scrollbar-track-color:#D7EBFF;//滾動(dòng)條的基本顏色}鼠標(biāo)屬性鼠標(biāo)屬性用于設(shè)置在對(duì)象上面移動(dòng)的鼠標(biāo)指針顯示的形狀，取值如表所示。值含義auto瀏覽器基于當(dāng)前文本決定顯示哪種指針crosshair簡(jiǎn)單十字形default隨平臺(tái)而定的默認(rèn)指針（通常為箭頭）hand手形move指示某物被移動(dòng)的交叉箭頭*-resize指示邊緣被移動(dòng)的箭頭（*可以是n、ne、nw、s、se、sw、e以及w，分別代表北、東北、西北、等方向）text編輯文本指針（通常為I形）wait指示程序正忙、用戶需要等待的沙

溫馨提示

  • 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)論