装飾下線CSSエレメント

スタイルシートの技術は、2つの機能HTMLページの登録時にまず、その助けを借りて、サイトの個々の要素の位置が形成されます。第2に、ブロックをユーザに視覚的に魅力的にする。第2の機能は、異なる方法で実施される。そのうちの1つに下線が引かれています。 CSSはこの属性を提供します テキスト - 装飾.

属性レコードの指定

プロパティを活用する テキスト - 装飾 単純に。スタイルファイルのコードに要素の次の行を書くだけで十分です：

テキスト - デコレーション：attribute_value;

代わりに "attribute_valueCSSの仕様にはいくつかのオプションがあります：

  • 下線 - 行は厳密にテキストの下にあります。
  • 上書きする - テキストの上から線が引かれます。
  • なし - すべての装飾効果の除去。
  • 継承する - 親要素の値を採用します。

アンダースコアのCSS

この属性はCSSの下線だけでなく、テキストやその罫線の「点滅」などの他のエフェクトも指定しているため、上記はレコードのすべての可能な形式ではありません。

ハイパーリンクデザインの例

Webデザインとプログラミングの初心者疑問が生じます：なぜテキストの一番下の行を作るのですか？インターネットテクノロジー時代の幕開けに、このようなハイライト方法は、ユーザーに、ハイパーリンクがその前にあることを示しました。新しいページにクリックされるテキストです。

既定では、ハイパーリンクにはプロパティが設定されています 下線。実際には、問題は、非アクティブな要素から行を削除し、ユーザーがマウスポインタを移動したときにその行を表示することになります。 CSSの下線を無効にするコードの例を次に示します。

a {text-decoration：none;}

アクティブなリンクには、次のエントリが使用されます。

a：hover {text-decoration：underline;}

高度な装飾的な下線

標準属性 テキスト - 装飾 いくつかの制限があります。

  • ラインの色はリンクのテキストの色と変わらないので、それらの「着色」を区別することは不可能です。
  • 実線のみアンダースコアとして使用されます。 CSSは、他のスタイルの碑文の使用を暗示するものではありません。

CSSリンクを強調表示する

しかし、特別なテクニックは、テキストの古典的なデザインをバイパスするのに役立ちます。第1の場合には、スパン>。

例えば：

ハイパーリンク

a>。n>

その結果、ページ上の単語のハイパーリンクは青で書かれ、線の色は赤になります。

CSSのアンダーラインを実装できるもう1つの高度な方法は、 - ボーダーボトム。以下の例では、その使用法について説明します。

a {border-bottom：1ピクセル赤色;}

結果は上記の例と同じになります。しかし、この方法には大きな利点があります。ラインの色を変更することに加えて（今は赤に設定 - 赤）、それが描画される方法を変換することが可能です：

したがって、属性 ボーダー - 下 より機能的。テキストの下に装飾的な線を表示することに加えて、その外観をカスタマイズすることができます。