ホームページ > ウェブフロントエンド > htmlチュートリアル > 【CSS記述方法】ハイパーリンク style_html/css_WEB-ITnose

【CSS記述方法】ハイパーリンク style_html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:47:30
オリジナル
1616 人が閲覧しました

css a; hyperlink

ハイパーリンクを記述するときは通常 を使用しますが、ここで問題が発生します。説明は以下の通りです:
1. の途中に文字がある場合、下線付きで表示されます。
2.の間に画像がある場合、下線なしで表示されます。

今、CSS スタイルを通じて制御したいのですが、誰か良い方法はありますか?

ディスカッションへの返信(解決策)

a{ text-decoration:underline;}
ログイン後にコピー

テキストが真ん中にある場合は下線が付きますが、画像の場合は下線が付きません

これは、よろしいですか、という意味だと思います。下線がまったくない、または両方に下線があることを意味しますか?
下線はありません:
設定:
text-decoration:none;
両方の下線:
これはボーダーでシミュレートする必要があります。
設定:
text-decoration:none;
border-bottom :1px Solidi #000 ;
padding-bottom:2px;//境界線をより明確に表示するため。

試してみてください。色、境界線のスタイル (写真も使用できます)、パディングのサイズはすべて変更できます。


これは、下線を付けないようにしますか、それとも両方の下線を付けますか?という意味だと思います。

下線はありません:

設定:
text-decoration:none;
両方の下線:
これはボーダーでシミュレートする必要があります。
設定:
text-decoration:none;
border-bottom :1px Solidi #000 ;
padding-bottom:2px;//境界線をより明確に表示するため。

試してみてください。色、境界線のスタイル (写真も使用できます)、パディングのサイズはすべて変更できます。
ご返信ありがとうございます。まさにその通りです。私もあなたの方法を試してみました。このため、の途中に画像がある場合はそれも表示されます。次に、テキストの場合に下線を表示したいと思います。画像の場合は下線は表示されません。

テキストの場合は、リンクにスパンを追加して、そのスパンの CSS を制御できると思います。 text-decoration:underline; 画像の場合は、
border-bottom:1px soldi #000; を使用します。

試してみましたが、あなたの言うようにはなりませんでした。


加工をしないと、写真に下線が付きません。

W3C の text-decoration の説明を読みました。
text-decoration 属性は、テキストに追加される装飾を指定します。

この属性を使用すると、テキストに下線などの特定の効果を設定できます。子孫要素に独自の装飾がない場合、祖先要素に設定された装飾は子孫要素にも「拡張」されます。


この属性はテキストに対してのみ有効ですか?どうやって下線を引いたのでしょうか...

めまいがします。試してみましたが、あなたが言ったようにはなりませんでした。

W3C の text-decoration の説明を読みました。
text-decoration 属性は、テキストに追加される装飾を指定します。
この属性を使用すると、テキストに下線などの特定の効果を設定できます。子孫要素に独自の装飾がない場合、祖先要素に設定された装飾は子孫要素にも「拡張」されます。

この属性はテキストに対してのみ有効ですか?どのように下線を引いたのでしょうか? コードを投稿してご覧いただけますか?そこで、あなたも提案した次の方法を採用しました:

text-decoration:none;
border-bottom:1px Solidi #000; //境界線をより明確に表示するため。

しかし、上のように設定すると、ハイパーリンクが画像の場合、下に行が表示されます。

テキストの場合は、リンクにスパンを追加して、そのスパンの CSS を制御できると思います。 text-decoration:underline; 画像の場合は、
border-bottom:1px soldi #000; を使用します。
現在メンテナンスプロジェクトに取り組んでいるため、ページはすでに書かれています。ブラウザを IE11 にアップグレードすると、ハイパーリンクに問題が発生します。
おっしゃるとおり、変更の範囲は比較的大きいと推定されます。したがって、それは実現不可能です。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート