タグのstyle属性にスタイルを記述します。

このスタイルは現在のタグでのみ機能し、再利用することはできません。後のメンテナンスには不便なので、お勧めできません。

head内のstyleタグにスタイルシートを記述する

内部スタイル シートを使用して、パフォーマンスと構造をさらに分離します。複数の要素のスタイルを同時に設定して、後のメンテナンスを容易にすることができます。

スタイルシートを外部CSSファイルに記述し、リンクタグを介して外部ファイルを導入します。

スタイルを外部スタイル シートに書き込むと、同じスタイル シートを別のページで使用できるため、後のメンテナンスが容易になります。

セレクターを使用してページ上の要素のグループを選択し、それらの要素にスタイルを設定します

要素セレクター

IDセレクター

クラスセレクター

ワイルドカードセレクター

ユニオンセレクター

交差点セレクター

子孫要素セレクター

子要素セレクター

宣言ブロックは実際には CSS 宣言です

声明

子要素を直接含む要素を親要素と呼びます。

親要素に直接含まれる要素は子要素と呼ばれます。

子孫要素を直接的または間接的に含む要素は祖先要素と呼ばれ、親要素も祖先要素です。

祖先要素に直接的または間接的に含まれる要素は子孫要素と呼ばれ、子要素も子孫要素と呼ばれます。

同じ親要素を持つ要素は兄弟と呼ばれます。

ブロック要素は、その内容に関係なく、ページ上の独自の行を占めます。

通常、ページのレイアウトにはブロック要素を使用します。

共通のブロック要素

インライン要素は独自のサイズのみを占有し、行を占有しません。

インライン要素はインライン要素（インライン）とも呼ばれます。

一般に、インライン要素はテキストの効果を設定するために使用されます。

共通インライン

一般に、ブロック要素はインライン要素をラップするために使用されますが、インライン要素はブロック要素をラップするためには使用されません。

a 要素には、それ自体を除く任意の要素を含めることができます

p 要素にはブロック要素を含めることはできません

通常のリンク（未訪問のリンク）を表します。

訪問したリンクを表します

マウスが移動するリンクは、他の要素に対してホバーするように設定することもできます。

クリックされているリンクを他の要素に対してアクティブに設定することもできます。

フォーカスを受け取る要素の状態を示します。通常はテキスト ボックスで使用されます。

コンテンツが選択されていることを示します

Firefox では代わりに ::-moz-selection を使用してください

最初の文字を表します

テキストの最初の行を表します

要素の前面を選択します

一般に、この疑似クラスはコンテンツと組み合わせて使用​​され、これを通じて指定された場所にコンテンツを追加できます。

要素の最後のエッジを選択します

一般に、この疑似クラスはコンテンツと組み合わせて使用​​され、これを通じて指定された場所にコンテンツを追加できます。

指定された属性を持つ要素を選択する

属性値が指定された値と等しい要素を選択します

属性値が指定した内容で始まる要素を選択します

属性値が指定された内容で終わる要素を選択します

属性値に指定された内容が含まれる要素を選択します

前へ 次へ

前〜次のすべて

親要素の最初の子要素を検索し、すべての子要素間で並べ替えます。

親要素の最後の子要素を検索し、すべての子要素間で並べ替えます。

親要素内の指定された位置で子要素を検索し、すべての子要素間で並べ替えます。

例

指定された型の最初の子要素を検索します

指定された型の最後の子要素を検索します

指定された型の指定された子要素を検索します。

:not(セレクター)

.abc:not(div)

インラインスタイル

IDセレクター

クラスおよび疑似クラスセレクター

要素セレクター

ワイルドカードセレクター

継承されたスタイル

ピクセル

%

えっと

色の言葉

RGB値

16進数のRGB値

フォント

テキストスタイル

背景色

背景画像

パラメータとして URL アドレスが必要です

例:background-image:url (画像へのパス)

背景画像のリピートモードを設定する

オプションの値:

背景画像の位置を設定する

設定方法１

設定方法2

背景をページと一緒にスクロールするかどうかを設定するために使用されます

オプションの値

背景の短縮属性

これを使用して、背景に関連するすべてのスタイルを設定できます。

この省略された属性には順序や数量の要件はありません。書き込まれない属性にはデフォルト値が使用されます。

背景の不透明度を設定するために使用されます

オプションの値

IE8 以下のブラウザはこのスタイルをサポートしていません。代わりにフィルタを使用できます。

構造

パフォーマンス

行動

Webページのルートタグ

ページ内にルートタグは 1 つだけあります

