CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件

上傳人：t*** IP屬地：貴州上傳時間：2022-12-03 格式：PPT 頁數(shù)：194 大?。?.27MB 積分：25 舉報 版權(quán)申訴

已閱讀5頁，還剩189頁未讀，繼續(xù)免費閱讀

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

文檔簡介

第四章CSS基礎(chǔ)知識第四章CSS基礎(chǔ)知識整體概述THEFIRSTPARTOFTHEOVERALLOVERVIEW,PLEASESUMMARIZETHECONTENT第一部分整體概述第一部分本章內(nèi)容一、CSS簡介二、在網(wǎng)頁中應(yīng)用CSS三、CSS基本語法四、CSS選擇器五、CSS的繼承性六、CSS的層疊和特殊性重點難點本章內(nèi)容一、CSS簡介二、在網(wǎng)頁中應(yīng)用CSS三復(fù)習(xí)HTML標記<body><p><h1>，<h2>，<h3><u1>，<li><img><a><div>復(fù)習(xí)HTML標記bodyph1h2h3lililililiulppppimgdivid=“header”divid=“navigation”divid=“mainContent”bodyph1h2h3lililililiulppppimgdivid=“mainContent”divid=“footer”divid=“mainContent”divid=“foCSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS的引入W3C組織于1996年推出CSS1.0技術(shù)標準，1998年推出CSS2.0技術(shù)標準。CSS是CascadingStyleSheets的縮寫，譯為“層疊樣式表”，是用于控制網(wǎng)頁樣式的一種標記性語言。HTML控制網(wǎng)頁內(nèi)容的結(jié)構(gòu)，CSS控制網(wǎng)頁內(nèi)容的樣式。CSS實現(xiàn)了網(wǎng)頁的結(jié)構(gòu)與表現(xiàn)相分離。一、CSS簡介CSS的引入一、CSS簡介二、在網(wǎng)頁中應(yīng)用CSS在網(wǎng)頁上應(yīng)用CSS的三種方法：行內(nèi)樣式（InlineStyles）內(nèi)部樣式表（EmbeddingaStyleBlock）外部樣式表（LinkingtoaStyleSheet）二、在網(wǎng)頁中應(yīng)用CSS在網(wǎng)頁上應(yīng)用CSS的三種方法：二、在網(wǎng)頁中應(yīng)用CSS行內(nèi)樣式：在HTML標記的style屬性中設(shè)置CSS樣式。例：<html><head><title>泡泡潛水俱樂部歡迎你</title></head><body><h1>泡泡潛水俱樂部</h1><P>泡泡潛水俱樂部為你量身打造一流的潛水服務(wù)，……</p></body></html>style=“color:#FFFFFF;background-color:#000080”>泡泡潛水俱樂部</h1>

