《電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作》課件項(xiàng)目七_(dá)第1頁
《電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作》課件項(xiàng)目七_(dá)第2頁
《電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作》課件項(xiàng)目七_(dá)第3頁
《電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作》課件項(xiàng)目七_(dá)第4頁
《電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作》課件項(xiàng)目七_(dá)第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

項(xiàng)目七使用CSS樣式進(jìn)行美化頁面能力目標(biāo)：(1)獨(dú)立使用Dreamweaver制作CSS層疊樣式表(2)Dreamweaver中創(chuàng)建和修改CSS樣式表(3)能夠進(jìn)行設(shè)置CSS樣式表的常用屬性和屬性值知識(shí)目標(biāo)：(1)CSS樣式表的基本格式(2)CSS樣式表的常見引用方式(3)掌握使用CSS樣式表美化頁面的基本技術(shù)任務(wù)一認(rèn)識(shí)CSS樣式表2級(jí)標(biāo)題{

字體：宋體； 大?。?5像素； 顏色：紅色； 裝飾：下劃線

}h2{ font-family:宋體; font-size:15px; color:red; text-decoration:underline; }任務(wù)一認(rèn)識(shí)CSS樣式表CSS標(biāo)記選擇器任務(wù)一認(rèn)識(shí)CSS樣式表

類別選擇器任務(wù)一認(rèn)識(shí)CSS樣式表在HTML中使用CSS的方法內(nèi)嵌式內(nèi)嵌式就是將CSS代碼和HTML代碼，放在同一個(gè)HTML文件當(dāng)中，具體使用方式我們看下面的代碼。<html><head><title>內(nèi)嵌式</title><styletype="text/css">p{ color:red; font-size:36px;}</style></head><body> <p>CSS代碼內(nèi)嵌式</p></body></html>任務(wù)一認(rèn)識(shí)CSS樣式表在HTML中使用CSS的方法鏈接式鏈接式就是將HTML代碼和CSS代碼分離開來，并分別存儲(chǔ)在兩個(gè)或者多個(gè)文件中。使用的時(shí)候使用固定的格式引用就可以了。具體使用方式看下面的代碼。HTML代碼文件：<html><head><title>鏈接式</title><linkhref="1.css"type="text/css"rel="stylesheet"></head><body> <p>CSS代碼鏈接式</p></body></html>

CSS代碼文件：p{ color:red; font-size:36px;}任務(wù)三使用CSS樣式美化網(wǎng)頁長度和顏色（1）長度在網(wǎng)頁中，無論文字、圖片還是表格，這些元素都需要設(shè)置長度。在CSS中有多種長度單位，這里重點(diǎn)介紹最常用的“像素”長度單位。像素的單位為“px”，一個(gè)像素代表顯示器上一個(gè)像素點(diǎn)的長度，在CSS中設(shè)置網(wǎng)頁元素的長度時(shí)可以用，“數(shù)字+px”來表示元素的長度，比如，設(shè)置字體大小為24個(gè)像素，我們可以寫成“font-size:24px;”（2）顏色在CSS中表示網(wǎng)頁元素的顏色也有多種方式，這里重點(diǎn)介紹最常用的“6位十六進(jìn)制數(shù)值表示法”。顧名思義“6位十六進(jìn)制數(shù)值表示法”就是使用一個(gè)6位的十六進(jìn)制數(shù)來表示某個(gè)顏色，比如字體為黑色我們可以寫成“color:#000000;”實(shí)際上在Dreamweaver中設(shè)置元素的顏色時(shí)，并不需要記住每種顏色的6位十六進(jìn)制數(shù)值，只要在取色板里選擇想要的顏色就可以了，顏色的數(shù)值Dreamweaver會(huì)自動(dòng)生成。尺度單位名說明in（英寸）不是國際標(biāo)準(zhǔn)單位，平常極少使用cm（厘米）國際標(biāo)準(zhǔn)單位，較少用mm（毫米）國際標(biāo)準(zhǔn)單位，較少用pt（點(diǎn)數(shù)）最基本的顯示單位，較少用pc（印刷單位）應(yīng)用在印刷行業(yè)中，1pc

=

