筆記css基礎(chǔ)第一天-day03

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è)，孩子卻不