第2章 HTML標(biāo)簽及CSS樣式基礎(chǔ)_第1頁
第2章 HTML標(biāo)簽及CSS樣式基礎(chǔ)_第2頁
第2章 HTML標(biāo)簽及CSS樣式基礎(chǔ)_第3頁
第2章 HTML標(biāo)簽及CSS樣式基礎(chǔ)_第4頁
第2章 HTML標(biāo)簽及CSS樣式基礎(chǔ)_第5頁
已閱讀5頁，還剩58頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設(shè)計(jì)案例教程案例說明網(wǎng)頁主要由結(jié)構(gòu)、表現(xiàn)和行為3部分組成，結(jié)構(gòu)是指網(wǎng)頁的內(nèi)容部分，主要通過HTML語言實(shí)現(xiàn)，我們可以直接編寫HTML代碼或在Dreamweaver中進(jìn)行可視化設(shè)計(jì)，來制作網(wǎng)頁的結(jié)構(gòu)部分。我們在瀏覽網(wǎng)頁時(shí)看到的文字、圖像、動(dòng)畫等在HTML語言中都是用標(biāo)簽來描述的。案例步驟鮮花導(dǎo)購網(wǎng)頁的結(jié)構(gòu)部分主要包括輸入文本、設(shè)置段落、設(shè)置標(biāo)題、設(shè)置超鏈接、插入水平線、設(shè)置列表和插入圖像等操作。這些效果大部分可通過兩種方式實(shí)現(xiàn)，一種是在Dreamweaver的設(shè)計(jì)視圖中進(jìn)行可視化操作，Dreamweaver會(huì)自動(dòng)將設(shè)置的網(wǎng)頁結(jié)構(gòu)“翻譯”成HTML代碼；一種是直接在Dreamweaver的代碼視圖中編寫HTML代碼。此處我們主要在Dreamweaver的設(shè)計(jì)視圖中進(jìn)行操作，然后在代碼視圖中學(xué)習(xí)相關(guān)的HTML代碼。案例步驟步驟01將本書附贈(zèng)的“第2章”文件夾拷貝至第1章創(chuàng)建的“MyWeb”站點(diǎn)根文件夾中。輸入文本并添加段落和標(biāo)題標(biāo)簽1.步驟02在剛拷貝的文件夾“第2章\task1”中新建一個(gè)名為flower-lx.html的網(wǎng)頁文檔并打開。步驟03創(chuàng)建文本和添加段落標(biāo)簽。打開task1文件夾中名為“文字”的文本文件，將文字內(nèi)容復(fù)制粘貼到flower-lx.html文檔代碼視圖的<body></body>標(biāo)簽對中，然后依據(jù)效果圖，在設(shè)計(jì)視圖中使用【Enter】鍵為文字劃分段落。案例步驟在Dreamweaver的設(shè)計(jì)視圖中按【Enter】鍵表示分段，此時(shí)在HTML代碼中分段的文字被加上了一個(gè)段落標(biāo)簽對<p></p>；按【Shift+Enter】組合鍵表示文字換行，此時(shí)將在HTML代碼中添加換行標(biāo)簽<br>。提示案例步驟步驟04添加標(biāo)題標(biāo)簽。回到設(shè)計(jì)視圖，將插入點(diǎn)置于第1行的“花之語”文字左側(cè)，在“插入”面板中選擇“結(jié)構(gòu)”類別，然后單擊“標(biāo)題：H1”按鈕。步驟05此時(shí)在第1行插入1號(hào)標(biāo)題文字“這是布局標(biāo)題1標(biāo)簽的內(nèi)容”，并且“花之語”文字自動(dòng)移到了第2行。將插入點(diǎn)置于第1行文字左側(cè)，多次按【Delete】鍵刪除所有文字，直到“花之語”文字移到第1行，并應(yīng)用1號(hào)標(biāo)題樣式。案例步驟步驟06將插入點(diǎn)置于“花的語言”文字左側(cè)，單擊“插入”面板“結(jié)構(gòu)”類別中的“標(biāo)題：H1”下拉按鈕，在其下拉列表中選擇“H2”，然后刪除自動(dòng)生成的文字，對“花的語言”文字應(yīng)用2號(hào)標(biāo)題。步驟07對“鮮花導(dǎo)購”文字應(yīng)用2號(hào)標(biāo)題。此時(shí)在代碼視圖中可看到這幾個(gè)段落分別被添加上了<h1></h1>和<h2></h2>標(biāo)簽對。案例步驟步驟01添加超鏈接標(biāo)簽。首先選中第2行的“鮮花禮品”文字，然后單擊“插入”面板“常用”類別中的“Hyperlink”按鈕，彈出“Hyperlink”對話框。單擊“鏈接”項(xiàng)右側(cè)的圖標(biāo)，在打開的“選擇文件”對話框中選擇“img\1.jpg”圖像文件，單擊“確定”按鈕，回到“Hyperlink”對話框，在“目標(biāo)”下拉列表中選擇“_blank”，單擊“確定”按鈕關(guān)閉對話框。添加超鏈接標(biāo)簽2.案例步驟步驟02分別選擇“自助訂花”“綠色植物”“花之物語”“會(huì)員中心”和“聯(lián)系我們”文本，打開“Hyperlink”對話框，在“鏈接”項(xiàng)中輸入符號(hào)“#”，單擊“確定”按鈕，為所選文本設(shè)置空鏈接。案例步驟超鏈接指向網(wǎng)站內(nèi)部或外部的文檔或其他元素，單擊它可以使瀏覽者從一個(gè)網(wǎng)頁跳轉(zhuǎn)到另一個(gè)網(wǎng)頁，或打開某個(gè)圖像，下載某個(gè)文件等。在Dreamweaver的設(shè)計(jì)視圖中，除了可以通過“插入”面板設(shè)置超鏈接外，還可以在文檔中選中要設(shè)置超鏈接的文本或圖像等對象后，利用屬性檢查器中的“鏈接”選項(xiàng)設(shè)置要鏈接到的目標(biāo)對象。知識(shí)庫案例步驟步驟01插入水平線。將插入點(diǎn)置于“聯(lián)系我們”超鏈接文本后面，單擊“插入”面板“常用”類別中的“水平線”按鈕，即可在插入點(diǎn)所在行下面插入一條水平線，此時(shí)在代碼視圖中可看到水平線標(biāo)簽<hr>。添加水平線、列表和圖像標(biāo)簽3.案例步驟步驟02插入列表和列表項(xiàng)標(biāo)簽。為了讓文字更好地排列，我們?yōu)轫撁嫦路降奈谋咎砑恿斜順?biāo)簽。確認(rèn)已在設(shè)計(jì)視圖中將“鮮花導(dǎo)購”下的每個(gè)花名用【Enter】鍵劃分為不同的段落，然后將這些文本全部選中，單擊“插入”面板“結(jié)構(gòu)”類別中的“ul項(xiàng)目列表”按鈕，插入項(xiàng)目列表標(biāo)簽<ul></ul>和列表項(xiàng)標(biāo)簽<li></li>。案例步驟步驟03插入圖像標(biāo)簽。在代碼視圖中將插入點(diǎn)放在“<h2>花的語言</h2>”后，然后單擊“插入”面板“常用”類別中的“圖像:圖像”選項(xiàng)，在彈出的對話框中選擇“img”文件夾中的“flower1.jpg”圖像，將其插入到網(wǎng)頁文檔中。案例步驟步驟01將指定內(nèi)容放入一個(gè)id名為bg的<div>標(biāo)簽中。在設(shè)計(jì)視圖中利用拖動(dòng)方式選中從“花的語言”到“代表了贈(zèng)送者的意圖”之間的所有內(nèi)容，然后單擊“插入”面板“常用”類別中的“Div”按鈕，打開“插入Div”對話框，在ID編輯框中輸入bg，然后單擊“確定”按鈕。添加<div>標(biāo)簽并設(shè)置ID和類名稱4.案例步驟步驟02使用相同的方法，選中“花之語”下面的一行超鏈接文字，為這些超鏈接文字添加<div>標(biāo)簽，并設(shè)置id名為“l(fā)ink1”。此時(shí)切換到代碼視圖，可看到添加的<div>標(biāo)簽和為它們設(shè)置的id屬性。<div>相當(dāng)于一個(gè)容器，由首標(biāo)簽<div>和尾標(biāo)簽</div>構(gòu)成，在該標(biāo)簽對內(nèi)可以內(nèi)嵌表格（table）、文本（text）、圖像和其他<div>標(biāo)簽等各種HTML元素。其中所包含的元素屬性可以由<div>標(biāo)簽的屬性來控制，或使用樣式表來控制。提示案例步驟步驟03為部分段落設(shè)置類名稱。通過案例二的效果圖可以看出，網(wǎng)頁中有兩個(gè)段落單獨(dú)進(jìn)行了特殊的文字顏色及下劃線效果設(shè)置。所以我們需要為它們設(shè)置相同的類名稱，以便使用CSS的類選擇器來統(tǒng)一設(shè)置它們的外觀。為此，在代碼視圖中找到這兩個(gè)段落的位置，手動(dòng)為這兩個(gè)段落標(biāo)簽設(shè)置相同的類名稱p1。案例步驟步驟04保存文件。按【Ctrl+S】組合鍵保存網(wǎng)頁，然后按【F12】鍵在瀏覽器中預(yù)覽效果。此時(shí)，鮮花導(dǎo)購網(wǎng)頁的結(jié)構(gòu)部分便已制作完成。案例步驟本案例中涉及的HTML標(biāo)簽如表2-1所示。表2-1涉及的HTML標(biāo)簽標(biāo)簽描述標(biāo)簽描述<body></body>網(wǎng)頁主體標(biāo)簽<ul></ul>無序列表標(biāo)簽<h1></h1>一號(hào)標(biāo)題標(biāo)簽<li></li>無序列表項(xiàng)標(biāo)簽<hr>水平線標(biāo)簽<imgsrc=“圖像路徑和名稱”/>圖像標(biāo)簽<p></p>段落標(biāo)簽<ahref=“跳轉(zhuǎn)頁面”>超鏈接文字</a>超鏈接標(biāo)簽<br>換行標(biāo)簽<div></div>相當(dāng)于一個(gè)容器支撐知識(shí)點(diǎn)一、HTML標(biāo)題、水平線、段落和換行標(biāo)題的作用是讓用戶快速了解文檔的結(jié)構(gòu)與大致信息，它是通過<h1>～<h6>等標(biāo)簽對進(jìn)行定義的。<h1>標(biāo)簽對定義最大的一號(hào)標(biāo)題；<h6>標(biāo)簽對定義最小的六號(hào)標(biāo)題。當(dāng)為文字添加標(biāo)題標(biāo)簽后，它會(huì)獨(dú)立成一行顯示。HTML標(biāo)題1.HTML標(biāo)題1.代

