スタイルシートの三つの記述方法
1つめの方法はhtmlとスタイルを別々のファイルにする事ができます。同じデザインのファイルをいくつか作る場合、ひとつのスタイルシートに各htmlからリンクを貼る事で共有する事が出来ます。2つめの方法はスタイルをhtmlの<head>部分に記載します。ヘッダにStyleSheetを記述する事で、そのページのデザインの情報がひと目でわかります。3つめはhtml内の各要素に直接記述する方法です。
|
<link rel="stylesheet" href="URL" type="text/css"> |
スタイルシートの設定を行ったファイルを用意し、必要に応じて取り込む方法です。htmlのファイルの<head>部分に<link>タグを記述します。スタイルシートの設定を行ったファイルは拡張子を｢.css｣にします。また、スタイルシートの設定を行ったファイルには<style>タグの記述はしません。一つのスタイルシートファイルをサイト全体に適応させ、ページのデザインを統一するのに利用出来ます。
|
例1 <html> |
|
<style type="text/css">スタイルの設定</style> |
htmlファイルに設定したいスタイルを記述する方法です。設定したいスタイルを<style>タグで囲んで記述します。スタイルシートの設定部分を<head>部分にまとめられるので、ページごとに設定を行うのが簡単に出来ます。スタイルシート未対応のブラウザでスタイルシートを記述したページを見ると、設定部分がそのまま表示されてしまう場合があります。それを防ぐためにコメントタグ｢<!--スタイルの設定-->｣挟み込みます。これによって未対応のブラウザでは設定が表示されなくなります。
|
例2 <html> |
|
<タグ名 style="属性:値;">テキスト</タグ名> |
タグに直接スタイルを適応させたい場合に使います。記述した部分のタグのみに有効です。スタイルの記述方法にはサイト全体、ページ全体、インラインでの設定の三種類ありますが、同じ属性が異なる方法で設定されている場合は、小さい部分での設定が優先されます。スタイルを複数重ねて、設定したい場合は、セミコロン「;｣でくぎった後に続けて属性:値;と書いていきます。
|
例3 <html> |