12pt任務(wù)三使用CSS樣式美化網(wǎng)頁設(shè)置字體在CSS中，使用font-family屬性來設(shè)置字體的樣式。比如，針對(duì)頁面中所有p標(biāo)簽設(shè)置字體為“微軟雅黑”，代碼如下：p{font-family:"微軟雅黑";}設(shè)置文字大小在CSS中，使用font-size屬性來設(shè)置文字的大小。一般使用“數(shù)字+像素”的格式來設(shè)置文字大小。比如，針對(duì)頁面中所有p標(biāo)簽的字體設(shè)置為“36像素”，代碼如下：p{font-size:36px;}/*字體大小36個(gè)像素*/任務(wù)三使用CSS樣式美化網(wǎng)頁設(shè)置文字行高在CSS中，使用line-height屬性來設(shè)置行的高度，通過它可以控制行與行之間的距離。一般使用“數(shù)字+像素”的格式來設(shè)置行高。比如，針對(duì)頁面中所有p標(biāo)簽設(shè)文字行高為“20像素”，代碼如下：p{line-height:20px;}/*行高為20個(gè)像素*/設(shè)置文本的水平位置在CSS中，使用text-align屬性來設(shè)置文本的水平位置。p{text-align:left;}/*左對(duì)齊*/p{text-align:right;}/*右對(duì)齊*/p{text-align:center;}/*居中對(duì)齊*/p{text-align:justify;}/*兩端對(duì)齊*/任務(wù)三使用CSS樣式美化網(wǎng)頁設(shè)置文字粗細(xì)在CSS中，使用font-weight屬性來設(shè)置文字的粗細(xì)設(shè)置值說明normal正常粗細(xì)bold粗體bolder加粗體lighter比正常粗細(xì)要細(xì)100-900共有9個(gè)層次（100，200…900），數(shù)字越大字體越粗

任務(wù)三使用CSS樣式美化網(wǎng)頁設(shè)置圖片邊框基本屬性在CSS中，一個(gè)邊框由以下3個(gè)要素組成。（1）border-width（粗細(xì)）：可以使用各種CSS中的長度單位，最常用的是像素。（2）border-color（顏色）：可以使用各種合法的顏色來定義方式。（3）border-style（線型）：可以在一些預(yù)先定義好的線型中選擇。屬性值說明none定義無邊框dotted定義點(diǎn)狀邊框dashed定義虛線solid定義實(shí)線double定義雙線表7-2border-style屬性值

為不同的邊框分別設(shè)置樣式在CSS中，可以分別使用border-left，border-right，border-top，border-bottom搭配上面學(xué)的內(nèi)容來分別單獨(dú)設(shè)置上下左右四條邊框的樣式、顏色和粗細(xì)。代碼如下：img{ border-left-style:solid;/*左邊框樣式為實(shí)線*/ border-left-color:#F00;/*左邊框顏色為紅色*/ border-left-width:5px;/*左邊框粗細(xì)為5個(gè)像素*/ border-right-style:dotted;/*右邊框樣式為點(diǎn)畫線*/ border-right-color:#000;/*右邊框顏色為黑色*/ border-right-width:2px;/*右邊框粗細(xì)為2個(gè)像素*/ border-top-style:dashed;/*上邊框樣式為虛線*/ border-top-color:#00F;/*上邊框顏色為藍(lán)色*/ border-top-width:10px;/*上邊框粗細(xì)為10個(gè)像素*/ border-bottom-style:double;/*下邊框樣式為雙線*/ border-bottom-color:#FF0;/*下邊框顏色為黃色*/ border-bottom-width:20px;/*下邊框粗細(xì)為20個(gè)像素*/}任務(wù)三使用CSS樣式美化網(wǎng)頁

設(shè)置圖片縮放在CSS中，使用width屬性來設(shè)置圖片的寬度，使用height屬性來設(shè)置圖片的高度。單位同樣使用像素。具體書寫方式，代碼如下：img{ width:500px;/*圖片寬500個(gè)像素*/ height:300px;/*圖片高300個(gè)像素*/}img{ width:80%;/*圖片寬度為上一級(jí)標(biāo)簽寬度的80%*/ height:80%;/*圖片高度為上一級(jí)標(biāo)高度的80%*/}任務(wù)三使用CSS樣式美化網(wǎng)頁

設(shè)置圖文混排文字環(huán)繞在CSS中，使用float屬性來設(shè)置文字的環(huán)繞方式，屬性值可以設(shè)置為“l(fā)eft”和“right”，分別表示左環(huán)繞和右環(huán)繞img{float:left;/*文字左環(huán)繞*/}img{float:right;/*文字右環(huán)繞*/}圖片與文字的間距在CSS中，使用margin屬性來設(shè)置圖片圖片和文字的間距，單位同樣使用像素。具體書寫方式，代碼如下：img{ float:left; margin:20px;/*圖片和文字間距為20個(gè)像素*/}任務(wù)三使用CSS樣式美化網(wǎng)頁

設(shè)置背景圖像在CSS中，使用background-image屬性來設(shè)置背景圖片，屬性值為圖片的相對(duì)路徑。具體書寫方式，代碼如下：body{ background-image:url(1.jpg);/*網(wǎng)頁背景圖片為1.jpg*/}用上述代碼設(shè)置背景圖像后，圖像會(huì)自動(dòng)沿著水平和垂直兩個(gè)方向平鋪。設(shè)置背景圖像平鋪在默認(rèn)情況下，圖像會(huì)自動(dòng)向水平和垂直兩個(gè)方向平鋪。具體書寫方式，代碼如下：body{ background-image:url(1.jpg);/*背景

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(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ǔ)空間，僅對(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)論