第02章html、javascript簡(jiǎn)介1用和css開(kāi)發(fā)站點(diǎn)tp05

1、 CSS樣式表（一）第五章回顧與作業(yè)點(diǎn)評(píng)frameset框架的基本語(yǔ)法？如何設(shè)置target屬性，實(shí)現(xiàn)產(chǎn)品介紹的框架頁(yè)效果？iframe框架的基本語(yǔ)法？預(yù)習(xí)檢查什么是CSS？使用CSS有何好處？CSS的基本語(yǔ)法是什么？選擇器分為哪幾類？本章任務(wù)制作貴美“商品分類”版塊制作背景為圓角矩形的效果本章目標(biāo)掌握CSS的基本語(yǔ)法使用文本和字體樣式美化網(wǎng)頁(yè)使用背景樣式美化網(wǎng)頁(yè)樣式表能實(shí)現(xiàn)內(nèi)容與樣式的分離，方便團(tuán)隊(duì)開(kāi)發(fā) css garden 程序員寫代碼美工做樣式內(nèi)容與樣式和諧統(tǒng)一的完整網(wǎng)頁(yè)為什么使用CSS樣式表3-1演示示例：css garden樣式復(fù)用、方便網(wǎng)站的后期維護(hù)為什么使用CSS樣式表3-2同一

2、網(wǎng)站共用同一樣式，確保網(wǎng)站統(tǒng)一的風(fēng)格頁(yè)面的精確控制，實(shí)現(xiàn)精美、復(fù)雜頁(yè)面 為什么使用CSS樣式表3-3CSS的用途1、外觀美化2、布局、定位 選擇器（即修飾對(duì)象） 對(duì)象的屬性1: 屬性值1; 對(duì)象的屬性2: 屬性值2; 標(biāo)簽聲明標(biāo)簽內(nèi)為CSS多條樣式規(guī)則1.多個(gè)屬性間用分號(hào)分隔2.用冒號(hào)聲明對(duì)應(yīng)屬性值 li color: red; font-size: 30px; font-family: 隸書; 選擇器樣式規(guī)則 CSS基本語(yǔ)法標(biāo)簽選擇器 li color:red; font-size:28px; font-family:隸書; 家用電器 標(biāo)簽選擇器：用于修飾同類HTML標(biāo)簽的共性風(fēng)格 選擇器的

3、分類3-1演示案例1：標(biāo)簽選擇器 .bluecolor:blue; 家用電器各類書籍手機(jī)數(shù)碼日用百貨如果希望部分li標(biāo)簽采用其他樣式，怎么辦？類選擇器(class)定義樣式，注意類名有點(diǎn)號(hào) 選擇器的分類3-2應(yīng)用類樣式，其他元素也可以使用演示案例2：類選擇器#menu width:200px; background:#ccc; font:bold 14px 宋體; 家用電器 ID選擇器 選擇器的分類3-3如果希望控制某個(gè)DIV塊樣式，并且要求塊元素唯一，怎么辦？演示案例3：ID選擇器練習(xí)CSS選擇器 需求說(shuō)明：使用各類CSS選擇器，實(shí)現(xiàn)如下的頁(yè)面美化效果完成時(shí)間：25分鐘div塊：總寬度200

4、px，背景灰色#ccc商品類別：字體為橘色（#ff7300），粗體，大小為14px其余商品： 字體大小為12pxdiv-ul-li組織結(jié)構(gòu)共性問(wèn)題集中講解常見(jiàn)調(diào)試問(wèn)題及解決辦法代碼規(guī)范問(wèn)題共性問(wèn)題集中講解行距、對(duì)齊等：line-height （行高） text-align （對(duì)齊） letter-spacing （字符間距）text-decoration （文本修飾 ）white-space （空白處理 ）文本屬性2-1字符間距：5px文本修飾：帶下劃線空白處理：不斷行字體、字號(hào)：font（縮寫形式）font-weight（粗細(xì)） font-size（大?。?font-family（字體） 字