碼效

果<body><h1>這是一號(hào)標(biāo)題</h1><h2>這是二號(hào)標(biāo)題</h2><h3>這是三號(hào)標(biāo)題</h3><h4>這是四號(hào)標(biāo)題</h4><h5>這是五號(hào)標(biāo)題</h5><h6>這是六號(hào)標(biāo)題</h6></body>HTML水平線2.水平線主要是用來分隔網(wǎng)頁中的內(nèi)容。水平線標(biāo)簽<hr>是一個(gè)單標(biāo)簽，其作用是在HTML頁面中創(chuàng)建水平線。表2-3HTML水平線效果代

碼效

果<body><p>這是段落文字</p><hr><p>這是段落文字</p><hr><p>這是段落文字</p></body>HTML段落3.HTML段落是通過<p></p>標(biāo)簽對進(jìn)行定義的。表2-4HTML段落效果代

碼效

果<body><p>這是一個(gè)段落</p><p>這是另一個(gè)段落</p></body>HTML換行4.要在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行，需使用<br>標(biāo)簽。表2-5HTML換行效果代

碼效

果<body><p>這是一個(gè)段落</p><p>這是另一個(gè)段落</p><p>這是<br>一個(gè)被換行的<br>段落</p></body>二、HTML列表列表是制作網(wǎng)頁時(shí)經(jīng)常使用的HTML元素，它可以使文本內(nèi)容更加清晰、明了、工整、直觀。在HTML中，列表分為無序列表<ul>、有序列表<ol>和定義列表<dl>3類。無序列表就是列表結(jié)構(gòu)中的列表項(xiàng)沒有先后順序的列表形式。大部分網(wǎng)頁中的列表均采用無序列表，使用<ul></ul>標(biāo)簽對定義，包含的列表項(xiàng)使用<li></li>標(biāo)簽對定義。列表項(xiàng)的默認(rèn)符號(hào)為小圓點(diǎn)●，要改變符號(hào)類型或去除符號(hào)，可使用CSS屬性進(jìn)行控制。無序列表1.無序列表1.表2-6無序列表效果代

