検索

ホームページ >ウェブフロントエンド >jsチュートリアル >CSSの詳細

CSSの詳細

WBOY
WBOYオリジナル
2024-08-21 06:11:06918ブラウズ

CSS In Details

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

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

要素の HTML タイプ

主に

  1. ブロックレベル
  2. インライン

CSS セレクター:-

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

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 の特異性とは

  1. どの CSS 宣言を適用するかを決定するためにブラウザーが使用するアルゴリズム。
  2. 各セレクターには計算された重みがあります。最も特定の重みが優先されます。 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)

注:-

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

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

注:-

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

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

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

その他の方法論

  1. OOCS
  2. SMACSS
  3. スーツCVSS
  4. アトミック
  5. ベム

ブロック

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

要素 (ブロックの一部)

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

修飾子

  1. 無効
  2. 強調表示
  3. チェック済み
  4. 黄色

.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 サイトの他の関連記事を参照してください。

css html for checkbox class Attribute Property dom flex input ul li ui
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：コードの日 / 日: 新たな焦点次の記事：コードの日 / 日: 新たな焦点

関連記事

続きを見る