2017-04-19 16 views
-1

外部CSSファイルのスパンタグにスタイルを追加する際に、次のHTMLスニペットに問題があります。<span>から外部ファイルにスタイルを追加する

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
\t \t <title>About Me</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <img src="https://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/> 
 
\t \t <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/> 
 
\t \t <div> 
 
\t \t <a href="www.google.com"><span>LINK</span></a> \t 
 
\t \t </div> 
 
\t </body> 
 
</html>

対応するCSSは以下です。問題の行が何らかの理由で適用されていないスパンブロック、中テキストの装飾ラインであることが表示されます。どんな入力?

img { 
 
\t display: block; 
 
\t height: 100px; 
 
\t width: 300px; 
 
\t margin: auto; 
 

 
} 
 

 
p { 
 
\t text-align: center; 
 
\t font-family: Garamond, serif; 
 
\t font-size: 18px; 
 
\t 
 
} 
 

 
/*Start adding your CSS below!*/ 
 

 
div { 
 
    height: 50px; 
 
    width: 120px; 
 
    border-color: #6495ED; 
 
    background-color: #BCD2EE; 
 
    border-style: dashed; 
 
    border-width: 3px; 
 
    border-radius: 5px; 
 
    margin: auto; 
 
    text-align: center; 
 
    
 
} 
 

 
span { 
 
    color: blue; 
 
    font-family: times; 
 
    text-decoration: none; 
 
}

+0

可能な複製をhttp://stackoverflow.com/questions/2789703/remove-([リンクから頑固下線を削除します] stubborn-underline-from-link) –

答えて

0

この行はスパンからというし、アンカータグからでした。以下のCSSをチェック:

img { 
 
    display: block; 
 
    height: 100px; 
 
    width: 300px; 
 
    margin: auto; 
 
} 
 

 
p { 
 
    text-align: center; 
 
    font-family: Garamond, serif; 
 
    font-size: 18px; 
 
} 
 

 

 
/*Start adding your CSS below!*/ 
 

 
div { 
 
    height: 50px; 
 
    width: 120px; 
 
    border-color: #6495ED; 
 
    background-color: #BCD2EE; 
 
    border-style: dashed; 
 
    border-width: 3px; 
 
    border-radius: 5px; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 

 
span { 
 
    color: blue; 
 
    font-family: times; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
\t \t <title>About Me</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <img src="https://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/> 
 
\t \t <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/> 
 
\t \t <div> 
 
\t \t <a href="www.google.com"><span>LINK</span></a> \t 
 
\t \t </div> 
 
\t </body> 
 
</html>

0

利用この

a { 
    color: blue; 
    font-family: times; 
    text-decoration: none; 
} 
+0

'text-decoration'はアンカーだけでなく、どの要素にも適用できます。 –

+0

奇妙なことに、コード・アカデミーのCSSと同じブロックを追加しましたが、何らかの理由で適用したくありません。あなたは似たような問題について聞いたことがありますか? –

+0

他の定義されたCSSやライブラリからオーバーライドされている可能性があります text-decoration:none!important; –

関連する問題