碼效

果<body><ul><li>咖啡</li><li>牛奶</li><li>奶茶</li></ul></body>有序列表2.表2-7有序列表效果有序列表在列表項(xiàng)前都有編號(hào)，因此，瀏覽者可以清晰地了解每項(xiàng)的順序。其中<ol></ol>標(biāo)簽對用來定義有序列表，包含的列表項(xiàng)用<li></li>標(biāo)簽對定義，默認(rèn)序號(hào)為1、2、3。代碼效

果<body><ol><li>咖啡</li><li>牛奶</li><li>奶茶</li></ol></body>定義列表3.表2-8定義列表效果定義列表是項(xiàng)目及其注釋的組合。其中<dl></dl>標(biāo)簽對表示定義列表；<dt></dt>標(biāo)簽對表示每個(gè)定義的名稱（項(xiàng)目名）；<dd></dd>標(biāo)簽對表示每個(gè)定義名稱的詳細(xì)內(nèi)容（注釋）。代

碼效

果<body><dl><dt>咖啡</dt><dd>黑色的熱飲</dd><dt>牛奶</dt><dd>白色的冷飲</dd></dl></body>三、HTML圖像認(rèn)識(shí)網(wǎng)頁中的圖像1..gif格式最多只能包含256種顏色，因而適合表現(xiàn)色調(diào)不連續(xù)或具有大面積單一顏色的圖像，如卡通畫、按鈕、圖標(biāo)和徽標(biāo)等。.jpg格式適于表現(xiàn)色彩豐富，具有連續(xù)色調(diào)的圖像，如各種照片。像素（px）是圖像的基本組成單位，它是一個(gè)有顏色的小方塊，以行和列的方式排列，圖像就是由這些小方塊組成的。當(dāng)圖像尺寸以像素為單位時(shí)，每一厘米等于28像素，如15×15厘米大小的圖像，等于420×420像素大小。提示HTML圖像標(biāo)簽2.src指“source”，即存儲(chǔ)圖像的位置（路徑和圖像名稱）。

