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