《電子商務網頁設計與制作》課件項目七_第1頁
《電子商務網頁設計與制作》課件項目七_第2頁
《電子商務網頁設計與制作》課件項目七_第3頁
《電子商務網頁設計與制作》課件項目七_第4頁
《電子商務網頁設計與制作》課件項目七_第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

字體：宋體； 大小：15像素； 顏色：紅色； 裝飾：下劃線

}h2{ font-family:宋體; font-size:15px; color:red; text-decoration:underline; }任務一認識CSS樣式表CSS標記選擇器任務一認識CSS樣式表

類別選擇器任務一認識CSS樣式表在HTML中使用CSS的方法內嵌式內嵌式就是將CSS代碼和HTML代碼，放在同一個HTML文件當中，具體使用方式我們看下面的代碼。<html><head><title>內嵌式</title><styletype="text/css">p{ color:red; font-size:36px;}</style></head><body> <p>CSS代碼內嵌式</p></body></html>任務一認識CSS樣式表在HTML中使用CSS的方法鏈接式鏈接式就是將HTML代碼和CSS代碼分離開來，并分別存儲在兩個或者多個文件中。使用的時候使用固定的格式引用就可以了。具體使用方式看下面的代碼。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;}任務三使用CSS樣式美化網頁長度和顏色（1）長度在網頁中，無論文字、圖片還是表格，這些元素都需要設置長度。在CSS中有多種長度單位，這里重點介紹最常用的“像素”長度單位。像素的單位為“px”，一個像素代表顯示器上一個像素點的長度，在CSS中設置網頁元素的長度時可以用，“數(shù)字+px”來表示元素的長度，比如，設置字體大小為24個像素，我們可以寫成“font-size:24px;”（2）顏色在CSS中表示網頁元素的顏色也有多種方式，這里重點介紹最常用的“6位十六進制數(shù)值表示法”。顧名思義“6位十六進制數(shù)值表示法”就是使用一個6位的十六進制數(shù)來表示某個顏色，比如字體為黑色我們可以寫成“color:#000000;”實際上在Dreamweaver中設置元素的顏色時，并不需要記住每種顏色的6位十六進制數(shù)值，只要在取色板里選擇想要的顏色就可以了，顏色的數(shù)值Dreamweaver會自動生成。尺度單位名說明in（英寸）不是國際標準單位，平常極少使用cm（厘米）國際標準單位，較少用mm（毫米）國際標準單位，較少用pt（點數(shù)）最基本的顯示單位，較少用pc（印刷單位）應用在印刷行業(yè)中，1pc

=

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

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

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

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

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

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

溫馨提示

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

評論

0/150

提交評論