《Web前端開發(fā)項目教程》網(wǎng)頁的藍(lán)圖-簡單布局-使用CSS裝飾頁面_第1頁
《Web前端開發(fā)項目教程》網(wǎng)頁的藍(lán)圖-簡單布局-使用CSS裝飾頁面_第2頁
《Web前端開發(fā)項目教程》網(wǎng)頁的藍(lán)圖-簡單布局-使用CSS裝飾頁面_第3頁
《Web前端開發(fā)項目教程》網(wǎng)頁的藍(lán)圖-簡單布局-使用CSS裝飾頁面_第4頁
《Web前端開發(fā)項目教程》網(wǎng)頁的藍(lán)圖-簡單布局-使用CSS裝飾頁面_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目02網(wǎng)頁的藍(lán)圖--簡單布局任務(wù)2-1使用CSS裝飾網(wǎng)頁任務(wù)02-1使用CSS裝飾網(wǎng)頁

知識點理解DIV+CSS網(wǎng)頁布局掌握三種CSS樣式表技能點學(xué)會使用DIV+CSS進(jìn)行簡單的頁面布局學(xué)會根據(jù)需要使用三種CSS樣式表一、DIV+CSS網(wǎng)頁布局流程用div劃分頁面規(guī)劃各內(nèi)容塊的位置用css定位

Banner菜單主導(dǎo)航主體內(nèi)容footerBanner

菜單主導(dǎo)航左

右

