網頁設計與制作項目式教程（HTML+CSS）課件05.為“中國民俗”網站頁面設置外觀_第1頁
網頁設計與制作項目式教程（HTML+CSS）課件05.為“中國民俗”網站頁面設置外觀_第2頁
網頁設計與制作項目式教程（HTML+CSS）課件05.為“中國民俗”網站頁面設置外觀_第3頁
網頁設計與制作項目式教程（HTML+CSS）課件05.為“中國民俗”網站頁面設置外觀_第4頁
網頁設計與制作項目式教程（HTML+CSS）課件05.為“中國民俗”網站頁面設置外觀_第5頁
已閱讀5頁，還剩49頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網頁設計與制作項目式教程（HTML+CSS）項目二

簡單展示類網頁開發(fā)項目——為“中國民俗”網站頁面設置外觀任務2.4為“中國民俗”網站頁面設置外觀項目實施任務分析小丁使用HTML制作了“中國民俗”網站頁面的內容后，發(fā)現最終效果跟網站設計需求的效果不一樣，老師告訴小丁，他只完成了網站頁面的html內容的設置，還需要為網站頁面設置CSS外觀樣式，設置了外觀樣式的網頁最終效果如圖2-1和圖2-2所示。圖2-1

“中國民俗”網站網頁圖2-2傳統(tǒng)節(jié)日詳情頁任務2.4為“中國民俗”網站頁面設置外觀知識儲備知識導圖本任務涉及的主要知識點如圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備新知學習1：CSS基本概念、功能特點和引入方式1.CSS基本概念CSS（CascadingStyleSheets），即串聯樣式表，CSS的出現是為了改造HTML標簽在瀏覽器中所展示的外觀，使其變得更加好看，就像蓋房子，HTML是把房子結構建好，而CSS是給房子裝修，刷油漆和裝飾。任務2.4為“中國民俗”網站頁面設置外觀知識儲備新知學習1：CSS基本概念、功能特點和引入方式2.CSS功能特點（1）豐富的樣式定義CSS提供了豐富的文檔樣式外觀，樣式定義如何顯示HTML元素，如字體樣式、文本樣式、邊框樣式、背景樣式、超鏈接樣式、圖片樣式、列表樣式、表格樣式等一些系列頁面效果。（2）易于使用和修改CSS有多種定義方式供HTML頁面使用，如果要修改樣式，只需要在樣式列表中找到相應的樣式聲明進行修改。任務2.4為“中國民俗”網站頁面設置外觀知識儲備新知學習1：CSS基本概念、功能特點和引入方式（3）多頁面應用CSS樣式表可以單獨存放在一個CSS文件中，這樣我們可以在多個頁面中使用同一個CSS樣式表，可以同時控制多張網頁的布局，極大地提高工作效率。（4）層疊層疊就是多個樣式定義可層疊為一個，對一個元素多次設置同一個樣式，將使用最后一次設置的屬性值。例如對多個頁面同時應用了一套CSS樣式表，而某一個頁面中的某些元素想要使用其他的樣式，就可以針對這些樣式單獨定義到頁面中，這些后來的樣式將覆蓋掉前面的樣式設置，在瀏覽器中看到的將會是最后面設置的樣式效果。任務2.4為“中國民俗”網站頁面設置外觀知識儲備3.CSS引入方式在HTML中，共有3種CSS引入方式，分別是內聯樣式表，內部樣式表，外部樣式表，這3種引入方式的優(yōu)先級為：內聯樣式表>內部樣式表>外部樣式表。新知學習1：CSS基本概念、功能特點和引入方式任務2.4為“中國民俗”網站頁面設置外觀知識儲備（1）內聯樣式表內聯樣式表，也是將HTML代碼和CSS代碼放在同一個文件中，但是它和內部樣式表不同，CSS樣式不是在<style></style>標簽中定義，而是將CSS樣式寫在元素的通用屬性style中，這種方式只對單個元素有效，不會影響整個文件，可以精準地控制HTML文檔的顯示效果，對于一些規(guī)模較小的項目，或者只需要設置少量樣式的情況下，可是適當使用內聯樣式，示例代碼如下：新知學習1：CSS基本概念、功能特點和引入方式代碼運行效果：任務2.4為“中國民俗”網站頁面設置外觀知識儲備（2）內部樣式表內部樣式表是將HTML代碼和CSS代碼放在同一個文件中，直接將CSS樣式寫在<style></style>標簽中作為內容，這種寫法重用性較差，有時還會導致HTML文檔過大，當重復的CSS代碼在不同的HTML文檔中存在時會導致大量的重復下載，在希望某些CSS樣式效果僅對某個頁面有效時，通常采用這種形式，示例代碼如下：引入CSS樣式后頁面預覽效果同內聯樣式表。新知學習1：CSS基本概念、功能特點和引入方式任務2.4為“中國民俗”網站頁面設置外觀知識儲備（3）外部樣式表外部樣式表是最理想的CSS引入方式，在實際開發(fā)中，為了提高網頁的性能和維護性，一般都使用外部樣式表，外部樣式表就是將HTML頁面和CSS頁面單獨放在不同文件中，然后在HTML文檔的<head></head>標簽中通過link標簽來引入CSS樣式表，基本格式如下：<linktype=”text/css”rel=”stylesheet”href=”CSS樣式文件的URL”/>在CSS文件夾中新建CSS文件，如下圖所示。新知學習1：CSS基本概念、功能特點和引入方式任務2.4為“中國民俗”網站頁面設置外觀知識儲備給CSS文件命名，如下圖所示。項目布局如下圖所示新知學習1：CSS基本概念、功能特點和引入方式任務2.4為“中國民俗”網站頁面設置外觀知識儲備在HTML頁面使用<link>標簽引入CSS文件，需注意CSS文件名必須一致，示例代碼如下：新知學習1：CSS基本概念、功能特點和引入方式CSS文件中書寫樣式代碼和引入CSS樣式后頁面預覽效果同內部樣式表。任務2.4為“中國民俗”網站頁面設置外觀知識儲備在css中，可以對文本的顯示效果進行設置，常用設置文本樣式的屬性如下表所示。新知學習2：CSS文本樣式屬性描述color定義文本顏色text-align定義文本的水平對齊方式vertical-align定義元素的垂直對齊方式text-decoration定義文本裝飾text-transform定義文本轉換text-indent定義文本縮進letter-spacing定義文本中字符之間的間距l(xiāng)ine-height定義行之間的間距任務2.4為“中國民俗”網站頁面設置外觀知識儲備1.文本顏色顏色屬性Color用于設置文本顏色，顏色取值有以下三種方法：（1）顏色名。如”red”(紅色)、”blue”(藍色)、”yellow”(黃色)。（2）十六進制值。如”#FF0000”(紅色)、”#000FFF”(藍色)、”#FFFF00”(黃色)。（3）RGB值。如”RGB(255,0,0)”(紅色)、”RGB(0,0,255)”(藍色)、”RGB(255,255,0)”(黃色)。新知學習2：CSS文本樣式任務2.4為“中國民俗”網站頁面設置外觀知識儲備示例代碼如下：新知學習2：CSS文本樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備2.文本水平對齊方式文本水平對齊text-align屬性取值如下表所示。新知學習2：CSS文本樣式text-align屬性值功能left文本左對齊center文本居中right文本右對齊text-align屬性用于設置文本的水平對齊方式，文本可以左對齊或右對齊，或居中對齊。任務2.4為“中國民俗”網站頁面設置外觀知識儲備示例代碼如下：新知學習2：CSS文本樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備3.文本垂直對齊方式文本垂直對齊方式vertical-align屬性取值如下表所示。新知學習2：CSS文本樣式vertical-align屬性值功能top把元素頂端與行中最高元素頂端對齊middle把此元素放置在父元素的中部bottom底端對齊vertical-align屬性設置一個元素的垂直對齊方式。該屬性常用于表格單元格框中單元格內容的對齊方式或內聯元素中，但不適用于塊元素，在使用塊元素時使用此屬性會無效。任務2.4為“中國民俗”網站頁面設置外觀知識儲備示例代碼如下：新知學習2：CSS文本樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備4.文本裝飾

