2017-02-09 12 views
1

2本の画像の上下に青い線があります。 私は style="border: 0;"を適用しようとしましたが、動作しませんでした。 また、CSSファイルborder:0px, outline:0pxをCSSファイルに適用しようとしました。 でも、うまくいきません。画像の下に青い線があります。

私はこれらがリンクやものだと思います。 これらの小さな青い線は誰でも削除できますか?

.kategorien1{ 
 
    margin-bottom: 50px; 
 
    margin-left: 75px; 
 
    margin-right: -35px; 
 
    box-shadow: 0px 0px 3px 0px black; 
 
    transition-property: all; 
 
    transition-duration: 400ms; 
 
} 
 
.kategorien2{ 
 
    margin-bottom: 80px; 
 
    margin-left: 300px; 
 
    box-shadow: 0px 0px 3px 0px black; 
 
    transition-property: all; 
 
    transition-duration: 400ms; 
 
}
<!DOCTYPE html> 
 
<html= lang=de> 
 
<head> 
 
<link href="style.css" rel= "stylesheet" type="text/css"> 
 
<meta charset="utf-8"> 
 
<title>Handgefertigte Armbänder online shoppen bei handform</title>  
 
</head> 
 

 

 
<body> 
 
<!--BILDER UNTERKATEGORIEN--> 
 
<a href="damem-lederimitat.html"> 
 
<img class="kategorien1" src="Lederimitat.jpeg" width="40%" style="border: 0;"> 
 
</a>  
 
<a href="damem-armreifen.html"> 
 
<img class="kategorien1" src="armreifen.jpeg" width="40%" style="border: 0;"> 
 
</a> 
 
<a href="damem-perlenarmbänder.html"> 
 
<img class="kategorien1" src="Perlenarmb%C3%A4nder.jpeg" width="40%" style="border: 0;"> 
 
</a> 
 
<a href="damem-verschiedene-armbänder.html"> 
 
<img class="kategorien1" src="verschiedene_b%C3%A4nder.jpeg" width="40%" style="border: 0;"> 
 
</a> 
 
<a href="damem-verschiedene-armbänder.html"> 
 
<img class="kategorien2" src="M%C3%A4nnerarmb%C3%A4nder.jpeg" width="40%" style="border: 0;"> 
 
</a> 
 

 
</body> 
 
    
 

 
</html>

答えて

1

それは、ハイパーリンクから青い下線のように、aタグからです。それらを削除するには、あなたのCSSにこれを追加します。

a { 
    text-decoration: none; 
} 

は完全に自分自身をカバーするために、タグの両方の状態にこれを適用するのは良い考えかもしれません(あなたはそれが紫が一度クリック行く方法を知っている?)ので、お試しください:

a, a:visited { 
    text-decoration: none; 
} 

これはあなたのページのすべてのリンクからアンダーラインを削除します。

a.no-underline, 
 
a.no-underline:visited { 
 
    text-decoration: none; 
 
}
<a class="no-underline" href="#">This isn't underlined</a> 
 
<a href="#">But this is!</a>

+0

ために、以下のCSSを使用します!それは素早い答えだった。 – Jahrens

+0

それはSOのためです - あなたが答えを受け入れるなら、私は感謝しています:) –

0

あなたのタグのテキストの装飾を持っています。だから、クラスを作成し、このようにあなたは、下線が引かれたくないリンクに追加するのは良いアイデアかもしれません。

a{text-decoration: none;} 

これで取り除かれます。上記のようにリンクの下線はすべて削除されるので、より良いセレクタを使用してください。

0

イメージをリンクとして使用すると、デフォルトでブラウザにCSSが適用されます。それを削除するには、あなたは次のように<a>のすべてのデフォルトのプロパティを削除する必要があります。

a{ 
text-decoration:none; 
} 

か、<a>のために別のクラスを割り当て、[プロパティ]をdeineすることができます...!

0

ただ、ありがとうこの

img, a, a:focus { 
    outline: none; 
} 
a, a:hover { 
    text-decoration: none; 
} 
関連する問題