第6章CSS樣式應(yīng)用

上傳人：6*** IP屬地：湖北上傳時(shí)間：2023-02-04 格式：PPTX 頁數(shù)：70 大小：1.98MB 積分：28 舉報(bào) 版權(quán)申訴

已閱讀5頁，還剩65頁未讀，繼續(xù)免費(fèi)閱讀

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

文檔簡介

第6章css樣式表2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》2本章內(nèi)容6.1CSS樣式概述6.2CSS樣式定義6.3CSS樣式的使用6.4CSS屬性6.5

在Dreamweaver中編輯CSS樣式6.6CSS應(yīng)用示例

上機(jī)內(nèi)容小結(jié)2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》36.1CSS樣式概述CSS（CascadingStyleSheets）又稱層疊樣式表，它是一系列格式規(guī)則集合，它能夠定義網(wǎng)頁元素的樣式，如層、文本、表格、鏈接等元素的屬性，一種樣式信息與網(wǎng)頁內(nèi)容分離的標(biāo)記性語言。在CSS樣式出現(xiàn)以前，HTML標(biāo)簽樣式被廣泛應(yīng)用，HTML標(biāo)簽樣式用于控制單個(gè)文檔中一定范圍內(nèi)文本的格式。而CSS樣式不同，它不僅可以控制單個(gè)文檔中一定范圍內(nèi)網(wǎng)頁元素的格式，而且可采用外部鏈接的方式，控制整個(gè)站點(diǎn)內(nèi)所有網(wǎng)頁的格式。這樣既保證了站點(diǎn)風(fēng)格的一致性，又提高了工作效率。CSS樣式生成樣式表文件擴(kuò)展名為.CSS，當(dāng)對CSS規(guī)則修改后，所有鏈接該規(guī)則的文檔格式會自動改變，簡化了格式化網(wǎng)頁的工作。返回2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》4CSS樣式由三部分組成：選擇器、屬性和值。語法格式：選擇器{屬性1:值1;屬性2:值2……}說明：選擇器用來標(biāo)識格式元素，可分為3種基本類型：標(biāo)簽（html）選擇器、ID選擇器、類（class）選擇器。除了基本類型外，還可把基本類型的選擇器組合使用。屬性和屬性值之間用冒號（:）隔開，定義多個(gè)屬性時(shí)，屬性之間用分號（;）隔開。如:body{color:black}

選擇器body指頁面主體部分，color顏色屬性名，black顏色屬性值，其效果是使頁面中的文字為黑色。6.2CSS樣式定義例6.1

在DW代碼視圖的編輯窗口輸入以下代碼，創(chuàng)建使用樣式頁面的文檔css6_1.html。<html><head><title>在標(biāo)記符中直接嵌套樣式信息</title><style></style></head><body><h1>一代人</h1><p>黑夜給了我黑色的眼睛<br>我卻用它尋找光明</p></body></html>提示：style元素是HTML中的一個(gè)標(biāo)記元素，提供了一組對應(yīng)于瀏覽器所支持CSS規(guī)則（如background、font-size等），可以使用這個(gè)標(biāo)記元素訪問CSS樣式屬性。2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》61.HTML選擇器HTML選擇器是最典型的選擇器類型，網(wǎng)頁設(shè)計(jì)者可為某個(gè)或某些HTML標(biāo)記元素應(yīng)用樣式定義。HTML選擇器的定義方法：

tag{property:value}例如，設(shè)置表格中單元格內(nèi)的文字大小為9pt，顏色為藍(lán)色的CSS代碼：td{font-size:9pt;color:blue}CSS可以在一條語句中定義多個(gè)選擇器

例如，將段落文本和單元格內(nèi)的文字設(shè)置為藍(lán)色的CSS代碼：

td,p{color:blue}組合選擇器(逗號隔開)，其中所有標(biāo)簽都使用指定樣式。關(guān)聯(lián)選擇器(空格隔開,p

em{background:yellow})

表示段落中<em></em>標(biāo)簽中背景為黃色，而其他地方出現(xiàn)的<em></em>不受影響（標(biāo)記em用來表示強(qiáng)調(diào)，其默認(rèn)樣式為斜體）。6.2CSS樣式定義72.class選擇器（類選擇器）

相關(guān)的類選擇器。它只與一種HTML標(biāo)記有關(guān)系，此類選擇器僅為某個(gè)或某些標(biāo)記符定義類。

語法格式：Tag.Classname{property:value}

例如：

h1.red{color:red}

應(yīng)用：在網(wǎng)頁中需要使用該類的“h1標(biāo)記元素內(nèi)”用class屬性引用

