CSSの詳細-jsチュートリアル-php.cn

CSSの詳細

WBOY

リリース： 2024-08-21 06:11:06

オリジナル

897 人が閲覧しました

CSS In Details

ページでの HTML のレンダリング方法

ブラウザが HTML をロード
HTML を DOM に変換します
リンクされたリソースを取得しています
ブラウザは CSS (CSSOM) を解析します
DOM と CSSOM を結合する
UI がペイントされています (FCP) (最初のコンテンツフルペイント)

要素の HTML タイプ

主に

ブロックレベル
インライン

CSS セレクター:-

タイプ/属性セレクター
クラスセレクター
ID セレクター
ユニバーサルセレクター (*)

CSS の継承

この問題は、継承 CSS プロパティ (つまり色) が要素に直接設定されていない場合に発生し、そのプロパティの値が見つかるまで親チェーンが走査されます。

<div class="body">
    <p>This is a Paragraph, but it will have the blue color due to inheritance</p>
</div>
<style>
.body{
    color: blue;
}
</style>

ログイン後にコピー

ケース 2

<div class="body">
    <p>This is a Paragraph, but it will have the red color due to direct Specification</p>
</div>
<style>
p {
color: red;
}
.body{
    color: blue;
}
</style>

ログイン後にコピー

ケース 3

<div class="body">
    <p>This is a Paragraph, but it will have the blue color due to strong Specification</p>
</div>
<style>
p {
color: red;
}
.body p{
    color: blue;
}
</style>

ログイン後にコピー

CSS の特異性とは

どの CSS 宣言を適用するかを決定するためにブラウザーが使用するアルゴリズム。
各セレクターには計算された重みがあります。最も特定の重みが優先されます。 id--class-type ID セレクター: 1 - 0 - 0 クラスセレクター: 0-1-0 タイプセレクター: 0-0-1

注:- インライン CSS はより詳細であり、!import はさらに詳細です

CSS 特異性計算ツール

エムとレム

EM:- 親のフォント側を基準

<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 2em; //16px * 2 = 32px;
}

p {
font-size: 2em; // 32px * 2 = 64px
}
</style>

ログイン後にコピー

REM:- ルートのフォント側を基準

<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 2rem; //16px * 2 = 32px;
}

p {
font-size: 2rem; // 16px * 2 = 32px
}
</style>

ログイン後にコピー

%:- % 計算

<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 120%; //1.2*16 = 19.2px;
}

p {
font-size: 120%; // 1.2 * 19.2 = 23.04px
}
</style>

ログイン後にコピー

CSS コンビネータ

1.子孫セレクター (ul li a)

<ul>
<li><a href='#'></a></li>
</ul>

ログイン後にコピー

2.子コンビネータ (直接の子孫) (div.text > p)

<div>
<div class="text">
   <P>Here the CSS will apply<P>
</div>
<div>
  <p>No CSS will apply</p>
</div>
</div>

ログイン後にコピー

3.隣接兄弟結合子 (h1 + p)

注:-

h1 と p は両方とも同じ親に存在する必要がありますそして p は h1 タグの直後にある必要があります

4.一般的な兄弟結合子 (p ~ code)

注:-

隣接する兄弟のような直接の兄弟を持つべきではありません。でも、彼らには兄弟がいるはずです
同じ親を持つ必要があります

ブロック要素モディファイアアーキテクチャ(BEM)

再利用可能なコンポーネントとコード共有の作成に役立つ設計手法

その他の方法論

OOCS
SMACSS
スーツCVSS
アトミック
ベム

ブロック

ヘッダー
メニュー
入力
チェックボックス (スタンドアロンの意味)

要素 (ブロックの一部)

メニュー項目
リストアイテム
ヘッダータイトル

修飾子

無効
強調表示
チェック済み
黄色

.block__element--modifier 構文

<form class=form>
   <input class='form__input'/>
   <input class="form__input form__input--disabled"/>
   <button class="form__button form__button--large"/>
</form>

ログイン後にコピー

ボックスモデル:- (W.I.P)

詳細情報からさらに情報を追加する必要があります

注:-

グリッドレイアウトとフレックスレイアウトについては別の記事を用意します。

以上がCSSの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。