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

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

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

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

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

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

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

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

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

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

10、sublime快捷方式,課程信息 課程時長：4分鐘 課程名稱：sublime.avi 問答與練習(xí) 完成新聞案例。,5.4 綜合案例（一）,課程信息 課程時長：3分鐘 課程名稱：綜合案例一.avi 問答與練習(xí) 完成新聞案例。,5.4 綜合案例（二）,課程信息 課程時長：9分鐘 課程名稱：綜合案例二.avi 問答與練習(xí) 完成新聞案例。,5.4 綜合案例（三）,課程信息 課程時長：5分鐘 課程名稱：綜合案例三.avi 問答與練習(xí) 完成新聞案例。,抉擇！,一個農(nóng)民從洪水中救起了他的妻子，他的孩子卻被淹死了。事后，人們議論紛紛。有的說他做得對，因為孩子可以再生一個，妻子卻不能死而復(fù)活;有的說他做錯了，因為妻子可以另娶一個，孩子卻不