<h1class="red">吉林省明日科技有限責(zé)任公司<h1>

獨(dú)立class選擇器。可被任何HTML標(biāo)記元素所應(yīng)用。

語法格式：.Classname{property:value}

例如：

.blueone{color:blue}

應(yīng)用：需要引用該類的任意標(biāo)記符內(nèi)使用class屬性

<h2class="blueone">有雨的日子</h2>

<pclass="blueone">

不知是無意還是天意，有你的日子總有雨！

</p>6.2CSS樣式定義2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》83.ID選擇器其實(shí)與獨(dú)立的class選擇器的功能一樣，區(qū)別在于語法和用法不同。語法格式：#IDname{property:value}用法:在HTML標(biāo)記元素中應(yīng)用ID屬性引用CSS樣式。例如：

<style>

#redone{color:red}

</style>應(yīng)用：<pid="redone">紅色熱情</p>提示：使用.classname和使用#IDname這兩種方式在效果上并沒有區(qū)別，但最好只使用其中之一，以免造成混淆。6.2CSS樣式定義綜合舉例6.2：在DW代碼視圖的編輯窗口輸入以下代碼，創(chuàng)建綜合幾種選擇器類型的頁面css6_2.html：<html><head><title>選擇器舉例</title><styletype="text/css"><!--h1{font-size:36px;font-family:"隸書";font-weight:bold;color:#993366;}/*html選擇器*/h2b{color:#0000FF}/*關(guān)聯(lián)選擇器*/.water{font-family:

"隸書";font-size:24px;text-align:right}/*獨(dú)立類選擇器*/h3.hello{font-family:

"隸書";text-align:center;font-size:36px}/*相關(guān)類選擇器*/#danger{color:#990000;font-family:"華文彩云";font-size:24px}/*ID選擇器*/--></style></head><body><h1>標(biāo)題1的使用</h1><b>測試關(guān)聯(lián)選擇器（沒有關(guān)聯(lián)）</b><br><h2><b>測試關(guān)聯(lián)選擇器組合（具有關(guān)聯(lián)關(guān)系）</b></h2><pclass="water">這是黃河的水</p><h3class="hello">這句話才使用了類“hello”的效果。</h3><pid="danger">這里危險(xiǎn)</p></body></html>css6_2.html2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》10返回2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》11一般情況下，CSS樣式使用有四種方式。

1.內(nèi)聯(lián)式樣式表在現(xiàn)有HTML元素的基礎(chǔ)上，用style屬性把特殊的樣式直接加入到那些標(biāo)記元素中。

例如：

<pstyle="color:#ff0000">內(nèi)聯(lián)式樣式表</p>

說明：使用內(nèi)聯(lián)樣式，必須在該文件的頭部對整個(gè)網(wǎng)頁文檔進(jìn)行單獨(dú)的樣式表語言聲明：<metahttp-equiv="Content-Type"content="text/css">這種樣式表只對使用它的元素起作用，而不會影響其它元素，通常用在需要特殊格式的某個(gè)網(wǎng)頁對象。這種樣式表將樣式和要展示的內(nèi)容混在一起，失去了樣式表的優(yōu)點(diǎn)，一般不采用。6.3CSS樣式使用2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》122.嵌入式樣式表又稱內(nèi)部樣式表，包含在HTML文件頭部HEAD的style標(biāo)簽內(nèi)的一系列CSS規(guī)則。書寫格式：<styletype="text/css"></style>6.3CSS樣式使用說明：在此格式中，style的type屬性值須設(shè)為"text/css"，表示定義的是一個(gè)CSS。當(dāng)不支持CSS的瀏覽器讀到這個(gè)屬性時(shí)，自動忽略這個(gè)樣式表。<style>標(biāo)記內(nèi)定義的前后加上注釋符，其作用是使不支持CSS的瀏覽器忽略樣式表的定義。注意：在定義嵌入式樣式表時(shí)，<style>一定要放在<head>和</head>標(biāo)記之間。嵌入樣式表的作用范圍是在本HTML文檔內(nèi)。2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》133.鏈接外部樣式文件先將樣式表寫在一個(gè)擴(kuò)展名為.CSS文件中，樣式在樣式表文件中的定義和嵌入式樣式表的定義是一樣的，此時(shí)只是不需要style元素。在HEAD標(biāo)記符內(nèi)使用link標(biāo)記元素，通過指定相應(yīng)屬性鏈接到外部樣式表文件。代碼格式：<linkrel="stylesheet"

