高一电脑网页设计随堂作业.docVIP

高一電腦網頁設計隨堂作業 一、CSS串聯樣式表教學『選擇器運用』種類一：CLASS=名稱 ■選擇器文字運用範例1： style type=text/css!--.ABC{color : #cc6699 ; /*色彩*/font-size : 9pt /*大小*/}DEF{color : #336699 ; /*________色彩*/letter-spacing : 4pt;/*字距*/font-size : 9pt /*大小*/}--/style/headbodyp class=ABC這裡的文字是粉色9pt的大小/pp class=DEF這裡的文字是藍色9pt字的距離4pt的大小/p ■選擇器表單、表格運用範例2： style type=text/css!--.ABC{background-color: #edcbdc;/*色彩*/color : #ffffff ; /*色彩*/font-size : 9pt ;/*大小*/border: 1px solid #cc6699 ;/*大小及色彩*/}.DEF{background-color: #336699; /*色彩*/color: #ffffff; /*色彩*/font-size: 9pt; /*大小*/border: 1px solid #000000;/*大小及色彩*/}--/style/headbody input class=ABC type=text name=T1 size=20 value=這裡是表單 class=DEF width=182td這裡是表格/td//body 二、連結CSS外部檔案的使用方式 步驟一將下方語法複製到記事本，存到你的web中存檔時檔名輸入abc.css(就是附檔名格式為.css) body, table } A: ________ /*超連結*/ {color:#cc6699;/*文字色彩*/ text-decoration:none;/*刪除連結線*/ } A: ________ /*瀏覽過的超連結*/ {color:#cc6699;/*文字色彩*/ text-decoration:none;/*刪除連結線*/ } A: ________ /*按下連結*/ {color:#cc6699;/*文字色彩*/ text-decoration:none;/*刪除連結線*/ } A: ________ /*滑鼠移至連結*/ {color:#cc3300;/*文字色彩*/ border-top : 1px solid #000000 ; /*上框*/ border-bottom : 1px solid #000000 ; /*下框*/ } 步驟二在你要連結這css樣式所有網頁的標籤中加入這一行link rel=stylesheet type=text/css href=abc.css PS.若你將css存在book資料夾就必須加入css檔案的路徑，例如：link rel=stylesheet type=text/css href= 三、彩色捲軸(限IE瀏覽器5.5以上)style type=text/css !-- BODY{ scrollbar-face-color: #FFFFFF; /*捲軸顏色*/ scrollbar-highlight-color: #336699; /*捲軸左與上內邊框*/ scrollbar-shadow-color: #336699;/*捲軸右與下內邊框*/ scrollbar-3dlight-color: # FFFFFF; /*捲軸左與上外邊框*/ scrollbar-darkshadow-color: # FFFFFF;/*捲軸右與下外邊框*/ scrollbar-arrow-color: #336699; /**/ scrollbar-track-color: # FFFFFF /*__________*/ } -- /style 四、CSS串聯樣式表教學『文字屬性一覽』color : #999999 /*文字色彩*/font-family : 細明體 /*文字字型*/font-size : 9pt /*文字大小*/font-style:itelic /*文字斜體*/font-variant:small-caps/*小字體*/ letter-spacing : 1pt/*字間距離*/line-height : 200% /*設定行高*/font-weight:bold /*文字粗體*/vertical-align:sub /*下標字*/vertical-align:s