CSS:Aマークスタイル

参考資料
1 CSSを巧みに利用してカスタマイズしたページの下線スタイル
http://www.west263.com/info/html/wangyezhizuo/css/20080225/40290.html
2 div cssアンダースコアtext-decoration
http://www.divcss5.com/jiqiao/j77.html
3単調なウェブページのハイパーリンクを拒否します。多彩な下線を持っています。
http://www.wqxz.com/article/56/Article16486_1.httm
一CSSコード
1ウェブページ上のすべてのテキストリンクはブラウザに表示されている時に下線がないので、マウスをリンク先に向けたら下線が出てきます。

<style type="text/css">
<!--
a { color: #339966; text-decoration: none}
a:hover { color: #FF3300; text-decoration: underline}
-->
</style>

関連説明は以下の通りです
初期化ページAマークの色付け(カラー:铇0000,アンダースコア:text-decoration:none)
a[/color][/url]text-decoration:none]
マウスをリンク先に向けると、アンダーラインが現れます。text-decoration:undeline
a:hover{color=0000 ff}text-decoration:undeline)
2クリックされていない時はハイパーリンクのテキストに下線がなく、青と表示されます。マウスがリンク上に下線がある場合、リンクテキストは赤色で表示されます。リンクをクリックすると、リンクに下線がなく、緑と表示されます。

<style type="text/css">
<!--
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red} 
a:visited { text-decoration: none;color: green}
-->
</style>

関連説明は以下の通りです
text-decorationパラメータ:
none：飾りなし
blink：点滅
アンダーライン：アンダーライン
line-through:縦線
overline：上線
<！--正常に訪問されていないリンクを指します。テキストに下線がなく、青色で表示されます。
a:link{text-decoration:none}カラー:ブルー
<！--ポイントのリンクを指します。
a:active{text-decoration:blink}
<！--リンク上のマウスのことを指します。リンクテキストは赤色で表示されます。
a:hover{text-decoration:undeline;カラー:red)
<！--すでに訪問したリンクを指します。リンクに下線がなく、緑色と表示されます。
a:visited{text-decoration:none}カラー:グリーン}
3マルチカラーの設定

<style type="text/css">
<!--
    a#example1a {
	　　  text-decoration: none;
	　　  background: url(images/diagonal.gif) repeat-x 100% 100%;
	　　  white-space: nowrap;
	　　  padding-bottom: 2px;
　　  }

　　a#example1b {
	　　  text-decoration: none;
	　　  white-space: nowrap;
	　　  padding-bottom: 2px;
　　  }

　　a#example1b:hover {
　　 	background: url(images/diagonal.gif) repeat-x 100% 100%;
　　  }

　　a#example2a {
	　　  text-decoration: none;
	　　  background: url(images/flower.gif) repeat-x 100% 100%;
	　　  white-space: nowrap;
	　　  padding-bottom: 10px;
　　  }

　　a#example2b {
	　　  text-decoration: none;
	　　  white-space: nowrap;
	　　  padding-bottom: 10px;
　　  }

　　a#example2b:hover {
　　  background: url(images/flower.gif) repeat-x 100% 100%;
　　  }
-->
</style>

<p>  ：</p>
<p> <a href="#" id="example1a">        </a> 
<a href="#" id="example1b">           </a>。</p>
<p> <a href="#" id="example2a">       </a> 
<a href="#" id="example2b">             </a>。</p>

4ローカルスタイルを定義する

<style type="text/css">
<!--

/*  */
a{text-decoration:underline;} /*    */
a:hover{text-decoration:none;} /*       */

/*   */
a.line_none{text-decoration:none;color:#cc000;} /*line_none           */
a.line_none:hover{text-decoration:underline;} /*         */
-->
</style>

適用例:

<a href="#">        ，      </a>
</br></br>
<a href="#" class="line_none">         ，      </a>
</br></br></br></br>
<div class="none">      ，     </div>
<div class="line">      ，    </div>