版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
模塊八
CSS3樣式基礎《HTML5+CSS3任務驅動教程》目錄任務一任務二任務三網頁大標題的樣式設計網頁中的文字排版制作產品分類本模塊任務安排：引入知識點任務1網頁大標題的樣式設計8.1什么是CSS8.2CSS的應用任務1網頁大標題的樣式設計8.1什么是CSSCSS是層疊樣式表(CascadingStyleSheets)的簡稱，是用來表現HTML或XML的標記語言，運用CSS樣式與HTML所描述的信息結構相結合，能夠幫助設計師將網頁內容與表現相分離，使網站更加容易構建與維護。任務1網頁大標題的樣式設計8.1什么是CSSCSS的語法結構任務1網頁大標題的樣式設計8.2CSS的應用1、行間樣式行間樣式，也叫內聯樣式，由HTML標記中的style屬性所支持，要使用行間樣式，你需要在相關的標簽內使用樣式（style）屬性。行間樣式將表現和內容混雜在一起。<pstyle="color:#f00;padding-left:20px">這是一個段落。</p>任務1網頁大標題的樣式設計8.2CSS的應用2、內部樣式內部樣式是CSS樣式編碼的初級應用形式，樣式表作為頁面的一個單獨部分，由<style></style>標記定位在<head></head>之中。只能針對當前頁面有效，不能跨頁面執行。<head><styletype="text/CSS">hr{color:blue;}p{margin-left:20px;}body{background-color:#ccc;}</style></head>任務1網頁大標題的樣式設計8.2CSS的應用3、外部樣式外部樣式表是CSS應用中最好的一種形式，它將CSS樣式代碼單獨放在一個外部文件中，再由網頁進行調用。而且多個網頁可以調用同一個樣式表文件，這樣能夠實現代碼的最大限度重用及網站文件的最優化配置。當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。<head><linkrel="stylesheet"type="text/CSS"href="mystyle.CSS"/></head>任務1網頁大標題的樣式設計8.2CSS的應用CSS的文本屬性任務1網頁大標題的樣式設計任務實現（1）使用HBuilder創建一個html文件，保存為index.html，文檔中包含<head>、<body>等基本的HTML結構。（3）為<h1>標記設計CSS樣式（2）在<body>標記中，使用標題標記<h1>將內容進行語義化標記引入知識點任務2網頁中的文字排版8.3CSS字體樣式任務2網頁中的文字排版8.3CSS字體樣式任務實現（1）在HBuilder中新建一個HTML5頁面，保存為news1.html，使用<div>、<h1>、<h2>、<p>標記對網頁內容進行結構定義（3）采用外部樣式表的方式，將CSS與html鏈接（2）新建CSS文件，保存于與HTML文檔同一目錄下，保存文件名稱為news.css任務2網頁中的文字排版body{ font-size:100%;}div{ width:600px; font-family:MicrosoftYahei;/*字體為微軟雅黑*/}h2{ text-indent:2em;/*首行縮進2個字符*/ font-style:italic;/*設置傾斜字體*/}p{ font-size:1.2em;/*字體放大0.2倍*/ line-height:1.8em;/*行高為原來的1.8倍*/ text-indent:2em;/*首行縮進*/ color:#333;}效果圖任務2網頁中的文字排版效果圖任務2網頁中的文字排版按相同方法完成new2.html頁面，采用外部樣式表，實現相同的外觀。引入知識點任務3制作產品分類8.4列表元素列表HTML標記任務3制作產品分類1、ul無序列表2、ol有序列表3、自定義列表dl<h3>無序列表:</h3><ul><li>循環制</li><li>淘汰制</li><li>混合制</li></ul><h3>有序列表:</h3><ol> <li>一等獎</li> <li>二等獎</li> <li>三等獎</li> </ol><dl><dt>歡迎來學習HTML+CSS</dt><dd>這里有，html教程</dd><dd>這里有，css模塊</dd><dd>這里有，css教程</dd></dl>列表的CSS屬性任務3制作產品分類任務實現任務3制作產品分類（1）啟動HBuilder，新建文檔，選擇HTML文檔，保存為list.html，將文檔內容寫入<body>標記中
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
評論
0/150
提交評論