2012-06-01 9 views
82

私のページにいくつかのリンクを置いていますが、私はHTMLを使用してその行を削除することはできません。あなたはこれをし適用する特定のリンクをお持ちの場合はHTMLのリンクからアンダーラインを削除するにはどうすればよいですか?

a {text-decoration: none; } 

は、nounderlineのように、彼らにクラス名を与えると、この操作を行います:

+3

PAICを**、私は再びタグをロールバック気にするつもりはないが、ちょうどあなたが知っているので、下線を削除する唯一の方法ですCSSで**。はい、HTMLをインラインで追加していても( 'style'属性で)、* CSS *です。他の2つのタグも完全に有効です( 'presentation'と' hyperlink')。将来、正当な理由がない限り、質問にタグを削除(または追加)しないでください。ありがとう! – 0b10011

+0

@bfrohs私はあなたの言葉を尊重しますが、私はHTMLだけを使って自分のサイトを構築していますので、タグを追加しませんでした。実際に私はそれに少し初心者です、それは理由です。 –

+3

(すべてのプレゼンテーションでブラウザのデフォルトを使用しない限り)CSSなしで標準準拠のWebサイトを構築することはできません。 HTML =構造体; CSS =プレゼンテーション。他のタグは、異なる言語とは何の関係もなく、人々が質問と回答を見つけるのを助けるためにのみ提供されていました。 – 0b10011

答えて

131

Inlineバージョン:

<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a> 

should一般的にseparateあなたのウェブサイトの内容(HTML)、プレゼンテーションの内容(CSS)を覚えておいてください。したがって、通常はavoid inline stylesです。

CSSを使用して同等の応答を表示するには、John's answerを参照してください。

+1

キラー!私はhtmlをやっているすべての年にこれらのアンダースコアラインを見たことはありません.... ^^ –

+0

ジョンの答えはまだ本質的にインラインスタイルを使用しています。あなたのCSSを分けることは、htmlのcssのエイリアス以上の意味を持ちます。例えば ​​'class =" big-and-red "は別名ではなく別名です。 'class ="意味のあるドメイン項目 "' '次にcss' .meaningful-domain-item {// bigとred} 'です。この回答は、私のCSS +1で使用するタグを思い出させるのに十分です。 –

39

これは、すべてのリンクからすべての下線を削除します

a.nounderline {text-decoration: none; } 

これらのリンクにのみ適用され、他のリンクは影響を受けません。

このコードは、ドキュメントの<head>やスタイルシート内に属する:

<head> 
    <style type="text/css"> 
     a.nounderline {text-decoration: none; } 
    </style> 
</head> 

、体内の:

<a href="#" class="nounderline">Link</a> 
+0

@PaicTenこれをCSSコードに追加する必要があります。 – Sonic42

5
  1. が望ましい(外部スタイルシートにこれを追加します):

    a {text-decoration:none;} 
    
  2. またはHTMLドキュメントの<head>にこれを追加します。

    <style type="text/css"> 
    a {text-decoration:none;} 
    </style> 
    
  3. それともa要素自体(を推奨されません)に追加します。

    <!-- Add [ style="text-decoration:none;"] --> 
    <a href="http://example.com" style="text-decoration:none;">Text</a> 
    
1

次はベストプラクティスではありませんが、時にはジョン・コンデが提供するソリューションを使用することをお勧めしますが、時には、外部のCSSを使用することは不可能である

有用であると証明することができます。つまり、あなたのHTMLタグに以下を追加することができます:上記のコードはenough.Justあなたから下線を削除したいリンクにこれを貼り付けます

<a style="text-decoration:none;">My Link</a> 
0
<style="text-decoration: none"> 

9

私が使用することをお勧め:マウスポインタがアンカー

a:hover { 
    text-decoration:none; 
} 
2

他の回答のすべての言及テキストの装飾を超えている場合は、下線を避けるために置きます。時にはWordpressのテーマや他の人のCSSを使って、リンクに他の方法で下線が引かれているので、text-decoration:noneは下線を外しません。

境界線とボックスシャドウは、私がリンクに下線を引くために気づいている他の2つの方法です。これらをオフにするには:

border: none; 

box-shadow: none; 
関連する問題