03情境一任務(wù)3使用CSS美化HTML頁(yè)面課件_第1頁(yè)
03情境一任務(wù)3使用CSS美化HTML頁(yè)面課件_第2頁(yè)
03情境一任務(wù)3使用CSS美化HTML頁(yè)面課件_第3頁(yè)
03情境一任務(wù)3使用CSS美化HTML頁(yè)面課件_第4頁(yè)
03情境一任務(wù)3使用CSS美化HTML頁(yè)面課件_第5頁(yè)
已閱讀5頁(yè)，還剩45頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

情境一：Web前臺(tái)頁(yè)面設(shè)計(jì)任務(wù)3：使用CSS美化HTML頁(yè)面主講：劉曉知WEB應(yīng)用開(kāi)發(fā)主要內(nèi)容CSS樣式規(guī)則1樣式的繼承與層疊2CSS盒模型3學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)：CSS樣式的使用方法能力目標(biāo)：能夠使用CSS樣式美化網(wǎng)頁(yè)元素技術(shù)應(yīng)用的背景在HTML文檔里使用CSS樣式可以美化頁(yè)面的外觀，改變頁(yè)面的布局。使用外部樣式可以解決網(wǎng)站內(nèi)容與表現(xiàn)分離的問(wèn)題，另外外部樣式表可以極大提高工作效率，能輕松的為網(wǎng)頁(yè)進(jìn)行改版或維護(hù)。一、任務(wù)1-3任務(wù)描述：設(shè)計(jì)圖文頁(yè)面使用CSS美化HTML頁(yè)面完成后效果如圖所示：二、CSS簡(jiǎn)介1.CSS（CascadingStyleSheet）中文譯為層疊樣式表，是用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。CSS是用于布局與美化網(wǎng)頁(yè)的CSS語(yǔ)言是一種標(biāo)記語(yǔ)言,因此不需要編譯,可以直接由瀏覽器執(zhí)行(屬于瀏覽器解釋型語(yǔ)言)CSS文件是一個(gè)文本文件,它包含了一些CSS標(biāo)記,CSS文件必須使用css為文件名后綴CSS是大小寫(xiě)不敏感的,CSS與css是一樣

CSS是由W3C的CSS工作組產(chǎn)生和維護(hù)的

