2024年-CSS樣式快速入門培訓(xùn)_第1頁
2024年-CSS樣式快速入門培訓(xùn)_第2頁
2024年-CSS樣式快速入門培訓(xùn)_第3頁
2024年-CSS樣式快速入門培訓(xùn)_第4頁
2024年-CSS樣式快速入門培訓(xùn)_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTML+CSS基礎(chǔ)知識分享12024/5/13基本介紹122024/5/13Html是什么？HTML是用來描述網(wǎng)頁的一種語言。HTML標(biāo)簽

HTML標(biāo)簽是由尖括號包圍的關(guān)鍵詞，比如<html>HTML標(biāo)簽通常是成對出現(xiàn)的，比如<b>和</b>

標(biāo)簽對中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽32024/5/13一段最基礎(chǔ)的HTML<html><body><h1>MyFirstHeading</h1><p>Myfirstparagraph.</p></body></html>例子解釋<html>與</html>之間的文本描述網(wǎng)頁<body>與</body>之間的文本是可見的頁面內(nèi)容<h1>與</h1>之間的文本被顯示為標(biāo)題<p>與</p>之間的文本被顯示為段落42024/5/13Html常用標(biāo)簽<a>鏈接<div>最常用的塊級元素<p>文字段落

<span>把一個(gè)行級元素拆分，給與塊級結(jié)構(gòu)。<ul><li>無序列表<img>圖片<table><tr><td>表格<iframe>內(nèi)聯(lián)框架

52024/5/13CSS是什么？能做什么？控制網(wǎng)頁中元素的顏色、大小、位置、風(fēng)格及效果。顏色：背景色、邊線色、文字色…大小：文字大小、各種容器大小…圖片：控制切片（元素），使其與效果圖一致。風(fēng)格：為元素設(shè)置諸如陰影、模糊和透明等效果。位置：可調(diào)整各個(gè)元素間的間距與位置。效果：基礎(chǔ)交互動態(tài)，也可與腳本語言組合，產(chǎn)生各種高級動態(tài)效果。62024/5/13CSS添加方式172024/5/13添加CSS方式CSS樣式有3種添加方法1.外部樣式表–最佳方式，便于查找與修改。2.內(nèi)部樣式表–可針對當(dāng)前獨(dú)立頁面使用。3.內(nèi)聯(lián)樣式

–后期的小修補(bǔ)。82024/5/13外部樣式表<html><head><linktype="text/css"rel="stylesheet"href="basic.css"></head><body>…</body></html>92024/5/13內(nèi)部樣式表<html><head><styletype="text/css">body{background-color:#ff8008;}</style></head><body></body></html>102024/5/13內(nèi)聯(lián)樣式<html><head></head><bodystyle=“background-color:green”;></body></html>112024/5/13層疊次序當(dāng)同一個(gè)HTML元素被不止一個(gè)樣式定義時(shí)引用次序如下1.外部樣式表2.內(nèi)部樣式表（位于<head>標(biāo)簽內(nèi)部）3.內(nèi)聯(lián)樣式（在HTML元素內(nèi)部，最高優(yōu)先權(quán)）122024/5/13選擇器介紹2132024/5/13選擇器種類1類別選擇器2標(biāo)簽選擇器3ID選擇器4后代選擇器5子選擇器6偽類選擇器7通用選擇器8群組選擇器9相鄰?fù)x擇器10屬性選擇器142024/5/13標(biāo)簽選擇器一個(gè)完整的HTML頁面是有很多不同的標(biāo)簽組成，如<div><p><h1>…標(biāo)簽選擇器不加任何前綴例如：p{color:#FF0000;}h1{line-height:45px;}152024/5/13標(biāo)簽選擇器<html><head><styletype="text/css">p{color:yellow;}</style></head><body><h1>標(biāo)題</h1><p>為人民服務(wù)</p></body></html>162024/5/13類別選擇器類選擇器根據(jù)類名來選擇，前面以”.”來標(biāo)志。例如：.demoDiv{color:#FF0000;}.wangxiangyi{height:45px;width:230px;}172024/5/13類別選擇器<html><head><styletype="text/css">.important{color:yellow;}</style></head><body><h1class=“important”>好好學(xué)習(xí)</h1><pclass=“important”>天天向上</p><p>學(xué)習(xí)雷鋒好榜樣</p></body></html>182024/5/13ID選擇器根據(jù)元素ID來選擇元素，具有唯一性。前面以”#”號來標(biāo)志。例如：#demoDiv{color:#FF0000;}#wangxiangyi{height:45px;width:230px;}192024/5/13ID選擇器<html><head><styletype="text/css">#important{color:yellow;}</style></head><body><h1id=“important”>好好學(xué)習(xí)</h1><pid=“important”>天天向上</p><p>學(xué)習(xí)雷鋒好榜樣</p></body></html>202024/5/13偽類選擇器用于文檔以外的其他條件來應(yīng)用元素的樣式常用于按鍵、鏈接等Link

表示鏈接在沒有被點(diǎn)擊時(shí)的樣式。Visited

表示鏈接已經(jīng)被訪問時(shí)的樣式。Hover

表示當(dāng)鼠標(biāo)懸停在鏈接上面時(shí)的樣式。Active

表示鼠標(biāo)點(diǎn)住時(shí)一剎那樣式。212024/5/13偽類選擇器<html><head><styletype="text/css"> a{margin:0200px;}

a:link{background-color:#CCCCCC;} a:visited{background-color:#CC00CC;} a:hover{background-color:#FF0000;} a:active{background-color:green;}</style></head><body>

<ahref=“#”>我是一個(gè)按鍵</a></body></html>222024/5/13分別使用一下<html><head><styletype="text/css">p{color:blue;}.demo1{color:yellow;}#demo2{color:red;}</style></head><body><p>好好學(xué)習(xí)</p><divclass=“demo1”>天天向上</div><divid=“demo2”>天天向上</div></body></html>232024/5/13搭配&繼承<html> <head><styletype="text/css">.all{color:#666666;}.allh1{color:red;}.demo.word{color:yellow;}#demo2{color:green;font-size:24px;}.demo,#demo2{margin-left:300px;}</style></head><body><divclass="all"><h1>第1句話</h1><h2>第2句話</h2><divclass="demo"><h2class="word">第3句話</h2></div><divid="demo2">第4句話</div></div></body><html>242024/5/13常用樣式與屬性3252024/5/13常用樣式與屬性1CSS背景 background-color/img…2CSS鏈接 linkactivehovervisited

3CSS文本 font-style/size/weight/color…4CSS字體 font-family5CSS邊框 border6CSS邊距 margin/pading7CSS浮動與清理float&clear262024/5/13容器基礎(chǔ)模型272024/5/13浮動282024/5/13相對定位#box_relative{position:relative;left:30px;top:20px;}292024/5/13絕對定位#box_relative{position:absolute;

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論