WebフロントエンドCSSに関する基本的な知識

css:

  • カスケードスタイルシート
  • HTMLをWebページにレンダリングする   
  • CSSはスタイルシートに存在します  
  • 外部スタイルシートは作業効率を向上させます  
  • 複数のスタイルを1つにスタックできます

 HTMLタグはいくつかのタイプに分けられます:

  • 改行するかどうかに応じて:
  1. 行レベルの要素  
  2. ブロックレベルの要素  
  • それが閉じているかどうかに応じて:  
  1. 全閉  
  2. 自閉症と

CSS書き込みスタイルルール:  

  • 属性:値;

CSSのカラー値:

  • ワード値、16進数のカラー値:#000000、rgb:rgb(110,255,255)、rgba(110,255,255,0.5)0.5は透明度です。

ウェブページのピクセル単位:  

  • pxは、画面に対する解像度の単位値である固定ピクセル値を表します。  
  • %ピクセル値  
  • rem相対単位は、Webページのhtmlルート要素のフォントサイズにのみ相対的です。   
  • em相対単位現在の要素のテキストのフォントサイズを基準にして、フォントのデフォルトのブラウザーのデフォルトのフォントサイズは設定されていません。

 CSSで幅と高さの属性を設定します。

  • 現在の要素はブロックレベルの要素である必要があります。行レベルの要素の幅と高さを設定する場合は、ブロックレベルの要素に変換する必要があります。

WebページにはいくつかのタイプのCSSがあります。   

  1. インラインスタイル   
  2. インラインスタイル   
  3. 外部スタイル

基本的なスタイル:  

  •  色:赤、フォントの色を制御  
  •  font-size:20px;  
  • デフォルトの属性値より大きいx-larger small x-smallは通常pxを使用します    
  • font-family:serif;フォントを設定    
  • 幅:200px、幅を設定    
  • 高さ:200px、高さを設定  
  •  border:1px solid#000;境界線を設定します    

スタイル属性:

  1. 単一属性スタイル 
  2. 複合属性スタイル     

1.インラインスタイル:

コードは次のとおりです。

Webページの効果を図に示します。

第二に、CSS埋め込みスタイル:

  •   埋め込み位置:ヘッドタグ内または本体内に埋め込み
  •   ヘッドまたはボディに埋め込まれたスタイルタグを使用する
  •   CSSセレクターでスタイルを一致させる

  cssセレクター:

  •   *すべての要素を表すWebページのすべての要素に一致する
  •   elementは要素を表します
  •   classはクラス名を表します
  •   idはidを表します
  •   子親セレクタースペース>
  •   複合セレクターは使いやすい
  • クラスIDに名前を付けるときに純粋な数値を使用しない

コードは次のとおりです。

Webページの効果を図に示します。

3.外部スタイル:

外部ライティングスタイルシートのWebページで紹介
リンクタグを使用して外部スタイル
で紹介された、ヘッドまたはボディに導入でき、埋め込みスタイルにも導入できます。

コードは次のとおりです。

Webページの効果を図に示します。

4、CSSスタイルの優先度:

  •  スタイル間に矛盾がない場合:スタイルの優先順位はスタイルの重ね合わせです。
  1.   インライン>インライン>外部(インラインスタイルは外部スタイルが読み込まれた後)
  2.   インライン>外部>インライン(インラインスタイルは外部スタイルの前に読み込まれます)
  •   スタイル間に矛盾がある場合、スタイルの優先順位は、スタイルに最も近い原則の選択です。
  1.   インライン>インライン>外部(インラインスタイルは外部スタイルが読み込まれた後)
  2.   インライン>外部>インライン(インラインスタイルは外部スタイルの前に読み込まれます)

 インラインスタイルセレクターの優先順位:
        idセレクター>クラスセレクター>要素セレクター> *セレクター

コードは次のとおりです。

インラインスタイル、外部スタイル、埋め込みスタイルの優先比較:

 

 

コードは次のとおりです。


Webページのレンダリング:

 インラインスタイルと外部スタイルには、要素セレクター間の優先度を表す優先度もあります。外部スタイルのセレクターの優先度は、インラインスタイルセレクターの優先度と同じです。

コードは次のとおりです。

Webページの効果を図に示します。

 

 

 

 

 

 

 

オリジナルの記事を3件公開 Like1 Visits 106

おすすめ

転載: blog.csdn.net/weixin_46910841/article/details/105522890