




版權(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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 綠化工作年度總結(jié)和計(jì)劃
- 云南省會(huì)澤一中2025屆高一物理第二學(xué)期期末經(jīng)典模擬試題含解析
- 2025屆江西省九江市湖口二中物理高一下期末學(xué)業(yè)水平測(cè)試試題含解析
- 公司框架合作協(xié)議書(shū)
- 山東省泰安市泰安第四中學(xué)2025年物理高一第二學(xué)期期末經(jīng)典模擬試題含解析
- 體育工作整改報(bào)告
- 企業(yè)理念學(xué)習(xí)心得
- 以環(huán)保主題的演講稿
- 安全防護(hù)體系構(gòu)建:安全監(jiān)控系統(tǒng)標(biāo)準(zhǔn)解讀
- 媒體融合趨勢(shì)下文化節(jié)目主持人的能力提升策略
- 安保工作月度總結(jié)
- 開(kāi)業(yè)美容項(xiàng)目活動(dòng)方案
- 2025年技術(shù)玻璃制品行業(yè)市場(chǎng)調(diào)研報(bào)告
- 2025至2030高純氯化鉀行業(yè)產(chǎn)業(yè)運(yùn)行態(tài)勢(shì)及投資規(guī)劃深度研究報(bào)告
- 2025年度職業(yè)技能鑒定國(guó)家題庫(kù)維修電工高級(jí)技師復(fù)習(xí)題庫(kù)及答案(完整版)
- 船舶修理92黃本
- 安措費(fèi)使用計(jì)劃報(bào)審表(施工報(bào)-監(jiān)理審-業(yè)主批)
- Q∕SY 02625.2-2018 油氣水井帶壓作業(yè)技術(shù)規(guī)范 第2部分:設(shè)備配備、使用與維護(hù)
- 調(diào)研報(bào)告:農(nóng)村糧食經(jīng)紀(jì)人現(xiàn)狀、存在問(wèn)題及建議
- 鋼筋平行檢驗(yàn)記錄范本
- 2021-2022學(xué)年安徽省蚌埠市高一下學(xué)期期末數(shù)學(xué)試題【含答案】
評(píng)論
0/150
提交評(píng)論