8月25日Verlog

CSS追加説明

CSS、通常のCSSをリセットする必要がある最大の理由は、ブラウザをまたぐためです.
ブラウザごとにHTML構文タグのデフォルト値が異なるため、これらの違いを解消する必要があります.

1. reset.css

https://meyerweb.com/eric/tools/css/reset/

デフォルトcss属性を初期化するコード

htmlでstyle.cssにリンクして使用->カスケード特性

の利用

2. normalize.css

https://necolas.github.io/normalize.css/

ブラウザ間の設計誤差、コードエラーの減少、部分初期化

は基本設計を少し修正した.すなわち

である.

3.CSS変数

出口ではあまり使われていません.

(1)root:変数の設定

:root {
--変数名:属性値;
}

:root {
	--black: #18181a;  
	--brand-color: #9147ff;
	--font-size-40: 40px;
}

(2)var():変数の使用

var(--変数名)

h1 {
	background-color: var(--black);
	font-size: var(--font-size-40);
	color: var(--brand-color);
}

(3)特定領域における変数の指定

選択者{
--変数名:属性値;
}

#intro {
	--font-color: blue;
	--font-size: 50px;
}

#intro p {
	font-size: var(--font-size);
	color: var(--font-color);
}

選択者(#intro)内でのみ変数が使用されます.