文字的特效

上一頁        CSS首頁        下一頁

 

文字屬性的設定
文字特效的應用


文字屬性的設定

  • 所謂預設用法,是指如不使用此指令,會出現的樣式, 所謂 normal (標準) 用法,是指如果在一開始時設定為特效,則使用此指令,可還原成預設的樣式。
  • 在 CSS 內可使用的長度單位有 pt (point)、px (pixel)、pc (pica, 1/6 in)、cm (centimeter)、 mm (milimeter)、% (percentage)。
  • 顏色表示法有顏色代碼=#RRGGBB、顏色英文名稱、顏色比重 RGB(%,%,%)、顏色數碼 RGB(#,#,#)。
  • 如果採用字型為使用者所無,則會被改成該電腦之預設字型。為防止此現象,可採用多次宣告如下:
    .text{font-family:Verdana, Arial, Helvetica, sans-serif}
    亦即先採用 Verdana,如無則採用 Arial;再無,則採用 Helvetica;再無,則為 sans-self。
  • 用途 CSS語法 屬性說明
    設定文字底色 background-color:顏色代碼 參考顏色代碼表
    #FFFFFF=預設文字底色
    設定文字顏色 color:顏色代碼 參考顏色代碼表
    #000000=預設文字顏色
    設定字型 font-family:字型代碼 新細明體=預設字型
    設定字體大小,單位為 px 或 pt font-size:像素或點數 12 pt=預設字體
    設定字型樣式 font-style:italic
    font-style:normal
    italic=斜體字
    nornal=標準字
    設定特別字型樣式 font-variant:small-caps
    font-style:normal
    samll-caps=小號的全部大寫字樣
    nornal=標準字
    設定字體粗細 font-weight:bold
    font-weight:bolder
    font-weight:lighter
    font-weight:像素(px)
    font-weight:normal
    bold=粗體
    bolder=超粗體
    lighter=細體
    400=預設值
    nornal=標準字
    設定文字間距 letter-spacing:像素(px) 0=預設值
    nornal=標準間距
    設定行距 line-height:百分比或行數 100%=預設值
    設定文字對齊 text-align:left
    text-align:center
    text-align:right
    text-align:justify
    left=靠左對齊(預設值)
    right=靠右對齊
    center=置中對齊
    justify=左右對齊
    設定文字花樣 text-decoration:underline
    text-decoration:line-through
    text-decoration:overline
    text-decoration:blink
    text-decoration:none
    underline=加底線
    line-through=加刪除線
    overline=加頂線
    blink(閃爍)
    none(無特殊花樣)
    設定首行縮排 text-indent:像素(px)或點數(pt) 0=預設值

      back to top


    文字特效的應用

    用途 HTML語法 實例
    超連結文字不加底線 <a href=超連結位址
         style="text-decoration:none">
    超連結文字或圖片
    </a>
    不加底線的超連結

    全頁超連結不加底線
    超連結文字設定 <head>
    <style>
    A:link{超連結文字設定}
    A:visited{已瀏覽超連結文字設定}
    A:hover{滑鼠正經過的超連結文字設定}
    A:active{鄭在瀏覽的超連結文字設定
    </style>
    </head>
    不加底線的超連結

    全頁超連結不加底線
    文字直書 <span style="writing-mode:tb-rl">
    文字
    </span>
    直書文字
    字加背影 <span style="filter:glow(color=背影顏色);
        position:absolute">
    加背影文字
    </span>
     
    文字加陰影 <span style="filter:dropshadow
        (color=陰影顏色,offx=橫向偏移,
        offy=縱向偏移,positive=true);
        width=寬度;height=高度">
    陰影文字
    </span>
     
    文字加光影 <span style="filter:shadow
       (color=光影顏色,direction=光影角度);
        width=寬度;height=高度">
    光影文字
    </span>
     
    波浪文字 <span style="wave
       (freg=2,lightstrength=30,phase=0,strength=3);
       width=寬度;height=高度">
    波浪文字
    </span>
     

      back to top


    本網頁首度於 02/10/2003問世,並於 10/02/2003更新
    建議使用寬頻網路及 800 ´ 600 之解析度來瀏覽本網站
    瀏覽之軟體以 Microsoft Internet Explorer 5.0 版或更高版本為佳
    © 2003 版權為柴惠敏所有,如需引用請先告知