alt為替換文本屬性，用來為圖像定義一串預(yù)備的替換文本。

width和height指圖像的寬度和高度，常用單位為px（像素）。HTML圖像分為兩類，插入圖像和背景圖像。插入圖像作為HTML實(shí)體標(biāo)簽存在；而背景圖像則是CSS的修飾內(nèi)容。HTML插入圖像是通過<img/>標(biāo)簽進(jìn)行定義的。它是一個(gè)單標(biāo)簽。由圖像標(biāo)簽<img/>和其屬性構(gòu)成。其中src屬性用來表示圖像的源地址，是必不可少的。表2-9HTML圖像標(biāo)簽代

碼效果<imgsrc="01.jpg"width="100"height="120"alt="這是幅圖像"/>圖像路徑3.絕對路徑是書寫完整的路徑，系統(tǒng)按照整個(gè)路徑查找文件。絕對路徑中的盤符后面用:\或:/分隔，各目錄名之間以及目錄名與文件名之間用\或/分隔。文件在電腦中的物理路徑。文件為發(fā)布在Internet上的文件時(shí)，需要該文件的網(wǎng)絡(luò)路徑，即網(wǎng)址。表2-10圖像絕對路徑應(yīng)用示例1）絕對路徑絕對路徑示例含

義<imgsrc="/img/flower.jpg"/>圖像在域名為的服務(wù)器中的img目錄里<imgsrc="E:/myweb/image/flower.jpg"/>圖像在E盤myweb目錄下的image子目錄里相對路徑是以當(dāng)前文檔所在的路徑和子目錄為起始目錄，進(jìn)行相對于文檔的查找。制作網(wǎng)頁時(shí)通常采用相對路徑，這樣可以避免站點(diǎn)中的文件整體移動(dòng)后，產(chǎn)生找不到圖像或其他文件等的現(xiàn)象。表2-11圖像相對路徑應(yīng)用示例2）相對路徑HTML文檔位置圖像位置和名稱相對路徑描