href="css/master.css"type="text/css"

>說明：<link>標(biāo)簽定義了當(dāng)前文檔與其他文檔的鏈接信息rel：表示其它文檔將以何種方式與HTML文檔結(jié)合

href：目標(biāo)文檔的URL6.3CSS樣式使用144.導(dǎo)入外部樣式文件這種方式是在HTML文件的頭部<style></style>標(biāo)記之間，用CSS樣式表的＠import聲明引入外部樣式表文件。其格式：<style>

@importURL("外部樣式文件名");

…

</style>引入外部樣式表的使用與鏈接到外部樣式表很相似，都是將樣式定義保存為單獨(dú)文件。區(qū)別：導(dǎo)入方式在瀏覽器下載HTML文件時(shí)將樣式文件的全部內(nèi)容拷貝到＠import關(guān)鍵字位置，以替換該關(guān)鍵字；而鏈接外部樣式文件僅在HTML文件需要引用CSS樣式文件中的某個(gè)樣式時(shí)，瀏覽器才鏈接樣式文件，讀取需要的內(nèi)容并不進(jìn)行替換。6.3CSS樣式使用2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》15例6.3CSS樣式文件應(yīng)用在DW的代碼視圖編輯窗口輸入以下代碼，創(chuàng)建外部樣式表文件sheet1.css、sheet2.css和頁面文件css6_3.html。sheet1.css代碼/*CSSDocument*/h1{font-size:36px;font-family:"隸書";font-weight:bold;color:#993366;}h2b{color:blue}.water{font-family:"隸書";font-size:24px;text-align:right}h3.hello{font-family:"隸書";text-align:center;font-size:36px}6.3CSS樣式使用2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》16sheet2.css代碼/*CSSDocument*/#danger{color:#990000;font-family:"華文彩云";font-size:24px}a:link{color:red;text-decoration:none;}/*未訪問的鏈接*/a:visited{color:blue;text-decoration:none;}/*已訪問的鏈接*/a:active{color:yellow;text-decoration:none;}/*活動鏈接*/a:hover{color:#990000;text-decoration:underline}/*鼠標(biāo)指針移到上面鏈接的顏色*/h2b{color:green}6.3CSS樣式使用2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》17css6_3.html代碼<html><head><title>導(dǎo)入鏈接外部樣式表</title>

<styletype="text/css"></style>

<linkrel="stylesheet"href="sheet2.css"type="text/css"></head><body><h1>標(biāo)題1的使用。</h1><h2><b>測試上下選擇器（具有上下文）</b></h2><pclass="water">這是黃河的水</p><h3class="hello">這句話才使用了類“hello”的效果。</h3><pid="danger">這里危險(xiǎn)。</p><ahref="css2.htm">測試鏈接的顏色</a></body></html>6.3CSS樣式使用2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》186.3CSS樣式使用2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》195.樣式表的優(yōu)先級同時(shí)使用多層樣式表，很可能的情況是在一個(gè)網(wǎng)頁中既定義了內(nèi)聯(lián)式樣式表和嵌入式樣式表又鏈接了外部樣式表，這時(shí)網(wǎng)頁會變得怎么樣？三種樣式表具有不同的優(yōu)先級:內(nèi)聯(lián)式樣式表>嵌入式樣式表>外部式樣式表所以某個(gè)元素在挑選多層樣式表時(shí)，會首先選擇優(yōu)先級最高的樣式，即就近原則。6.3CSS樣式使用返回2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》20字體屬性文本屬性顏色和背景屬性容器屬性列表屬性鼠標(biāo)屬性定位和顯示CSS濾鏡6.4CSS屬性2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》216.4CSS屬性2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》226.4CSS屬性返回2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》231.創(chuàng)建CSS樣式單擊“CSS樣式”面板右下角的“新建CSS規(guī)則”按鈕6.5在Dreamweaver中編輯CSS樣式（1）定義的位置僅對該文檔：此時(shí)CSS樣式的代碼會嵌套在網(wǎng)頁<head>和</head>標(biāo)簽中。新建樣式表文件：則彈出“保存樣式表文件為”對話框，選擇樣式文件的存儲路徑和文件名，將CSS樣式代碼單獨(dú)存放在一個(gè)CSS文件中。已有的某CSS文件：將新建的CSS樣式規(guī)則寫入已有的CSS文件中。其代碼會嵌套在網(wǎng)頁<head>和</head>標(biāo)簽中。2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》24（2）選擇器的類型類自定義CSS規(guī)則，可應(yīng)用于網(wǎng)頁任何標(biāo)簽。在應(yīng)用時(shí)，它會在HTML標(biāo)簽內(nèi)加入一個(gè)類（class）來規(guī)定標(biāo)簽中的格式。比如,將類的樣式mystyle定義于某個(gè)標(biāo)題，代碼：

<h1class=“mystyle”>標(biāo)題1應(yīng)用自定義樣式<h1>標(biāo)簽重新定義特定標(biāo)簽的外觀，如創(chuàng)建或更改h1標(biāo)簽的CSS樣式，所有應(yīng)用h1標(biāo)簽的文本都會立即更新。高級在CSS選擇器中，它的功能最為強(qiáng)大，可定義鏈接的特效，定義特定元素組合的格式設(shè)置（如body,table,td,用逗號隔開），定義嵌套的樣式（tdimg空格隔開），定義包含特定id屬性的標(biāo)簽的格式設(shè)置。6.5在Dreamweaver中編輯CSS樣式2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》25a:link

鏈接文本普通狀態(tài)的外觀a:active

當(dāng)前活動的超級鏈接文本的外觀a:hover

鼠標(biāo)懸停狀態(tài)下超級鏈接文本的外觀a:visited

已經(jīng)訪問的超級鏈接文本的外觀

CSS超級鏈接樣式6.5在Dreamweaver中編輯CSS樣式2.“CSS”樣式面板正在模式：只顯示當(dāng)前文檔中頁面元素CSS規(guī)則全部模式：顯示整個(gè)網(wǎng)頁文件所涉及的全部CSS規(guī)則“顯示類別視圖”按鈕

按類別顯示DW所支持的所有CSS屬性“顯示列表視圖”按鈕

按字母順序顯示DW所支持的所有屬性“設(shè)置屬性視圖”按鈕

僅顯示已設(shè)置的屬性，默認(rèn)視圖“附加樣式表”銨鈕

選擇要鏈接或?qū)氲疆?dāng)前文檔中的外