footer.main{ width:90%; margin:0auto;}.nav_top{ background:#333; height:30px; width:100%; position:fixed; top:0; z-index:99;}……二、CSS樣式表CSS（CascadingStyleSheets，可譯為“層疊樣式表”或“級聯(lián)樣式表”）是一組樣式設(shè)置規(guī)則，用于控制Web頁面的外觀。樣式表實現(xiàn)內(nèi)容與樣式的分離，方便團(tuán)隊開發(fā)+=內(nèi)容與樣式和諧統(tǒng)一的完整網(wǎng)頁Html代碼CSS樣式1.CSS樣式表簡介—樣式規(guī)則CSS樣式表的核心是樣式規(guī)則，多個樣式規(guī)則就構(gòu)成了樣式表樣式規(guī)則的組成：選擇器{樣式屬性:屬性值;}例如：

p{color:red;font-size:30px;font-family:隸書;}樣式屬性屬性的值1.CSS樣式表簡介—層疊為什么說CSS是“層疊式”樣式表呢？所謂的層疊，主要包含以下幾個方面：（1）在樹形結(jié)構(gòu)中的子元素能夠繼承父元素定義的大多數(shù)樣式；（2）同一元素的樣式可以多次定義，如果不發(fā)生沖突，全部樣式可以疊加起來應(yīng)用；重復(fù)定義發(fā)生沖突時則根據(jù)優(yōu)先級依照內(nèi)層優(yōu)先、后定義優(yōu)先的原則進(jìn)行覆蓋，即內(nèi)層子元素樣式覆蓋父元素樣式、后定義的樣式覆蓋先定義的樣式。1.CSS樣式表簡介—樣式表的優(yōu)點優(yōu)點：（1）表現(xiàn)和內(nèi)容分離。將設(shè)計部分剝離出來放在一個獨立樣式文件中，大大縮減頁面代碼。（2）縮短改版時間。只要簡單的修改幾個CSS文件就可以重新設(shè)計一個有成百上千頁面的站點。

（3）一次設(shè)計，多次使用?？梢詫⒄军c上同類網(wǎng)頁風(fēng)格都使用一個CSS文件進(jìn)行控制，如果改動CSS文件，那么多個網(wǎng)頁都會隨之發(fā)生變動。2.樣式表分類根據(jù)樣式代碼的位置，樣式表有三種使用方法：內(nèi)嵌樣式表外部樣式表行內(nèi)樣式表2.1內(nèi)嵌樣式表使用情境:如果開發(fā)人員只定義當(dāng)前網(wǎng)頁的樣式，可使用內(nèi)嵌樣式表。內(nèi)嵌的樣式表“嵌”在網(wǎng)頁的<head></head>標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在當(dāng)前網(wǎng)頁上使用。使用格式：<head>

<styletype="text/css">

樣式規(guī)則</style>

…頭部的其它標(biāo)記<head>2.1內(nèi)嵌樣式表使用方法：<head> <title>內(nèi)嵌樣式表</title> <styletype="text/css">

h3{font-size:20pt;font-family:"微軟雅黑";}

p{width:200px;height:100px;background:blue;} </style></head>聲明文檔樣式表結(jié)束文檔樣式表開始，類型為CSS樣式樣式規(guī)則<body> <h3>這是藍(lán)色盒子</h3> <p>段落1</p> <br> <p>段落2</p>

</body>在頁面頭部<head>與</head>標(biāo)記之間使用<style>…</style>標(biāo)記定義，只對該頁面有效。

如果希望一個網(wǎng)站中多個頁面的樣式保持一致，如何解決？外部樣式表文件可以解決2.2外部樣式表使用情境：當(dāng)要在站點多個網(wǎng)頁上一致地應(yīng)用相同樣式時，可使用外部樣式表。在外部樣式表中定義樣式，并鏈接到所有網(wǎng)頁，便能確保所有網(wǎng)頁外觀的一致性。如果需要更新樣式，只需在外部樣式表中修改一次，而該更新會反映到所有與該樣式表相鏈接的網(wǎng)頁上。使用格式：<head><title>標(biāo)記名選擇符</title>

……

<linkhref="相對或絕對路徑/樣式文件.css"

rel="stylesheet"/>……<head>css文件選擇符{樣式規(guī)則}2.2外部樣式表使用方法：步驟1，創(chuàng)建樣式表文件common.cssp{font-family:華文楷體;font-size:18px;color:#FF00CC;}h2{font-family:黑體;font-size:28px;background-color:#CCFF33;text-align:center;}2.2外部樣式表使用方法：步驟2，創(chuàng)建page1.html<html><head><title>李白詩詞</title></head><body><h2>將進(jìn)酒</h2><h3><ahref="#">作者：李白</a></h3><p>君不見黃河之水天上來，奔流到海不復(fù)回。<br>君不見高堂明鏡悲白發(fā)，朝如青絲暮成雪。<br>人生得意須盡歡，莫使金樽空對月。<br>天生我材必有用，千金散盡還復(fù)來。</p></body></html>步驟3，創(chuàng)建page2.html<html><head><title>杜甫詩詞</title></head><body><h2>登高</h2><h3><ahref="#">作者：杜甫</a></h3><p>風(fēng)急天高猿嘯哀，渚清沙白鳥飛回。<br>無邊落木蕭蕭下，不盡長江滾滾來。<br>萬里悲秋常作客，百年多病獨登臺。<br>艱難苦恨繁霜鬢，潦倒新停濁酒杯。</p></body></html>2.2外部樣式表使用方法：步驟4，把樣式文件和網(wǎng)頁綁定使用LINK（鏈接）標(biāo)簽:<head><linkhref="common.css"rel="stylesheet"></head>步驟5，瀏覽查看page1和page2樣式文件：common.cssPage1.htmlPage2.html2.3內(nèi)聯(lián)樣式表（行內(nèi)樣式）使用情境：如果某個頁面某個元素有特殊樣式，可以直接把CSS代碼添加到HTML的標(biāo)記中，即作為HTML標(biāo)記的屬性標(biāo)記存在。通過這種方法，可以很簡單地對某個元素單獨定義樣式。使用格式：<標(biāo)記名style="樣式規(guī)則1;樣式規(guī)則2;…;">2.3內(nèi)聯(lián)樣式表使用方法：<head><title>內(nèi)聯(lián)CSS樣式應(yīng)用</title></head><bodystyle="background-color:#CCCCCC"><h2>靜夜思</h2><h3>作者：李白</h3><pstyle="color:#FF0000;font-size:18px;font-family:隸書;border-bottom-style:dashed;border-bottom-width:1px;">

床前明月光，<br/>

疑是地上霜。<b

溫馨提示

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

評論

0/150

提交評論