CSSアンカータグのスタイル設定が機能していません

-4

HTMLファイルにCSSファイルを追加したページにリンクをいくつか配置しましたが、スタイリングが表示されません。CSSアンカータグのスタイル設定が機能していません

HTML：

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Title</title> 
     <link rel="stylesheet" type="text/css" href="formatter.css"> 
    </head> 
    <body> 
     <h1>Welcome</h1> 
     <hr/> 
     <div class="anch" style="text-align: center"> 
      <a href="admin_login.jsp" style="" >Admin</a> 
      <a href="user_login.jsp">User</a> 
     </div> 
    </body> 
</html>

formatter.css：上記のファイルを実行すると

body{ 
    font-family: Verdana, Arial, sans-serif; 
    color: #555; 
    background-color: silver; 
} 
h1{ 
    text-align: center; 
} 
.anch a:link, a:visited{ 
    text-decoration: none; 
    display: inline-block; 
    color: black; 
    background-color: white; 
} 
.anch a:hover, a:focus, a:active{ 
    text-decoration: none; 
    display: inline-block; 
    color: white; 
    background-color: black; 
}

、身体及びH1スタイルが表示されますが、アンカーのスタイルが表示されません。デフォルトの形式（青色と下線付き）で表示されます。ここが現れるものの画像です：

出典

2016-06-27 Turbo123

sudoクラスにはコロンが付きます。ドットではありません。 – Afsar

'a：link'ではなく' a.link'です。 –

devtoolsスタイルインスペクタを使用してCSSをデバッグします。 '：hov'ボタンがあります。小さなパネルが開き、要素の状態を'：hover'に設定することができます。例えば、疑似要素を含むこのようなスタイルをテストするのに役立ちます。 'ahover'スタイルが適用されていないことに気づくでしょう。おそらく、そこから進んで問題を突き止めることができます。 –

-1

はaのスタイルを与えます。ホバー、アクティブ、その他の場合はコロンを使用します。

.anch a{ 

    text-decoration: none; 
    display: inline-block; 
    color: black; 
    background-color: white; 

} 
.anch a:link, a:visited{ 
    text-decoration: none; 
    display: inline-block; 
    color: black; 
    background-color: white; 
} 
.anch a:hover, a:focus, a:active{ 
    text-decoration: none; 
    display: inline-block; 
    color: white; 
    background-color: black; 
}

出典

2016-06-27 06:20:02 Mani

これは機能しました。構文の変更に加えて。ありがとう！ – Turbo123

ようこそ... @ Turbo123 – Mani

CSSの擬似クラスは詳細は.

a:link, a:visited{ 
text-decoration: none; 
display: inline-block; 
color: black; 
background-color: white; 
} 

a:hover, a:focus, a:active{ 
text-decoration: none; 
display: inline-block; 
color: white; 
background-color: black; 
}

とコロン:ないと規定しthis

出典

2016-06-27 04:39:47 Afsar

をお読みください別のクラスを作成します。アンカータグのためにあなたはこれを必要とするときにそれを使うことができます。 CSS

.archorCls{ 
    text-decoration: none; 
    display: inline-block; 
    color: white; 
    background-color: black; 
}

出典

2016-06-27 05:14:34 Parthasarathy

で

<a href="somelink" class="archorCls">SomeThing</a>

ここコードです。あなたはCSSでタグ付きドットを使用しましたが、：が使用されています。私はまた、cssクラスでアンカーをスタイリングするための例を挙げました。 :)

body{ 
 
    font-family: Verdana, Arial, sans-serif; 
 
    color: #555; 
 
    background-color: silver; 
 
} 
 
h1{ 
 
    text-align: center; 
 
} 
 
.anch a:link, a:visited{ 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    color: black; 
 
    background-color: white; 
 
} 
 
.anch a:hover, a:focus, a:active{ 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    color: white; 
 
    background-color: black; 
 
} 
 
/* This is the css code for anchor styling */ 
 

 
.anchor{ text-decoration: none; 
 
    display: inline-block; 
 
    color: black; 
 
    background-color: white;} 
 
/* When mouse hover the anchor class */ 
 
.anchor:hover{ 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    color: white; 
 
    background-color: black; 
 
}

<div class="anch" style="text-align: center"> 
 
<a href="admin_login.jsp" style="<!--You can use style here too -->" >Admin</a> 
 
<a href="user_login.jsp">User</a> 
 
</div> 
 
</br> <!-- This br is for line space --> 
 
</br> <!-- This br is for line space --> 
 
</br> <!-- This br is for line space --> 
 
<b> You can style your anchor tags with css class too. Here is the example</b> 
 
</br> <!-- This br is for line space --> 
 
</br> <!-- This br is for line space --> 
 
</br> <!-- This br is for line space --> 
 
<center> 
 
<a href="admin_login.jsp" class="anchor">Admin</a> 
 
<a href="user_login.jsp" class="anchor">User</a> 
 
</center>

出典

2016-06-27 05:52:12

CSSアンカータグのスタイル設定が機能していません

答えて

関連する問題