部樣式表“新建CSS規(guī)則”銨鈕“編輯樣式”按鈕“刪除CSS規(guī)則”按鈕6.5在Dreamweaver中編輯CSS樣式2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》27

3.CSS樣式定義對話框（CSS屬性）創(chuàng)建了新樣式后，即可在“CSS樣式定義”對話框中進(jìn)行設(shè)置，CSS樣式屬性的8大類型。6.5在Dreamweaver中編輯CSS樣式2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》28CSS屬性8大類型說明：類型格式：此類屬性用于定義網(wǎng)頁中文本的字體、大小、顏色、文本鏈接的修飾線等格式。背景格式：為整段文字或其它頁面元素加入背景格式，如背景色或圖像。區(qū)塊格式：控制文本的間距、縮進(jìn)或?qū)R方式等。方框格式：控制網(wǎng)頁中的塊元素，方框共分為4個(gè)部分：邊界、邊框、填充、方框內(nèi)容。邊框格式：為任何網(wǎng)頁元素加上邊框（如寬度、顏色和樣式），且邊框的樣式多樣（粗細(xì)、凹下等）。如寬度、顏色。列表格式：可以設(shè)置項(xiàng)目符號的樣式（如項(xiàng)目符號大小和類型），還可以用圖片來代替項(xiàng)目符號。6.5在Dreamweaver中編輯CSS樣式2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》29定位格式：

提供網(wǎng)頁元素的相對位置或絕對位置的設(shè)置，甚至可以將兩個(gè)元素重疊在一起。這對于一些固定元素（如表格）來說，是一種功能的擴(kuò)展，而對于浮動元素來說，卻是有效的、用于精確控制其位置的方法。擴(kuò)展格式：

