<html>
<head>
<title>スタイルシートの設定 2</title>
<style type="text/css">
<!--
body {background:#ffffcc; line-height:130%}
p {color:#009900; line-height:180%}
p.leaf {background:url(ichijiku-ss.jpg)}
p.red {background:#ccffff; color:red}
-->
</style>
<script lanuage="JavaScript">
function chgfocus(){
window.focus();
window.resizeTo(480,600);
}
window.onload=chgfocus;
</script>
</head>
<body>
それでは<b>スタイルシート</b>のテストをしましょう。<br><br>
<b><tt><body></tt>タグ</b>には，
バックグラウンドカラーとして淡い黄色が，
改行幅として 130% が設定してあります。<br><br>
最初の「段落−1」では，
テキストの色を深緑色で表示することと，
改行幅を 180% に設定した<b><tt><p></tt>タグ</b>によって
記述されています。<br>
<P>
<b>段落−1</b><br>
<b>perl</b> は <b>C言語</b> を手本にして作られた
<b>インタプリタ型</b>のプログラミング言語で，
特にテキスト検索やテキスト整形の処理を得意としています。
<b>インタプリタ型</b>ですので
<b>コンパイル</b>などの処理を行う必要がなく，
プログラムの作成や開発を簡単に行うことができます。
もともとは <b>UNIX (Linux)</b> 上で開発利用されたのですが，
現在では <b>Windows</b> など多くの <b>OS</b>
上で使用できるようになっています。
</p>
<br>
次の「段落−2」は，背景に「いちじくの葉」
の画像を表示するように設定した <b><tt><p class="leaf"></tt>タグ</b>
によって記述されています。
テキストの色と改行幅は指定していませんが，
<b><tt><p></tt>タグ</b>で設定した深緑色と
180% になっていることに注目してください。<br>
<p class="leaf">
<b>段落−2</b><br>
<b>Perl</b> は <b>C言語</b> を手本にして作られた
<b>インタプリタ型</b>のプログラミング言語で，
特にテキスト検索やテキスト整形の処理を得意としています。
<b>インタプリタ型</b>ですので
<b>コンパイル</b>などの処理を行う必要がなく，
プログラムの作成や開発を簡単に行うことができます。
もともとは <b>UNIX (Linux)</b> 上で開発利用されたのですが，
現在では <b>Windows</b> など多くの <b>OS</b>
上で使用できるようになっています。
</p>
<br>
最後の「段落−3」は，背景を空色に，
テキストの色を赤に設定した
<b><tt><p class="red"></tt>タグ</b>によって
記述されています。
改行幅は <b><tt><p></tt>タグ</b>で設定した値になっています。
途中の「インタプリタ型」というところは，
<b>インラインでタイルシートを適用</b>していますが，
このように<b>インラインで適用した方が優先されます。</b><br>
<p class="red">
<b>段落−3</b><br>
<b>Perl</b> は <b>C言語</b> を手本にして作られた
<b>インタプリタ型</b>のプログラミング言語で，
特にテキスト検索やテキスト整形の処理を得意としています。
<font style='background:blue;color:white'>
<b>インタプリタ型</b>
</font>
ですので<b>コンパイル</b>などの処理を行う必要がなく，
プログラムの作成や開発を簡単に行うことができます。
もともとは <b>UNIX (Linux)</b> 上で開発利用されたのですが，
現在では <b>Windows</b> など多くの <b>OS</b>
上で使用できるようになっています。
</p>
<br>
<a href="" onclick= window.close(); return false">ウィンドウを閉じる</A>
</body>
</html>
|