CSSを使用したリンクのスタイリング
CSSを使用すると、必要に応じてリンクのスタイルを設定できます。色、背景、サイズの拡大などを追加してテキストをフォーマットできます。さらに、アニメーションを追加して、快適な視覚効果を作成できます。
適切な機能のために、疑似セレクターの順序は次のように指定されます：-：link、：visited、：hover、：active。
例
次の例は、CSSを使用したリンクのスタイル設定を示しています-
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 25px;
}
#mod {
padding: 10px;
color: darkturquoise;
border: thin solid;
background-color: lemonchiffon;
}
#mod:hover {
color: white;
box-shadow: 0 0 0 1px black;
background-color: slateblue;
}
</style>
</head>
<body>
<p>
<a href="mailto:user@example.com">Demo link</a>
</p>
<p>
<a id="mod" href="mailto:user@example.com">Modified demo link</a>
</p>
</body>
</html> 出力
これにより、次の出力が得られます-
2番目のリンクにカーソルを合わせると、次の出力が得られます-
例
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px;
display: flex;
float: left;
border: thin solid;
background-color: snow;
padding: 20px;
}
body * {
border-radius: 5%;
}
#mod {
padding: 10px;
color: royalblue;
text-decoration: none;
}
#mod:hover {
box-shadow: 0 0 10px 2px black;
text-decoration: overline;
font-size: 1.2em;
}
</style>
</head>
<body>
<div>
<button><a href="#">Demo</a></button>
<a id="mod" href="#">Demo</a>
</div>
</body>
</html> 出力
これにより、次の出力が得られます-
2番目のリンクにカーソルを合わせると、次の出力が得られます
-
CSS属性セレクターを使用したフォームのスタイリング
CSSの属性セレクターを使用して、特定の属性を持つHTML要素にスタイルを適用します。属性セレクターには次のルールが適用されます。 p [lang] −lang属性を持つすべての段落要素を選択します。 p [lang =fr] −lang属性の値が正確に「fr」であるすべての段落要素を選択します。 p [lang〜=fr] −lang属性に「fr」という単語が含まれているすべての段落要素を選択します。 p [lang | =en] − lang属性に正確に「en」であるか、「en-」で始まる値が含まれているすべての段落要素を選択します。 以下は、C
-
CSSを使用したFirst-Lettersのスタイリング::first-letter
CSSは、::first-letter疑似要素を使用して要素の最初の文字のスタイルを設定するのに役立ちます。句読点、有向グラフ、およびコンテンツプロパティによって、最初の文字が変更される可能性があることに注意してください。 次の例は、CSS::first-letter疑似要素を示しています。 例 <!DOCTYPE html> <html> <head> <style> body { text-align: center; } ::first-letter { font-size: 3em;