筆記css基礎(chǔ)第一天-day03_第1頁(yè)
筆記css基礎(chǔ)第一天-day03_第2頁(yè)
筆記css基礎(chǔ)第一天-day03_第3頁(yè)
筆記css基礎(chǔ)第一天-day03_第4頁(yè)
筆記css基礎(chǔ)第一天-day03_第5頁(yè)
已閱讀5頁(yè),還剩33頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1、CSS基本入門(mén)第一天-DAY03,導(dǎo)師:馬超(Mark),1.1 CSS產(chǎn)生的原因,課程信息 課程時(shí)長(zhǎng):4分鐘 課程名稱(chēng):CSS產(chǎn)生的原因avi 課程詳情 能夠按照你想要的效果編寫(xiě)代碼去改變?nèi)魏螛?biāo)簽的樣式!,1.2 CSS網(wǎng)頁(yè)的美容師,課程信息 課程時(shí)長(zhǎng):2分鐘 課程名稱(chēng):CSS網(wǎng)頁(yè)的美容師.avi 課程詳情 CSS(Cascading Style Sheets),1.3 體會(huì)css樣式,課程信息 課程時(shí)長(zhǎng):6分鐘 課程名稱(chēng):體會(huì)css樣式avi 課程詳情 1、體驗(yàn)一下css的神奇 標(biāo)簽名屬性:屬性值,1.4 css樣式規(guī)則,課程信息 課程時(shí)長(zhǎng):4分鐘 課程名稱(chēng):css樣式規(guī)則.avi 問(wèn)答與

2、練習(xí) 1.選擇器用于指定CSS樣式作用的HTML對(duì)象,花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。 2.屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)。 3.屬性是對(duì)指定的對(duì)象設(shè)置的樣式屬性,例如字體大小、文本顏色等。 4.屬性和屬性值之間用英文“:”連接。,2.1 字體樣式字號(hào)和字體,課程信息 課程時(shí)長(zhǎng):8分鐘 課程名稱(chēng):字體樣式字號(hào)和字體.avi 問(wèn)答與練習(xí) 1、font-size:20px; 2、單位:px(像素),em(字體尺寸) 3、Google和火狐默認(rèn)字體大小為:16px;,2.2 字體字號(hào)常用技巧,課程信息 課程時(shí)長(zhǎng):6分鐘 課程名稱(chēng):字體字號(hào)常用技巧.avi 答與練習(xí) font-family 設(shè)置