二、在網(wǎng)頁中應(yīng)用CSS行內(nèi)樣式：在HTML標記的stCSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件二、在網(wǎng)頁中應(yīng)用CSS內(nèi)部樣式表：將CSS樣式寫在<style>和</style>標記之間。例：<html><head><title>泡泡潛水俱樂部歡迎你</title></head><body><h1>泡泡潛水俱樂部</h1><p>泡泡潛水俱樂部為你量身打造一流的潛水服務(wù)，……</p></body></html><styletype=“text/css”>h1{color:#FFFFFF;background-color:#000080;}</style></head><body><h1>泡泡潛水俱樂部</h1><p>泡泡潛水俱樂部為你量身打造一流的潛水服務(wù)，……</p></body></html>二、在網(wǎng)頁中應(yīng)用CSS內(nèi)部樣式表：將CSS樣式寫在<CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件例：<html><head><title>泡泡潛水俱樂部歡迎你</title></head><body><h1>泡泡潛水俱樂部</h1><p>泡泡潛水俱樂部為你量身打造一流的潛水服務(wù)，……</p></body></html>二、在網(wǎng)頁中應(yīng)用CSS外部樣式表：將CSS樣式寫在獨立的CSS文件中，然后將CSS

文件鏈接到HTML文件上。<linkhref=“style.css”rel=“stylesheet”type=“text/css”></head><body><h1>泡泡潛水俱樂部</h1><P>泡泡潛水俱樂部為你量身打造一流的潛水服務(wù)，……</p></body></html>例：二、在網(wǎng)頁中應(yīng)用CSS外部樣式表：將CSS樣式寫在CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件網(wǎng)頁文件CSS文件網(wǎng)頁文件CSS文件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件小結(jié)：在網(wǎng)頁上應(yīng)用CSS的三種方法：行內(nèi)樣式（InlineStyles）內(nèi)部樣式表（EmbeddingaStyleBlock）外部樣式表（LinkingtoaStyleSheet）內(nèi)部樣式表優(yōu)于行內(nèi)樣式。外部樣式表優(yōu)于內(nèi)部樣式表。小結(jié)：在網(wǎng)頁上應(yīng)用CSS的三種方法：CSS樣式由“選擇器”和“聲明”組成。聲明由“屬性”和“屬性值”組成。每條聲明之間用“;”

分隔。三、CSS基本語法selectors{property:value;}選擇器屬性屬性值聲明CSS樣式由“選擇器”和“聲明”組成。三、CSS基本語法四、CSS選擇器CSS常用選擇器的類型：通配選擇器類型選擇器ID選擇器后代選擇器類選擇器偽類群選擇器四、CSS選擇器CSS常用選擇器的類型：四、CSS選擇器1.通配選擇器（UniversalSelector）*{property:value;}例：*{padding:0;margin:0;}四、CSS選擇器1.通配選擇器（UniversalSCSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件四、CSS選擇器2.類型選擇器（TypeSelectors）Tag{property:value;}例：body{font:0.75em/1.5"宋體";background:#E0E0E0url(images/bg.gif);}h1{font-size:180%;margin:1em0;}p{margin:1em0;}四、CSS選擇器2.類型選擇器（TypeSelectCSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件四、CSS選擇器3.ID選擇器（IDSelectors）

＃ID{property:value;}

例：#container{width:760px;margin:auto;}#header{height:120px;background:url(images/bg_header.gif)no-repeat;}#content{padding:30px;}四、CSS選擇器3.ID選擇器（IDSelectoCSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件四、CSS選擇器4.后代選擇器（DescendantSelectors）selector1selector2{property:value}

說明：選擇所有被selector1包含的selector2。例：#contentp{ text-indent:2em;}四、CSS選擇器4.后代選擇器（DescendantCSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件四、CSS選擇器5.類選擇器（ClassSelectors）.className

{property:value;}使用類選擇器需要兩個步驟：標識類；定義類。四、CSS選擇器5.類選擇器（ClassSelect四、CSS選擇器5.類選擇器（ClassSelectors）例：<head><title>散文詩

</title></head><body><h2>《秋夜》</h2><p>魯迅</p><p>在我的后園，可以看見墻外有兩株樹，……</p></body><h2class=“center”>《秋夜》</h2><p>魯迅</p><h2class=“center”>《秋夜》</h2><pclass=“center”

>魯迅</p><styletype="text/css">.center{text-align:center;}</style></head><body><h2class=“center”>《秋夜》</h2><pclass=“center”

>魯迅</p><p>在我的后園，可以看見墻外有兩株樹，……</p></body><styletype="text/css">.center{text-align:center;}h2.center{color:#0000FF;}</style></head><body><h2class=“center”>《秋夜》</h2><pclass=“center”

>魯迅</p><p>在我的后園，可以看見墻外有兩株樹，……</p></body>四、CSS選擇器5.類選擇器（ClassSelectCSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件四、CSS選擇器7.偽類（Pseudo-ClassesSelectors）

selector:pseudo-class{property:value}

例：a:link{color:#000000;text-decoration:none;}a:visited{color:#000000;text-decoration:none;}a:hover{color:#FF0000;text-decoration:underline;}a:active{color:#FF0000;text-decoration:underline;}注意：一定要按照link，visited，hover，actived的順序書寫。四、CSS選擇器7.偽類（Pseudo-ClassesCSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件四、CSS選擇器6.群選擇器（GroupSelectors）selector1，selector2，selector3{property:value;}

說明：當(dāng)多個選擇符設(shè)置相同樣式時，可以將選擇符合并為一組。例：h2,h3{ margin:1em0;}td,th{ border:solid1px#000000; padding:5px;}四、CSS選擇器6.群選擇器（GroupSelectCSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件小結(jié)：CSS常用選擇器的類型：通配選擇器（*）類型選擇器（bodyplih1h2h3）ID選擇器（#header#navigation#maincontent）后代選擇器（#headerp#navigationul#footerp）類選擇器（.center.fltrt）偽類（a:linka:visiteda:hovera:active）群選擇器（p,lip,h2,h3）小結(jié)：CSS常用選擇器的類型：五、CSS的繼承性繼承性是指：如果某個屬性具有繼承性，則屬性作用在父元素的同時，也會作用于其包含的子元素。常用的具有繼承性的屬性：font-familyfont-sizefont-styleline-heightcolortext-aligntext-indenta:linka:visiteda:hovera:active五、CSS的繼承性繼承性是指：如果某個屬性具有繼承性，則屬五、CSS的繼承性……<head><styletype=“text/css”>#header{ font:20px/1.5“楷體_GB2312”; color:#000000; text-align:center; width:408px; height:200px; border:3pxsolid#993300; background:#FFF5E3url(images/bg.jpg)no-repeatcenterbottom;}</style></head><body><divid=“header”><h1>聊城大學(xué)</h1><p>敬業(yè)博學(xué)求實創(chuàng)新</p></div></body>……例：可繼承的屬性不可繼承的屬性五、CSS的繼承性……例：可繼承的屬性不可繼承的屬性六、層疊和特殊性選擇符的特殊性分成四個等級：用行內(nèi)樣式具有最高特殊性?！癐D選擇符”比“類選擇符”特殊?！邦愡x擇符”比“類型選擇符”特殊。選擇符特殊性行內(nèi)樣式1000ID選擇符100類選擇符、偽類選擇符10類型選擇符1六、層疊和特殊性選擇符的特殊性分成四個等級：選擇符特殊性行練習(xí)選擇符特殊性style=“”1000#container#content{}200#content.center{}110#contentp{}101#content{}100p.center{}11.center{}10p{}1六、層疊和特殊性練習(xí)選擇符特殊性style=“”1000#container……<head><styletype=“text/css”></style></head><body><pid=“s1”class=“title”>敬業(yè)博學(xué)求實創(chuàng)新</p></body>……例：……例：提問與解答環(huán)節(jié)Questionsandanswers提問與解答環(huán)節(jié)結(jié)束語

CONCLUSION

感謝參與本課程，也感激大家對我們工作的支持與積極的參與。課程后會發(fā)放課程滿意度評估表，如果對我們課程或者工作有什么建議和意見，也請寫在上邊，來自于您的聲音是對我們最大的鼓勵和幫助，大家在填寫評估表的同時，也預(yù)祝各位步步高升，真心期待著再次相會！結(jié)束語

CONCLUSION

感謝參與本課程，也感激大家對我感謝您的觀看與聆聽本課件下載后可根據(jù)實際情況進行調(diào)整感謝您的觀看與聆聽本課件下載后可根據(jù)實際情況進行調(diào)整第四章CSS基礎(chǔ)知識第四章CSS基礎(chǔ)知識整體概述THEFIRSTPARTOFTHEOVERALLOVERVIEW,PLEASESUMMARIZETHECONTENT第一部分整體概述第一部分本章內(nèi)容一、CSS簡介二、在網(wǎng)頁中應(yīng)用CSS三、CSS基本語法四、CSS選擇器五、CSS的繼承性六、CSS的層疊和特殊性重點難點本章內(nèi)容一、CSS簡介二、在網(wǎng)頁中應(yīng)用CSS三復(fù)習(xí)HTML標記<body><p><h1>，<h2>，<h3><u1>，<li><img><a><div>復(fù)習(xí)HTML標記bodyph1h2h3lililililiulppppimgdivid=“header”divid=“navigation”divid=“mainContent”bodyph1h2h3lililililiulppppimgdivid=“mainContent”divid=“footer”divid=“mainContent”divid=“foCSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件CSS的引入W3C組織于1996年推出CSS1.0技術(shù)標準，1998年推出CSS2.0技術(shù)標準。CSS是CascadingStyleSheets的縮寫，譯為“層疊樣式表”，是用于控制網(wǎng)頁樣式的一種標記性語言。HTML控制網(wǎng)頁內(nèi)容的結(jié)構(gòu)，CSS控制網(wǎng)頁內(nèi)容的樣式。CSS實現(xiàn)了網(wǎng)頁的結(jié)構(gòu)與表現(xiàn)相分離。一、CSS簡介CSS的引入一、CSS簡介二、在網(wǎng)頁中應(yīng)用CSS在網(wǎng)頁上應(yīng)用CSS的三種方法：行內(nèi)樣式（InlineStyles）內(nèi)部樣式表（EmbeddingaStyleBlock）外部樣式表（LinkingtoaStyleSheet）二、在網(wǎng)頁中應(yīng)用CSS在網(wǎng)頁上應(yīng)用CSS的三種方法：二、在網(wǎng)頁中應(yīng)用CSS行內(nèi)樣式：在HTML標記的style屬性中設(shè)置CSS樣式。例：<html><head><title>泡泡潛水俱樂部歡迎你</title></head><body><h1>泡泡潛水俱樂部</h1><P>泡泡潛水俱樂部為你量身打造一流的潛水服務(wù)，……</p></body></html>style=“color:#FFFFFF;background-color:#000080”>泡泡潛水俱樂部</h1>

＃ID{property:value;}

>魯迅</p><styletype="text/css">.center{text-align:center;}</style></head><body><h2class=“center”>《秋夜》</h2><pclass=“center”

selector:pseudo-class{property:value}

人人文庫> 全部分類> 教育資料 > 輔導(dǎo)培訓(xùn)

溫馨提示

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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件

文檔簡介

溫馨提示

最新文檔

評論

CSS基礎(chǔ)知識學(xué)習(xí)(含實例)課件

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