2013/01/09

first-line

:AFTER | :BEFORE | ::FIRST-LETTER | ::FIRST-LINE | ::SELECTION
::FIRST-LINE

對一小段文字的第一行,設計獨特的風格。只能用在區塊元素。

  • 風格用法:

    <style type='text/css'>
    .cls3  { width:250px; text-align:justify }
    .cls3::first-line {color:red;
                       text-transform:uppercase;
                      }
    </style>
    <p class='cls3'>
    Not ask what your country can do for you,
    ask what you can do for your country.</p>

  • 執行結果:

    Not ask what your country can do for you, ask what you can do for your country.

改寫 ANCHOR,將 :hover, :active 狀態傳給子元素;如此在 IE6 中,也可以使用 :hover, :active 於一般元素。

  • 風格用法:

    <style type='text/css'>
    .akr {display:block;
          width:200px;
          color:white;
         }
    .akr:link
         {text-decoration:none;
          color:white;
         }
    .akr:visited {text-decoration:none}
    .akr:hover   {background:black; color:white}
    .akr:hover  P {border:solid 1px red}
    .akr:hover  P:first-letter {font-size:2em; color:blue}
    .akr:active P {border:solid 4px green}
    .akr:active P:first-line   {font-size:2em; color:red}
    </style>
    <a href='javascript:void(0)' class=akr>
    <p>Not ask what your country can do for you,
    ask what you can do for your country.</p>
    </a>

  • 執行結果:

    Not ask what your country can do for you, ask what you can do for your country.

  • 上例,在 Firefox 中 first-letter, first-line 失敗;IE6, Safari, Chrome 成功。
  • 移到部落格後,在 IE6 出現 :link 的字不是白色的情形。
::SELECTION

使用者用滑鼠選一段文字,會應用此設計風格。Firefox 3.5 要用 ::-moz-selection;Safari, Chrome 要用 ::selection。此項可使用的特徵有 color, background, background-color;background-image 及其它特徵會被忽略。此項可能會從 CSS3 的草稿中拿掉。

  • 風格用法:

    <style type='text/css'>
    .sel::selection
        {color:blue;
         background:red;
         font-size:200%;
        }
    .sel::-moz-selection
        {color:blue;
         background:red;
         font-size:200%;
        }
    </style>
    <p class='sel'>
    請用滑鼠選一段文字:射擊遊戲,賽車遊戲,益智遊戲,好玩遊戲,武打遊戲。</p>

  • 執行結果:

    請用滑鼠選一段文字:射擊遊戲,賽車遊戲,益智遊戲,好玩遊戲,武打遊戲。

  • IE6 無此項;Firefox, Safari, Chrome 皆成功。
  • 上例中的 font-size 被忽略。