設(shè)置頁面打印的分頁效果和網(wǎng)頁視覺效果，其屬性包含兩部分：分頁為打印的頁面設(shè)置分頁符；視覺效果為網(wǎng)頁元素施加特殊效果?！竟鈽?biāo)】：可指定在某個(gè)元素上要使用的光標(biāo)形狀，共有15種選擇方式，分別代表鼠標(biāo)指針的各種形狀。【濾鏡】：特殊效果有陰影、模糊、透明、光暈等。這些效果在DW的設(shè)計(jì)視圖中是顯現(xiàn)不出來的，只有在瀏覽器中瀏覽時(shí)才能看到。6.5在Dreamweaver中編輯CSS樣式2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》30(1)導(dǎo)出樣式表文件在當(dāng)前文檔中設(shè)置的樣式只在該文檔中有效。要使當(dāng)前文檔中的樣式應(yīng)用到其他文檔，則可以考慮將其中的樣式導(dǎo)出為樣式表文件，這樣，DW就可以通過樣式表鏈接，使整個(gè)站點(diǎn)具有相同的樣式設(shè)置。單擊“文件”的“導(dǎo)出”命令，選擇“CSS”樣式或在CSS樣式面板中，執(zhí)行“右鍵”菜單的“導(dǎo)出”命令。在對話框中設(shè)置好保存的文件名及路徑。4.CSS樣式導(dǎo)入與導(dǎo)出6.5在Dreamweaver中編輯CSS樣式2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》31(2)鏈接或?qū)胪獠繕邮奖砦募邮奖砦募且粋€(gè)僅包含樣式規(guī)則的文本文件。通過“附加樣式表”命令可將其他頁面中的樣式應(yīng)用到當(dāng)前頁面中，具體操作：在“CSS樣式”面板中，單擊“附加樣式表”按鈕，打開“鏈接外部樣式表”對話框。在“選擇樣式表文件”對話框中，指定樣式表的路徑及名稱，則創(chuàng)建的外部鏈接樣式表顯示在“CSS樣式”面板中。注意：編輯外部樣式表將影響到所有鏈接引用它的文檔。用戶可以將CSS樣式表文件復(fù)制到自己的站點(diǎn)內(nèi)編輯。6.5在Dreamweaver中編輯CSS樣式返回6.6CSS應(yīng)用示例

例6.4

設(shè)置文字樣式

