HTML・CSS基礎④

CSSの基本的な書式は、「セレクタ{プロパティ:値;}」です。セレクタ、プロパティ、

そもそもCSSの概要

3つの書き方を図解で分かりやすくするするここんな感じ
画像お借りしました：https://web-camp.io/magazine/archives/29505

CSSファイルをHTML ファイルと別ファイルで記述した時は、HTML ファイルの head タグ内（<head>～</head>の間）に以下の記述を行い CSS ファイルの取り込みを行います。
外部CSSファイルの読み込みには <link>要素を使います。
<head> <link href=”CSS ファイルのパス名” rel=”stylesheet” type=”text/css”> </head>
「href属性」と「rel属性」が必須。これらは必ず書く
画像ファイルの部分はすべて「../」を頭につけます。

インラインとは、HTML内に「埋め込む」という意味があります。言葉のとおりライン(文章)のイン(中)ということであり、HTMLタグの中にCSSを書き込む方法です
HTML ファイル内に CSS を記述する時は、HTML ファイルの head タグ内（</head>の直前が良い）
HTMLファイル内のCSSを反映したい要素を囲んでいるタグにstyle属性を与え、その値としてCSSを書き込む方法です。
<p style=”color: red;”>HTML内に直書きしたよ</p>

セレクタ…CSSで指定する対象を決める役割。英語で「select（選択する）」
h1、h2、p、bodyなどのタグ要素の指定や、「id=”属性名”」「 class=”属性名”」などで対象にした属性の指定を行います。セレクタには要素名を直接指定したり、CSSの記法を用いて指定したりする方法がある
プロパティは、CSSに関するスタイルの種類を決める役割。
セレクタの内容を「{ } 」で囲むことで、コードの内容を実行します。
値は、プロパティを調整する役割。たとえば、文字の色の「font-color」のプロパティを調整する場合、「white」「#FFFFFF」のようにカラーネームやカラーコードで具体的な色を指定します。「font-size」のプロパティであれば、「15px」「50%」のように数値で大きさを決めます。

全称セレクタ（*）
すべての要素に適用するスタイルを指定できる
* { プロパティ: 値; }
型セレクタ
指定された全ての要素にスタイルを適用するセレクタ
要素名 { プロパティ: 値; }（例：h1 { font-size: 140%; }）
id セレクタ（#）
id属性によって特定のid名がつけられた要素を対象にスタイルを適用するセレクタ
（1つの文書内では同じid名を重複して指定することはできません。 idセレクタを使用することで、文書内の場所を一意に特定してスタイルを適用することができます）
#id名 { プロパティ: 値; }　　(例：#box1 { font-size: 140%; }
class セレクタ（.）
ピリオド（.）を付けて class 名を指定すると、特定のclass名がつけられた要素を対象にスタイルを適用するセレクタ
（ class属性はid属性とは異なり、1つの文書内で同じｃlass名を重複して指定することができる）
.class名 { プロパティ: 値; }（例：.text1 { font-size: 140%; }
子孫結合子セレクタ
子結合子セレクタ（>）
隣接兄弟結合子セレクタ（+）
一般兄弟結合子セレクタ（~）