中職 網頁設計與制作案例教程第3章_第1頁
中職 網頁設計與制作案例教程第3章_第2頁
中職 網頁設計與制作案例教程第3章_第3頁
中職 網頁設計與制作案例教程第3章_第4頁
中職 網頁設計與制作案例教程第3章_第5頁
已閱讀5頁，還剩41頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

中職網頁設計與制作案例教程第3章工信版第3章CSS樣式基礎33.1基礎項目1：制作“古詩詞欣賞”網頁3.2知識庫：CSS語言的概念和基本結構3.3基礎項目2：制作“電影資訊”網頁3.4知識庫：CSS樣式表的引入及選擇器的使用3.5提高項目：制作“美味生活”網頁3.6拓展項目：制作“馬云創業語錄”網頁目錄43.1基礎項目1：制作“古詩詞欣賞”網頁5知識技能目標3.1基礎項目1：制作“古詩詞欣賞”網頁（1）了解CSS語言的概念、功能及優勢。（2）掌握CSS語言的基本結構。（3）了解CSS語言中的注釋語句的作用及寫法。（4）初步掌握為HTML文檔添加CSS樣式的方法。（5）了解CSS樣式的書寫順序及規范。3.1.1制作頁面結構部分63.1.2制作頁面樣式部分7步驟1設置頁面整體樣式步驟2設置DIV的樣式步驟3設置標題樣式步驟4設置DIV中圖像樣式步驟5設置詩詞各段落樣式步驟6設置正文特殊段落（譯文）樣式83.2知識庫：CSS語言的概念和基本結構[!]CSS是一種標記性語言，用來對網頁的布局、字體、顏色、背景等效果實現精確的控制。英文全稱：CascadingStyleSheets中文全稱：層疊樣式表CSS是一種標記語言，不是一種編程語言，它對大小寫不敏感。CSS語言的作用用戶使用HTML語言定義網頁都包括哪些內容（如文字、圖像、超鏈接等），使用CSS樣式定義網頁的表現形式（如字體、顏色、寬度、對齊方式等）。通過使用CSS樣式設置頁面格式，可以將頁面的內容與表現形式分離，在進行網站維護時不用再一個一個網頁的修改，只要修改幾個網頁CSS樣式表文件就可以改變整個網站的風格，這在修改頁面數量龐大的站點時，顯得格外方便高效，同時使得整個站點的風格整齊劃一。3.2.1

CSS語言的概念103.2.2CSS語言的基本結構和注釋CSS樣式表是由若干條樣式聲明組成的，每一條樣式聲明都由三部分組成:選擇器（selector）、樣式屬性（property）和屬性值（value）。CSS語言的基本結構選擇器｛樣式屬性：屬性值；樣式屬性：屬性值；．．．．．．｝

CSS語言的基本結構是選擇器指定的標簽所包含的屬性，如背景顏色、字體、行高等。樣式屬性也稱選擇符，是指這組樣式所要應用的對象，通常是一個HTML標簽，如body、h1，也可以是定義了id名或類（class）名的標簽，如#box、.tp等。選擇器屬性值是指樣式屬性的取值。屬性值

CSS語言的基本結構3.2.2CSS語言的基本結構和注釋CSS語言的注釋CSS注釋的語法格式語法格式：/*注釋內容*/例如：/*div的樣式定義*/div{padding:10px; /*設置DIV內容與邊框之間距離10像素*/background-color:red; /*設置DIV背景顏色為紅色*/}在CSS樣式表中使用注釋可以幫助用戶對自己編寫的樣式進行說明，一般是言簡意賅的表明名稱、用途、注意事項等，以便于后期維護。3.2.2CSS語言的基本結構和注釋CSS書寫順序3.2.3CSS書寫順序及規范CSS正確的書寫順序（1）位置屬性：position、left、top、right、bottom、z-index、display、float、clear等（2）大小：width、height、padding、margin（3）文字系列：font、line-height、letter-spacing、color、text-align、text-indent等（4）背景：background、border等（5）其他：animation、transition等.list-box{ border-top:0; font:100%/1.6serif; padding:01em2em;}.list-box{ border-top-style:none; font-family:serif; font-size:100%; line-height:1.6; padding-bottom:2em; padding-left:1em; padding-right:1em; padding-top:0;}

