1、CSS層疊樣式表1本章目標(biāo)CSS作用CSS定義規(guī)則選擇器分類和引用常用樣式屬性2CSS層疊樣式表 將格式和結(jié)構(gòu)分離 可以方便的更新網(wǎng)頁格式和外觀 強(qiáng)大的控制頁面格式和布局的功能 制作美觀的界面 Cascading Style Sheet3樣式表規(guī)則樣式規(guī)則樣式表規(guī)則用法：RuleSelector property:value;property: value; . 規(guī)則選擇器聲明屬性屬性值4樣式表選擇器HTML選擇器類選擇器ID選擇器5 樣式表的使用Pfont-style:italic; font-weight:bold; color:limegreen .buttoncolor:blue;fo

2、nt-size:18 #controlcolor:red樣式一 樣式三樣式二Html選擇器類選擇器ID選擇器6HTML和類選擇器混用 New Document P.firstfont-size:18px;color:red;font-family:楷體_gb2312 P.secondfont-size:25px;color:blue;font-family:隸書 P.thirdfont-size:18px;color:yellow第一個類型第二個類型第三個類型7在HTML中引用樣式表Style元素Style屬性Link元素8使用Style元素STYLE元素應(yīng)插入文檔的元素部分中，所有規(guī)則都放置

3、在開始標(biāo)記和結(jié)束標(biāo)記之間。顯示頁面時，只有嵌入了STYLE元素的文檔會受到影響 H1color:maroon; Pcolor:hotpink; font-family:Arial; import url(“sheet1.css”) 導(dǎo)入外部樣式表9使用Style屬性內(nèi)嵌樣式表style屬性用于將樣式表應(yīng)用于單個元素。直接將在HTML標(biāo)記里加入style參數(shù)，而style參數(shù)的內(nèi)容就是CSS的屬性和值。樣式表可以只有一條規(guī)則。使用Style屬性，可以繞過Style元素，而將聲明直接放入單個的開始標(biāo)記中。 設(shè)置屬性本段應(yīng)用了內(nèi)嵌樣式本段以默認(rèn)樣式顯示。您能發(fā)現(xiàn)本行中的不同之處嗎？10使用Link元

4、素鏈入外部樣式表鏈入外部樣式表是把樣式表保存為一個樣式表文件，然后在頁面中用標(biāo)記鏈接到這個樣式表文件，這個標(biāo)記必須放到頁面的區(qū)內(nèi) 設(shè)置屬性。11樣式表屬性類型CSS屬性值字體屬性font-familyArial，serif，宋體font-sizeSmall，medium，large或直接指定字體大小font-stylenormal, italicfont-weightnormal, bold, lighter, 100, 200文本屬性text-alignleft, right, center, justifytext-indent 度量text-decorationnone, blink,

5、underline, overline, line-throughtext-transformnone, capitalize, uppercase, lowercasevertical-alignBaseline, super, sub, top, text-top, middle-bottom, text-bottomword-spacing 度量letter-spacing 度量line-height 行距(數(shù)字1、度量單位10px、比例50%)12樣式表屬性13樣式表屬性類型CSS屬性值定位屬性top 度量width 度量或%height 度量或%left 度量鼠標(biāo)屬性cursor a

6、uto crosshair default move hand text wait help顏色屬性background 簡寫Color #RRGGBB，顏色名稱background-color #RRGGBB，顏色名稱，transparentbackground-image urlbackground-repeat repeat, repeat-x, repeat-y, no-repeat14度量單位說明15實(shí)例演示超鏈接A FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 22px; TEXT-DECORATION: noneA:hover FON

7、T-SIZE: 12px; COLOR: #ff0000; LINE-HEIGHT: 22px; TEXT-DECORATION: underlineA.firstfont-size:12px;text-decoration:noneA.first:hoverfont-size:18px;text-decoration:noneA:visited超鏈接被訪問后的樣式A:Active超鏈接激活時的樣式16CSS控制文本定位P.lefttext-align:left;line-height:2P.righttext-align:right;text-transform:upperPtext-indent:1px; letter-spacing:2px.17CSS控制表格 表格加邊框 tableborder-style:inset;border-width:5px;border-color:red 或者tableborder:”5px inset red”單元格格式 tdtext-align:center;line-height:2;vertical-align:top;letter-spacing:2px單元格邊框?qū)傩?td.border1bor