文本裝飾text-decoration屬性取值如下表所示。新知學習2：CSS文本樣式text-decoration屬性值功能none用于超鏈接去掉下劃線overline上劃線line-through刪除線underline下劃線text-decoration屬性用于設置或刪除文本裝飾，值為none時用于從鏈接上刪除下劃線，值為overline時是上劃線，值為line-through時是刪除線,值為underline時是下劃線。任務2.4為“中國民俗”網站頁面設置外觀知識儲備示例代碼如下：新知學習2：CSS文本樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備5.文本轉換文本轉換text-transform屬性取值如下表所示。新知學習2：CSS文本樣式text-transform屬性值功能uppercase將所有內容轉換為大寫lowercase將所有內容轉換為小寫capitalize將每個單詞的首字母大寫text-transform屬性用于指定文本中的大寫和小寫字母，它可用于將所有內容轉換為大寫或小寫字母，或將每個單詞的首字母大寫。任務2.4為“中國民俗”網站頁面設置外觀知識儲備示例代碼如下：新知學習2：CSS文本樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備6.文本縮進text-indent屬性用于指定文本第一行的縮進。新知學習2：CSS文本樣式text-transform屬性值功能uppercase將所有內容轉換為大寫lowercase將所有內容轉換為小寫capitalize將每個單詞的首字母大寫text-transform屬性用于指定文本中的大寫和小寫字母，它可用于將所有內容轉換為大寫或小寫字母，或將每個單詞的首字母大寫。任務2.4為“中國民俗”網站頁面設置外觀知識儲備示例代碼如下：新知學習2：CSS文本樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備7.字符間距l(xiāng)etter-spacing