述d:\demod:\demo\tad.gif<imgsrc="tad.gif">圖像和網(wǎng)頁在同一目錄d:\demod:\demo\image\tad.gif<imgsrc="image/tad.gif">圖像在網(wǎng)頁下一層目錄d:\demod:\tad.gif<imgsrc="../tad.gif">圖像在網(wǎng)頁上一層目錄d:\demod:\image\tad.gif<imgsrc="image\tad.gif">圖像和網(wǎng)頁在同一層但不在同一目錄四、HTML超鏈接href=“跳轉(zhuǎn)文件的地址”表示超鏈接的目標(biāo)文件的路徑。超鏈接的相對路徑寫法與圖像的相對路徑相似。超鏈接由源端點(diǎn)和目標(biāo)端點(diǎn)兩部分組成，其中設(shè)置了鏈接的一端稱為源端點(diǎn)，跳轉(zhuǎn)到的頁面或?qū)ο蠓Q為目標(biāo)端點(diǎn)，源端點(diǎn)可以是文字或圖像等。HTML超鏈接主要由標(biāo)簽對<a></a>和屬性href構(gòu)成。要實(shí)現(xiàn)鏈接的跳轉(zhuǎn)，必須要使用屬性href。超鏈接的基本格式1.<ahref="跳轉(zhuǎn)文件的地址"target="窗口打開方式">源端點(diǎn)（如鏈接文字）</a>target屬性表示鏈接目標(biāo)的打開方式。超鏈接的基本格式1.表2-12超鏈接相對路徑應(yīng)用實(shí)例文件位置相對路徑在d:\demo文件夾中，即在同一目錄href="exm.html"在d:\demo\aaa中，即在子目錄中href="aaa/exm.html"在d:\中，即在上一級目錄中href="../exm.html"在d:\bbb中，即在上一級子目錄中href="../bbb/exm.html"超鏈接的基本格式1.表2-13target屬性值的意義類型描

