2009-08-28 23 views
1

以下は、リンク、訪問済み、ホバー、アクティブの4つの状態のテキストリンクのCSSです。テキストリンクの質問の基本的なCSS?

私は持っているすべてのタイプのリンククラスに対してこのCSSコードを実行する必要がありますか、クラスの中には外観を変更しないものもあります。 (リンク、訪問、ホバー、アクティブ)ホバーとリンクのためにテキストリンクの外観が変わった場合、それらの2つのクラスだけが必要ですか、それとも4つすべてをまだ使用する必要がありますか?

<style> 
a.comment_mod:link { 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #003366; 
    text-decoration: none; 
} 
a.comment_mod:visited { 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #003366; 
    text-decoration: none; 
} 
a.comment_mod:hover { 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #000000; 
    border-bottom:1px dotted #000000; 
} 
a.comment_mod:active { 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #003366; 
    text-decoration: none; 
} 
</style> 

答えて

3

:link:visitedの間に変化がない場合は、後者を省略することができます。 :hover:activeが同じ場合も同じです。それからちょうど:linkでcommeonパーツを定義し、:hoverに変更したいものをオーバーライドします。

a.comment_mod:link { 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #003366; 
    text-decoration: none; 
} 

a.comment_mod:hover { 
    color: #000000; 
    border-bottom:1px dotted #000000; 
} 

編集:あなたは(マウスボタンがリンク上でダウンしているときのスタイルです):activeが見えるようにしたい場合:linkを入力し、両方を同時に指定します。指定しないと、:hoverのようになります。だからあなたのオリジナルのスタイルと一致するように:あなたの状態の全てが共通のスタイリングを共有する場合の状態からスタイリングを変更した場合

a.comment_mod:link, 
a.comment_mod:active 
{ 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #003366; 
    text-decoration: none; 
} 

a.comment_mod:hover { 
    color: #000000; 
    border-bottom:1px dotted #000000; 
} 
1

あなたは使用することができます。

a.comment_mod { 
    ... defaults ... 
} 

a.comment_mod:active { 
    ... only things that change ... 
} 
2

まずオフを、あなたはちょうどそう

a.comment_mod 
{ 
font-family: arial; 
font-size: 14px; 
font-weight: bold; 
text-decoration: none; 
} 

のようにそのスタイルを宣言することができますあなたはそれを宣言します。

a.comment_mod:hover 
{ 
color: #000; 
border-bottom:1px dotted #000000; 
} 

彼らはスタイルを共有している場合は、同時に複数の要素のためのスタイリングを宣言することができます。

a.comment_mod:hover, a.other_mod:hover 
{ 
color: #000; 
}