はじめてのHTML③ HTMLで表示された文字にCSSで色をつける
インラインのstyleで色をつける
htmlのタブにcssで直接スタイルを記述する。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <p align="center" style="color:blue;">こんにちは</p> <p align="left" style="color:red;">こんにちは</p> <p align="right" style="color:green;">こんにちは</p> </body> </html>
タブ内にstyle="color:blue"と書けばタブに囲まれた文字の色を指定できる。
id属性とclass属性を使って外部CSSファイルからスタイルを指定して色をつける
直接スタイルを書かずにタブごとに名前をつけてそれぞれ外部のcssファイルから色を指定する。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet"type="text/css"href="style.css"> <title>test</title> </head> <body> <p align="center"id="iro">こんにちは</p> <p align="left"class="hani">こんにちは</p> <p align="right"class="hohe">こんにちは</p> </body> </html>
それぞれのタブに "iro" "hani" "hohe" 名前をつけた。名前には属性があり、id属性の名前は重複が無い方がよくてclass属性の名前は同じものがいくつあっても良い。
外部のcssファイルを記述する。同じくmiエディタでコードを書いてから保存する拡張子を.cssにすればcssファイルと認識される。
@charset"utf-8";
p#iro { color: blue;
}
p.hani { color: red;
}
p.hohe { color: green;
}
セレクタ {プロパティ名:値;}という形式で記述する。 指定するスタイルによってセレクタは異なる。html内の対象がclass属性の場合はp.名前とし、id属性の場合はp#名前とする。
