文字和超連結的設定

 文字樣式和屬性  常用的設定   說明    示範 
 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} 

 

 

阿玻 發表在 痞客邦 PIXNET 留言(0) 人氣()