- 追加された行はこの色です。
- 削除された行はこの色です。
#contents
**スタイルシート基礎
***最も基本的なスタイルシート
<span style="color:red;">あいうえお</span>
<div style="color:red;">あいうえお</div>
spanはインライン要素(前後で改行されない)~
divはブロック要素(前後で改行される)((<address> や <blockquote> のように、ブラウザ表示時に前後に改行がはいるものがブロック要素、<big> や <strong> のように、前後に改行がはいらないものがインライン要素。))
しごとでも
<span style="font-size:12px;">
<span class="brsize">
とか書いてるなぁ。
***タグ自体にも使える
<p style="color:red;">あいうえお</p>
***htmlタグの再定義
すべてのタグに、style属性を書くのはめんどくさいので、まとめて再定義できる。
<style type="text/css">
<!--
b {
font-size: 18px;
}
-->
</style>
てやると、<b>タグすべてに適用される。
***クラスの定義とスタイル指定
各タグに対して、クラスを定義して、クラスに対するスタイル指定をすることができます。
<style type="text/css">
<!--
p.red { color: red; } <-pタグにredというクラス名を定義。スタイルはcolor=redで。
p.green { color: green; }
-->
</style>
として
<p class="red">これはredクラスです。</p>
<p class="green">これはgreenクラスです。</p>
とする事もできます。
***タグに依存しないクラスの定義
<style type="text/css">
<!--
.red { color: red; } <- redというクラス名を定義。スタイルはcolor=redで。
-->
</style>
として、どのタグにも使用できるクラスを定義することもできます。
先の例の
<span class="brsize">
なんか、そうですね。
**スタイルシートちょっと応用
***定義済みクラス
aタグなどはすでに定義済みのクラスがある。そのクラス名のスタイル定義は「.」ではなく「:」を用いる。
a:link {
font-size: 18px; <- aタグにすでに定義済みのクラスlinkに、スタイルを指定。
}
***ID属性
いままでクラス名にスタイル定義をしてきましたが、ID(?)に対してスタイル定義もできます。ひとつのドキュメント中に、複数の要素が同じ ID を持つことは許されません。
(ようは、一つのhtml内に、同じIDはないってこと?)
(ようは、一つのhtml内に、同じIDはないってこと?)((ID属性で、ある要素に名前を付けたとき、同じHTML文書中の他の要素にその名前を付けることはできません。つまり、同名のID属性の付いた要素が同じHTML文書中に2つ以上あってはいけません。(もちろん、ID属性を付けた要素が2つあっても、それが別名(「ex-1」と「ex-2」とか)であれば間違いではありません。)))
#banner { <- IDの定義。
background:#69c;
}
として
<div id="banner">
車輪の再発明をしてます
</div>
とやることができる。
***サンプル
たとえば、<td class="menubar">hoge</td>に対応
td.menubar
{
width: 130px;
vertical-align: top;
border: 1px solid #cccc99;
background-color: #eeeecc;
}
こっちは、<div id="menubar">hoge</div>に対応
div#menubar
{
width: 120px;
margin:4px;
font-size:90%;
overflow:hidden;
}
#navi(html)
SIZE(10){現在のアクセス:&counter;}