目次
CSSの書き方
CSSは、HTMLで作った文字やレイアウトの見た目を整えてくれる言語です。
1.CSSは、<style>から</style>の間に記述します。
<style>
#a1 {
color: red;
}
</style>
<p id="a1">あいうえお</p>
※外部ファイルにcssを記述するときは、<style>と</style>は不要です。
2.どの箇所に影響を与えるかを指定します。セレクタといいます。
<style>
#a1 {
color: red;
}
</style>
<p id="a1">あいうえお</p>
2行目の#a1はセレクタです。#a1は、id="a1"を表し、7行目を指しています。
3.何をどうするかを指定します。
<style>
#a1 {
color: red;
}
</style>
<p id="a1">あいうえお</p>
3行目は、「プロパティ」と「値」で以下の意味になります。
プロパティは、なにを→ color →文字の色を。
値は、どうする→ red →赤色にする。
上記コードをブラウザで見ると文字が赤になります。
図にすると以下になります。
セレクタに対してプロパティが複数の例
<style>
#a1 {
color: red;
font-weight: bold;
background: LightSkyBlue;
}
</style>
<p id="a1">あいうえお</p>
3行目は、文字の色は赤を指定しています。
4行目は、文字を太字にしています。
5行目は、背景色は水色にしています。
CSSを記述する場所
CSSは以下の場所に記述できます。
・外部のファイルにCSSを記述する
・HTML内部でCSSを記述する
・タグ内でCSSを記述する
CSSのコメントの書き方
コメントは、/* で始まり、 */ で終了します。
<style>
/* コメントです */
#p1 {
color: red;
}
/*
複数行のコメントです
*/
</style>
<p id="p1">あいうえお</p>
6~8行目のように複数行のコメントも可能です。
コメントされた箇所は、プログラムの実行に影響を与えません。
関連の記事
CSS セレクタの一覧とIDセレクタとクラスセレクタ
CSSを記述する場所のサンプル
CSS セレクタの優先順位(!important)