ここでも,今までの HTML(HTML 3.2)との対応をまとめてみよう。
テキストの装飾に使う <U>...</U>,<STRIKE>...</STRIKE> は CSS のもとでは使う必要がない。
<SPAN> を使って,
<U>...</U>
→<SPAN STYLE="text-decoration: underline;">...</SPAN>
<STRIKE>...</STRIKE>
→<SPAN STYLE="text-decoration: line-through;">...</SPAN>
のように記述される。<U>...</U>,<STRIKE>...</STRIKE> はインライン要素であるが,CSS では <SPAN> に限らずさまざまな要素に指定できる。ブロック要素全体に指定することももちろん可能である。
また,文章の挿入・削除を下線・打ち消し線で表すのであれば,それらの役割を直接 <INS>,<DEL> といった要素で記述することもできよう(ただし,スタイルシートで指定しなければ,それらがブラウザによってどう表現されるかはわからない)。
<B>...</B>,<I>...<I> は今までどおり使うことができる。
HTML4 Transitional <S>...</S> は <STRIKE>...</STRIKE> と同じである。
これは background-image もしくは background で書く。
<BODY BACKGROUND="...">
→<BODY STYLE="background-image: url(...);">
→<BODY STYLE="background: url(...);">
CSS の background 属性を使った場合は背景色も指定できることに注意していただきたい。
同じく <BODY> の LINK,VLINK,ALINK 属性は,アンカ疑似クラスを使う。このとき,<BODY STYLE="..."> ではなく,<STYLE>...</STYLE>(または外部に用意された CSS のファイル)に書き込むことに注意。
<BODY LINK="..." VLINK="..." ALINK="...">
→
<STYLE TYPE="text/css">
<!--
A:link { color: ...; }
A:visited { color: ...; }
A:active { color: ...; }
-->
</STYLE>
念のため言っておくと,LINK 属性が link 疑似クラスに,VLINK 属性が visited 疑似クラスに,ALINK 属性が active 疑似クラスに対応している。
今までの HTML では,“囲み”を作るのに表組を代用していたが,CSS を使うと直接要素に枠を作って囲みを設けることができる。
<TABLE BORDER><TR><TD>...</TD></TR></TABLE>
→<P STYLE="border: ...;">...</P>
例として <P> を示したが,<TD>...</TD> に入っていた要素と同等なら何でもよい。
また,Internet Explorer 2.0 以降,Netscape Navigator 3.0 以降では表組に背景を指定することで(これは HTML 4.0 Transitional で正式にサポートされている),ラインマーカーのような背景処理を行っていたが,結局 CSS では background-color 属性,background 属性だけで処理できる。
<TABLE BGCOLOR="..."><TR><TD>...</TD></TR></TABLE>
→<P STYLE="background-color: ...;">...</P>
→<P STYLE="background: ...;">...</P>
これも <P>...</P> に限ったものではない。
ブロック要素とインライン要素では背景の描かれ方が異なることに注意していただきたい。
表を組んだ場合にも,<TD> などに同じく background-color 属性,background 属性を指定すれば背景処理ができる。
<TD BGCOLOR="...">...</TD>
→<TD STYLE="background-color: ...;">...</TD>
→<TD STYLE="background: ...;">...</TD>
ちなみに,CELLPADDING,CELLSPACING 属性は今までと同様に用いる(CSS2 ではこれらも CSS 側の記述とできる)。
IE3 ブロック要素の背景色もインライン要素と同様に描かれれることにもう一度触れておく。
たとえば,画像にリンクを施すと枠が表示され,それは <IMG> の BORDER 属性で太さを調節したが,これは使わず,CSS の border 属性を用いる。
<IMG SRC="..." ALT="..." WIDTH="..." HEIGHT="..." BORDER="...">
→<IMG SRC="..." ALT="..." WIDTH="..." HEIGHT="..." STYLE="border: ...;">
枠を消す場合は border-width を 0 にするほかに,border-style を none にするという方法がある。