第6章CSS樣式應用

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

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

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

文檔簡介

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

在Dreamweaver中編輯CSS樣式6.6CSS應用示例

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

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

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

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

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

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

em{background:yellow})

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

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

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

例如：

h1.red{color:red}

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

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

獨立class選擇器?？杀蝗魏蜨TML標記元素所應用。

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

例如：

.blueone{color:blue}

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

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

<pclass="blueone">

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

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

<style>

#redone{color:red}

</style>應用：<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}/*獨立類選擇器*/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>標題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">這里危險</p></body></html>css6_2.html2023/2/4《網(wǎng)頁設計技術(shù)》10返回2023/2/4《網(wǎng)頁設計技術(shù)》11一般情況下，CSS樣式使用有四種方式。

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

例如：

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

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

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

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

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

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

…

</style>引入外部樣式表的使用與鏈接到外部樣式表很相似，都是將樣式定義保存為單獨文件。區(qū)別：導入方式在瀏覽器下載HTML文件時將樣式文件的全部內(nèi)容拷貝到＠import關(guān)鍵字位置，以替換該關(guān)鍵字；而鏈接外部樣式文件僅在HTML文件需要引用CSS樣式文件中的某個樣式時，瀏覽器才鏈接樣式文件，讀取需要的內(nèi)容并不進行替換。6.3CSS樣式使用2023/2/4《網(wǎng)頁設計技術(shù)》15例6.3CSS樣式文件應用在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ù)》2023/2/4《網(wǎng)頁設計技術(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}/*鼠標指針移到上面鏈接的顏色*/h2b{color:green}6.3CSS樣式使用2023/2/4《網(wǎng)頁設計技術(shù)》17css6_3.html代碼<html><head><title>導入鏈接外部樣式表</title>

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

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

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

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

當前活動的超級鏈接文本的外觀a:hover

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

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

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

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

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

僅顯示已設置的屬性，默認視圖“附加樣式表”銨鈕

選擇要鏈接或?qū)氲疆斍拔臋n中的外

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

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

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

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

例6.4

設置文字樣式

2023/2/4《網(wǎng)頁設計技術(shù)》32<html><head><title>設置文字效果</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設置文字效果</p></body></html>2023/2/4《網(wǎng)頁設計技術(shù)》336.6CSS應用示例

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

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

制作首字下沉效果許多報刊、雜志的文章第一個字都很大，并且向下浮動，這種首字放大的效果，同樣可以方便地應用在網(wǎng)頁中。在CSS中首字下沉的效果是通過對第一個字進行單獨設置樣式風格來實現(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)國時期，至今已有2000多年歷史。據(jù)《史記》“屈原賈生列傳”記載，屈原，是春秋時期楚懷王的大臣。他倡導舉賢授能，富國強兵，力主聯(lián)齊抗秦，遭到貴族子蘭等人的強烈反對，屈原遭饞去職，被趕出都城，流放到沅、湘流域。他在流放中，寫下了憂國憂民的《離騷》、《天問》、《九歌》等不朽詩篇，獨具風貌，影響深遠（因而，端午節(jié)也稱詩人節(jié)）。公元前278年，秦軍攻破楚國京都。屈原眼看自己的祖國被侵略，心如刀割，但是始終不忍舍棄自己的祖國，于五月五日，在寫下了絕筆作《懷沙》之后，抱石投汨羅江身死，以自己的生命譜寫了一曲壯麗的愛國主義樂章。</p><p>傳說屈原死后，楚國百姓哀痛異常，紛紛涌到汨羅江邊去憑吊屈原。漁夫們劃起船只，在江上來回打撈他的真身。有位漁夫拿出為屈原準備的飯團、雞蛋等食物，“撲通、撲通”地丟進江里，說是讓魚龍蝦蟹吃飽了，就不會去咬屈大夫的身體了。人們見后紛紛仿效。一位老醫(yī)師則拿來一壇雄黃酒倒進江里，說是要藥暈蛟龍水獸，以免傷害屈大夫。后來為怕飯團為蛟龍所食，人們想出用楝樹葉包飯，外纏彩絲，發(fā)展成棕子。</p></body></html>說明：

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

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

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

border-style:dotted; /*點畫線*/

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

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

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

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