屬性用于指定文本中字符之間的間距。示例代碼如下：新知學習2：CSS文本樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備8.行高line-height

屬性用于指定行之間的間距。示例代碼如下：新知學習2：CSS文本樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備行高屬性也常用在塊元素內部垂直居中，垂直居中行高的值必須等于元素高度的值。示例代碼如下：新知學習2：CSS文本樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備在CSS樣式中，使用font屬性可以設置豐富多彩的字體樣式。該屬性是一個復合屬性，常用于設置字體樣式的屬性如下表所示。新知學習3：CSS字體樣式屬性描述font-style定義字體斜體樣式font-weight定義字體粗細font-size定義字體大小font-variant定義字體變體任務2.4為“中國民俗”網站頁面設置外觀知識儲備1.字體斜體樣式font-style

屬性主要用于指定斜體文本。font-style屬性值如下表所示。新知學習3：CSS字體樣式font-style屬性值功能normal字體正常顯示italic字體以斜體顯示oblique字體為傾斜，和斜體非常相似，但瀏覽器支持較少任務2.4為“中國民俗”網站頁面設置外觀知識儲備示例代碼如下：新知學習3：CSS字體樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備2.字體粗細font-weight屬性指定字體的粗細。font-weight屬性值如下表所示。新知學習3：CSS字體樣式font-weight屬性值功能normal標準字符bold粗體字符bolder更粗的字符lighter更細的字符具體值值的區(qū)間在100-900，表示由細到粗的字符。400等同于normal，700等同于bold。任務2.4為“中國民俗”網站頁面設置外觀知識儲備示例代碼如下：新知學習3：CSS字體樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備3.字體大小font-size