二、CSS簡(jiǎn)介2.CSS的作用頁(yè)面的載入更快,可以降低網(wǎng)站的流量費(fèi)用使設(shè)計(jì)師在修改設(shè)計(jì)時(shí)更有效率，而代價(jià)更低使整個(gè)站點(diǎn)保持視覺(jué)的一致性使HTML代碼更為清晰、簡(jiǎn)潔，可更好的被搜索引擎找到和索引,使站點(diǎn)對(duì)瀏覽者和瀏覽器更具有親和力僅僅HTMLHTML+CSSCSS的思想就是首先指定對(duì)什么“對(duì)象”進(jìn)行設(shè)置，然后指定對(duì)該對(duì)象的哪個(gè)方面的“屬性”進(jìn)行設(shè)置，最后給出該設(shè)置的“值”。CSS由3個(gè)基本部分組成的——“對(duì)象”、“屬性”和“值”。1.CSS規(guī)則CSS文檔由一條或多條CSS規(guī)則（Rules）組成，規(guī)則擁有特定的格式：三、CSS樣式規(guī)則三、CSS樣式規(guī)則2.CSS單位單位名稱說(shuō)明pc(pica)1pc=12point（點(diǎn)）pt(point)1pt=1/72inch（英寸）mm(millimeter)亳米cm(centimeter)厘米in(inch)英寸px(pixel)像素，代表計(jì)算機(jī)屏幕上的一點(diǎn)em表示字體的高度的單位ex表示字體中字母X的高度三、CSS樣式規(guī)則行內(nèi)式：在HTML標(biāo)簽的style屬性中寫(xiě)CSS代碼嵌入式：在<head></head>中寫(xiě)CSS代碼鏈接式：使用<link>鏈接外部CSS文件導(dǎo)入式：使用@import指令<linktype="text/css"rel="stylesheet"href="mycss.css"/><styletype="text/css">@importurl("mystyle.css“);</style>3.在HTML中引入CSS樣式三、CSS樣式規(guī)則4.基本CSS選擇器在CSS的3個(gè)組成部分中，“對(duì)象”是很重要的，它指定了對(duì)哪些網(wǎng)頁(yè)元素進(jìn)行設(shè)置，因此，它有一個(gè)專門的名稱選擇器（selector）?；綜SS選擇器有以下四種：標(biāo)簽選擇器類別選擇器ID選擇器偽類選擇器（1）CSS標(biāo)簽選擇器用于設(shè)定HTML文檔中指定標(biāo)簽的顯示樣式三、CSS樣式規(guī)則<html><head><title>演示</title><style>h2{font-family:幼圓;color:blue;}</style></head><body><h2>這是標(biāo)題文本</h2><p>這里是正文內(nèi)容</p><h2>這是標(biāo)題文本</h2><p>這里是正文內(nèi)容</p><h2>這是標(biāo)題文</h2><p>這里是正文內(nèi)容</p></body></html>顯示效果三、CSS樣式規(guī)則（1）CSS標(biāo)簽選擇器（續(xù)）h2：標(biāo)題標(biāo)簽所有h2均使用同一種樣式（2）類別選擇器給特定的一組CSS代碼取名，可以應(yīng)用于多個(gè)不同的標(biāo)簽：三、CSS樣式規(guī)則三、CSS樣式規(guī)則<html><head><title>class選擇器</title><styletype="text/css">.red{color:red;/*紅色*/font-size:18px;/*文字大小*/}.green{color:green;/*綠色*/font-size:20px;/*文字大小*/}</style></head><body><pclass="red">class選擇器1</p><pclass="green">class選擇器2</p><h3class="green">h3同樣適用</h3></body></html>類名為red的樣式在p元素中應(yīng)用類名為red的樣式類名為green的樣式類名為green的樣式用在p元素中，也可用在h3元素中。（2）類別選擇器（續(xù)）<html><head><title>同時(shí)使用兩個(gè)class</title><styletype="text/css">.blue{color:blue;/*顏色*/}.big{font-size:22px;/*字體大小*/}</style></head><body><h4>一種都不使用</h4><h4class="blue">兩種class，只使用blue</h4><h4class="big">兩種class，只使用big</h4><h4class="bluebig">兩種class，同時(shí)blue和big</h4><h4>一種都不使用</h4></body></html>三、CSS樣式規(guī)則使用兩個(gè)類樣式，使用空格隔開(kāi)。（2）類別選擇器（續(xù)）（3）ID選擇器對(duì)于頁(yè)面中獨(dú)一無(wú)二的元素，比如頁(yè)腳，可以給其id屬性賦予一個(gè)獨(dú)一無(wú)二的值，用ID選擇器給指定ID的元素設(shè)置樣式。三、CSS樣式規(guī)則三、CSS樣式規(guī)則<html><head><title>ID選擇器</title><styletype="text/css">#bold{font-weight:bold;/*粗體*/}#green{font-size:30px;/*字體大小*/color:#009900;/*顏色*/}</style></head><body><pid="blod">ID選擇器1</p><pid="green">ID選擇器2</p><pid="green">ID選擇器3</p><pid="boldgreen">ID選擇器4</p></body></html>ID名為bold的樣式在p元素中應(yīng)用ID名為bold的樣式（3）ID選擇器（續(xù)）三、CSS樣式規(guī)則（4）偽類選擇器超鏈接標(biāo)簽<a>支持幾個(gè)特殊的CSS樣式類，用于定義超鏈接不同狀態(tài)的樣式，這些樣式類被稱為“偽類（pseudoclass）”屬性說(shuō)明a:link超鏈接的普通樣式，即正常瀏覽狀態(tài)的樣式a:visited被點(diǎn)擊過(guò)后呈現(xiàn)的樣式a:hover鼠標(biāo)指針懸停于超鏈接元素之上時(shí)呈現(xiàn)的樣式a:active單擊超鏈接時(shí)呈現(xiàn)的樣式三、CSS樣式規(guī)則5.“復(fù)合選擇器”包括：

（1）交集選擇器

（2）并集選擇器

（3）后代選擇器三、CSS樣式規(guī)則（1）交集選擇器直接指定特定標(biāo)記中特定類別或ID的樣式。p.special{ /*標(biāo)記.類別選擇器*/ color:red; }p#special{ /*id選擇器*/ color:green;}注意：選擇器字符間不要有空格！三、CSS樣式規(guī)則（2）并集選擇器一次定義多個(gè)標(biāo)簽或類別或ID的樣式div,.special,#one{ /*集體聲明*/ text-decoration:underline; /*下劃線*/}注意：以逗號(hào)隔開(kāi)各個(gè)選擇器（3）后代選擇器選擇嵌套在指定元素的內(nèi)部元素的樣式pspan{ color:red; }注意：以空格分隔選擇器三、CSS樣式規(guī)則三、CSS樣式規(guī)則6.常用CSS屬性（1）CSS背景屬性（Background）屬性描述background在一個(gè)聲明中設(shè)置所有的背景屬性。background-attachment設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。background-color設(shè)置元素的背景顏色。background-image設(shè)置元素的背景圖像。background-position設(shè)置背景圖像的開(kāi)始位置。background-repeat設(shè)置是否及如何重復(fù)背景圖像。三、CSS樣式規(guī)則（2）CSS邊框?qū)傩裕˙order）屬性描述border在一個(gè)聲明中設(shè)置所有的邊框?qū)傩浴order-bottom在一個(gè)聲明中設(shè)置所有的下邊框?qū)傩?。border-bottom-color設(shè)置下邊框的顏色。border-bottom-style設(shè)置下邊框的樣式。border-bottom-width設(shè)置下邊框的寬度。border-color設(shè)置四條邊框的顏色。border-left在一個(gè)聲明中設(shè)置所有的左邊框?qū)傩?。border-left-color設(shè)置左邊框的顏色。border-left-style設(shè)置左邊框的樣式。border-left-width設(shè)置左邊框的寬度。三、CSS樣式規(guī)則（2）CSS邊框?qū)傩裕˙order）（續(xù)）屬性描述border-right在一個(gè)聲明中設(shè)置所有的右邊框?qū)傩?。border-right-color設(shè)置右邊框的顏色。border-right-style設(shè)置右邊框的樣式。border-right-width設(shè)置右邊框的寬度。border-style設(shè)置四條邊框的樣式。border-top在一個(gè)聲明中設(shè)置所有的上邊框?qū)傩浴order-top-color設(shè)置上邊框的顏色。border-top-style設(shè)置上邊框的樣式。border-top-width設(shè)置上邊框的寬度。border-width設(shè)置四條邊框的寬度。三、CSS樣式規(guī)則（3）CSS文本、字體屬性（Text、Font）屬性描述color設(shè)置文本的顏色。line-height設(shè)置行高。text-align規(guī)定文本的水平對(duì)齊方式。text-decoration規(guī)定添加到文本的裝飾效果。text-indent規(guī)定文本塊首行的縮進(jìn)。font在一個(gè)聲明中設(shè)置所有字體屬性。font-family規(guī)定文本的字體系列。font-size規(guī)定文本的字體尺寸。font-style規(guī)定文本的字體樣式。font-weight規(guī)定字體的粗細(xì)。三、CSS樣式規(guī)則（4）CSS外邊距、內(nèi)邊距屬性（Margin、Padding）屬性描述margin在一個(gè)聲明中設(shè)置所有外邊距屬性。margin-bottom設(shè)置元素的下外邊距。margin-left設(shè)置元素的左外邊距。margin-right設(shè)置元素的右外邊距。margin-top設(shè)置元素的上外邊距。padding在一個(gè)聲明中設(shè)置所有內(nèi)邊距屬性。padding-bottom設(shè)置元素的下內(nèi)邊距。padding-left設(shè)置元素的左內(nèi)邊距。padding-right設(shè)置元素的右內(nèi)邊距。padding-top設(shè)置元素的上內(nèi)邊距。三、CSS樣式規(guī)則（5）CSS列表屬性（List）屬性描述list-style在一個(gè)聲明中設(shè)置所有的列表屬性。list-style-image將圖象設(shè)置為列表項(xiàng)標(biāo)記。list-style-position設(shè)置列表項(xiàng)標(biāo)記的放置位置。list-style-type設(shè)置列表項(xiàng)標(biāo)記的類型。四、CSS的層疊與繼承1.CSS層疊原則行內(nèi)樣式>id樣式>類別樣式>標(biāo)記樣式結(jié)論：特殊者勝出!沒(méi)有定義CSS規(guī)則的HTML元素從它的父元素中繼承樣式！div.father{ color:blue; /*顏色*/ text-decoration:underline;/*下劃線*/}<divclass="father">這是父元素內(nèi)的文本，顯示為藍(lán)色加下劃線<div>這是子元素內(nèi)的文本</div></div>使用交集選擇器定義樣式定義兩個(gè)嵌套的元素四、CSS的層疊與繼承（續(xù)）2.CSS繼承原則五、CSS盒模型1.HTML文檔的邏輯結(jié)構(gòu)五、CSS盒模型（續(xù)）marginpaddingBox2.盒模型示意圖五、CSS盒模型（續(xù)）2.盒模型示意圖（續(xù)）五、CSS盒模型（續(xù)）3.塊元素與行內(nèi)元素<div>、<p>、<h2>等是常見(jiàn)的塊級(jí)（block）元素標(biāo)簽<span>、<a>、<img>等是常見(jiàn)的行內(nèi)（inline）元素標(biāo)簽每一個(gè)塊級(jí)元素都定義了一個(gè)盒子。<div>與<span>沒(méi)有特殊的語(yǔ)義，多用于頁(yè)面布局與排版，因此是網(wǎng)頁(yè)布局設(shè)計(jì)中打交道最多的兩個(gè)標(biāo)簽。五、CSS盒模型（續(xù)）div{border-width:6px;border-color:#000000;margin:20px;/*盒子間距*/padding:5px;/*內(nèi)容與邊界距離*/background-color:#FFFFCC;border-style:dashed;}通過(guò)設(shè)定盒子的邊框和線型可以在頁(yè)面上清晰地顯示出盒子所占用的頁(yè)面區(qū)域。4.盒模型示例五、CSS盒模型（續(xù)）屬性值個(gè)數(shù)說(shuō)明2第1個(gè)值表示上下邊框的屬性第2個(gè)值表示左右邊框的屬性3第1個(gè)值表示上邊框的屬性第2個(gè)值表示左右邊框的屬性第3個(gè)值表示下邊框的屬性4依次表示上、右、下、左邊框的屬性（成順時(shí)針?lè)较颍ヾiv{ border-color:RedGreen; border-width:1px2px3px; border-style:dotteddashedsoliddouble;}5.有關(guān)CSS盒子設(shè)定邊框?qū)傩缘暮?jiǎn)寫(xiě)六、任務(wù)實(shí)施1.任務(wù)分析所有內(nèi)容放于一個(gè)div容器主標(biāo)題二級(jí)標(biāo)題段落文本圖片列表鏈接2.構(gòu)建頁(yè)面框架（HTML文檔）六、任務(wù)實(shí)施<htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>使用CSS樣式美化頁(yè)面</title></head><body><div><h2>ASP.NETMVC3高級(jí)編程</h2><imgsrc="images/asp.jpg"width="280"height="280"/><h3>編輯推薦</h3><p>《ASP.NETMVC3高級(jí)編程》……<h3>作者簡(jiǎn)介</h3><ul><li>JonGalloway，在Microsoft的服務(wù)器和工具在線組工作，主要負(fù)責(zé)ASP.NET社區(qū)和ASP.NET網(wǎng)站。</li>……</ul><p><ahref="#">查看目錄</a></p></div></body></html>六、任務(wù)實(shí)施3.創(chuàng)建樣式文件，清除元素默認(rèn)樣式<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>css基礎(chǔ)</title><linkhref="style/web.css"type="text/css"rel="stylesheet"/></head>鏈接外部樣式文件：web.css@charset"utf-8";/*CSSDocument*/body,div,h2,h3,p,ul,li{margin:0;padding:0;}body{font-family:"宋體";font-size:12px;}清除body,div,h2,p,ul,li默認(rèn)邊距與間距。六、任務(wù)實(shí)施4.設(shè)置div樣式.main{width:780px;padding:10px;margin:10pxauto0}將div設(shè)置寬度，外邊距左右為自動(dòng)會(huì)使整個(gè)div在瀏覽器中居中顯示。使用類別選擇器.main，設(shè)置寬度為780px，上下左右內(nèi)邊距為10px，外邊距為上10px，左右自動(dòng)，下0px。效果如下圖所示。六、任務(wù)實(shí)施5.設(shè)置標(biāo)題樣式設(shè)置主標(biāo)題字體為“黑體”,大小為18px,背景色為淺灰色，上下左右內(nèi)填充為15px，文字居中顯示。效果如圖所示。.mainh2{font-family:"黑體“;font-size:18

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論