CSSの仕組み
プレーンなHTMLページはすでにブラウザ独自のスタイルが適用されて到着します。リンクは青色で下線が引かれ、テキストは黒色のセリフなしフォント、見出しはサイズが段階的に小さくなります。CSSはその生の構造を取り、代わりにどのように見えるべきかを決定する方法です。しかし、色を1つ変更したりボックスを1つ移動したりする前に、スタイルがまずどのようにしてページに到達するのか、そして2つのルールが同じ要素について意見が異なるときに何が起こるのかを知る必要があります。
CSSをページに関連付ける
CSSをページに追加する方法は3つあり、違いはほぼどこにスタイルを書くかの問題です。
1つ目は**インラインスタイル**で、要素にstyle属性を使って直接書きます。
<p style="color: teal;">1つのティール色の段落です。</p>これは1つの段落だけをスタイル指定します。2番目の方法はページの<head>内の内部<style>ブロックで、一度に多くの要素をスタイル指定できます。3番目で、使うべき方法は、ページにリンクされた別のCSSファイルです。そのファイルにスタイルを1回書き、それにリンクするすべてのページがそれを取得します。衣料品店に例えるなら、1人ずつ衣装を説明する代わりに、ドレスコードを1回書き、誰もがそれに従うようなものです。
外部アプローチは全体では以下の通りです。スタイルシートをリンクするHTMLファイルと、スタイルシート自身です。
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="intro">サイトへようこそ。</p>
</body>/* styles.css */
.intro {
color: teal;
font-size: 1.25rem;
}
styleを使う方法、<style>ブロックを使う方法、<link>でリンクする別ファイルを使う方法です。別ファイルを使ってください。スタイルを1回書き、それにリンクするすべてのページが同じように見えます。 ルールの構造
CSSは**ルール**として書かれ、すべてのルールは同じ形をしています。カードをスタイル指定する1つはこちらです。
.card {
color: navy;
padding: 16px;
}前の.cardはセレクタです。このルールが適用される要素を選びます。この場合、cardクラスを持つ何もかもです。中括弧内のすべてはルール宣言ブロックです。color: navy;のような中の各行は1つの宣言です。プロパティ（color）とそれが持つ値（navy）で、コロンで区切られセミコロンで終わります。ルール全体を文として読んでください。「すべてのカード、色を紺にしてパディングを16ピクセルにしてください。」
.cardのようなセレクタがエレメントを選び、color: navy;のような各宣言はプロパティと値がそれらの間にコロンがあり終わりにセミコロンがあります。それらのパーツに名前を付けることができれば、読むすべてのルールが同じように見えます。 カスケード
時々2つのルールが同じエレメントをスタイル指定しようとし、CSSはどちらが勝つかを決定する方法が必要です。その決定は**カスケード**で、CSSのCの由来です。
.card {
color: navy;
}
.card {
color: teal;
}両方のルールがカードをターゲットし、両方が色を設定します。カードは最後のため、ティール色で終わります。2つのルールが同じ強さを持つとき、後に書かれたものが勝ちます。順序は重要で、水のようにファイルを下るフロー、これはカスケードという名前の由来です。2つ目のタイブレーカーもあります。より具体的なセレクタはより一般的なものを打ちます。より一般的なルールがそれより後に来ても、カードに正確にターゲットされたルールはより広いルールを上書きできます。セレクタ章でその特異性に詳しく会うでしょう。
継承
ボックスに色を設定し、その内部のテキストは多くの場合その色も回ります。それらを直接スタイル指定したことはないのにですが。その受け渡しは**継承**と呼ばれます。
.site-header {
color: white;
font-family: Georgia, serif;
}ヘッダーの内部のテキストのすべての部分、見出し、リンク、タグライン、その白い色とそのフォントをピックアップします。それら自身のルールなしで、colorとfont-familyは継承されたプロパティのためです。しかしすべてが受け渡すわけではありません。paddingのようなスペーシングプロパティは継承しません。ヘッダーに入れたパディングはヘッダーに留まり、その内部のエレメントに現れません。粗いガイドとして、テキスト関連のスタイルは子にフローし、スペーシングと境界線のようなボックス関連のスタイルはその場に留まります。
colorまたはfont-familyを設定し、内部のテキストは無料でピックアップします。paddingのようなスペーシングは受け渡されず、あなたが入れたその場に留まります。粗いルール。テキストスタイルは子に移動し、ボックススタイルはその場に留まります。