5、體：宋體顏色：紅色字號(hào)：12px對(duì)齊：左對(duì)齊文本屬性2-2li font: 12px 宋體; text-align:left; line-height:28px; .title letter-spacing:5px; white-space:nowrap; text-decoration:underline; .bigFont font-size:16px; color:red; 所有的默認(rèn)樣式：字體、字號(hào)：宋體，12px對(duì)齊方式：左對(duì)齊行高：28px首行標(biāo)題樣式：字符間距：5px空白處理：不換行文本修飾：帶下滑線大字體樣式：字號(hào)：16px顏色：紅色font字體樣式的縮寫形式演示案例4：文本屬

6、性背景屬性2-1背景屬性：background （縮寫形式）background-color（背景色 ）background-image（背景圖 ）background-repeat（背景圖重復(fù)方式 ）background-position（位置坐標(biāo)、偏移量）四類平鋪效果演示案例5：背景屬性背景屬性2-2div background:url(images/bg.jpg) no-repeat; background-position: -70px -60px背景出現(xiàn)的水平和垂直位置坐標(biāo)，實(shí)現(xiàn)各種拍偏移效果 設(shè)置背景圖片、不重復(fù)平鋪 各種偏移效果 演示案例6：背景的偏移量圖標(biāo)截取-背景偏移量技術(shù)背

7、景屬性的經(jīng)典應(yīng)用3-1 利用background-position的坐標(biāo)偏移量，從同一張背景圖中截取菜單圖標(biāo)背景屬性的經(jīng)典應(yīng)用3-2 1 .設(shè)置三個(gè)標(biāo)簽（如div）的背景為同一圖片背景2 .考慮“購(gòu)物車”、“幫助中心”圖標(biāo)的坐標(biāo)偏移量是多少？3 .考慮“登錄”圖標(biāo)的坐偏移量是多少？YXO(0,0)背景屬性的經(jīng)典應(yīng)用3-3 divwidth:80px;background:url(images/icon.gif) no-repeat; .helpbackground-position:-80px 0px; .loginwidth:40px;background-position:0px -20p

8、x; ; 購(gòu)物車 幫助中心 登錄 所有IDV標(biāo)簽設(shè)置為同一背景圖、等寬分別設(shè)置各圖標(biāo)的坐標(biāo)偏移量列表屬性2-1列表（li）常用屬性list-style （列表風(fēng)格）屬性值方式語(yǔ)法實(shí)現(xiàn)示例none無(wú)風(fēng)格list-style:none; 刷牙 洗臉disc實(shí)心圓（默認(rèn)類型）list-style:disc; 刷牙 洗臉circle空心圓list-style:circle; 刷牙 洗臉square實(shí)心正方形list-style:square; 刷牙 洗臉decimal數(shù)字（默認(rèn)類型）list-style:decimal1. 刷牙2. 洗臉list-style屬性規(guī)定的列表風(fēng)格列表屬性2-2列表屬性的典型應(yīng)用：導(dǎo)航菜單 li width:150px; color:red; font:28px 隸書; list-style:none; float:left; 購(gòu)物車 設(shè)置列表為none去掉圓點(diǎn)所有html標(biāo)簽都有的float浮動(dòng)屬性，此處用于橫向排列 演示案例7：列表屬性練習(xí)修飾貴美商品分類 需求說(shuō)明：根據(jù)提供的素材，修飾上一練習(xí)：貴美分類歡迎詞：字符間距5px并帶下劃線商品分類：帶背景、無(wú)列表符號(hào)、左浮動(dòng)頂邊距可以使用一個(gè)空ul，設(shè)置高度為15px完成時(shí)間：20分鐘練習(xí)制作圓角矩形 需求說(shuō)明：根據(jù)提供的背景素材實(shí)現(xiàn)完成時(shí)間：25分鐘頂部中部底部總結(jié) 什么是盒子模型 ？CSS樣式的設(shè)置