ヒビカワル

人生100年時代に向けて日々変わることを決意したオッサンのブログです!

本日の学習 Vol.1

こんにちは、チャビです。 フロントから復習を始めたので備忘録を残していきたいと思います。 今日はcssについてです。

色の指定

3パータンの方法で指定することができる。 (以下は赤色の指定)

1. 色名で指定する

h1 {
color: red; *指定
}

2. rgb()で指定する

h1 {
color: rgb(255, 0 , 0); *指定
}

引数が順番に「赤、緑、青」。

色の濃さを指定する。

絵の具で混ぜるようなもんですね。

3. 16進数で指定する

h1 {
color: #ff0000; *指定
}

該当桁が同一の場合は省略可能で以下のように指定しても同じ。

数字2桁ずつが、それぞれ「赤、緑、青」を指す。

h1 {
color: #f00; *指定
}

今思うと2番目と3番目の書き方の理解が不足していたのは10進数以外をしっかりと理解していないからでした。

いやぁ本当に恥ずかしい。

ネットワークの本を読んだりしている内に2進数や16進数の理解がほんのちょっとだけ進みました。

親要素の設定を引き継ぐ

inheritで指定する

body {
color: red; *指定
}

と親要素がなっている場合は

a {
color: inherit; *指定
}

で親要素のプロパティを引き継ぐことができる。

指定するタグを限定する

1. 親タグ半角スペース子タグで記述

header h1 {
color: red; *指定
}

header以外に配置されているh1タグは影響を受けない。

2. より細かく指定する

header li > a {
color: red; *指定
}

header内のli内の直下にあるaタグに指定することができるので、header内の直下にあるaタグは影響を受けない。

marginの相殺

上下で隣接するタグにそれぞれmarginが設定されている場合は設定値が大きいタグの値が優先される。

あまり、意識しないでガチャガチャとコードをイジってました。

あぁ反省。