ここではhtmlに読み込ませたCSSを具体的にどのようにして記述していくかを述べていきます。
まず、一行目に
@charset; "utf-8";
と記述します。これによりこのスタイルシートがどの文字コードで書かれたものなのかを宣言します。 基本的にCSSは
セレクター名{プロパティ名: 値;}
といった具合にどの部分に対する装飾なのかを書いていきます。 これは
何に対する❓{何の指示か❓： どれくらい❓;}
といった意味をそれぞれ持ちます。
タグにてよく、
<div id="nice">
や
<p class="nice">
というような表記を見かけます。それぞれの違いは何なのでしょうか。
classとidの違いは
classは何度でも同じ名前を付けられる
のに対して(例えば"nice"という名前)
idは一つの名前を一度しか使ってはいけません。
classで同じ名前を付けておけばcssで同じクラスのものの装飾を一括指定できます。)
例えばhtmlにて
<p class="nice">ここの部分だけを装飾したい</p>
と記述したとします。ここの部分だけを記述するためには、
p.nice {
font-color: red;
}
とすればここの部分は赤文字で表示されます。そして、使いまわしも可能です。
<div id="nice">ここの部分だけを装飾したい</div>
div#niceまたは#nice {
height: 15px;
weight: 15px;
}
ここではniceと名づけられたdiv要素の高さと横幅を指定しています。そして一度しか使ってはいけません。
また、CSSには「後に記述されたものが優先して適用される」というルールがあります。またこれについては、clearfixのページもご覧ください。
HTML5で書かれたwebページはただ単にCSSで記述していったとしてもブラウザ間で多少の表示の違いがあります。
そのため、webページの多くは、
HTMLで自分で編集したCSSファイルの前に、ブラウザの表示をリセットするためのCSSの挿入
が使われています。
例：
<head>内 <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="自分の書きたい.css"> </head>
このように使います。では、実際にreset.cssにはどのような内容があるのでしょうか。 詳しくは、CSSのリセットをご覧ください。