述target="_blank"保留當(dāng)前窗口，在新窗口中打開鏈接的網(wǎng)頁target="_parent"在當(dāng)前窗口打開鏈接的網(wǎng)頁，如果是框架網(wǎng)頁，則在父框架中顯示打開的鏈接網(wǎng)頁target="_self"在當(dāng)前窗口打開鏈接的網(wǎng)頁，如果是框架網(wǎng)頁，則在當(dāng)前框架中顯示打開的鏈接網(wǎng)頁target="_top"在當(dāng)前窗口打開鏈接的網(wǎng)頁，如果是框架網(wǎng)頁，則刪除所有框架，顯示打開的網(wǎng)頁超鏈接的分類2.超鏈接分為文字超鏈接、圖像超鏈接、錨點(diǎn)超鏈接和郵件超鏈接幾種類型。1）文字超鏈接<ahref="跳轉(zhuǎn)文件的地址">鏈接文字</a>2）圖像超鏈接<ahref="跳轉(zhuǎn)文件的地址"><imgsrc="1.jpg"></a>在制作一些內(nèi)容較長的網(wǎng)頁時(shí)，可以讓瀏覽者從頭到尾地閱讀，也可以選擇自己感興趣的部分閱讀。方法是在文章的起始處列出幾個(gè)小標(biāo)題，相當(dāng)于文章的目錄，然后為每個(gè)標(biāo)題建立一個(gè)鏈接，并為要鏈接到的目標(biāo)位置打上一個(gè)定位標(biāo)記，這個(gè)標(biāo)記通常稱為錨點(diǎn)。3）錨點(diǎn)超鏈接（同一頁面跳轉(zhuǎn)）錨點(diǎn)的地方采用：<aname="錨點(diǎn)名稱">目標(biāo)位置</a>；標(biāo)題的鏈接表示為：<ahref=#錨點(diǎn)名稱>標(biāo)題名</a>。表2-14錨點(diǎn)超鏈接使用示例鏈接文字第一步驟：定位標(biāo)記第二步驟：建立鏈接鏈接文字一<aname="m1">欲跳轉(zhuǎn)的位置</a><ahref="#m1">鏈接文字一</a>鏈接文字二<aname="m2">欲跳轉(zhuǎn)的位置</a><ahref="#m2">鏈接文字二</a>鏈接文字三<aname="m3">欲跳轉(zhuǎn)的位置</a><ahref="#m3">鏈接文字三</a>案例說明本案例中我們將學(xué)習(xí)如何使用層疊樣式表CSS來修飾該頁面，即制作該網(wǎng)頁的表現(xiàn)部分。案例步驟步驟01在HTML中添加CSS樣式聲明。使用DreamweaverCC打開案例一制作的flower-lx.html頁面。切換到代碼視圖，在<head></head>標(biāo)簽對中添加<styletype="text/css"></style>標(biāo)簽對。<head><metacharset="utf-8"><title>無標(biāo)題文檔</title><styletype="text/css"></style></head>案例步驟步驟02案例一中已經(jīng)搭建好了網(wǎng)頁的HTML結(jié)構(gòu)，現(xiàn)在開始設(shè)置各個(gè)部分的具體樣式。相關(guān)樣式的設(shè)置內(nèi)容都需要放在步驟1添加的<styletype=“text/css”></style>標(biāo)簽對中。這里我們首先使用標(biāo)簽選擇器對整體頁面和1號(hào)標(biāo)題進(jìn)行設(shè)置。在CSS樣式表中，每個(gè)樣式的內(nèi)容都存放在選擇器這種容器中，它由“選擇器名{具體的樣式代碼}”組成。步驟2中設(shè)置的選擇器為標(biāo)簽選擇器，它用標(biāo)簽來代表想要修飾的內(nèi)容，無需提前為相關(guān)標(biāo)簽設(shè)置id或類名稱。選擇器里面的具體樣式代碼被稱為CSS屬性，它由“屬性:屬性值;”組成。提示案例步驟步驟03繼續(xù)在<styletype="text/css"></style>標(biāo)簽對中加入以下代碼，從而設(shè)置超鏈接導(dǎo)航欄的樣式。#link1{text-align:center; /*設(shè)置id名為link1的div容器中的文字居中對齊*/}#link1a{color:#de4eaf; /*設(shè)置超鏈接文字顏色*/font-size:14px; /*設(shè)置超鏈接文字大小*/text-decoration:none; /*取消超鏈接標(biāo)簽帶來的下劃線*/margin-right:35px; /*設(shè)置各個(gè)超鏈接之間的距離*/}案例步驟步驟04設(shè)置“花的語言”～“隨著時(shí)代的發(fā)展”段落和圖像的樣式。#bg{background:#b3375c; /*為id名為bg的div容器設(shè)置背景顏色*/padding:10px; /*設(shè)置div容器中包含的元素同容器邊框之間的距離*/color:#FFF; /*設(shè)置文字顏色*/}#bgimg{float:left; /*用浮動(dòng)實(shí)現(xiàn)文字環(huán)繞圖像效果*/margin:10px; /*設(shè)置圖像與文字之間的距離為10像素*/}案例步驟步驟05為在案例一中設(shè)置了類名稱p1的兩個(gè)段落設(shè)置樣式。.p1{text-decoration:underline; /*設(shè)置文字下劃線*/font-style:oblique; /*設(shè)置文字傾斜*/color:#FF9; /*設(shè)置文字顏色*/}步驟06保存文件。此時(shí)鮮花導(dǎo)購網(wǎng)頁的樣式部分制作完成，按【Ctrl+S】組合鍵保存網(wǎng)頁，然后按【F12】鍵在瀏覽器中預(yù)覽效果。支撐知識(shí)點(diǎn)一、在HTML頁面中引入CSS樣式表的方法將CSS樣式表放置在HTML文件頭部：內(nèi)部樣式表。將CSS樣式表放置在HTML文件主體：行內(nèi)樣式表。將CSS樣式表放置在HTML文件外部：鏈接樣式表與導(dǎo)入樣式表。內(nèi)部樣式表1.內(nèi)部樣式表也稱嵌入式樣式表，是指把對頁面各元素的樣式設(shè)置集中寫在<head></head>標(biāo)簽對中，并且用<style></style>標(biāo)簽對進(jìn)行聲明，其格式如下。<head><styletype=＂text/css＂><!--選擇器{樣式屬性:取值;樣式屬性:取值;…}選擇器{樣式屬性:取值;樣式屬性:取值;…}……--></style></head><style>標(biāo)簽用來聲明使用內(nèi)部樣式表，各樣式代碼需要寫在該標(biāo)簽對之間。type=“text/css”屬性用來聲明這是一段CSS樣式表代碼。<!--與-->標(biāo)記的加入是為了防止一些不支持CSS的瀏覽器，將<style>與</style>之間的CSS代碼當(dāng)成普通的字符串顯示在網(wǎng)頁中。選擇器也就是樣式的名稱。行內(nèi)樣式表2.行內(nèi)樣式表是直接對HTML標(biāo)簽使用style屬性，然后將CSS代碼作為屬性值寫在其中，其格式如下。<body><HTML標(biāo)簽style="樣式屬性:取值;樣式屬性:取值;…"></HTML標(biāo)簽></body>