2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》32<html><head><title>設(shè)置文字效果</title><styletype="text/css">p{font-family:黑體; /*文字字體*/font-size:35px; /*文字大小*/color:#0033CC; /*顏色*/font-weight:bold;/*粗體*/font-style:italic; /*斜體*/text-decoration:line-through;/*刪除線*/}</style></head><body><p>CSS設(shè)置文字效果</p></body></html>2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》336.6CSS應(yīng)用示例

段落是由一個(gè)個(gè)文字組合而成的，同樣是網(wǎng)頁中最重要的組成部分之一，因此前面提到的文字屬性，對于段落同樣適用。但CSS針對段落也提供了很多樣式屬性。在使用Word編輯文檔時(shí)，可以很輕松的設(shè)置行間距，在CSS中通過“l(fā)ine-height”屬性同樣可以輕松地實(shí)現(xiàn)行距的設(shè)置。在CSS中“l(fā)ine-height”的值表示的是兩行文字之間基線的距離。如果給文字加上下劃線，那么下劃線的位置就是文字的基線。“l(fā)ine-height”的值跟CSS中所有設(shè)定具體數(shù)值的屬性一樣，可以設(shè)定為相對數(shù)值，也可以設(shè)定為絕對數(shù)值。在靜態(tài)頁面中，文字大小固定時(shí)常常使用絕對數(shù)值，達(dá)到統(tǒng)一的效果。而對于論壇、博客這些可以由用戶自定義字體大小的頁面，通常設(shè)定為相對數(shù)值，可以隨著用戶自定義的字體大小而改變相應(yīng)的行距。CSS文字段落例6.5設(shè)置文字段落

<html><head><title>行間距l(xiāng)ine-height</title><styletype="text/css"></style></head><body><pclass="one">冬至，是我國農(nóng)歷中一個(gè)非常重要的節(jié)氣，也是一個(gè)傳統(tǒng)節(jié)日，至今仍有不少地方有過冬至節(jié)的習(xí)俗。冬至俗稱“冬節(jié)”、“長至節(jié)”、“亞歲”等。早在二千五百多年前的春秋時(shí)代，我國已經(jīng)用土圭觀測太陽測定出冬至來了，它是二十四節(jié)氣中最早制訂出的一個(gè)。時(shí)間在每年的陽歷12月22日或者23日之間。</p><pclass="second">冬至是北半球全年中白天最短、黑夜最長的一天，過了冬至，白天就會一天天變長。古人對冬至的說法是：陰極之至，陽氣始生，日南至，日短之至，日影長之至，故曰“冬至”。冬至過后，各地氣候都進(jìn)入一個(gè)最寒冷的階段，也就是人們常說的“進(jìn)九”，我國民間有“冷在三九，熱在三伏”的說法。</p><pclass="third">在我國古代對冬至很重視，冬至被當(dāng)作一個(gè)較大節(jié)日，曾有“冬至大如年”的說法，而且有慶賀冬至的習(xí)俗?！稘h書》中說：“冬至陽氣起，君道長，故賀?！比藗冋J(rèn)為：過了冬至，白晝一天比一天長，陽氣回升，是一個(gè)節(jié)氣循環(huán)的開始，也是一個(gè)吉日，應(yīng)該慶賀?！稌x書》上記載有“魏晉冬至日受萬國及百僚稱賀……其儀亞于正旦?！闭f明古代對冬至日的重視。</p></body></html>2023/2/4《網(wǎng)頁設(shè)計(jì)技術(shù)》35行間距示例例6.6

制作首字下沉效果許多報(bào)刊、雜志的文章第一個(gè)字都很大，并且向下浮動，這種首字放大的效果，同樣可以方便地應(yīng)用在網(wǎng)頁中。在CSS中首字下沉的效果是通過對第一個(gè)字進(jìn)行單獨(dú)設(shè)置樣式風(fēng)格來實(shí)現(xiàn)的。<html><head><title>首字放大</title><styletype="text/css"><!--body{background-color:#564700;/*背景色*/}p{font-size:15px; /*文字大小*/color:#FFFFFF; /*文字顏色*/}pspan{font-size:60px; /*首字大小*/

float:left;

/*首字下沉*/ padding-right:5px;/*與右邊的間隔*/ font-weight:bold; /*粗體字*/ font-family:黑體; /*黑體字*/ color:yellow; /*字體顏色*/}--></style></head><body><p><span>端</span>午節(jié)是古老的傳統(tǒng)節(jié)日，始于中國的春秋戰(zhàn)國時(shí)期，至今已有2000多年歷史。據(jù)《史記》“屈原賈生列傳”記載，屈原，是春秋時(shí)期楚懷王的大臣。他倡導(dǎo)舉賢授能，富國強(qiáng)兵，力主聯(lián)齊抗秦，遭到貴族子蘭等人的強(qiáng)烈反對，屈原遭饞去職，被趕出都城，流放到沅、湘流域。他在流放中，寫下了憂國憂民的《離騷》、《天問》、《九歌》等不朽詩篇，獨(dú)具風(fēng)貌，影響深遠(yuǎn)（因而，端午節(jié)也稱詩人節(jié)）。公元前278年，秦軍攻破楚國京都。屈原眼看自己的祖國被侵略，心如刀割，但是始終不忍舍棄自己的祖國，于五月五日，在寫下了絕筆作《懷沙》之后，抱石投汨羅江身死，以自己的生命譜寫了一曲壯麗的愛國主義樂章。</p><p>傳說屈原死后，楚國百姓哀痛異常，紛紛涌到汨羅江邊去憑吊屈原。漁夫們劃起船只，在江上來回打撈他的真身。有位漁夫拿出為屈原準(zhǔn)備的飯團(tuán)、雞蛋等食物，“撲通、撲通”地丟進(jìn)江里，說是讓魚龍蝦蟹吃飽了，就不會去咬屈大夫的身體了。人們見后紛紛仿效。一位老醫(yī)師則拿來一壇雄黃酒倒進(jìn)江里，說是要藥暈蛟龍水獸，以免傷害屈大夫。后來為怕飯團(tuán)為蛟龍所食，人們想出用楝樹葉包飯，外纏彩絲，發(fā)展成棕子。</p></body></html>說明：

<span>在CSS定義中屬于一個(gè)行內(nèi)元素,在行內(nèi)定義一個(gè)區(qū)域，也就是一行內(nèi)可以被<span>劃分成好幾個(gè)區(qū)域，從而實(shí)現(xiàn)某種特定效果。<span>本身沒有任何屬性。

在pspan的css規(guī)則定義：分類—方框-浮動-左對齊

<div>在CSS定義中屬于一個(gè)塊級元素。<div>可以包含段落、標(biāo)題、表格甚至其它部分。這使DIV便于建立不同集成的類，如章節(jié)、摘要或備注。在頁面效果上，使用<div>會自動換行，使用<span>就會保持同行。例6.7CSS設(shè)置圖片效果<html><head><title>邊框</title><styletype="text/css"><!--img.test1{

border-style:dotted; /*點(diǎn)畫線*/

border-color:#FF9900; /*邊框顏色*/

border-width:6px; /*邊框粗細(xì)*/}img.test2{

border-style:dashed; /*虛線*/

border-color:#000088; /*邊框顏色*/

border-width:2px; /*邊框粗細(xì)*/}--></style></head><body> <imgsrc="images/cartoon1.jpg"class="test1"> <imgsrc="images/cartoon1.jpg"class="test2"></body></html>39例6.8

制作圖文混排網(wǎng)頁<html><head><title>圖文混排</title><styletype="text/css"></style></head><body><imgsrc="images/hop.jpg"border="0"><p><span>河</span>馬，偶蹄目、河馬科，英文名hoppopotamus。原來遍布非洲所有深水的河流與溪流中，現(xiàn)在范圍已縮小，主要居住在非洲熱帶的河流間。它們喜歡棲息在河流附近沼澤地和有蘆葦?shù)牡胤?。生活中的覓食、交配、產(chǎn)仔、哺乳也均在水中進(jìn)行。</p><p>河馬的特點(diǎn)是吻寬嘴大，四肢短粗、軀體象個(gè)粗圓桶。胃3室不反芻。鼻孔在吻端上面，與上方的眼睛和耳朵呈一條直線。這樣它全體潛伏水中只須將頭頂露出水面就能嗅、視、聽兼呼吸了。體長3.75-4.6米，尾長約56厘米，肩高約1.5米，體重3-4.6噸，下犬齒長約60厘米，可重達(dá)3公斤。河馬皮膚排出的液體含紅色色素，經(jīng)皮膚反射顯得象是紅色的，引起了河馬出“血汗”的說法。</p><p>河馬極善游泳，在受驚時(shí)，一般避入水中。每天大部分時(shí)間在水中，潛伏水下時(shí)一般每3、5分鐘把頭露出水面呼吸一次，但可潛伏約半小時(shí)不出水面來換氣。它們的皮膚長時(shí)間離水會干裂。河馬成對或結(jié)成小群活動，老年雄性常單獨(dú)活動。夜行性：它們幾乎整個(gè)白天都在河水中或是河流附近睡覺或休息，晚上出來吃食，有時(shí)會順?biāo)纬?0多公里覓食。主要以水生植物為食；偶食陸地作物，以草為主，有時(shí)到田地去吃莊稼，食物短缺時(shí)，它們也吃肉，據(jù)稱，河馬是路地上最大的食肉動物(雜食)。河馬無定居：不在一個(gè)地方長期停留，每隔數(shù)日便遷到新地方去。</p><p>河馬繁殖期不固定,全年均繁殖,每產(chǎn)一仔,孕期227-240天，仔獸出生時(shí)體重27-45公斤。在人為飼養(yǎng)下約3歲性成熟，在野外5、6歲成熟。壽命40-50年。河馬的皮下脂肪約5厘米厚。人們常獵殺它取其脂肪、肉和厚皮。脂肪可得90公斤。當(dāng)?shù)厝朔浅Ｕ湟曀娜?，肉味略同于野豬肉。牙齒質(zhì)量也很好,是珍貴的雕刻材料，可作為象牙替代品。</p></body></html>例6.9

