文字和超連結的設定
文字樣式和屬性 | 常用的設定 | 說明 | 示範 |
font-family: | 細明體'標楷體'time new roman'arial' serif'san-serif' Comic Sans MS' arial black |
文字字型 | {font-family:arial;} |
font-color: | 色碼'顏色的英文字 | 字體顏色 | {font-color:#ffffff;} |
font-style: | normal'italic | 字體樣式 | {font-style:normal;} |
font-weight: | normal'bold | 字體份量 | {font-weight:bold;} |
font-size: | xx-small'x-small'small'medium' large'x-large'xx-large large'smaller'長度直(10pt)或百分比值 |
字體大小 | {font-size:10px;} |
text-decoration: | none(連結無底線)'underline(連結加底線)' overline(連結加頂線) linethrough(連結加刪除線)'blink(連結閃爍) |
文字裝飾 | {text-decoration:none;} |
text-transfrom: | none(不做轉換)' capitalize(所有字母開頭轉成大寫) uppercase(所有字母轉成大寫)' lowercase(所有字母轉成小寫) |
文字轉換 | {text-transform:uppercase;} |
text-align: | left(靠左對齊)'right(靠右對齊)' justify(左右對齊)'center(置中) |
文字對齊 | {text-align:center;} |
line-indent: | pt(點)'in(英吋)'cm(公分)'px(像素)'%(百分比) | 設定文字縮排 | {text-indent:1cm;} |
letter-height: | pt'in'cm'px'% | 文字行列高度 | {line-height:10pt;} |
letter-spacing: | pt'in'cm'px'% | 文字間距 | {letter-spacing : 10pt;} |
文字超連結設定
a: {font-family:"Comic Sans MS";font-size: 10pt; color: 色碼;font-weight: bold} -->所有超連結
a:active {font-size: 10pt; color:色碼; text-decoration:none} -->執行中的連結
a:link {font-size: 10pt; color:色碼; text-decoration:none} -->正常的連結
a:visited{font-size: 10pt; color:色碼; text-decoration:none} -->參觀過的連結
a:hover{font-size:12pt;color:色碼;position:relative;top:2px;left:2px;} -->當滑鼠移到連結上時
。當滑鼠按到超連結的時候產生有背景的按鈕圖
a:hover{background-image:url('背景網址');}
。 當滑鼠按到超連結時浮現有顏色的dash外框並加入連結跳動
a:hover {border:2px 色碼 dashed;position:relative;top:2px;left:2px}
註:外框形狀可改為solid(實心線)、(dotted 點)、dashed (短線)、double (雙實線)。
。當滑鼠按到超連結時可出現向外浮出並有背景色的外框
a:hover {background-color:色碼;border: thin outset}
。因預設的文字超連結是有底線的,加入text-decoration: none這段語法可消除連結底線。
以下是來自凱哥CSS語法...
。「連結跳動語法 」(相片會跳動的語法,通常加在a:hover裡面)
a:hover{position:relative;top:2px;left:2px;} 當滑鼠移到上方時,物件會往左上方移動
註:left(左)、right(右)、top(上)、bottom(下),如要向右下移動則是設定right與bottom部分,2px是移動距離可自行更改。
。「集體宣告 」
如a:select至a:visited都要做相同的設定,則可把語法簡略成:
a:select,a:active,a:link,a:visited{ font-size: 10pt; color:色碼; text-decoration: none}