Web ページ内のすべてのコンテンツは HTML タグ内に記述する必要があります

Webページのヘッダー

このタグのコンテンツは Web ページに直接表示されません。

このタグは、ブラウザによるページの解析を支援するために使用されます。

サブタグ

Webページの本文

Web ページのすべての表示部分を本文に記述する必要があります

タイトルタグ

HTML には 6 つのレベルの見出しがあります

6 段階の見出しのうち、h1 が最も重要で、h6 が最も重要ではありません。一般的なページでは h1 ～ h3 のみが使用されます。

h1 の重要性はタイトルに次いで重要であり、ブラウザは主に h1 のコンテンツを検索してページのメイン コンテンツを決定します。

通常、h1 は 1 ページに 1 つだけ記述できます。

段落タグ

改行タグ

水平線ラベル

他の外部ページをページに導入できる

属性

インライン フレーム内のコンテンツは検索エンジンで取得されないため、開発中はインライン フレームを使用しないようにしてください。

現在のページを他のページにジャンプさせることができます

<a>リンクテキスト</a>

属性

&エンティティ名;

空間

>

著作権マーク

送信元

代替

幅

身長

JPEG

GIF

PNG

写真選択の原則

どちらかがペアで出現する

または自己終了タグ

声調で強調を表現する

コンテンツの重要性を示します

単純な斜体を意味します

単に大胆という意味です

詳細などの内容を示します

参考内容を示すために、書籍タイトルのあるものには引用を使用できます。

短い引用、インライン引用

長い参照、ブロックレベルの参照

上付き文字

添字

削除されたコンテンツ

挿入されたコンテンツ

事前にフォーマットされたタグは、コード内のスペースと改行のフォーマットを保持できます。

プログラムコードを表します

順序なしリストを作成するには ul を使用し、リスト内のリスト項目を表すには li を使用します。

記号を箇条書きとして使用する順序なしリスト

ol を使用して順序なしリストを作成し、li を使用してリスト内のリスト項目を表します。

箇条書きとして連番を使用する

リストスタイル:なし

なし

左

右

1. 要素がフローティングされると、ドキュメント フローから完全に切り離されます。

2. フローティング後、要素は常に親要素の先頭に移動します。

3. 親要素または他の浮動要素の境界に遭遇するまで移動が停止します。

4. フローティング要素がブロック要素の上にある場合、フローティング要素はブロック要素を覆いません。

5. 浮動要素はその上の浮動兄弟要素を超えることはなく、最大でも片側に配置できます。

6. フローティング要素はテキストをカバーしません。テキストはフローティング要素の周囲に自動的に回り込みます。フローティングすることでテキストの回り込み効果を実現できます。

要素がフローティングされると、その要素はドキュメント フローから完全に削除されます。

ブロック要素

インライン要素

ドキュメント フロー内の親要素の高さは、デフォルトで子要素によって拡張されます。子要素がドキュメント フローから切り離されると、親要素の高さをサポートできなくなり、高さが低下します。折りたたむ親要素。

親要素の高さが崩れると、すべての要素の位置が上に移動してしまい、ページ全体のレイアウトが乱れてしまいます。

方法 1

方法 2

方法 3

静的

相対的

絶対

修理済み

1. 要素の相対位置決めがオンになった後、オフセットが設定されていない場合、要素はまったく変更されません。

2. 相対的に配置された要素は、ドキュメント フロー内の独自の位置を基準にして配置されます。

3. 相対的に配置された要素はドキュメント フローから切り離されません。

4. 相対配置によって、ブロック要素かブロック要素か、インライン要素かインライン要素かに関係なく、要素の性質は変わりません。

5. 相対的に配置された要素がより高いレベルに引き上げられます

1. 要素を絶対位置に設定した後、オフセットを設定しないと要素の位置は変わりません。

2. 絶対配置要素は、配置が有効になっている最も近い祖先要素を基準にして配置されます。すべての祖先要素で配置が有効になっていない場合は、ブラウザ ウィンドウを基準にして配置されます。

3. 絶対的に配置された要素は、ドキュメント フローから完全に切り離されます。

4. 絶対配置では要素の性質が変わります。インライン変数ブロック。ブロックの高さと幅はコンテンツによって拡張され、排他的な行を占有しません。

5. 絶対位置決めは要素をより高いレベルに引き上げます

固定位置決めは特別な種類の絶対位置決めであり、その特性のほとんどは絶対位置決めと同じです。

違いは、固定配置された要素は常にブラウザ ウィンドウを基準にして配置されることです。スクロールバーでもスクロールしません