屬性設置文本的大小。在網頁設計中，字體大小很重要。但是，不應使用調整字體大小來使段落看起來像標題，或是使標題看起來像段落，應使用正確的HTML元素，例如<h1>-<h6>用于標題，<p>用于段落。font-size屬性值如下表所示。新知學習3：CSS字體樣式任務2.4為“中國民俗”網站頁面設置外觀知識儲備新知學習3：CSS字體樣式font-size屬性的值功能xx-smallx-smallsmallmediumlargex-largexx-large把字體的大小設置為不同的尺寸，從xx-small到xx-large默認值為mediumsmaller把字體設置為比父輩文本字體更小的尺寸larger把字體設置為比父輩文本字體更大的尺寸length把字體大小設置為一個固定值%把字體大小設置為基于父元素文本字體大小的一個百分比值任務2.4為“中國民俗”網站頁面設置外觀知識儲備實際開發(fā)中，一般將font-size屬性值設置為一個“像素值”。實例代碼如下：新知學習3：CSS字體樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備4.字體變體font-variant

屬性指定是否以small-caps字體（小型大寫字母）顯示文本。在small-caps字體中，所有小寫字母都將轉換為大寫字母。但是，轉換后的大寫字母的字體大小小于文本中原始大寫字母的字體大小。示例代碼如下：新知學習3：CSS字體樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備CSS尺寸屬性允許控制元素的高度和寬度。height屬性設置元素的高度，width屬性設置元素的寬度，要注意的是

width屬性不包括填充，邊框和頁邊距！新知學習4：CSS寬高樣式width屬性值或height屬性值功能auto默認值。瀏覽器可計算出實際的寬高。length使用

px、cm等單位定義寬高。單位%使用百分比設置百分比寬高。任務2.4為“中國民俗”網站頁面設置外觀知識儲備示例代碼如下：新知學習4：CSS寬高樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備在CSS中，對背景的設置比較豐富，背景用background屬性來設置，它是一個復合屬性，常用于設置背景的屬性如下表所示。新知學習5：CSS背景樣式屬性描述background-color定義背景顏色background-image定義背景圖像background-repeat定義背景圖像重復background-position定義背景圖像的位置任務2.4為“中國民俗”網站頁面設置外觀知識儲備1.背景顏色background-color

屬性指定元素的背景顏色，顏色的指定方式同文字顏色，可搭配opacity屬性使用，示例代碼如下：新知學習5：CSS背景樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備2.背景圖像background-image屬性指定用作元素背景的圖像。默認情況下，圖像會重復，以覆蓋整個元素。示例代碼如下：新知學習5：CSS背景樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備3.背景重復background-repeat屬性指定背景圖像的平鋪方式，默認情況下，background-image屬性在水平和垂直方向上都重復圖像。某些圖像應只適合水平或垂直方向上重復，否則它們看起來會很奇怪，如果圖像僅在水平方向重復

則使用background-repeat:repeat-x，則背景看起來會更好，如需垂直重復圖像，則設置

background-repeat:repeat-y，background-repeat

屬性還可指定只顯示一次背景圖像。具體屬性值如下表所示。新知學習5：CSS背景樣式background-repeat屬性值功能repeat-x僅在水平方向平鋪repeat-y僅在垂直方向平鋪no-repeat只顯示一次背景圖像任務2.4為“中國民俗”網站頁面設置外觀知識儲備示例代碼如下：新知學習5：CSS背景樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備4.背景定位background-position

屬性用于指定背景圖像的位置。示例代碼如下：新知學習5：CSS背景樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備5.背景-簡寫屬性在以上實例中可以看到頁面的背景通過了很多的屬性來控制。為了簡化這些屬性的代碼，可以將這些屬性合并在同一個屬性中，背景的簡寫屬性為"background"。示例代碼如下：新知學習5：CSS背景樣式頁面預覽效果如下圖所示。任務2.4為“中國民俗”網站頁面設置外觀知識儲備當使用簡寫屬性時，屬性值的順序為：

background-color

background-image

background-repeat

background-attachment

background-position以上屬性無需全部使用，按照頁面的實際需要使用。新知學習5：CSS背景樣式任務2.4為“中國民俗”網站頁面設置外觀操作實踐在任務2.3中，小丁已經制作了首頁的HT

溫馨提示

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

評論

0/150

提交評論