ＭＥＮＵへ 元のページに戻る
クラスによるスタイルシート使い分け ( my_style3.css )

■ １ スタイルを一括して記述した外部ファイルをつくる。( my_style3.css )
■ ２ スタイルシートを設定したファイルを読み込む。<LINK>
■ ３ <TABLE class=***>のテスト

Top へ

■ １ スタイルを一括して記述した外部ファイルをつくる。( my_style2.css )


「3-1 スタイルシート外部ファイルを使う。( my_style2.css ) 」でつくったスタイルシートを基に、<TABLE>に関するクラスを各種設定してみます。

このスタイルシート外部ファイルは、( my_style3.css )というファイル名で保存します。
A{text-decoration : none;} 
A:HOVER{color : yellow;background-color : blue;text-decoration : underline;}
BODY{font-size: 11pt;
     line-height: 140%; }

TABLE.nor{font-size: 11pt;     ･･･クラス：nor 　　文字サイズ１１ｐｔ、改行幅１４０％
     line-height: 140%; }
TABLE.wide{font-size: 11pt;    ･･･クラス：wide　　文字サイズ１１ｐｔ、改行幅２００％
     line-height: 200%; }	
TABLE.narrow{font-size: 11pt;  ･･･クラス：narrow　文字サイズ１１ｐｔ、改行幅１００％
     line-height: 100%; }	
TABLE.small{font-size: 8pt;    ･･･クラス：small   文字サイズ　８ｐｔ、改行幅１４０％
     line-height: 140%; }	
TABLE.big{font-size: 20pt;     ･･･クラス：big     文字サイズ２０ｐｔ、改行幅１４０％
     line-height: 140%; }	

PRE.c {font-size: 11pt;
     border: 1px solid gray;
     padding: 5px; 
     white-space: pre; 
     width: 100%; 
     background-color: #fffff0; }
SPAN.s {font-size:25pt; 
     line-height: 100%;
     width:100%;
     filter:Shadow(color=silver,direction=135); }

Top へ

■ ２ スタイルシートを設定したファイルを読み込む。<LINK>


このスタイルシート設定ファイルは、リンクの表示に関するスタイルシートと同様に <HEAD>〜</HEAD>タグの間に読み込むための、<LINK>タグを挿入します。
<HTML>
　<HEAD> 
　  <TITLE>・・・</TITLE>
  　<LINK rel="stylesheet" href="../my_style3.css">
　</HEAD>
　<BODY>
　　　・・・・・・
　</BODY> 
</HTML>


Top へ

■ ３ <TABLE class=***>のテスト


<TABLE>に設定した、各クラス［ class=( nor wide narrow small big )>の動作をテストします。
<TABLE class=nor border="1"><TR><TD>
このテーブルは<BR>class=nor による<BR>表示テストです。
</TD></TR><TABLE>
このテーブルは
class=nor による
表示テストです。
<TABLE class=wide border="1"><TR><TD>
このテーブルは<BR>class=nor による<BR>表示テストです。
</TD></TR><TABLE>
このテーブルは
class=wide による
表示テストです。
<TABLE class=narrow border="1"><TR><TD>
このテーブルは<BR>class=narrow による<BR>表示テストです。
</TD></TR><TABLE>
このテーブルは
class=narrow による
表示テストです。
<TABLE class=small border="1"><TR><TD>
このテーブルは<BR>class=small による<BR>表示テストです。
</TD></TR><TABLE>
このテーブルは
class=small による
表示テストです。
<TABLE class=big border="1"><TR><TD>
このテーブルは<BR>class=big による<BR>表示テストです。
</TD></TR><TABLE>
このテーブルは
class=big による
表示テストです。
<TABLE border="1"><TR><TD>
このテーブルは<BR>クラス指定なしの<BR>表示テストです。
</TD></TR><TABLE>
このテーブルは
クラス指定なしの
表示テストです。

Top へ