3、時(shí):中文字體需要加英文狀態(tài)下的引號(hào),英文字體一般不 需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí),英文字體必須位于中文字體之前。如: bodyfont-family:“Microsoft YaHei”,”黑體”,“楷體” -正確 bodyfont-family:”黑體”,“楷體”,“Microsoft YaHei”-錯(cuò)誤,2.3 Unicode字體編碼,課程信息 課程時(shí)長(zhǎng):5分鐘 課程名稱(chēng):Unicode字體.avi 問(wèn)答與練習(xí),2.4 css注釋,課程信息 課程時(shí)長(zhǎng):2分鐘 課程名稱(chēng):css注釋.avi 問(wèn)答與練習(xí) /*/,3.1 字體加粗,課程信息 課程時(shí)長(zhǎng):6分鐘 課程名稱(chēng):字體加粗.avi 問(wèn)答與

4、練習(xí) Bolder,3.2 字體傾斜,課程信息 課程時(shí)長(zhǎng):4分鐘 課程名稱(chēng):字體傾斜.avi 問(wèn)答與練習(xí) Font-style,3.3 字體綜合設(shè)定,課程信息 課程時(shí)長(zhǎng):7分鐘 課程名稱(chēng):字體綜合設(shè)定.avi 問(wèn)答與練習(xí) font:font-style font-weight font-size font-family; 注意:其中font-style和font-weight是可以選擇不寫(xiě)的,但font-size 和font-family必須要有!,3.4 調(diào)試工具chrome使用,課程信息 課程時(shí)長(zhǎng):8分鐘 課程名稱(chēng):調(diào)試工具avi 問(wèn)答與練習(xí) 掌握調(diào)試工具的具體操作,4.1 標(biāo)簽元素器,課

5、程信息 課程時(shí)長(zhǎng):5分鐘 課程名稱(chēng):標(biāo)簽選擇器.avi 問(wèn)答與練習(xí) 通過(guò)標(biāo)簽名叫標(biāo)簽選擇器,4.2體驗(yàn)類(lèi)選擇器,課程信息 課程時(shí)長(zhǎng):5分鐘 課程名稱(chēng):體驗(yàn)類(lèi)選擇器.avi 問(wèn)答與練習(xí) 1、類(lèi)選擇器的寫(xiě)法 .類(lèi)名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; 2、類(lèi)選擇器最大的優(yōu)勢(shì)是可以為元素定義單獨(dú)或相同的樣式。 將擁有這個(gè)類(lèi)名的所有元素加上css樣式,4.3css命名規(guī)范,課程信息 課程時(shí)長(zhǎng):8分鐘 課程名稱(chēng):css命名規(guī)范.avi 問(wèn)答與練習(xí) 1、命名的取值規(guī)范只能是:0-9,a-z,A-Z,_,-, 2、不能以數(shù)字開(kāi)頭,4.4 谷歌課堂案例,課程信息 課程時(shí)長(zhǎng):5分鐘 課程名

6、稱(chēng):谷歌課堂案例avi 問(wèn)答與練習(xí) 掌握選擇器的具體操作,4.5 多類(lèi)名選擇器,課程信息 課程時(shí)長(zhǎng):6分鐘 課程名稱(chēng):多類(lèi)名選擇器.avi 問(wèn)答與練習(xí) 1、樣式顯示效果跟HTML元素中的類(lèi)名先后順序沒(méi)有關(guān)系,受css樣式書(shū)寫(xiě)的上下順序有關(guān)。 2、各個(gè)類(lèi)名中間用空格隔開(kāi)。,4.6 體驗(yàn)ID選擇器,課程信息 課程時(shí)長(zhǎng):2分鐘 課程名稱(chēng):體驗(yàn)ID選擇器.avi 問(wèn)答與練習(xí) 1、id選擇器 #id名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; 2、元素的id值是唯一的,只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。 將擁有這個(gè)id名的唯一元素加上css樣式,5.1 類(lèi)選擇器和ID選擇器的區(qū)別,課程信

7、息 課程時(shí)長(zhǎng):5分鐘 課程名稱(chēng):類(lèi)選擇器和ID選擇器的區(qū)別.avi 問(wèn)答與練習(xí) id選擇器和類(lèi)選擇器之間的區(qū)別是什么?,5.2 通配符選擇器,課程信息 課程時(shí)長(zhǎng):2分鐘 課程名稱(chēng):通配符選擇器.avi 問(wèn)答與練習(xí) 1、通配符選擇器 *屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; 2、缺點(diǎn):性能太低。一般情況不建議使用,或者直接不用。,5.3 鏈接偽類(lèi)選擇器的使用,課程信息 課程時(shí)長(zhǎng):10分鐘 課程名稱(chēng): 鏈接偽類(lèi)選擇器的使用avi 問(wèn)答與練習(xí),5.4 鏈接偽類(lèi)的簡(jiǎn)寫(xiě)方式,課程信息 課程時(shí)長(zhǎng):4分鐘 課程名稱(chēng): 鏈接偽類(lèi)的簡(jiǎn)寫(xiě)方式.avi 問(wèn)答與練習(xí) 一般只需要用到hover!,6

8、.1 結(jié)構(gòu)偽類(lèi)選擇器(一),課程信息 課程時(shí)長(zhǎng):5分鐘 課程名稱(chēng): 結(jié)構(gòu)偽類(lèi)選擇器(一).avi 問(wèn)答與練習(xí),6.2 結(jié)構(gòu)偽類(lèi)選擇器(二),課程信息 課程時(shí)長(zhǎng):6分鐘 課程名稱(chēng):結(jié)構(gòu)偽類(lèi)選擇器(二).avi 問(wèn)答與練習(xí),6.3 結(jié)構(gòu)偽類(lèi)選擇器(三),課程信息 課程時(shí)長(zhǎng):4分鐘 課程名稱(chēng):結(jié)構(gòu)偽類(lèi)選擇器(三)avi 問(wèn)答與練習(xí),5.4目標(biāo)偽類(lèi)選擇器,課程信息 課程時(shí)長(zhǎng):5分鐘 課程名稱(chēng): 目標(biāo)偽類(lèi)選擇器.avi 問(wèn)答與練習(xí) 完成新聞案例。,5.4 css顏色,課程信息 課程時(shí)長(zhǎng):8分鐘 課程名稱(chēng):css顏色.avi 問(wèn)答與練習(xí) 完成新聞案例。 1、總結(jié)顏色表示法 a、直接寫(xiě)英文單詞yellow

9、red等等 b、16進(jìn)制表示#aabbcc或者#abc c、rgb()如rgb(0,0,0) d、rgb()如rgba(0,0,0,0.5)a為透明度,5.4 行高對(duì)齊和首行縮進(jìn),課程信息 課程時(shí)長(zhǎng):7分鐘 課程名稱(chēng):行高對(duì)齊和首行縮進(jìn).avi 問(wèn)答與練習(xí),5.4 字間距和單詞間距,課程信息 課程時(shí)長(zhǎng):3分鐘 課程名稱(chēng):字間距和單詞間距.avi 問(wèn)答與練習(xí) 完成新聞案例。,5.4 顏色半透明,課程信息 課程時(shí)長(zhǎng):3分鐘 課程名稱(chēng):顏色半透明.avi 問(wèn)答與練習(xí) 完成新聞案例。,5.4 文字陰影初識(shí),課程信息 課程時(shí)長(zhǎng):5分鐘 課程名稱(chēng):文字陰影初識(shí).avi 問(wèn)答與練習(xí) 完成新聞案例。,5.4

10、sublime快捷方式,課程信息 課程時(shí)長(zhǎng):4分鐘 課程名稱(chēng):sublime.avi 問(wèn)答與練習(xí) 完成新聞案例。,5.4 綜合案例(一),課程信息 課程時(shí)長(zhǎng):3分鐘 課程名稱(chēng):綜合案例一.avi 問(wèn)答與練習(xí) 完成新聞案例。,5.4 綜合案例(二),課程信息 課程時(shí)長(zhǎng):9分鐘 課程名稱(chēng):綜合案例二.avi 問(wèn)答與練習(xí) 完成新聞案例。,5.4 綜合案例(三),課程信息 課程時(shí)長(zhǎng):5分鐘 課程名稱(chēng):綜合案例三.avi 問(wèn)答與練習(xí) 完成新聞案例。,抉擇!,一個(gè)農(nóng)民從洪水中救起了他的妻子,他的孩子卻被淹死了。事后,人們議論紛紛。有的說(shuō)他做得對(duì),因?yàn)楹⒆涌梢栽偕粋€(gè),妻子卻不能死而復(fù)活;有的說(shuō)他做錯(cuò)了,因?yàn)槠拮涌梢粤砣⒁粋€(gè),孩子卻不

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論