第02章html、javascript簡介1用和css開發(fā)站點tp05

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

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

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

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

5、體：宋體顏色：紅色字號：12px對齊：左對齊文本屬性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; 所有的默認樣式：字體、字號：宋體，12px對齊方式：左對齊行高：28px首行標題樣式：字符間距：5px空白處理：不換行文本修飾：帶下滑線大字體樣式：字號：16px顏色：紅色font字體樣式的縮寫形式演示案例4：文本屬

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

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

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