HTML標(biāo)簽就是頁面中HTML元素的標(biāo)簽，例如<body>、<p>、<div>等。

style參數(shù)后面引號(hào)中的內(nèi)容相當(dāng)于樣式表大括號(hào)里的內(nèi)容。鏈接樣式表3.這種方式是將一個(gè)獨(dú)立的樣式表文件引入到HTML文件中，樣式表文件就是我們常說的CSS文件，擴(kuò)展名為.css。要在HTML中鏈接外部樣式表文件，需要在<head></head>標(biāo)簽對之間添加<link></link>標(biāo)簽對，具體格式如下。<head><linkrel="stylesheet"type="text/css"href="樣式表文件的地址"></head>

rel="stylesheet"屬性用來聲明在HTML文件中使用外部樣式表。

type="text/css"屬性用來指明該文件的類型是樣式表文件。

href屬性用來指定樣式表文件的路徑和名稱，可以為絕對路徑或相對路徑。導(dǎo)入樣式表4.要在HTML文件中導(dǎo)入樣式表，需要使用<styletype="text/css"></style>標(biāo)簽對進(jìn)行聲明，并在該標(biāo)簽對中加入@importurl（外部樣式表文件地址）;語句，具體格式如下。<head><styletype="text/css">@importurl(外部樣式表文件地址);</stytle></head>import語句后面的;是不可省略的。外部樣式表文件的文件擴(kuò)展名必須為“.css”。外部樣式表地址可以是絕對地址，也可以是相對地址。二、選擇器的類型選擇器用來對HTML文件的不同標(biāo)簽進(jìn)行控制，從而使CSS可以對不同的網(wǎng)頁元素進(jìn)行修飾。CSS的語法結(jié)構(gòu)由3部分組成：選擇器名、屬性和屬性值。selector{property:value;property:value……property:value}其中selector為選擇器名，property為屬性，value為屬性值。一個(gè)選擇器可以有多個(gè)屬性和屬性值，從而對一個(gè)選擇器聲明多種樣式風(fēng)格。在實(shí)際編寫CSS代碼時(shí)，可以將不同的屬性寫在不同的行中。常用的CSS選擇器有3種類型，分別是標(biāo)簽選擇器、id選擇器和類選擇器。表2-15選擇器的3種類型類