設(shè)置背景顏色。在CSS中頁面的背景顏色就是簡單的通過設(shè)置“body”標(biāo)簽的“background-color”屬性來實(shí)現(xiàn)的，幾乎所有HTML元素的背景色都可以通過它來設(shè)定。因此很多網(wǎng)頁都通過設(shè)定不同HTML元素的各種背景色來實(shí)現(xiàn)分塊的目的。<html><head><title>利用背景顏色分塊</title><style></style></head>

<body><tablecellpadding="0"cellspacing="1"width="100%"border="0"><tr><tdcolspan="2"class="topbanner"><imgsrc="images/banner1.jpg"border="0"></td></tr><tr> <tdclass="leftbanner"> <br><br>首頁<br><br>分類討論

<br><br>談天說地<br><br>精華區(qū)

<br><br>我的信箱<br><br>休閑娛樂

<br><br>立即注冊<br><br>離開本站

</td> <tdclass="mainpart">正文內(nèi)容...</td></tr></table></body></html>例6.10設(shè)置背景圖片。<html><head><title>背景圖片</title><style></style></head><body></body></html>背景圖案豎直方向上重復(fù)例6.11

設(shè)置按鈕效果的超級鏈接。普通的超鏈接按鈕式超鏈接html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>按鈕超鏈接</title><style></style></head><body><ahref="#">首頁</a><ahref="#">一起走到</a><ahref="#">從明天起</a><ahref="#">紙飛機(jī)</a><ahref="#">下一站</a><ahref="#">其它</a></body></html>例6.12

CSS制作實(shí)用菜單作為一個(gè)成功的網(wǎng)站，導(dǎo)航菜單是永遠(yuǎn)不可缺少的。導(dǎo)航菜單的樣式風(fēng)格往往也決定了整個(gè)網(wǎng)站的樣式風(fēng)格，因此很多設(shè)計(jì)者都會投入很多時(shí)間和精力來制作各式各樣的導(dǎo)航條，從而體現(xiàn)網(wǎng)站的整體構(gòu)架。本例圍繞菜單的制作，介紹相關(guān)的項(xiàng)目列表、菜單變換、導(dǎo)航欄等內(nèi)容。

