とほほのスタイルシート入門(使用例)
とほほのWWW入門 >
とほほのスタイルシート入門 >
サンプル
1998年3月8日版
スタイルシートを用いた使用例として、通常のHTMLタグでは実現が難しいものについて紹介します。スタイルシートをサポートしていないブラウザのために、表示例は、スタイルシートではない方法で表示しています。
<SPAN STYLE="font-size:20pt">大きなフォント</SPAN>
↓
大きなフォント
<SPAN STYLE="background:silver">背景色</SPAN>
↓
<A HREF="xxx.html" STYLE="text-decoration:none">リンク</A>
↓
リンク
<STYLE TYPE="text/css"><!--
BODY { line-height: 150% }
--></STYLE>
↓
これにより本文の行間が
適度にあくようになります。
<STYLE TYPE="text/css"><!--
P { text-indent: 16px }
--></STYLE>
↓
これにより、<P>による段落の1行目が
字下げされるようになります。
あああああ
<BR><DIV STYLE="margin-left:30px">
この行がインデントされます。
<BR></DIV><BR>
ううううう
↓
あああああ
この行がインデントされます。
ううううう
<STYLE TYPE="text/css"><!--
BODY { background: url(image/back.gif) repeat-y }
--></STYLE>
<STYLE TYPE="text/css"><!--
A:hover { color: red }
--></STYLE>
Copyright (C) 1996-1999 とほほ
http://wakusei.cplaza.ne.jp/twn/wwwcss4.htm