CSSの基本構文
I.概要
1.CSSの概念
-
カスケードスタイルシート、HTMLドキュメントスタイルを表現するために使用されるコンピューター言語
カスケード：カスケードと継承を備えたCSS全体の読み込み機能
スタイル：HTML要素、テキスト、背景、ボックスモデル、フローティング、ポジショニングの表示方法
-
Webページを静的に変更し、さまざまなスクリプトを使用してWebページの各要素を動的にフォーマットします
-
Webページの構造とスタイルの分離を実現します
2.CSSルール
-
セレクタ
-
1つ以上のスタイル属性
-
書き込み位置
-
スタイル属性にインラインで書き込む
<div style="width:100px;font-size:14px">1</div>- 短所：構造から完全に分離されていない、重いと解釈に役立たない、公共の属性を実行できない
-
内嵌式
<head> <style type="text/css"> p,div{font-size:14px} </style> </head> <p>123</p>-
優れた：構造スタイルの予備的な分離を実現し、コードを保存します。
-
欠如：複数のhtmlページを使用することはできません。トップヘビーで、高速読み取り構造に役立ちません。
-
-
アウトリーチ
htmlファイルで、リンクの外側にcssファイルを追加します。リンクの属性値は次のとおりです。
<link rel="stylesheet" href="01.css" type="text/css">-
rel：「スタイルシート」は外部ファイルとhtmlの関係を紹介します
-
href：「cssファイルパス」、ハイパーテキストアプリケーション
-
タイプ： "text / css" CSSコードをプレーンテキストとしてロードします
優れた：複数のhtmlファイルで使用できる構造スタイルの完全な分離を実現し、開発者の作業負荷を軽減し、階層的な実装を実現します
-
-
インポート
<style>@import url(o1.css);</style>- 方法は外部スタイルと同じですが、表示では構造が表示され、最後にスタイルがインポートされます
-
-
スタイルの文法規則
- 対応するセレクターを選択する必要があります
- {キー名：キー値}書き込み方法
3.コードスタイル
-
フォーマットの拡張：開発プロセスで使用され、読みやすく、調整が簡単
-
コンパクトフォーマット：サーバーにアップロードするときに使用され、不要な空白文字を減らし、ファイルサイズを圧縮します（特定のツールを使用）
-
英語の大文字は表示効果に影響しません。小文字をお勧めします
-
セレクター{}間、および属性名と属性値の間にスペースを入れてください
2、CSS固有のタグ
1.一般的なスタイル
テキストの3つの属性
-
色
- 色名色：黄色;
- 16進数の色名＃0000ff
- rgb（赤、緑、青）0〜255の3つの原色
-
フォント（font-family： "Arial"、 "Arial"）
- 最初のフォントが存在しない場合は、次のフォントを実行します
- ブラウザに読み込まれるフォントはコンピュータに付属しています。ユーザーが確実に表示できるように、最後のフォントはすべてのマシンで使用されているフォントに設定されています。
-
フォントサイズ
-
相対的な長さ
- px：ピクセル値、最も一般的に使用される単位
- em：倍数、祖先要素によって設定されたフォントサイズの倍数を継承するために使用されます
- ％：パーセンテージ、祖先要素から継承されたフォントサイズのパーセンテージ
-
絶対長さ
-
cm mmptで
フォントサイズがブラウザのデフォルトの最小フォントサイズよりも小さい場合、デフォルトの最小フォントサイズとして扱われます
-
-
ボックスの3つの属性
- 幅
- 高さ
- 背景色
3、CSSセレクター
ベースセレクター
-
ラベルセレクター
p{}- タグ名でタグ要素を選択し、同じ名前のすべてのタグを選択すると、HTML要素のネスト関係は無視されます
- 部分ラベルに特別なスタイルを追加することはできません
-
IDセレクター
#name{}- タグの上のid属性はタグを選択し、各id属性値は一意です
- method＃id属性値の書き込み
- 複数の選択ではなく、単一の選択のみを実現できます
-
クラス属性セレクター
.name{}- メソッドの書き込み。クラス属性値
- ラベルの種類を区別せずに、他の人のクラスと同じにすることができます
- クラス属性は、複数のスタイルを設定するために、スペースで区切られた複数の属性値を持つことができます
- アトミッククラス、一般的に最も一般的に使用されるスタイルは、最初に個別に記述し、必要に応じて直接呼び出すことができます
-
ワイルドカードセレクター
*{ margin:0; padding:0 }-
特別な記号でページ上のすべてのタグを選択します
-
表記*（htmlタグを含むすべてのタグ）
-
通常、ページの初期スタイルをクリアするために使用されます
選択効率は比較的低く、すべてのタグにパブリックスタイルが必要なわけではありません。通常、大規模なオンラインWebサイトでは使用できません*。
-
高度なセレクター
-
子孫セレクター
div p{font-color:rgb(255,0,0)}- タグ間のネスト関係を通じて要素を選択するために、それは包含セレクターにもなります
- スペースは子孫を意味し、スペースはスペースの後のセレクターの祖先でなければなりません
- 一連の基本的なセレクターで選択範囲を狭め、最後に最後のセレクターが選択されたラベルを決定します
- クラスの数を減らし、選択をより効率的にします
-
交差点セレクター
p .demo .ps{font-color:red}- ラベルのすべての基本的なセレクターのニーズを満たすラベルを選択してください
- 最も一般的なタグとクラスの共通部分であるタグセレクターが最初に配置されます
- IE6は、クラス名の継続的な書き込みをサポートしていません。最後の名前のみをサポートしています。
-
ユニオンセレクター
h1,.demo{font-color:#eee}- 異なる要素が同じスタイルを設定する必要がある場合、複数の書き込みが無駄になり、一度に直接書き込むことができます
- 複数のセレクターはコンマで区切ります
- ワイルドカードセレクターの欠点を補うために、ターゲットを絞った選択操作を実行できます
4、積み重ね
1.継承
-
継承された祖先スタイルの表示
-
継承可能なテキスト依存関係スタイル
-
コンソール情報ビュー
- element.styleインラインスタイルパーツ
- ユーザーエージェントスタイルシートユーザーのブラウザデバイスのデフォルトの表示スタイル
- 継承元スタイル属性から継承
-
統一されたテキストスタイルを大きな祖先本体に設定できます
2.スタッカビリティ
複数の祖先がスタイルを設定する問題を解決し、子孫はその祖先レベルと優先順位の判断を継承する必要があります
[外部リンク画像の転送に失敗しました。ソースサイトにホットリンク防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-XYuAm8Rr-1607231243490）（D：\ myself \ Study_work \ phone \ a.png） ]
ターゲットラベルを選択
-
基本的なセレクターの重み、選択範囲が大きいほど、重みは小さくなります。
*** <タグセレクター<クラスセレクター<IDセレクター**
-
高度なセレクターの重み、総数の比較、ユニオンは個別に表示する必要があります
IDの数、クラスの数、タグの数
-
セレクターの重みが同じである場合、後で記述されたものがスタックされてスタイルが実行されます
選択したターゲットタグの祖先
- 近接性の原理
- 重量を比較するために、距離は同じです
- 距離が同じで、重さが同じで、次に書き込みのカスケードが最初に書き込まれます
重要
- 重みを比較するときに、！importantを追加できます。
- 近接性の原理では、重みを比較する必要はなく、重要なものは無効です
行内式
-
高度なセレクターの重み、総数の比較、ユニオンは個別に表示する必要があります
IDの数、クラスの数、タグの数
-
セレクターの重みが同じである場合、後で記述されたものがスタックされてスタイルが実行されます
選択したターゲットタグの祖先
- 近接性の原理
- 重量を比較するために、距離は同じです
- 距離が同じで、重さが同じで、次に書き込みのカスケードが最初に書き込まれます
重要
- 重みを比較するときに、！importantを追加できます。
- 近接性の原理では、重みを比較する必要はなく、重要なものは無効です
行内式
- インラインスタイルは最も重要ですが、重要よりも低いです