分かる方、教えて頂けませんか？
No.1
357
100
CSSを使った、スタイルの設定方法は大きく分けて3つあります。:
この3つは記述する場所が異なりますが、中身(?)はほぼ同じです。
例えば、以下のhtmlがあったとします。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample</title> </head> <body> <p id="summary"> このドキュメントに<b>スタイル</b>を適用します。 </p> <p> なお、これは<b>サンプル</b>です。 </p> </body> </html>
別のCSSファイルにスタイルを記述します。複数のドキュメントに同じようなスタイルを適用するときに便利です。
CSSファイルの拡張子は、必ず「.css」にしてください。
このCSSファイルの名前は、例として「sample.css」とします。
/* ←これはコメントを表します。他のところに影響がありません。→ */ /* body要素の背景を黄にする。 */ body { background-color: #ff0; } /* b要素の文字の色を赤にする。 */ b { color: #f00; } /* b要素をポイントしたときの背景を黒、文字の色を白にする。 */ b:hover { background-color: #000; color: #fff; } /* idが「summary」の要素に実線、10px、青のボーダーを設定する。 */ #summary { border: solid 10px #00f; }
CSSファイルは、下のコードをhead要素に入れて読み込みます。href属性の値は書き換えてください。
<link rel="stylesheet" href="sample.css" type="text/html">
body { background-color: #ff0; }
このコードだったら、「body」の部分を「セレクタ」、中括弧({ ～ })の中の「background-color」の部分を「プロパティ」、「#ff0」の部分を「値」と言います。
ドキュメントと同じファイルにスタイルを記述します。一つのドキュメントに対してだけ適用する場合に便利です。
の中にスタイル情報を記述します。
<style> /* ここにスタイル情報を記述します。 別のCSSファイルに設定する方法と内容が全く同じなので割愛します。 */ </style>
一つ一つの要素にスタイルを記述します。○○の要素だけに設定したい、というときに便利です。
例えば、body要素の背景を黄にするときは以下のようにします。
<body style="background-color: #ff0;"> ～ </body>
長くなりましたが、基本的なことを説明しました。CSSについてまとめてあるサイトがあるので、そちらを使うといいと思います。
sibazyun
2013/06/19 16:43:47
8
0
rdgfngubihn
2
1
1
こんなに長くかいていいただきありがとうございます！
2013/06/19 22:10:43