ＨＰの回し者／スタイルシート

タイトル

ここではスタイルシートの説明をします。スタイルシートとは、スタイル（見え方、外見等）を決めるシート（紙。ここではファイル）のことで、（そのまんまやんけ（笑））文字の見え方などを決定するファイルをさします。
今後のHTMLでは、HTMLで基本構造を表し、スタイルはスタイルシートで表記しようという方向性に行っているみたいです。詳しいことはWEBで調べてください。英語だけど（爆）

そのスタイルシートですが、大きく分けて三つに分かれます。
ひとつは直接タグで記述する方法。
ふたつめは<head>の中に記述する方法。
みっつめはcssというファイルを使う方法です。
優先順位は、タグ、<head>、cssファイルの順です。つまり、３つの記述がかち合ったら、まずはタグで表記するってことですね。
具体的な説明ですが、タグは先ほど出てきたように挟めばいいだけです。


<h3 style="color:bleu">スタイルシート</h3>
<span style="color:red">直接スタイル記述</span>

次に、<head>内に書き込むやり方です。


<head>
<style type="text/css"><!--
h2 {color:#00ffff}
h3 {color:red}
i {font-size:15pt}
-->
</style>
</head>

中身をコメントで囲んであるのは、NN3以前では定義文字が見えてしまうためです。で、その下が定義です。ここでは、<h2>というタグで囲めば色が00ffff（水色）に、 <h3>で囲めばred（赤）に、<i>で囲めば文字の大きさが15ポイントになります。
同じ色を指定するときや、複数のスタイル指定をするときは、


<style type="text/css"><!--
h2,h3 {color:#00ffff}
p {color:#808080;font-size:50px}
-->
</style>

と言う風に、同じ指定のときは「,」で区切り、複数指定のときは「;」で区切ればすればＯＫです。

次にファイルを使うやり方です。
これは、ファイルにまとめてスタイル指定をする方法です。メモ帳等で下のようにファイルを作ります。


h1 {font-size:34px}
h2,h3 {color:#00ffff}
p {color:#808080;font-size:50px}
b {color:#77aaff}

このファイルを保存します。この時、拡張子を「.css」にします。ここでは仮に「test.css」とします。このファイルを作ったら、目的のHTMLファイルの<head>の中に


<link rel="stylesheet" type="text/css" href="test.css">

と、記述します。これで完成です。

さて、あとはスタイルシートでできることを説明します。

同じタグで、数種類の指定をするとき


h2.a {color:#00ffff}
h2.b {color:#808080;font-size:50px}
.aka {color:#ff0000}
.ao {color:#0000ff}


<h2 class="a">aという指定</h2>
<h2 class="b">bという指定</h2>

<p class="aka">akaという指定</h2>
<p class="ao">aoという指定</h2>

これは「class=」という指定で、同じタグでもスタイルを変えられます。
スタイル指定でタグを書かずに「.xxx」（xxxはなんでもOK）という風に書くと、タグに関係無くclass指定でスタイルを変えられます。

リンクの下線を消す


a{text-decoration:none}