當(dāng)項(xiàng)目列表的項(xiàng)目符號可以通過”list-style-type”設(shè)置為“none”時(shí)，制作各式各樣的菜單、導(dǎo)航條成了項(xiàng)目列表的最大用處之一，通過各種CSS屬性變換可以達(dá)到很多意想不到的導(dǎo)航效果。（1）建立HTML相關(guān)結(jié)構(gòu)，將菜單的各個(gè)項(xiàng)目用項(xiàng)目列表<ul>表示，同時(shí)設(shè)置頁面的背景顏色。body{ background-color:#ffdee0;}<body><divid="navigation"> <ul> <li><ahref="#">Home</a></li> <li><ahref="#">MyBlog</a></li> <li><ahref="#">Friends</a></li> <li><ahref="#">NextStation</a></li> <li><ahref="#">ContactMe</a></li> </ul></div></body>（2）設(shè)置整個(gè)”<div>”塊的寬度為固定像素，并設(shè)置文字的字體；設(shè)置項(xiàng)目列表<ul>的屬性，將項(xiàng)目符號設(shè)置為不顯示。#navigation{ width:200px; font-family:Arial;}#navigationul{ list-style-type:none; /*不顯示項(xiàng)目符號*/ margin:0px; padding:0px;}（3）為<li>標(biāo)簽添加下劃線，以分割各個(gè)超鏈接，并且對超鏈接<a>標(biāo)簽進(jìn)行整體設(shè)計(jì)。#navigationli{ border-bottom:1pxsolid#ED9F9F; /*添加下劃線*/}#navigationlia{ display:block; /*區(qū)塊顯示*/ padding:5px5px5px0.5em; text-decoration:none; border-left:12pxsolid#711515; /*左邊的粗紅邊*/ border-right:1pxsolid#711515; /*右側(cè)陰影*/}說明：通過“display:block”語句，超鏈接被設(shè)置成了塊元素，當(dāng)鼠標(biāo)進(jìn)入該塊的任何部分時(shí)都會被激活，而不是僅僅在文字上方時(shí)才被激活。（4）設(shè)置超鏈接的3個(gè)偽屬性，以實(shí)現(xiàn)動態(tài)菜單的效果。#navigationlia:link,#navigationlia:visited{ background-color:#c11136; color:#FFFFFF;}#navigationlia:hover{ /*鼠標(biāo)經(jīng)過時(shí)*/ background-color:#990020; /*改變背景色*/ color:#ffff00; /*改變文字顏色*/}說明：用IE6.0查看時(shí)，必須將鼠標(biāo)移動到文字的上面才能激活菜單項(xiàng)，這是IE6.0存在的錯(cuò)誤導(dǎo)致的，在IE7中修正了這個(gè)錯(cuò)誤。為了避免這個(gè)錯(cuò)誤，可以將下面的代碼：#navigationlia{ display:block; /*區(qū)塊顯示*/ padding:5px5px5px0.5em; text-decoration:none; border-left:12pxsolid#711515; /*左邊的粗紅邊*/ border-right:1pxsolid#711515; /*右側(cè)陰影*/}#navigationlia{ display:block; /*區(qū)塊顯示*/ padding:5px5px5px0.5em;

width:200px; text-decoration:none; border-left:12pxsolid#711515; /*左邊的粗紅邊*/ border-right:1pxsolid#711515; /*右側(cè)陰影*/}修改為：<html><head><title>無需表格的菜單</title><style></style></head><body><divid="navigation"> <ul> <li><ahref="#">Home</a></li> <li><ahref="#">MyBlog</a></li> <li><ahref="#">Friends</a></li> <li><ahref="#">NextStation</a></li> <li><ahref="#">ContactMe</a></li> </ul></div></body></html>例6.13

用DIV容器和CSS樣式表實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。當(dāng)今的網(wǎng)頁制作講究結(jié)構(gòu)與表現(xiàn)的分離。所有的網(wǎng)頁元素都用一個(gè)一個(gè)的<div>容器包裝起來，并給每個(gè)<div>

人人文庫> 全部分類> 教育資料 > 輔導(dǎo)培訓(xùn)

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

第6章CSS樣式應(yīng)用

文檔簡介

溫馨提示

最新文檔

評論

第6章CSS樣式應(yīng)用

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