CSSセットの構造
1 規則セット
- セレクターリスト
- 複数のセレクターをコンマで区切って並べ、それに対して共通のスタイルを適用します
- セレクタは、どのHTML要素にスタイルを適用するかを指定します。例えば、要素のタグ名（例：p）、クラス（例：.className）、ID（例：#idName）などが使用されます
- 宣言ブロック
-
{ - 宣言ブロックは、中括弧 {} で囲まれ、その中にスタイルのプロパティと値のペアが記述されます。各プロパティと値はコロン（:）で区切られ、セミコロン（;）で終了します。
- 宣言
-
プロパティ : 値;
}
- 以上を ルール（規則）セットという
CSSとはカスケーディングスタイルシートの意味
2 プロパティ
プロパティ(property性格特性情報)数多くあるので標準参照となるMDN の一覧を参考にする
CSSリファレンスで調べる値も同じリファレンスで色の例や構文など参考に決めるとよい 又、VSコードのカラーピッカーで種類・色値・透明度が簡単に選択できるから便利。
marginはよく使われているショートハンド記述google検索
プロパティ値関数 calc() を使うと計算 例えば引き算・割り算をwidth の値に使うと便利{width:calc(100% / 3);｝など・・こちら
displayのキーワード値Gridを使ってページを作ってみた
戻る3 セレクター 分類
要素・クラス・IDによるセレクタータイプセレクター（div,p header,-など）
class こちら優先
id
ユニバーサルセレクター ＊部分で使うとき<articl>だけの時articl＊でOK
属性によるセレクター<a href="https://www.yahoo.com"></a> の例で説明
存在や値のセレクター a[href]{ } はaタグのhref要素だけ指定している
部分文字列一致セレクター a[href="https://www.yahoo.com"]{ } はaタグのhref要素のhttps://www.yahoo.comだけ指定している
部分文字列一致セレクター(前方一致) a[href^="https://www"]{ } はaタグのhref要素の前方だけ指定している
部分文字列一致セレクター(部分) a[href*="yahoo"]{ } はaタグのhref要素のyahooだけ指定している
部分文字列一致セレクター(最後) a[href$=".co.jp"]{ } はaタグのhref要素の.co.jpだけ指定している
疑似クラス及び疑要素によるセレクター<article><p>タグの例で説明
ー:first-child, :first-of-type -- article p:first-of-type{ } はarticleタグのp要素で始まるものだけ指定している
last-of-typeもあります -- article p:nth-of-type(2){ }は2列目だけ指定
ー:not -- article p:not（:first-of-type）{ } は:first-of-tye以外のものだけ指定している
ー:hover -- p:hover{ } はカーソルで触れたときだけ指定している p:not(:hover){ }にすると逆で触れると消える
ー::after ::befor -- h1::after{ content: "!!!" }は後ろに ！！！が付く 前もできる
ー::first-line -- p::first-line{}は一列目だけ色を変えるなど p::first-letter{}は最初の文字だけ
結合子ーdescendant combinator(子孫結合子) main article h1{}は mainの中のarticleの h1だけ指定
ーchild cobinator(子結合子) main > h1{}はh1だけ指定
ー 隣接兄弟結合子 article p + p{ } は<p></p>が数列あるとき隣接の2番目だけマージンや色を付けるなどとき
ー 一般兄弟結合子 article h1 ~ p{ } はh1の後ろだけマージンや色を付けるなどとき
ー
MDN参考に必要に応じてMDNを見て下さい
4 カスケード・詳細度・継承 について
カスケード cascading（ 滝のように連鎖的流れるの意 ）CSSルール順序 同じh1だと後に書いた色が出る
カスケード順１と３が重要
詳細度複数のルールが適用された場合の優先度＃優先 .が次 h1などが次の順
詳細度の項を見て下さい インラインスタイルは1000なので一番優先
詳細度のスコアリング スコアリング見方
!important h1 { color: orange !important;} が最優先される が多くは使わない
承継親要素から子要素へプロパティ値を引き継ぐ
承継の抑制inherit,initial,unset
親の値引継デフォルト値inheritがあればinheritなければinitial
color: red; color: inherit; color: initial; color: unset;
全てのプロパティ値のリセット
「イニシャル」の翻訳、初期、頭文字
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</title>
<style>
div {
background-color: orange;
border: 3px solid black;
}
.fix {
background-color: initial;
border: initial;
}
/* 一部をリセットでき、または、以下のようにしてすべてのスタイルをリセット */
/* .fix {
all: unset;
} */
</style>
</head>
<body>
<div>ブロック1</div>
<div class="fix">ブロック2</div>
</body>