border-width:2px; /*邊框粗細*/}--></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)仔、哺乳也均在水中進行。</p><p>河馬的特點是吻寬嘴大，四肢短粗、軀體象個粗圓桶。胃3室不反芻。鼻孔在吻端上面，與上方的眼睛和耳朵呈一條直線。這樣它全體潛伏水中只須將頭頂露出水面就能嗅、視、聽兼呼吸了。體長3.75-4.6米，尾長約56厘米，肩高約1.5米，體重3-4.6噸，下犬齒長約60厘米，可重達3公斤。河馬皮膚排出的液體含紅色色素，經(jīng)皮膚反射顯得象是紅色的，引起了河馬出“血汗”的說法。</p><p>河馬極善游泳，在受驚時，一般避入水中。每天大部分時間在水中，潛伏水下時一般每3、5分鐘把頭露出水面呼吸一次，但可潛伏約半小時不出水面來換氣。它們的皮膚長時間離水會干裂。河馬成對或結(jié)成小群活動，老年雄性常單獨活動。夜行性：它們幾乎整個白天都在河水中或是河流附近睡覺或休息，晚上出來吃食，有時會順水游出30多公里覓食。主要以水生植物為食；偶食陸地作物，以草為主，有時到田地去吃莊稼，食物短缺時，它們也吃肉，據(jù)稱，河馬是路地上最大的食肉動物(雜食)。河馬無定居：不在一個地方長期停留，每隔數(shù)日便遷到新地方去。</p><p>河馬繁殖期不固定,全年均繁殖,每產(chǎn)一仔,孕期227-240天，仔獸出生時體重27-45公斤。在人為飼養(yǎng)下約3歲性成熟，在野外5、6歲成熟。壽命40-50年。河馬的皮下脂肪約5厘米厚。人們常獵殺它取其脂肪、肉和厚皮。脂肪可得90公斤。當?shù)厝朔浅Ｕ湟曀娜?，肉味略同于野豬肉。牙齒質(zhì)量也很好,是珍貴的雕刻材料，可作為象牙替代品。</p></body></html>例6.9

設置背景顏色。在CSS中頁面的背景顏色就是簡單的通過設置“body”標簽的“background-color”屬性來實現(xiàn)的，幾乎所有HTML元素的背景色都可以通過它來設定。因此很多網(wǎng)頁都通過設定不同HTML元素的各種背景色來實現(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設置背景圖片。<html><head><title>背景圖片</title><style></style></head><body></body></html>背景圖案豎直方向上重復例6.11

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

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

當項目列表的項目符號可以通過”list-style-type”設置為“none”時，制作各式各樣的菜單、導航條成了項目列表的最大用處之一，通過各種CSS屬性變換可以達到很多意想不到的導航效果。（1）建立HTML相關(guān)結(jié)構(gòu)，將菜單的各個項目用項目列表<ul>表示，同時設置頁面的背景顏色。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）設置整個”<div>”塊的寬度為固定像素，并設置文字的字體；設置項目列表<ul>的屬性，將項目符號設置為不顯示。#navigation{ width:200px; font-family:Arial;}#navigationul{ list-style-type:none; /*不顯示項目符號*/ margin:0px; padding:0px;}（3）為<li>標簽添加下劃線，以分割各個超鏈接，并且對超鏈接<a>標簽進行整體設計。#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”語句，超鏈接被設置成了塊元素，當鼠標進入該塊的任何部分時都會被激活，而不是僅僅在文字上方時才被激活。（4）設置超鏈接的3個偽屬性，以實現(xiàn)動態(tài)菜單的效果。#navigationlia:link,#navigationlia:visited{ background-color:#c11136; color:#FFFFFF;}#navigationlia:hover{ /*鼠標經(jīng)過時*/ background-color:#990020; /*改變背景色*/ color:#ffff00; /*改變文字顏色*/}說明：用IE6.0查看時，必須將鼠標移動到文字的上面才能激活菜單項，這是IE6.0存在的錯誤導致的，在IE7中修正了這個錯誤。為了避免這個錯誤，可以將下面的代碼：#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樣式表實現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。當今的網(wǎng)頁制作講究結(jié)構(gòu)與表現(xiàn)的分離。所有的網(wǎng)頁元素都用一個一個的<div>容器包裝起來，并給每個<div>

人人文庫> 全部分類> 教育資料 > 輔導培訓

溫馨提示

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

第6章CSS樣式應用

文檔簡介

溫馨提示

最新文檔

評論

第6章CSS樣式應用

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