htmlタグとcss−すぐに使えるサンプルと小技集

■Site_TOP htmlタグとcss ■Link_Page 相互リンクサイトさま

---

スポンサード リンク

---

◆HTML&CSS◆ 文字装飾(htmlとcssの併用)

---

htmlのタグにCSSで装飾を定義する方法です。



CSS+HTML

---

例1 b{color:#FF0000;}

---

これは単純ですね。bのタグを使った時、文字色が#FF0000(赤)になります。


例2 i{color:#FF0000; font-family:"Arial Black";}

---

この例はiのタグを使った時、文字が赤くなり、書体がArial Blackになります。


例3 h1{font-size:32px; padding:0px 0px 0px 0px; margin-top:0px; margin-bottom:0px;}

---

この例はh1のタグを使った時、font-size:32、文字の大きさが32pxになりh1の周りに出来るはずの余白が0となります。


例4 strong{color:green; border-bottom:3px dotted #F80;}

---

CSSのありがたみが出てくるのがここからです。文字色が緑になり、文字の下に点線のデザインが＋αで付きます。


例5 em{color:green; font-family:"Arial Black"; border-bottom:3px dotted #F80;}

---

例4に書体を宣言した形です。


例6 a{color:blue;text-decoration:none;}
a:hover{color:red;border-bottom:1px dotted #000;}

---

例6は2つが組み合わせたものです。
1行目の効果でa(アンカーテキストが押されても文字色が変わりません)
2行目の効果でマウスがアンカーテキストの上に来た時、文字が赤く変化＋下に1pxの点線が現れます。



1日で習得スタイルシート。

---

• CSSを外部呼び出し
• CSSのサンプル
• CSSで文字装飾

スポンサード リンク

---