2008/11/12

color

color

設定元素的前景色,也就是文字的顏色。可設定的值有:

  1. <color>:設定顏色
  2. inherit:繼承父元素的特徵值。
  • 風格用法:

    <p style='color:red'>子曰:學而時習之,不亦說乎?</p>
    <p style='color:green'>子曰:有朋自遠方來,不亦樂乎?</p>
    <p style='color:blue'>子曰:人不知而不慍,不亦君子乎?</p>

  • 執行結果:

    子曰:學而時習之,不亦說乎?

    子曰:有朋自遠方來,不亦樂乎?

    子曰:人不知而不慍,不亦君子乎?

:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

  • 風格用法:

    <style type='text/css'>
    .hvr {width:200px;
          height:100px;
          border:solid 1px red;
         }
    .hvr:hover  {color:red;}
    .hvr:active {color:blue;}
    </style>
    <div class=hvr>
    射擊遊戲, 好玩遊戲, 賽車遊戲, 小遊戲. 
    </div>

  • 執行結果:

    射擊遊戲, 好玩遊戲, 賽車遊戲, 小遊戲.

javascript 應用。可以用 style 物件 的特徵 color 作動態變化。此範例使用到 toggleCSS()

  • 風格用法:

    <div id='test' style='position:relative; background:white; width:200px; height:150px'>
    射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
    </div>
    <script type='text/javascript'>
    function toggleCSS(id, pty, v1, v2, ms)
    {
      var os=document.getElementById(id).style;
      os[pty]= (os[pty] == v1 ) ? v2 : v1;
      setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms);
    }
    toggleCSS("test", "color", "red", "blue", 500);
    </script>

  • 執行結果:

    射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.