|
用於較短文字的設定<span>
用於長文章段落設定<div>
基本架構：<div id="容器名稱">
<div class="容器類別名稱">
<div style="容器定義">
相關屬性：<span>
|
<div> </div> 區段標籤
<div style="font:XX XX XX XX XX XX">區段文字樣式的綜合設定 XX 設定方式如下說明
文字基本樣式：
1.normal:一般
2.italic:斜體
3.oblique:斜體
英文字大小寫：
1.normal:一般
2.smallcaps:大寫字
文字粗細：
1.normal:一般
2.bold:粗
3.bolder:更粗
4.lighter:細
5.直接設定100、100、200、300、400、500、600、700、800、900 間的粗細值
文字字級：
通常以點數來表示，如：10pt、20pt等等。
文字字高：
通常以點數來表示，如：12pt、24pt等等。
<div style="font-family:XX">設定區段字型
設定區段文字字型 , 可連續設定多個字型 , 若是瀏覽者沒有第一種字型 , 就會依序往下尋找
若是全部設定的字型都未安裝 , 則會以預設的字型顯示 , 一般預設新細明體
<div style="font-size:XX">設定區段文字的大小
設定大小有三種方式
A.絕對大小：
mm : 公釐
cm : 公分 , 1cm=10mm
in : 英吋 , 1in=2.54cm
pt : 點數 , 1pt=1/72in
pc : 1pc=12pt
px : 像素 , 在繪圖軟體中為 pix
B.相對大小：
em => 以預設字體間的相對大小
ex => 以倍數來顯示大小
% => 以預設字體的百分比來顯示表示大小
C.參數設定：
1.XX-small:超特小文字
2.x-small:特小文字
3.small:小文字
4.medium:中等文字
5.XX-large:超特大
6.x-large:特大larg:大
7.samller:比預設文字小一級
8.larger : 比預設文字大一級
<div style="line-height:XX">設定區段行高
設定大小有二種方式
A.絕對大小：
請參考上面絕對大小
B.相對大小：
請參考上面相對大小
<div style="font-weight:XX">設定區段文字的粗細
參數：
請參考上面粗細設定
粗細值：
直接輸入100-900的粗細值，其中400為正常粗細的預設值。
<div style="font-style:XX">設定區段文字的樣式
樣式參數：
1.normal:將文字設為一般樣式。(預設值)
2.italic:將文字樣式設為協體字。
3.oblique:將文字樣式設為傾斜字體，與 italic 幾乎一樣。
4.initial:將文字樣式設為預設值。
5.inherit:繼承自父層的 font-style 樣式設定，非所有瀏覽器支援，不建議使用。
<div style="font-variant:XX">設定段落英文字大寫
參數：
1.normal:依輸入顯示。
2.small-caps:所有字母大寫。
3.inherit:繼承父層屬性，不過不建議使用，因為 IE 瀏覽器目前的版本並不支援此屬性值。
<div style="text-decoration:XX">設定區段文字效果
參數：
1.none:無效果
2.underline:文字底線效果
3.overline:在文字上方畫線
4.line-through:刪除線的效果
5.blink:閃爍效果，僅在Netscape適用
<div style="text-transform:XX">設定區段英文單字的大小寫
參數：
1.none:無效果
2.uppercase:所有的字母轉換成大寫
3.lowercase:所有的字母轉換成小寫
4.capitalize:將單字的首字字母轉成大寫
<div align="XX">設定區段內文字的對齊方式
對齊參數：
1.left:向左對齊
2.center:置中對齊，效果如同<CENTER>….</CENTER>
3.light:向右對齊
<div style="text-indent:XX">設定區段的縮排
設定大小有二種方式
A.絕對大小：
請參考上面絕對大小
B.相對大小：
請參考上面相對大小
<div style="letter-spacing:XX">設定區段文字的間距
設定大小有二種方式
A.絕對大小：
請參考上面絕對大小
B.相對大小：
請參考上面相對大小
<div style="word-spacing:XX">設定區段內英文單字間的間距
設定大小有二種方式
A.絕對大小：
請參考上面絕對大小
B.相對大小：
請參考上面相對大小
<div style="width:XX">控制區段文字的顯示寬度
設定大小有二種方式
A.絕對大小：
請參考上面絕對大小
B.相對大小：
請參考上面相對大小
<div style="height:XX">控制區段文字的高度
設定大小有二種方式
A.絕對大小：
請參考上面絕對大小
B.相對大小：
請參考上面相對大小
<div style="overflow:XX">設定區段的捲軸
參數：
1.visable:顯示所有內容而不理會段落大小設定
2.hidden:超出段落大小設定的內容將不顯示出來
3.scroll:如果內容超出段落大小設定，將出現捲軸，並滾動顯示
4.auto:自動改變段落大小，以適應內容顯示
<div style="color:XX">設定區段文字的色彩
有二種方式設定顏色
A.色碼表示
B.顏色語法
<div style="background:xx xx xx xx xx xx">區段背景的綜合設定 XX 設定方式如下說明
色彩 : 設定區段背景顏色
插入的圖檔 : 設定作為背景圖片的路徑
圖檔排列 : 指定背景圖片的排列方式
圖檔固定 : 指定北背景片的固定方式
圖檔位置 : 指定北背景片的水平或基本位置
<div style="background-color:XX">設定區段內的背景色彩
有二種方式設定顏色
A.色碼表示
B.顏色語法
<div style="background-image:XX">使用圖片作為區段的背景
圖檔路徑表示方式有兩種
相對路徑:
標示法通常為 "/資料夾名稱/檔案名稱"
要使用上一層檔案 , 則使用 "../檔案名稱"
絕對路徑:
標示法通常試伺服器上的存放位置 , 例如 : "www.hcvs.kh.edu.tw/teacher/benme/image/bk4.jpg"
路徑設定往往是網頁設計初學者之殺手 , 很多初學者路徑觀念若不清楚
常常會看不到自己精心設計的圖片. 後面的超連結也會連帶受影響 , 初學者不可大意略過
<div style="background-repeat:XX">設定區段中的背景圖片排列方式
參數：
1.repeat:填滿整個網頁
2.repeat-X:單行水平排列
3.repeat-Y:單行垂直排列
4.no-repeat:單一圖片效果
<div style="background-ATTACHMENT:XX">設定區段背景圖片的浮水印效果
參數：
1.scroll:讓背景圖片與網頁內容同時滾動。
2.fixed:套用浮水印效果，背景圖片不隨著內容滾動。
<div style="background-POSITION:XX">設定區段內背景圖片的位置
水平參數：
1.left:靠左對齊
2.center:置中對齊
3.light:靠右對齊
水平參數：
1.top:向上對齊
2.center:置中對齊
3.bottom:向下對齊
距離設定有二種方式
A.絕對距離：
請參考上面絕對大小
B.相對距離：
請參考上面相對大小
<div style="margin:XX XX XX XX">設定區段四邊與視窗的距離
有二種設定方式
A.絕對距離：
請參考上面絕對大小
B.相對距離：
請參考上面相對大小
<div style="PADDING:XX XX XX XX">設定區段文字與邊框的距離
有二種設定方式
A.絕對距離：
請參考上面絕對大小
B.相對距離：
請參考上面相對大小
<div style="border:XX XX XX">設定區段邊框的樣式
有三種設定方式
A.絕對距離：
請參考上面絕對大小
B.相對距離：
請參考上面相對大小
C.參數語法：
thin：細邊框
medium：中等邊框
thick：粗邊框
有二種方式設定顏色
A.色碼表示
B.顏色語法
樣式參數
語法 IE Netscape
none 無效果 無效果
hidden 立體樣式1 無效果
dotted 實線 虛線樣式1
dashed 無效果 虛線2
solid 無效果 實線
double 無效果 雙實線
groove 立體樣式2 立體樣式3
ridge 立體樣式4 立體樣式5
inset 立體樣式6 立體樣式7
<div style="position:XX left:XX;top:XX">設定區段的位置
position 使用定位基準 , left 及 top 使用距離設定
定位基準：
1.static:自動調整區段的位置
2.absolute:指定絕對位置
3.relative:指定相對位置
距離有二種設定方式
A.絕對距離：
請參考上面絕對大小
B.相對距離：
請參考上面相對大小
<div style="visibility:XX">設定區段內容的顯示與隱藏
參數：
1.hidden:隱藏
2.visible:不隱藏
<div style="position:absolute;filter:alpha(XX)">設定區段的絕對位置及透明度
指令名稱：
1.opacity:設定開始點的透明度，代表完全透明；100代表完全不透明。
2.finishopacity:終結點的透明度，範圍也是0到100。
3.style:指定了透明區域的形狀，0全部、1線形、2橢圓形、3長方形。
4.startX、startY：適用範圍的開始X和Y座標。
5.finishX、finishY：適用範圍的終點X和Y座標。
範例：指令範例、實例
|