第 10 章其他標籤 資科系林偉川 走馬燈 <marquee scrollday=n1 scrollamount=n2 loop=n3 height=n4 width=n5 hspace=n6 vspace=n7 behavior=n8 direction=n9 bgcolor=n10 align=n11> </marquee> 2 1
走馬燈 n3 表示走馬燈重複次數 -1 INFINITE 表示無限次重複 n6 表示左右各留多少邊界 ( 相對於瀏覽器 ) n7 表示上下各留多少邊界 ( 相對於瀏覽器 ) n8 表示走馬燈移動方式 SCROLL SLIDE ALTERNATE n9 表示走馬燈移動方向 RIGHT LEFT UP DOWN 3 插入影像檔 <img dynsrc= 影像檔 height=n1 width=n2 start=n3 loop=n4 loopdelay=n5 controls> </marquee> 4 2
插入影像檔 n3 表示影像檔應如何開始播放 FILEOPEN MOUSEOVER n4 表示影像檔重複播放次數 -1 INFINITE 表示無限次重複 n5 表示播放兩次之間的時間間隔 有 MOUSEOVER 就要有 controls 5 樣式 STYLE 大型網站的維護, 內文皆要一致性 圖形 字型 表格大小 顏色一致性 CSS2(Cascading Style Level 2) http://www.w3.org/tr/rec-css2/ <style type= TEXT/CSS > 標籤 1 { 樣式屬性 : 屬性值 ; 樣式屬性 : 屬性值 ;} 標籤 2 { 樣式屬性 : 屬性值 ; 樣式屬性 : 屬性值 ;} </style> 6 3
指定樣式名稱 <style type= TEXT/CSS > #N1 { 樣式屬性 : 屬性值 ; 樣式屬性 : 屬性值 ;} #N2 { 樣式屬性 : 屬性值 ; 樣式屬性 : 屬性值 ;} </style> 其中 N1 N2 便是指定名稱 7 指定樣式範例 #REDcenter {COLOR:FF0000; FONT-SIZE:20; TEXT-ALIGN:CENTER} #PINKleft {COLOR:FF00FF; FONT-SIZE:28; TEXT-ALIGN:LEFT} #GREENleft {COLOR:008020; FONT-SIZE:28; TEXT-ALIGN:LEFT} #REDleft {COLOR:FF0080; FONT-SIZE:28; TEXT-ALIGN:LEFT} #BLUEleft {COLOR:0080FF; FONT-SIZE:28; TEXT-ALIGN:LEFT} </HEAD> <BODY> <H1 ID=REDcenter> 強力推出 </H1> <TABLE CELLPADDING=5 border> <TR><TD WIDTH=100><H2 ID=PINKleft> 精 </H2><H3 ID=GREENleft> 通 </H3> <H4 ID=REDleft> 系 </H4><H5 ID=BLUEleft> 列 </H5></TD> <TD WIDTH=300><H2 > 精通 HTML</H2><H3 > 精通 Visual Basic 6.0</H3> <H4 > 精通 Visual C++ 6.0</H4><H5 > 精通 Windos 2000</H5></TD> </TABLE> </BODY> 8 4
指定樣式類別名稱 <style type= TEXT/CSS > *.N1 { 樣式屬性 : 屬性值 ; 樣式屬性 : 屬性值 ;} *.N2 { 樣式屬性 : 屬性值 ; 樣式屬性 : 屬性值 ;} </style> 其中 N1 N2 便是類別名稱 在指定類別可以設定兩層類別樣式 9 類別範例 ( 可繼承 ) BODY {COLOR:0000FF; FONT-SIZE:10} CENTER.WORD {COLOR:INHERIT; FONT-SIZE:200%; FONT-WEIGHT:BOLD} U {color:ff0000; FONT-SIZE:250%; FONT-STYLE:ITALIC; LETTER-SPACING:15PT} IMG {HEIGHT:100; width:200} <BODY> <p align=center><u> 德明資訊 </U></P> <CENTER CLASS=WORD> 彩色風暴 <U> 德明資訊 </U> 彩色風暴 </CENTER><P> <CENTER> 歡迎光臨本網頁 <IMG SRC="sunset.GIF"> 歡迎光臨本網 </CENTER> </BODY> 10 5
類別範例 ( 可繼承 ) 說明 Center 繼承 Body 字型大小 10*200%=20pt U 被 Center 包起來, 所以 U 繼承 Center 20*250%=50pt 11 Table 樣式屬性 : 屬性值 BORDER:OUTSET 外框外凸 BORDER:INSET 外框內凹 12 6
樣式屬性 : 屬性值 文字 COLOR: FF0000 字型紅色 FONT-FAMILY: 標楷體, 字型 2, 字型名稱 FONT-WEIGHT: Bold Normal Bolder Lighter 100-900 字型粗細 FONT-STYLE: ITALIC Normal 字型樣式 TEXT-DECORATION: None Underline Overline Line- Through 字型效果 FONT-SIZE: 28 字型大小 LETTER-SPACING: Normal 15PT 字距 TEXT-ALIGN: Center Left Right Jistify 字型對齊 TEXT-IDENT: 15PT 首行縮排 LETTER-HEIGHT: Normal 15PT 行距 MARGIN-LEFT: 15PT 邊界 ( 段落文字與網頁左邊的距離 ) 13 圖形 HEIGHT:130 圖形高度 WIDTH:130 圖形寬度 樣式屬性 : 屬性值 14 7
樣式表的來源及其優先序 樣式定在某網頁中, 若有許多網頁要設定成相同的樣式表, 是否每一網頁都得鍵入相同的樣式設定? 只要建立一個 CSS 檔可解決此問題, 方法為插入 匯入或連結樣式 插入為優先序最高, 為在網頁標籤中直接設定, 例如 : <TABLE STYLE= BORDER:OUTSET 10pt; TEXT- ALIGN:CENTER > 15 樣式種類 優先序二 : 插入定義多個樣式為在網頁開頭自訂 <style type= TEXT/CSS > </style> 樣式 優先序三 : 匯入外部樣式為以 @IMPORT URL( CH10_15.CSS ); 設定 優先序四 : 連結 <LINK TYPE="TEXT/CSS" REL=stylesheet HREF="ch10_14.css"> 優先序以出現在最後為最高 除非於屬性值後加上! IMPORTANT, 則為最高 16 8
樣式種類 U {color:ffff00; FONT-SIZE:36; FONT-STYLE:NORMAL; LETTER-SPACING:2PT! IMPORTANT} @IMPORT URL("CH10_15.CSS");! IMPORTANT 使用時機為當使用外部樣式檔來統一定義樣式時, 在某一網頁中對外部樣式檔所定義的部份樣式做修改, 不用將整個樣式檔再重寫一次 製作樣式的好處為對瀏覽網頁者, 樣式對他而言是保密的 17 對部份樣式做變更 <SPAN ID= 指定名稱樣式 > </SPAN> CENTER.WORD {COLOR:FF0000; FONT-SIZE:12; FONT- WEIGHT:BOLD} U {color:ffff00; FONT-SIZE:250%; FONT-STYLE:BOLD; } #PINK {COLOR:FF00FF; FONT-SIZE:28; TEXT-ALIGN:LEFT} #GREEN {COLOR:008020; FONT-SIZE:28; TEXT-ALIGN:LEFT} #RED {COLOR:FF0080; FONT-SIZE:28; TEXT-ALIGN:LEFT} #BLUE {COLOR:0080FF; FONT-SIZE:28; TEXT-ALIGN:LEFT} <CENTER CLASS=WORD> <Span id=pink> 彩 </span><span id=green> 色 </span> <span id=red> 風 </span><span id=blue> 暴 </span></center> 18 9
對部份樣式做變更 <SPAN CLASS= 指定類別樣式 > </SPAN> CENTER.WORD {COLOR:FF0000; FONT-SIZE:12; FONT-WEIGHT:BOLD} U {color:ffff00; FONT-SIZE:250%; FONT-STYLE:BOLD; } #PINK {COLOR:FF00FF; FONT-SIZE:28; TEXT-ALIGN:LEFT} #GREEN {COLOR:008020; FONT-SIZE:28; TEXT-ALIGN:LEFT} #RED {COLOR:FF0080; FONT-SIZE:28; TEXT-ALIGN:LEFT} #BLUE {COLOR:0080FF; FONT-SIZE:28; TEXT-ALIGN:LEFT} <CENTER CLASS=WORD> <Span id=pink> 彩 </span><span id=green> 色 </span> <span id=red> 風 </span><span id=blue> 暴 </span></center> 19 清單樣式 UL {LIST-STYLE-POSITION:INSIDE} 下一列凸排 UL LI {LIST-STYLE-IMAGE:URL("SUNSET.GIF"); COLOR:FF0080; FONT-SIZE:16PT} 圖形式項目符號 OL {LIST-STYLE-POSITION:OUTSIDE} 下一列縮排 OL LI {LIST-STYLE-TYPE:DISC; COLOR:008020; FONT- SIZE:30PT} OL OL LI {LIST-STYLE-TYPE:UPPER-ROMAN; COLOR:0000FF; FONT-SIZE:20PT} 為大寫羅馬數字 20 10
背景樣式 BODY {BACKGROUND-IMAGE:URL( rain6.gif ); BACKGROUND-ATTACHMENT:FIXED } 整個網頁背景, 文字浮貼於背景上 TH {BACKGROUND-POSITION:CENTER CENTER; BACKGROUND-IMAGE:URL( SUNSET.GIF ); BACKGROUND-REPEAT:NO-REPEAT; FONT- SIZE:30PT; FONT-STYLE:ITALIC; COLOR:FFFFFF; HEIGHT:110; WIDTH:200 } 背景圖片只貼一張, 不要重複貼圖 TD.TR {BACKGROUND-POSITION:LEFT LEFT; BACKGROUND-COLOR:TRANSPARENT; FONT-WEIGHT:BOLD; FONT-SIZE:20PT; COLOR:0000FF; HEIGHT:100; WIDTH:200 } 21 背景樣式 TD.IM {BACKGROUND-POSITION:LEFT LEFT; 背景顏色為透明 BACKGROUND-IMAGE:URL("rain4.GIF"); BACKGROUND-REPEAT:REPEAT; FONT- WEIGHT:BOLD; FONT-SIZE:20PT; COLOR:0000FF; HEIGHT:100; WIDTH:200 } TABLE {FONT-FAMILY: 標楷體, 細明體, Arial} 22 11
圖片區塊邊界 IMG.PIC {MARGIN:10 0 0 20; HEIGHT:330} P.TITLE {MARGIN:-350 20 0 20; FONT-FAMILY: 標楷體, 細明體, Arial;FONT-SIZE:24PT; FONT- STYLE:ITALIC; COLOR:0000FF} P.SUBTITLE {MARGIN:-20 0 30 150; FONT-SIZE:8PT; COLOR:GREEN} P.CONTENT {MARGIN:30 0 0 40; FONT-FAMILY: 標楷體, 細明體, Arial; FONT-SIZE:14PT; FONT- WEIGHT:BOLD; COLOR:WHITE} 圖片 4 個參數 : 頂 右 底 左邊 圖片 3 個參數 : 頂 ( 右 = 左 ) 底邊圖片 2 個參數 :( 頂 = 底 ) ( 右 = 左 ) 邊 圖片 2 個參數 : ( 頂 = 底 = 右 = 左 ) 邊 23 12