【正文】 ubody里所有的元素都可以定義 “類 ”。216。13Inter與網頁設計 CSS樣式表樣式表 ?二、 CSS與 HTML文檔的結合方法252。在 HTML標簽中直接加入樣式表的定義– 若在個別標簽需要作樣式調整，可使用這種方式。– 分級屬性 P128： 各組件的字距、行距、縮排等。Font： 上述樣式屬性的綜合表示法。Textalign： 指定文字的對齊方式。OL OL OL { liststyletype: lowerroman } /* i ii iii iv v etc. */23Inter與網頁設計 CSS樣式表樣式表 ?鼠標屬性252。定義一個類選擇符，樣式為：– 文字大小： 12pt。252。在網頁中導入、鏈入樣式表文件33Inter與網頁設計 CSS樣式表樣式表 ?五、 CSS樣式在網頁中的應用字體、大小、粗細、行高、顏色、修飾等背景顏色、圖像、重復、水平位置等字間距、對齊方式、縮進等寬、高、填充、邊界等邊框的樣式、寬度和顏色等設置項目符號和編號。應用濾鏡制作常見特效– 文字特效– 鼠標特效– 圖像特效252。}40Inter與網頁設計 CSS樣式表樣式表 ?（ 3） DropShadow——讓對象有一個 下落式的陰影 √ CSS的濾鏡屬性 （ filter） 的應用p {filter:dropshadow(color=ff0080,offX=2,offY=2,positive=0)。 – lightstrength： 對于波紋增強光影的效果，其取值范圍為從 0到100。– light可用的方法有： ?MoveLight　　 移動光源 ?Changcolor　　 改變光的顏色 ?AddAmbient　　 加入包圍的光源 ?AddPoint　　　　 加入點光源 ?Clear　　　　 清除所有的光源 ?AddCone　　　　 加入錐形光源 ?Changstrength 改變光源的強度 CSS的濾鏡屬性 （ filter） 的應用47Inter與網頁設計 CSS樣式表樣式表 ?（ 11） Gray——把一個彩色的圖象變成 灰色調圖象 – 作用 ：該濾鏡能夠使一張彩色的圖片轉變?yōu)榛疑{圖象，一般適用于圖象對象。在網頁中需要實現(xiàn)淡隱的對象，可插入 div標簽，并在 id欄中輸入名字，如 div1：50Inter與網頁設計 CSS樣式表樣式表 ?252。若要實現(xiàn)淡出，只要再加一個函數(shù)： fadeout(obj)即可而后在設計視圖中添加文字，并將該文字的超鏈接設置成javascript:fadeout(div1)56Inter與網頁設計 CSS樣式表樣式表 ?revealTrans： 525 script language=JavaScript type=text/javascriptmyText=new Array(4)。}/script57Inter與網頁設計 CSS樣式表樣式表 ?revealTrans： 526 58Inter與網頁設計 CSS樣式表樣式表 ?應用濾鏡制作常見特效252。 backgroundcolor: ffffff。height:200px。填充、邊框和空白邊都可以設置，默認值均為 0252。}style2 { bordercolor: blue。} style1 { bordertopwidth :20px?？蓞⒖迹?75Inter與網頁設計 CSS樣式表樣式表 ?普通流定位機制 528 252。可以把某個元素精確的定位在某個地方 – 絕對定位使元素的位置與文檔流無關，因此不占據(jù)普通流中的空間，普通文檔流中其他元素的布局就像絕對定位的元素不存在時一樣– 絕對定位的元素的位置是相對于最近的父元素 而言的固定定位252。浮動框不再處于普通文檔流中，會覆蓋其它的塊框；而浮動框旁的行框則會被縮短，使其環(huán)繞浮動框252。 padding: 10px 0 10px 10px。 }style2 { position:relative。Ex: style type=“text/css”style1 { visibility:visible }style1 { visibility:hidden }/stylebodydiv style=“float:left”……/divstrong style=display:block。 margin: 0 auto。三列浮動布局– Ex:– content div包含了兩個 divclear:both footbrandingmainNav contentdiv id=“wrapper”div id=“branding”……/divdiv id=“content”……/divdiv id=“mainNav”……/divdiv id=“footer”……/div/divdiv id=“content”div id=“mainContent”……/divdiv id=“secondaryContent”……/div/div88Inter與網頁設計 CSS樣式表樣式表 ?流式布局和彈性布局252。a:link注意選擇器的順序：– a:link, a:visited, a:hover, a:active– Ex:比較兩種寫法， style type=“text/css”a:link, a:visited {textdecoration: none。 background: url(images/) repeatx left bottom。}li a:visited { backgroundposition: right top。屬性名： cursor– 用來設定，當鼠標停留在元素上時光標的形狀cursor:屬性值– 允許的屬性值有：鼠標光標設定252。swresize: 向左下的箭頭252。wait: 程序執(zhí)行等待的光標，漏斗形狀?另外，也可以使用一個光標文件顯示光標形狀cursor:url()?設置外部光標文件，注意文件格式必須為： .cur 或 .aniEx: 95Inter與網頁設計 CSS樣式表樣式表 ?252。hand: 手的形狀252。sresize: 向下的箭頭252。 position:absolute。已訪問過的鏈接樣式– 創(chuàng)建一個背景圖像，同時包含兩種圖樣– 根據(jù)鏈接狀態(tài)改變背景圖放置的位置，顯示出兩種不同的效果– Ex: 252。}/style由于層疊， :link,:visited樣式覆蓋 :hover,:active樣式，鼠標停留和激活樣式就不起作用了 92Inter與網頁設計 CSS樣式表樣式表 ?鏈接特效 532。a:visited前面的例子中，導航和次要內容區(qū)都有一個淺灰色的背景，但如果正文比較長，導航和次要內容區(qū)域沒有擴展到整個內容高度，它們的背景也不會拉長90Inter與網頁設計 CSS樣式表樣式表 ?偽列 (Faux)252。 width: 720px。使用 CSS布局技術可以完成頁面整體布局，實現(xiàn)各種布局樣式252。display－ 設置對象顯示方式display : block | none | inline | ……– 可以各種不同的方式顯示對象252。 padding: 10px 10px 10px 0。}.news { backgroundcolor:eaeaea。left:20px。使用相對定位時，元素仍然占據(jù)原來的空間，因此被看作普通流定位模型的一個特殊情況252。定位與布局密切相關252。也可以使用 bordertop， borderright， borderbottom， borderleft四個屬性一次性地設置各個邊的寬度、樣式和顏色– 這四個屬性使用方法相同，如：bordertop : bordertopwidth bordertopstyle bordertopcolor252。PADDING－ 設置填充的寬度– 使用方法與 margin一樣style type=“text/css”style1 { paddingtop:100px }style2 { paddingleft:100px }style3 { paddingright:10% }style4 { paddingbottom:100pt }style5 { padding:100pt }/styleBox Model71Inter與網頁設計 CSS樣式表樣式表 ?252。要掌握的三個最重要的 CSS概念是：– 框模型 （ box model， 或盒模型）– 定位 （ position）– 浮動 （ float）252。background復合屬性– 和 font一樣，可以使用復合屬性一次性設置與背景相關的所有屬性值– background的屬性列表的順序依次為：顏色、圖像、重復、依附、位置– 中間用空格分開，如果某個屬性值為空，則用默認值代替style type=“text/css”.style1 { background: lightgrey url() repeaty fixed 10% 20% }/style64Inter與網頁設計 CSS樣式表樣式表 ?CSS與網頁結合應用 —— 背景的應用252。（ 1）文字特效– 用 glow濾鏡可以做空心字 ，方法是將 字體顏色設置為背景色 ，再將 glow濾鏡的 strength的值設置為 1或 2即可。} [0].Apply()。52Inter與網頁設計 CSS樣式表樣式表 ?252。 （ 13） XRay——讓對象 輪廓突出顯示– 作用 ：該濾鏡能夠讓對象反映出它的輪廓并把這些輪廓加亮顯示，一般適用于圖象對象。– 例如： CSS的濾鏡屬性 （ filter） 的應用p {filter:shadow(color=00ff00,direction=45)； }45Inter與網頁設計 CSS樣式表樣式表 ?（ 9） Mask——利用一個對象在另一個對象上產生圖像的 遮罩 √– 作用：該濾鏡能夠利用一個 HTML對象在另一個對象上產生圖像的遮罩 ，可以為對象建立一個 覆蓋于表面的膜 ，其效果就象戴者有色眼鏡看物體