IE6は固定位置をサポートしていません

配置された要素 > フローティングされた要素 > ドキュメント フロー内の要素

要素の位置決めがオンになっている場合、z-index を通じて要素のレベルを設定できます。

z-index 値が大きいほど、より多くの優先要素が表示されます。

z-index 値が同じ場合、または z-index がない場合は、下位の要素が最初に表示されます。

親要素が子要素をカバーすることはありません

要素の位置決めがオンになっている場合、要素の位置をオフセットによって設定できます。

左

上

右

底

通常、要素の位置を定義するために使用される値は 2 つだけです。

1. 通常、使用するソフトウェアは C/S アーキテクチャです

2. たとえば、システム QQ、360、オフィス、XMind のソフトウェア

3.C はクライアントを表します。ユーザーはクライアントを通じてソフトウェアを使用します。

4.S はサーバーを表し、ソフトウェアのビジネス ロジックの処理を担当します。

特徴

1.B/S は本質的には C/S ですが、B/S アーキテクチャ ソフトウェアはソフトウェアのクライアントとしてブラウザを使用します。

2. B/S アーキテクチャ ソフトウェアは、ブラウザを使用して Web ページにアクセスしてソフトウェアを使用します。

3. 例: JD.com Taobao 12306 Zhihu Sina Weibo

特徴

0 1

10 11 100 101 110 111

0 1 2 3 4 5 6 7 8 9

10、11、12、13、14。 。 。

16 歳以上の場合は 1 を入力してください

0 1 2 3 4 5 6. 。 。 9 ABCDEF

10 11 12 ... 19 1a 1b 1c 1d 1e 1f

16 進数は 16 でいっぱいなので、10 11 12 13 14 15 を表すためにいくつかの特殊文字を設定する必要があります。

a b c d e f を使用して、それぞれ 10 11 12 13 14 15 を表します

8以上の場合は1を入力してください

0 1 2 3 4 5 6 7

10 11 12 13 14 15 16 17 20 21 22

コンピューターは非常に愚かな機械です。0 1 の 2 つのことしか知りません。

Web ページ上のコンテンツも含め、コンピューターに保存されているコンテンツは、最終的にバイナリ エンコード 0 1 に変換して保存する必要があります。

例: コンピューターの下部にある中国は、1010001001010101011010 に変換する必要がある場合があります。

コンテンツを読み取るときは、バイナリをエンコードして正しいコンテンツに変換する必要があります。

コーディング

デコード

キャラクターセット

文字化けの根本原因は、エンコードとデコードで異なる文字セットが使用されていることです。

中国語システム ブラウザでは、デフォルトで GB2312 がデコードに使用されます。

コンテンツ領域は、ボックスに物を保管するスペースに相当します。

コンテンツ領域はボックスの最も内側にあります

要素のすべての子要素は、親要素のコンテンツ領域に配置されます

コンテンツエリアの設定

パディングは、コンテンツ領域と境界線の間の距離を指し、ボックスのサイズに影響します。

ボックスには 4 つのパディング方向があります。

パディング

表示されるボックスのサイズは、コンテンツ領域、パディング、境界線によって決まります。

表示されているボックスの最も外側が境界ボックスであり、境界線はボックスの端です。

境界線を設定する

境界線の短縮プロパティ

マージン ボックスと他のボックスの間の距離は、表示されるボックスのサイズには影響しませんが、ボックスの位置には影響します。

四方向にも余白がある

略記属性

マージン値

マージンの重なり

水平パディングをサポート

垂直方向のパディングもサポートされていますが、レイアウトには影響しません。

4 方向の境界線をサポートしますが、垂直方向の境界線はレイアウトに影響しません。

水平マージンのサポート

縦向きには対応していません

要素の表示タイプを設定する

オプションの値

要素をページ上に表示するかどうかを設定します

オプションの値

要素がオーバーフロー コンテンツを処理する方法を設定する

オプションの値

1. ブロック要素はドキュメント フローの上から下に配置されます。

2. ドキュメント フロー内のブロック要素の幅は、デフォルトでは親要素の 100% です。

3. ドキュメント フロー内のブロック要素の高さは、デフォルトではコンテンツによって引き伸ばされます。

1. インライン要素はドキュメント フロー内で左から右に配置されます。1 行ですべてのインライン要素を収容できない場合は、次の行に切り替えて、引き続き左から右に配置します。

2. ドキュメント フローでは、デフォルトでインライン要素の幅と高さがコンテンツによって引き伸ばされます。