版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
項目2風箏展示網(wǎng)HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢學習目標知識目標掌握CSS3樣式的三種引入方式掌握CSS3基礎屬性、顯示或隱藏屬性、新增文本和背景屬性的使用掌握CSS3基礎選擇器和復合選擇器的使用掌握邊框常用屬性、新增邊框屬性、內邊距屬性和外邊距屬性的使用理解IE盒子模型的內容掌握清除浮動的方式與定位屬性的使用掌握相對定位、絕對定位和固定定位的使用技能目標熟練使用CSS3常用屬性和選擇器搭建風箏展示網(wǎng)頁面的基礎樣式熟練使用邊框屬性、內邊距屬性和外邊距屬性改進風箏展示網(wǎng)頁面樣式熟練使用定位與浮動完成風箏展示網(wǎng)頁面布局素養(yǎng)目標培養(yǎng)學生運用CSS3、浮動、定位等技能進行復雜網(wǎng)頁布局和交互設計的能力激發(fā)學生的創(chuàng)新思維，鼓勵學生在CSS3、浮動、定位等技術的應用中探索新方法和新思路HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢學習內容任務1設置風箏展示網(wǎng)頁面的基礎樣式任務2改進風箏展示網(wǎng)頁面樣式任務3完成風箏展示網(wǎng)頁面布局HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢項目描述風箏展示網(wǎng)頁面實現(xiàn)基本的頁面結構和信息展示功能，包括展示風箏的種類、圖片和描述信息，通過對風箏信息展示樣式的學習，讀者將掌握CSS3的樣式引入方式、常用屬性、基礎選擇器和復合選擇器等知識的運用。任務1設置風箏展示網(wǎng)頁面的基礎樣式1HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢需求分析需求的具體介紹如下。1.風箏展示網(wǎng)頁面需要包含頭部、主要內容區(qū)域和底部。2.頭部包含頁面的名稱。3.主要內容區(qū)域用于展示風箏相關的圖片和文字信息。4.底部包含版權信息。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢需求分析通過需求實現(xiàn)風箏展示網(wǎng)頁面的效果如下圖所示。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢知識儲備一、CSS概述二、CSS3樣式的引入方式三、CSS3基礎屬性四、CSS3顯示或隱藏屬性五、CSS3新增文本和背景屬性六、CSS3基礎選擇器七、CSS3復合選擇器HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢一、CSS概述
CSS這門語言是由W3C創(chuàng)建和維護的，也是W3C推薦的Web相關標準。CSS可用于簡化HTML標簽，把關于樣式部分的內容提取出來，進行單獨的控制，使結構與樣式進行分離式開發(fā)。早在2001年，W3C就著手開始準備開發(fā)CSS的第3個版本，CSS3在CSS2.1的基礎上提供了更多實用且強大的功能。目前（本書稿截稿之前）CSS3還沒有發(fā)布正式版本，但是它的很多功能已經可以得到很好的支持與應用。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢二、CSS3樣式的引入方式
CSS3有三種引入方式，即行內樣式、內嵌樣式和外鏈樣式。
1.行內樣式
使用HTML5標簽中的style屬性引入CSS3屬性。<h3style="color:darkgreen">行內樣式引入CSS3</h3><divstyle="width:100px;height:50px;background-color:coral"></div>HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢二、CSS3樣式的引入方式
下面通過一個例子演示行內樣式的引入方式，核心代碼與運行效果如下所示。<body><!--使用行內樣式引入CSS--><h3style="color:rgb(239,12,23)">行內樣式引入CSS</h3><divstyle="width:350px;height:200px;background-color:rgb(112,80,255)"></div></body>HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢二、CSS3樣式的引入方式
2.內嵌樣式
使用HTML5標簽中的style屬性引入CSS3屬性。<!--使用內嵌樣式引入CSS3--><style>div{width:100px;height:50px;background-color:plum;}</style>
下面通過一個例子演示內嵌樣式的引入方式。
<!--使用內嵌樣式引入CSS--><style>h3{color:rgb(235,8,8);}div{width:350px;height:200px;background-color:rgb(6,164,19);}</style>HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢二、CSS3樣式的引入方式
使用內嵌樣式引入CSS3代碼的運行效果如下圖所示。
3.外鏈樣式
（1）鏈接式。（2）導入式。<linkhref="mystyle.css(CSS文件路徑)"rel="stylesheet"type="text/css"/><styletype="text/css">
@importurl(CSS文件路徑);
</style>HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢二、CSS3樣式的引入方式
下面通過一個例子演示外鏈樣式的引入方式，核心代碼如下所示。<head><metacharset="UTF-8"><title>外鏈樣式</title><!--鏈接式，推薦使用--><linktype="text/css"rel="stylesheet"
href="style.css"><!--導入式，不推薦使用--><styletype="text/css">@importurl(style.css)</style></head><body><h3>外鏈樣式引入CSS</h3><div></div></body>HTML5的優(yōu)勢二、CSS3樣式的引入方式
引入的“style.css”文件如下所示。h3{color:darkgreen;}div{width:150px;height:100px;background-color:red;}
使用外鏈樣式引入CSS3代碼的運行效果如下所示。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢三、CSS3基礎屬性
CSS3基礎屬性包括尺寸屬性、字體屬性、背景屬性和文本屬性。
1.尺寸屬性2.字體屬性屬性說明width設置元素的寬度height設置元素的高度max-width設置元素的最大寬度min-width設置元素的最小寬度max-height設置元素的最大高度min-height設置元素的最小高度屬性說明font-style設置字體風格。屬性值有oblique（偏斜體）、italic（斜體）、normal（正常）font-weight設置字體粗細。屬性值有bold（粗體）、bolder（特粗）、lighter（細體）、normal（正常），以及100～900的數(shù)值font-size設置字體大小。常用單位是像素（px）font-family設置字體名稱。常用屬性值有“宋體”“楷體”等HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢三、CSS3基礎屬性
下面通過一個例子演示字體屬性的使用，核心代碼與運行結果如下。<head>......
<style>.box{font:obliquebold24px"楷體";/*設置字體樣式*/}</style></head><body>
......<pclass="box">山東風箏作為中國傳統(tǒng)文化的瑰寶，具有悠久的歷史和獨特的藝術魅力。</p></body>HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢三、CSS3基礎屬性
3.背景屬性
屬性說明background-color設置背景顏色。屬性值可以是顏色的英文單詞或十六進制值或RGB值background-image把圖片設置為背景。屬性值是圖片的絕對路徑或相對路徑表示的URLbackground-repeat設置背景圖片是否重復以及如何重復。屬性值有no-repeat（不重復）、repeat-x（橫向平鋪）、repeat-y（縱向平鋪）background-position設置背景圖片位置。屬性值有精確的數(shù)值或top（垂直向上）、bottom（垂直向下）、left（水平向左）、right（水平向右）、center（居中）background-attachment設置背景圖片滾動情況。屬性值有scroll（圖片隨內容滾動）、fixed（圖片固定）HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢三、CSS3基礎屬性
下面通過一個例子演示背景屬性的使用，核心代碼與運行結果如下。<head>......
<style>div{width:500px;height:250px;background:url(../images/kite_background.png)no-repeatfixed;}</style></head><body><div>濰坊風箏歷史悠久，工藝精湛，是中國風箏的重要代表。......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢三、CSS3基礎屬性
4.文本屬性
屬性說明color設置文本顏色，屬性值可以是顏色的英文單詞或十六進制值或RGB值text-align設置文本內容水平對齊方式，屬性值有l(wèi)eft、right、center、justify（文字相對于圖像對齊）line-height設置行高，屬性值是數(shù)值，單位為像素（px）text-decoration用于修飾文本，屬性值有none、line-through、underline、overline、blink（閃爍）text-transform用于控制文本大小寫轉換，屬性值有none（不轉換，默認值）、capitalize（首字母大寫）、uppercase（大寫）、lowercase（小寫）text-indent設置文本首行縮進，屬性值有數(shù)值或inherit（繼承父元素屬性）direction規(guī)定文本的方向，屬性值有l(wèi)tr（從左到右，默認值）、rtl（從右到左）HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢三、CSS3基礎屬性
下面通過一個例子演示文本屬性的使用，核心代碼與運行結果如下。<head>......
<style>p{color:#ef171e;/*設置文本顏色*/font-size:20px;/*設置字體大小*/text-decoration:underline;/*文本修飾，添加下劃線*/text-indent:32px;/*設置首行縮進2個字符*/}</style></head><body><p>濰坊風箏不僅是......</p>......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢三、CSS3基礎屬性
下面通過一個例子演示CSS3常用屬性的使用，核心代碼如下。<head>
......<linktype="text/css"rel="stylesheet"href="attributes.css"></head><body><h3>來濰坊，上春山</h3><divclass="msg"><span>2024.02.29 </span></div>
......</body>/*使用通用選擇器選取所有元素*/*{text-align:center;/*文本居中對齊*/}.msg{color:#888;/*設置元素顏色*/font-size:15px;/*設置字體大小*/}p{line-height:30px;/*設置行高*/font-size:18px;}HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢三、CSS3基礎屬性.poem{/*連寫形式，設置字體的風格、粗細、大小、名稱*/font:italic60020px"楷體";line-height:28px;}a{color:#3162a3;}a:hover{text-decoration:none;/*取消超鏈接的下劃線*/color:#c76767;}HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性用于控制元素塊的顯示或隱藏主要包括display、visibility、overflow等屬性，用于控制顏色的透明度主要包括opacity屬性和rgba()函數(shù)。1.display屬性display屬性用于設置元素的顯示方式，常用的屬性值有none、block、inline、inline-block等。（1）none屬性值。當display屬性值為none時，可隱藏元素對象，并脫離標準文檔流，不占據(jù)頁面位置，其語法如下所示。
display:none;//隱藏元素，不占用位置（2）block屬性值。當display屬性的屬性值為block時，不僅可以顯示元素，還可將元素轉化為塊級元素，其語法如下所示。
display:block;//可顯示元素，可轉化為塊級元素HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性（3）display其他常用屬性值。
屬性說明inline表示將元素轉化為內聯(lián)元素（行內元素）inline-block表示將元素轉化為內聯(lián)塊元素（行內塊元素）list-item表示將元素作為列表顯示run-in表示將元素根據(jù)上下文作為塊級元素或內聯(lián)元素顯示table表示將元素作為塊級表格來顯示inline-table表示將元素作為內聯(lián)表格來顯示table-column表示將元素作為一個單元格列顯示flex表示將元素作為彈性伸縮盒顯示inherit規(guī)定應該從父元素繼承display屬性的值HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性
下面通過一個例子演示display屬性的使用，核心代碼與運行結果如下。<style>/*為3個塊元素統(tǒng)一設置寬高*/div{width:400px;height:120px;}/*為每個元素塊分別設置背景顏色*/.box1{background-color:#4616e4;}
.box2{background-color:#e8a6b1;......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性2.visibility屬性visibility屬性用于控制元素是否可見，不論元素是顯示或隱藏，都會占據(jù)其本來的空間。visibility屬性的值有visibile、hidden、collapse等，其語法格式如下所示。
visibility:visibile|hidden|collapse|inherit;visibility屬性值的具體說明如下表所示。屬性說明visible默認值，表示元素是可見的hidden表示元素是不可見的，元素布局不會被改變，隱藏的元素仍會占用原有的空間，不會脫離標準文檔流collapse可用于表格中的行、列、行組和列組，隱藏表格的行或列，并且不占用任何空間。此值允許從表中快速刪除行或列，而不強制重新計算整個表的寬度和高度HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性
下面使用visibility屬性隱藏元素，可將隱藏元素的例子中的第18~19行代碼替換為如下代碼，核心代碼與運行結果如下。/*使用visibility屬性隱藏第2個元素塊，不脫離標準文檔流,占用位置*/visibility:hidden;HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性3.opacity屬性opacity屬性用于控制元素的不透明度，取值范圍為0.0~1.0，opacity的值越低，元素不透明度越高。opacity屬性語法格式如下所示。
opacity:value|inherit;下面使用opacity屬性隱藏塊元素，可將隱藏元素例子中的第18~19行代碼替換為如下代碼。
/*使用opacity屬性隱藏第2個元素塊，使元素完全透明，達到隱藏元素的效果*/opacity:0;使用opacity屬性隱藏第2個塊元素的運行效果如下圖所示。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性
下面通過一個例子演示opacity屬性的使用，核心代碼與運行結果如下。<style>
....../*當光標懸停在圖片上時*/img:hover{opacity:0.5;/*設置圖片不透明度為0.5，即圖片呈透明效果*/cursor:pointer;/*光標懸停在圖片上時，形狀為手指*/}</style>......
<divclass="box"><imgsrc="../images/kite_background.png"alt=""></div>......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性4.rgba()函數(shù)rgba是代表red（紅色）、green（綠色）、blue（藍色）和alpha的色彩空間。rgba()函數(shù)需要搭配顏色屬性使用，語法格式如下所示。
color:rgba(red,green,blue,alpha);
例color:rgba(155,203,76,0.6);rgba()函數(shù)各個值的用法如下。（1）紅色（r）0到255間的整數(shù)，代表顏色中的紅色成分。（2）綠色（g）0到255間的整數(shù)，代表顏色中的綠色成分。（3）藍色（b）0到255間的整數(shù)，代表顏色中的藍色成分。（4）不透明度（a）取值0~1之間，代表不透明度。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性opacity屬性與rgba()函數(shù)控制透明度的區(qū)別如下所示。（1）opacity屬性作用于元素和元素的內容，元素內容會繼承元素的不透明度，取值為0~1。它會使元素及其內部的所有內容一起變透明。（2）rgba()函數(shù)一般作為背景色background-color或者顏色color的屬性值，不透明度由其中的alpha值生效，取值為0~1。它僅對當前設置的元素進行透明變換，不會影響其他元素及元素內容的不透明度。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性5.overflow屬性overflow屬性用于指定當元素的內容過大而無法放入指定區(qū)域時是剪裁內容還是添加滾動條。overflow屬性的值有visibile、hidden、scroll、auto等，其語法格式如下所示。
overflow:visibile|hidden|scroll|auto|inherit;overflow屬性值的具體說明如下表所示。屬性值說明visible默認值，內容不會被修剪，會呈現(xiàn)在元素框之外。hidden內容會被修剪，并且其余內容是不可見的scroll內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容auto如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性
下面通過一個例子演示opacity屬性的使用，核心代碼與運行結果如下。<style>
....../*當光標懸停在圖片上時*/img:hover{opacity:0.5;/*設置圖片不透明度為0.5，即圖片呈透明效果*/cursor:pointer;/*光標懸停在圖片上時，形狀為手指*/}</style>......
<divclass="box"><imgsrc="../images/kite_background.png"alt=""></div>......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性
下面通過一個例子演示overflow屬性的使用，核心代碼與運行結果如下。<style>div{
......border:2pxsolid#5b5a5a;/*添加邊框*/overflow:visible;/*設置元素內容的裁剪方式為不被裁剪*/}p{
....../*設置背景顏色的不透明度*/background-color:rgba(248,184,224,0.8);}</style>......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性
當overflow屬性值為hidden時，元素內容會被修剪，并且其余內容是不可見的。當overflow屬性值為scroll時，元素內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容，且不論內容是否溢出，元素框都會添加滾動條。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性
當overflow屬性值為hidden時，元素內容會被修剪，并且其余內容是不可見的。當overflow屬性值為scroll時，元素內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容，且不論內容是否溢出，元素框都會添加滾動條。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性
當overflow屬性值設置為auto時，如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容，元素內容若不溢出，則元素框不會添加滾動條。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢四、CSS3顯示或隱藏屬性前面講解的display、visibility、overflow和opacity這4個屬性，對它們的區(qū)別與用途進行總結如下表所示。屬性區(qū)別用途display隱藏元素，不占用位置，脫離標準文檔流隱藏不占位的元素，例如制作下拉菜單，鼠標移入顯示下拉菜單，應用是十分廣泛的visibility隱藏元素，占用位置，不脫離標準文檔流常用于商品的提示信息方面，光標移入或移出有提示信息顯示overflow只隱藏超出盒子大小的部分可以保證盒子里的內容不會超出該盒子范圍?？梢郧宄雍徒鉀Q邊框塌陷問題opacity使元素完全透明，達到隱藏元素的效果一般用于設置元素的不透明度，不建議使用此屬性隱藏元素HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢五、CSS3新增文本與背景屬性1.新增文本屬性（1）text-shadow屬性，text-shadow屬性可設置的樣式值包括x-offset、y-offset、blur、color這4個值，屬性值含義及用法如下表所示。屬性值含義單位用法x-offset陰影的水平偏移距離px、em或百分比等值為正，陰影向右偏移；值為負，陰影向左偏移y-offset陰影的垂直偏移距離px、em或百分比等值為正，陰影向下偏移；值為負，陰影向上偏移blur陰影的模糊程度px、em或百分比等值不能為負，值為0時無陰影模糊效果；值越大，陰影越模糊；值越小，陰影越清晰color陰影的顏色三種顏色表示方法
HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢五、CSS3新增文本與背景屬性
下面通過一個例子演示text-shadow屬性的使用，核心代碼與運行結果如下。<style>.p1{
....../*設置文本陰影，水平陰影、垂直陰影、模糊效果、顏色*/text-shadow:2px2px2px#deb57e;}.p2{
....../*設置多陰影*/text-shadow:004px#9de56a,1px-2px3px#df626a,-3px3px4px#4585d8;}......
HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢五、CSS3新增文本與背景屬性（2）text-align-last屬性，text-align-last屬性用于設置文本最后一行的對齊方式。text-align-last屬性有7個值，具體如下表所示。屬性值說明auto默認值，每一行的對齊規(guī)則由text-align的值來確定left最后一行向左對齊right最后一行向右對齊center最后一行居中對齊屬性值說明justify最后一行文字的開頭與內容盒子的左側對齊，末尾與右側對齊start最后一行在行起點對齊，由direction屬性（規(guī)定文本方向）決定end最后一行在行末尾對齊，由direction屬性（規(guī)定文本方向）決定HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢五、CSS3新增文本與背景屬性
下面通過一個例子演示text-align-last屬性的使用，核心代碼與運行結果如下。<style>/*斗笠、樹葉說*/.text1{text-align-last:right;/*最后一行向右對齊*/......}/*帆船、帳篷說*/.text2{text-align-last:center;/*最后一行居中對齊*/......}/*飛鳥說*/.text3{/*最后一行在行起點對齊，由direction屬性決定*/text-align-last:star;......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢五、CSS3新增文本與背景屬性2.新增背景屬性（1）background-size屬性，background-size屬性值可設置為長度值、百分比值、cover、contain等，background-size屬性值的具體說明如下表所示。屬性值說明長度值可設置圖片的寬度和高度，常用單位為px百分比值以父元素的百分比來設置背景圖片的寬度和高度，單位為%cover把背景圖像片擴展至足夠大，以使背景圖片完全覆蓋背景區(qū)域，背景圖片的某些部分也許無法顯示在背景定位區(qū)域中contain把圖片擴展至最大尺寸，以使其寬度和高度完全適應內容區(qū)域HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢五、CSS3新增文本與背景屬性
下面通過一個例子演示background-size屬性的使用，核心代碼與運行結果如下。<style>
....../*第2個元素，使用background-size屬性設置背景圖片尺寸*/.box2{width:350px;height:200px;/*添加背景圖片*/background-image:url(../images/kite_background.png);background-size:100%100%;}</style>......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢五、CSS3新增文本與背景屬性（2）background-origin屬性。background-origin屬性值如下表所示。屬性值說明padding-box默認值，背景圖片從內邊距開始平鋪border-box背景圖片從邊框開始平鋪content-box背景圖片從內容區(qū)域開始平鋪background-origin屬性的示例代碼如下。div{background:url(1.png)no-repeat;background-size:cover;background-origin:content-box;}HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢五、CSS3新增文本與背景屬性（3）background-clip屬性。background-clip屬性值如下表所示。屬性值說明border-box默認值，平鋪的背景圖片從邊框開始剪切padding-box平鋪的背景圖片從內邊距開始剪切content-box平鋪的背景圖片從內容區(qū)域開始剪切background-clip屬性的示例代碼如下。div{background:url(1.png)no-repeat;background-clip:content-box;}HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢六、CSS3基礎選擇器
CSS3基礎選擇器包括通用選擇器、元素選擇器、類選擇器、id選擇器、屬性選擇器、偽類選擇器和偽元素選擇器。
1.通用選擇器2.元素選擇器*{color:blue;}p{color:red;}元素選擇器可直接通過具體的HTML元素名稱來匹配文檔內所有同名的元素。通用選擇器可以把樣式通用在所有的標簽中，即能夠選取所有元素，通過星號（*）的方式來設置。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢六、CSS3基礎選擇器
下面通過一個例子演示通用選擇器的使用，核心代碼與運行結果如下。......<style>*{color:rgb(234,4,4);}</style></head><body><h3>CSS選擇器</h3><p>濰坊風箏成為連接世界各國人民友誼的紐帶</p><div>濰坊風箏被列入第一批國家級非物質文化遺產名錄</div></body>HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢六、CSS3基礎選擇器下面通過一個例子演示元素選擇器的使用，核心代碼與運行結果如下。......<style>p{color:rgb(40,19,234);}</style></head><body><h3>CSS選擇器</h3><p>濰坊風箏成為連接世界各國人民友誼的紐帶</p><div>濰坊風箏被列入第一批國家級非物質文化遺產名錄</div></body>HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢六、CSS3基礎選擇器
3.類選擇器4.id選擇器/*“多類選擇器”*/.info.ele{color:plum;}/*“單類選擇器”*/.current{color:white;}#myID{background-color:yellow;}id選擇器是可以給指定的標簽設置一個id屬性和一個id屬性值，按照id屬性的值選取一個與之匹配的元素，以“#”定義?！皢晤愡x擇器”就是在一個標簽中只有一個class屬性；“多類選擇器”就是在一個標簽中可以有多個class屬性。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢六、CSS3基礎選擇器下面通過一個例子演示類選擇器的使用，核心代碼與運行結果如下。......<style>/*"多類選擇器"*/.info.ele{color:rgb(35,236,68);}/*"單類選擇器"*/.current{color:white;background-color:rgb(107,14,237);}</style>......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢六、CSS3基礎選擇器下面通過一個例子演示id選擇器的使用，核心代碼與運行結果如下。......<style>#caption{color:rgb(234,11,219);}</style></head><body><h3id="caption">CSS選擇器</h3><p>濰坊風箏成為連接世界各國人民友誼的紐帶</p><div>濰坊風箏被列入第一批國家級非物質文化遺產名錄</div></body>......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢六、CSS3基礎選擇器
5.屬性選擇器
選擇器說明[attribute]用于選取帶有指定屬性的元素[attribute=value]用于選取帶有指定屬性和值的元素[attribute~=value]用于選取屬性值中包含指定詞匯的元素[attribute^=value]匹配屬性值以指定值開頭的所有元素[attribute$=value]匹配屬性值以指定值結尾的所有元素[attribute*=value]匹配屬性值中包含指定值的所有元素[target="_blank"]{text-decoration:none;}以屬性選擇器[attribute=value]為例，屬性選擇器的示例代碼如下。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢六、CSS3基礎選擇器下面通過一個例子演示屬性選擇器的使用，核心代碼與運行結果如下。......<style>/*帶有指定屬性*/p[title]{color:#e43d3d;}/*帶有指定屬性和值*/input[type="text"]{border:2pxdashed#f107a3;}
......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢六、CSS3基礎選擇器
6.偽類選擇器
選擇器說明:link選擇所有未被單擊的鏈接:visited選擇所有已被用戶訪問過的鏈接:hover選擇鼠標指針浮動在其上的元素。通常用于鏈接和按鈕，以提供“懸?！毙Ч?focus選擇獲得焦點的元素:first-child選擇其父元素的第一個子元素:last-child選擇其父元素的最后一個子元素:nth-child(n)選擇其父元素的第n個子元素:empty選擇沒有子節(jié)點的元素（包括文本節(jié)點）/*選擇所有未被單擊的鏈接*/a:link{color:blue;}/*選擇父元素中的第2個P元素*/p:nth-child(2){color:green;}/*選擇每個列表項中的第3個元素*/li:nth-child(3n){background-color:lightgray;}HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢六、CSS3基礎選擇器下面通過一個例子演示偽類選擇器的使用，核心代碼與運行結果如下。......<style>/*選取3的倍數(shù)的子元素*/li:nth-child(3n){background-color:#20e76c;}/*選取父元素下的第2個子元素*/li:nth-child(2){color:#4112ec;}
......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢六、CSS3基礎選擇器
7.偽元素選擇器
選擇器說明::before在元素內容前添加新內容，與content屬性配合使用，content的內容可以是圖像或文本::after在元素內容后添加新內容，與content配合使用，content的內容可以是圖像或文本::first-letter用于向文本的首字母添加特殊樣式::first-line用于向文本的首行添加特殊樣式::selection匹配用戶選擇的元素部分，但改變文字結構的樣式不會生效，如字號、內邊距p::before{content:"??";/*在p元素的內容前插入一個書本圖標和一個空格*/color:#999;/*設置偽元素內容的顏色為灰色*/}以偽元素選擇器::before為例，偽元素選擇器的示例代碼如下。使用“:”與“::”區(qū)分偽類和偽元素。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢六、CSS3基礎選擇器下面通過一個例子演示偽元素選擇器的使用，核心代碼與運行結果如下。......<style>/*在元素內容前面添加新內容*/h2::before{
......vertical-align:middle;/*內容垂直居中*/}/*在元素內容后面添加新內容*/h4::after{content:'(濰坊國際風箏會)';/*添加文本*/}
......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢七、CSS3復合選擇器
復合選擇器通常包括后代選擇器、子選擇器、相鄰兄弟選擇器和通用兄弟選擇器。
1.后代選擇器2.子選擇器/*選擇所有div元素內部的p元素*/divp{color:red;}/*選擇所有div元素的直接子p元素*/div>p{color:blue;}子選擇器使用尖角號（>）連接多個選擇器，前者表示要匹配的父元素，后者表示要匹配的被包含的子對象。后代選擇器也被稱為包含選擇器，通過空格連接多個選擇器，前者表示包含的祖先元素，后者表示被包含的后代元素。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢七、CSS3復合選擇器下面通過一個例子演示后代選擇器的使用，核心代碼與運行結果如下。......<style>/*使用后代選擇器選中所有div內部的p元素*/divp{color:blue;}/*選中所有div內部嵌套在p元素內部的span元素*/divpspan{color:red;font-weight:bold;}</style>......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢七、CSS3復合選擇器下面通過一個例子演示子選擇器的使用，核心代碼與運行結果如下。......<style>/*使用子選擇器選中div元素下直接的p元素*/div>p{color:blue;font-weight:bold;}ulli{color:green;}</style>......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢七、CSS3復合選擇器
3.相鄰兄弟選擇器4.通用兄弟選擇器/*選擇每個h1元素后緊跟的第一個p元素*/h1+p{font-size:20px;}/*選擇每個h1元素后面的所有p元素*/h1~p{color:green;}通用兄弟選擇器會匹配同一父級元素下的兄弟元素，使用波浪號（~）連接兩個選擇器，前者匹配特定元素，后者根據(jù)結構關系指定其后同級所有的匹配元素。相鄰兄弟選擇器會匹配同一父級元素下指定元素緊鄰的另一個元素，且兩者不存在嵌套關系，使用加號（+）連接兩個選擇器，前者匹配特定元素，后者根據(jù)結構關系指定同級、相鄰的匹配元素。HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢七、CSS3復合選擇器下面通過一個例子演示相鄰兄弟選擇器的使用，核心代碼與運行結果如下。......<style>/*選擇緊跟在.container內第一個<p>元素之后的<p>元素*/.container>p+p{color:red;}</style>......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢七、CSS3復合選擇器下面通過一個例子演示通用兄弟選擇器的使用，核心代碼與運行結果如下。......<style>/*選擇.container內h2元素之后的所有p元素*/.containerh2~p{color:blue;}</style>......HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢任務實現(xiàn)
在chapter02文件夾中創(chuàng)建一個名為kite_display.html的文件，該文件用于搭建風箏展示網(wǎng)頁面。
<head>
......<linkrel="stylesheet"href="kite.css"></head><body><header><h1>風箏展示網(wǎng)頁面</h1></header><main><sectionclass="kite-gallery"><divid="card">......
*{text-align:center;/*文本居中對齊*/}header{background-color:#333;color:#fff;text-align:center;height:80px;}HTML5的優(yōu)勢
解決了跨瀏覽器的問題
新增多個新特性
（語義化標簽、多媒體標簽、canvas元素、本地存儲等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢任務實現(xiàn)
在kite.css文件中設置風箏展示網(wǎng)頁面的基礎樣式。
footer{background-color:#333;color:#fff;text-align:center;width:100%;height:50px;}p{color:#888;/*設置元素顏色*/line-height:30px;/*設置行高*/font:60020px"楷體";/*設置字體的粗細、大小、名稱*/}/*使用標簽選擇器選取a元素（超鏈接）*/a{color:#287ceb;}/*使用超鏈接的偽類，當鼠標放到超鏈接上時*/a:hover{text-decoration:none;/*取消超鏈接的下劃線*/color:#c76767;}任務2改進風
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 園林綠化工程綠化施工團隊協(xié)作與溝通考核試卷
- 制冷空調設備銷售與市場分析考核試卷
- 農業(yè)會計培訓課件
- 收車合同范本
- 合伙注冊公司合同范本
- 勞動合同范本簽字
- 佳利租賃合同范本
- 酒店前廳服務操作流程制度
- 云計算數(shù)據(jù)中心建設合同
- 培訓課件的獲取方法
- （人教PEP2024版）英語一年級上冊Unit 2 教學課件（新教材）
- 經銷商轉戶證明范文
- DB23T 3761-2024 建設工程對水文監(jiān)測影響評價報告編制規(guī)程
- GB/T 16311-2024道路交通標線質量要求和檢測方法
- TSDDP 8-2024 新型無機磨石施工質量與驗收規(guī)范
- GB/T 44464-2024汽車數(shù)據(jù)通用要求
- 2024年上半年教師資格證《初中英語》真題及答案
- 小學英語趣味選擇題100道附答案(完整版)
- 炭素廠工藝設計規(guī)范
- 湖北省武漢市江漢區(qū)2023-2024學年七年級下學期期末數(shù)學試題
- (完整版)初級茶藝師理論知識300題含答案【完整版】
評論
0/150
提交評論