型用

法說

明標(biāo)簽選擇器p{}使同一標(biāo)簽的元素?fù)碛邢嗤臉邮筋愡x擇器.class{}使不同的網(wǎng)頁元素?fù)碛邢嗤臉邮絠d選擇器#id{}精確控制某個(gè)元素的具體樣式標(biāo)簽選擇器1.一個(gè)HTML文件由很多不同的標(biāo)簽組成，利用標(biāo)簽選擇器可以統(tǒng)一設(shè)置使用某類標(biāo)簽定義的元素的外觀。h1{text-align:center;font-size:42px;color:#FF6600;}標(biāo)題文字居中對齊。字體大小為42像素。字體顏色為橙色。若希望1號(hào)標(biāo)題標(biāo)簽<h1>的文本有以下效果。則根據(jù)效果要求可以定義如下的標(biāo)簽選擇器。類選擇器和id選擇器2.使用類（class）選擇器可以為相同或不同的標(biāo)簽分類設(shè)置不同的樣式。使用該選擇器時(shí)，需要在HTML中為希望設(shè)置同一樣式的標(biāo)簽定義相同的類名，即設(shè)置標(biāo)簽的class屬性，然后在CSS中定義類選擇器。定義類選擇器時(shí)，需要在類名稱前面加一個(gè)點(diǎn)“.”，語法如下。1）類選擇器.類名{樣式屬性:取值;樣式屬性:取值;…}為避免瀏覽器的不兼容問題，我們應(yīng)盡量規(guī)范化選擇器的命名規(guī)則，包括：一律小寫；以字母開頭，由字母和數(shù)字組成；盡量不加中杠和下劃線；盡量用英文，盡量見名知意等。提示類選擇器和id選擇器2.id選擇器用來對單個(gè)元素設(shè)置單獨(dú)的樣式，在同一HTML文件中，id名不能重復(fù)。id選擇器的使用方法與類選擇器相似，先在HTML中為希望單獨(dú)設(shè)置樣式的標(biāo)簽定義id名（使用標(biāo)簽的id屬性），然后在CSS中定義id選擇器。定義id選擇器時(shí)，需要在id名稱前面加一個(gè)#號(hào)，語法如下。2）id選擇器#id名{樣式屬性:取值;樣式屬性:取值;…}CSS的各種選擇器可以配合使用。例如，很多時(shí)候頁面中幾乎所有的<p>標(biāo)簽都使用相同的樣式風(fēng)格，只有個(gè)別<p>標(biāo)簽需要使用不同的風(fēng)格來突出顯示，此時(shí)就可以使用class或id選擇器與標(biāo)簽選擇器配合，即先使用標(biāo)簽選擇器p定義全局方案，然后使用id或class選擇器設(shè)置個(gè)別<p>標(biāo)簽。提示偽類選擇器3.偽類選擇器不屬于選擇器，它是讓元素呈現(xiàn)動(dòng)態(tài)效果的特殊屬性。之所以稱為“偽”，是因?yàn)樗付ǖ膶ο笤谖臋n中并不存在，它指定的是元素的某種狀態(tài)，如表2-16所示。表2-16偽類選擇器偽類名用

途a:link設(shè)置超鏈接未被訪問時(shí)的樣式a:active設(shè)置超鏈接被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間）時(shí)的樣式a:visited設(shè)置超鏈接被訪問后的樣式a:hover設(shè)置將鼠標(biāo)指針移到超鏈接上時(shí)的樣式通用選擇器4.通用選擇器是一種特殊類型的選擇器，它用星號(hào)*來表示選擇器的名稱，可以定義所有網(wǎng)頁元素的顯示格式。通用選擇

溫馨提示

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

評論

0/150

提交評論