CSS書寫規范精減后精減前使用CSS縮寫屬性CSS有些屬性是可以縮寫的，比如padding、margin、font等等，這樣既可以精簡代碼，同時又能提高用戶的閱讀體驗。3.2.3CSS書寫順序及規范font-size:.8em;font-size:0.8em;

CSS書寫規范去掉小數點前的“0”。簡寫命名.nav{margin:001em2em;}.author{color:#333;}.navigation{margin:001em2em;}.atr{color:#333;}正確的簡寫不當的簡寫3.2.3CSS書寫順序及規范

CSS書寫規范連字符CSS選擇器命名規范不要隨意使用id為選擇器添加狀態前綴color:#039;color:#003399;十六進制顏色代碼縮寫3.2.3CSS書寫順序及規范173.3基礎項目2：制作“電影資訊”網頁18（1）掌握CSS樣式表的四種引入方法，了解這四種方法的區別及應用范圍。（2）掌握幾種選擇器的類型、區別及用法。（3）掌握選擇器的集體聲明和嵌套聲明的方法。（4）了解選擇器的優先級別及命名規范。知識技能目標3.3基礎項目2：制作“電影資訊”網頁193.3.1制作頁面結構部分203.3.2制作頁面樣式部分（1）標題部分（2）導航欄部分（3）劇照欣賞部分（4）劇情介紹部分（5）演員表部分213.4知識庫：CSS樣式表的引入及選擇器的使用CSS樣式表的引入有四種方法：行內樣式、內部樣式表、鏈接外部樣式表、導入外部樣式表。行內樣式3.4.1CSS樣式表的引入行內樣式的引入方法是直接在HTML標簽中添加style屬性，屬性的內容就是CSS的屬性和取值。代碼<!doctypehtml><html><head><metacharset="utf-8"><title>行內樣式</title></head><body><pstyle="color:#F00;font-size:16px;font-style:italic;">CSS行內樣式示例1</p><pstyle="color:#0f0;font-size:26px;font-weight:bold;">CSS行內樣式示例2</p><pstyle="color:#00f;font-size:36px;text-decoration:underline;">CSS行內樣式示例3</p></body></html>行內樣式網頁效果3.4.1CSS樣式表的引入內部樣式表

內部樣式表是將樣式代碼添加到<head></head>標簽對中，并且以<style>標簽開始，以</style>標簽結束。3.4.1CSS樣式表的引入代碼<!doctypehtml><html><head><metacharset="utf-8"><title>內部樣式</title>

<styletype="text/css">h1{font-size:25px;text-align:right;text-decoration:underline;}p{font-style:italic;}</style></head><body> <p>“GettingfiredfromApplewasthebestthingthatcouldhaveeverhappenedtome.Theheavinessofbeingsuccessfulwasreplacedbythelightnessofbeingabeginneragain.Itfreedmetoenteroneofthemostcreativeperiodsofmylife.”</p> <p>“被蘋果公司炒魷魚是我人生中最好的一件事，追求成功的沉重被創業者的輕松感覺所取代，這讓我感覺如此自由，我重新進入人生中一個最有創造力的階段。”</p> <h1>斯蒂芬-喬布斯</h1></body></html>內部樣式表內部樣式表網頁效果3.4.1CSS樣式表的引入鏈接外部樣式表鏈接外部樣式表就是在HTML文件中調用一個已經定義好的樣式表文件，這個文件就是我們常說的CSS文件，擴展名為.css。CSS文件可以用Dreamweaver來創建，然后在HTML文件中通過<link>標簽將其鏈接到頁面中，此處要注意<link>標簽必須書寫在<head></head>標簽對之間。代碼<head><linkhref="style.css"rel="stylesheet"type="text/css"></head>3.4.1CSS樣式表的引入導入外部樣式表導入外部樣式表和鏈接外部樣式表基本相同，都是在HTML文件中引入一個單獨的CSS文件，只不過在語法和運行方式上略有差別。導入外部樣式表的方法是在<style></style>標簽對中加入@import語句。代碼<head><styletype="text/css">@importurl(css/style.css);

其他樣式表的聲明</style></head3.4.1CSS樣式表的引入3.4.2CSS選擇器的使用類選擇器標簽選擇器ID選擇器要使某個樣式應用于特定的HTML元素，就需要用到CSS選擇器，利用CSS選擇器可以對HTML頁面中的元素實現一對一，一對多或者多對一的控制。選擇器的類型3.4.2CSS選擇器的使用選擇器的類型標簽選擇器：標簽選擇器就是將HTML標簽直接作為選擇器，如p、h1、ul等。希望頁面中的段落呈現如下效果：字體大小25像素字體顏色為藍色文字樣式傾斜要求實現方法是在樣式表中加入如下的代碼，對p標簽進行聲明：P{ font-size:25px; color:blue; font-style:italic;}實現方法3.4.2CSS選擇器的使用選擇器的類型類選擇器<!doctypehtml><html><head> <metacharset="utf-8"> <title>類選擇器</title> <linkhref="style1.css"rel="stylesheet"type="text/css"></head><body> <pclass="p1">窗</p> <p>有個太太多年來不斷抱怨對面的太太很懶惰，“那個女人的衣服永遠洗不干凈，看，她晾在院子里的衣服，總是有斑點，我真的不知道，她怎么連洗衣服都洗成那個樣子!”</p> <p>直到有一天，有個明察秋毫的朋友到她家，才發現不是對面的太太衣服洗不干凈。細心的朋友拿了一塊抹布，把這個太太的窗戶上的灰漬抹掉，說：“看，這不就干凈了嗎”？</p> <pclass="p2">原來，是自己家的窗戶臟了。</p></body></html>網頁代碼選擇器的類型類選擇器@charset"utf-8";/*CSSDocument*/p{text-indent:2em;font-size:14px;}.p1{font-size:30px;color:#F00;text-align:center;}.p2{font-size:20px;font-style:italic;}樣式代碼網頁效果3.4.2CSS選擇器的使用選擇器的類型ID選擇器<!doctypehtml><html><head><metacharset="utf-8"><title>id選擇器</title><linkhref="style2.css"rel="stylesheet"type="text/css"></head><body><pid="p1">第一個id選擇器</p><pid="p2">第二個id選擇器</p></body></html>網頁代碼3.4.2CSS選擇器的使用選擇器的類型ID選擇器@charset"utf-8";/*CSSDocument*/#p1{font-size:15px;color:#F00;}#p2{font-size:30px;color:#3CF;}樣式代碼網頁效果3.4.2CSS選擇器的使用選擇器的類型偽類選擇器：偽類選擇器是一種特殊的選擇器，它不是基于頁面中的某個元素，而是基于元素的某種狀態。<!doctypehtml><html><head><metacharset="utf-8"><title>偽類選擇器</title><linkhref="style3.css"rel="stylesheet"type="text/css"></head><body><ahref="#">超鏈接1</a><ahref="#">超鏈接2</a><ahref="#">超鏈接3</a></body></html>網頁代碼3.4.2CSS選擇器的使用選擇器的類型偽類選擇器：偽類選擇器是一種特殊的選擇器，它不是基于頁面中的某個元素，而是基于元素的某種狀態。@charset"utf-8";/*CSSDocument*/a{ font-size:18px;/*設置超鏈接文字大小為18px*/ text-decoration:none;/*設置超鏈接取消下劃線*/}a:hover{ color:#F90;/*設置鼠標懸停在超鏈接上時文字顏色為橙色*/ font-style:italic;/*設置鼠標懸停在超鏈接時文字為斜體*/ }a:active{ color:#F00;/*設置激活超鏈接時文字顏色為紅色*/ text-decoration:underline;/*設置激活超鏈接時顯示下劃線*/}樣式代碼3.4.2CSS選擇器的使用選擇器的類型偽類選擇器：偽類選擇器是一種特殊的選擇器，它不是基于頁面中的某個元素，而是基于元素的某種狀態。網頁效果3.4.2CSS選擇器的使用當需要給一個頁面中所有標簽都使用同一種樣式時可以選用通用選擇器，它的作用就像是通配符，可以匹配所有可用元素。通用選擇器由一個星號（*）表示。備注：通用選擇器*在實際工

溫馨提示

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

評論

0/150

提交評論