CSS は主に HTML ファイルの機能を補完および拡張するために使用され、その機能は、Web ページが完全に準拠できるように、Web ページ内のフォント、色、背景、画像などを制御するために HTML ファイルにさまざまなレイアウトを設定することです。作者の思いをデザインに込めて。
CSS は Web ページの表示を制御でき、HTML タグの属性もその表示を制御できます。なぜ CSS が必要なのでしょうか?その理由の 1 つは、以前はほとんど 1 人で Web サイトのセットアップを完了できましたが、全員が手順に従って Web ページを作成する場合、Web サイトを完成させるには多くの人が協力する必要があるということです。作成される Web ページのスタイルはそれぞれ異なるため、これらの Web ページを同じ Web サイトに配置するのは困難です。CSS を使用すると、すべての Web ページのスタイルを簡単に設定できます。さまざまな部門やさまざまな場所が Web ページを作成します。
CSS は HTML のタグ属性から独立したものです。 もちろん、CSS には HTML 言語のコンテンツ表示部分を独立して全体 (CSS) として形成するものもあります。ページでは HTML を使用します。言語は Web ページ コンテンツの構造を設定し、CSS 言語を使用して Web ページ コンテンツの表示を設定します。これにより、Web ページ プログラミングの柔軟性と再利用性を高めるという目的が達成されます。
HTML 言語には Web ページのコンテンツを表示する機能がまだありますが、特定の Web ページを作成するときは、通常、Web コンテンツの構造を制御する機能のみを使用することに注意してください。
1. ボックス モデル
HTML のすべての要素は、ブロック レベル要素であっても行セット要素であっても、CSS ではボックスとみなされます。これがボックス モデルです。
ここで言わなければならないのは、この「ボックス」を高さのないボックスとして理解するのが最善であるということです。これは、下位層の概念を理解するのに役立ちます。 もちろん、この「ボックス」を高さのないボックスとして理解することもできます。この場合、次の「レイヤー」を一定の高さを持つレイヤーとして理解する必要があります。
1. ボックスの内部構造
ボックスの実際の幅は、「コンテンツ + 内側のマージン + 境界線 + 外側のマージン」で構成されます。CSS では、ボックスのサイズは幅と高さを設定することで制御されます。
2. 境界線
複数のルールが境界線に作用する場合、後の設定が前の設定をオーバーライドします。これはどの属性でも同様です。
3. パディング
ボックスに背景画像を設定すると、デフォルトで背景でカバーされる範囲は「パディング + コンテンツ」で構成される範囲となり、画像はパディングの左上隅でタイル状に並べられます。基準点。
4. マージン
body は特別なポイントで、その背景色はマージン部分まで拡張されますが、他のボックスの背景色は "padding+content" (IE ブラウザ) または "padding+content+border" のみをカバーします。 」（FFブラウザ）。
2. ボックスのフローティングと配置
CSS ボックス モデルの各属性には、上、右、下、左の 4 つの部分が含まれており、これらの 4 つの部分は同時にまたは個別に設定できます。サイズと色は、私たちが日常で目にする箱の厚さと、その箱が何色の素材でできているかということで理解できます。境界は、箱と他の物との間の距離です。
1. ボックス間の関係
(1)、標準的なフロー
は、配置や位置に関する他の特別な CSS ルールを使用しない場合のさまざまな要素のルールです。
(2)、ブロックレベルの要素
それらは常にブロックの形で表現され、同じレベルの兄弟とともに左右の辺を埋めるように縦に次々と配置されます。
(3) インライン要素
自体は独立した領域を占有せず、他の要素に基づいて一定の範囲を指すだけです。
2. 標準フローでのボックスの配置
(1) インライン要素間の距離: 最初の要素のマージン右と 2 番目の要素のマージン左の合計。(2) ブロックレベルの要素間の距離: margin-top または margin-bottom の最大値です。
3. フローティングと配置
ブロックレベル要素のスコープは、その内部の標準フローコンテンツによって決定され、サブ要素をフローティングした後は、その内部のフローティングコンテンツとは何の関係もありません。親ブロックは標準フローに属しなくなりました (詳細については、Ma Haixiang のブログ「CSS Floats のクリアの原則と利点と欠点」の関連する紹介文を参照してください)。注: 2 つのブロックレベル要素のうち、最初のブロックレベル要素がフローティングされている場合、後続のブロックレベル要素のコンテンツがそれを囲みますが、2 番目のブロックレベル要素がフローティングされている場合、最初の要素は囲みません。つまり、2 番目のフローティング ブロック レベル要素は囲まれません。状況は複数のブロックでも同様です。
(1) 相対位置決めの結論
相対位置決めを使用するボックスは、元の位置に対して指定された距離だけ移動することによって新しい位置に到達します。相対位置を使用するボックスはまだ標準フロー内にあり、親ブロックや兄弟ボックスには影響せず、その元の位置が他のブロックによって埋められることはありません。
(2)、絶対位置決めの結論
絶対配置を使用するボックスは、「最も近い」「すでに配置されている」「祖先要素」に基づいてオフセットされます。すでに配置されている祖先要素がない場合は、ブラウザ ウィンドウに基づいて配置されます。
絶対に配置されたボックスは標準フローから外れます。つまり、後続の兄弟の配置には影響しませんが、その兄弟ボックスは存在しないかのように元の位置を埋めます。
4. マージンの使用
ブロックの高さの値がサブブロックの高さにマージンの値を加えた値より小さい場合、IE はその時点でマージンと下部のスペースを維持するために自動的に拡張します。子要素と親要素自体のパディング -bottom。
FF はそうではなく、親要素の高さが完全に一定であることが保証され、この時点で子要素は親要素の範囲を超えます。
5. z-index の使用
z-index 属性は、位置決め中に重なり合うブロックの上下の位置を調整するために使用されます。大きい z-index を持つページは、その小さい値よりも上に配置されます。値は 0 です。 2 つのブロックの場合、z-index 値が同じである場合、元の高カバレッジと低カバレッジの関係は維持されます。
6. 表示の使用
表示属性は、要素がブロック要素であるかインライン要素であるか、要素を表示しない (なし) かを変更します。
3. ブロックレベル要素と行セット要素
ブロックレベル要素は標準ドキュメント フローの別の行を占めますが、行セット要素は標準ドキュメント フローの行の一部を占めますが、それらが完全に一致する場合標準のドキュメント フローから逸脱しているため、この機能はなくなりました。ブロックレベルの要素と行セット要素は、表示属性を通じて、属性値がブロックの場合はブロックレベルの要素に変換でき、属性値がインラインの場合はブロックレベルの要素に変換できます。行セット (インライン) 要素。
4. レイヤーの概念
HTML ドキュメントのコンテンツのレイアウトと表示は、1 つのプレーン上にだけではなく、複数のプレーン上にレイアウトして表示される場合があり、各プレーン (レイヤー) 間のレイアウトは一致しないことがあります。完全な切断はなく、一部は完全に切断されています。もちろん、z-index 属性を通じて表示効果を設定できます。最後に、最も外側のレベルから見える重複効果が最終的な表示効果になります。
5. テキストと画像
HTML を使用して Web ページ上にテキストと画像を配置するのは「悲痛な」ことであることは誰もが知っていますが、これでも正確な配置を保証することはできません。ブラウザやオペレーティングプラットフォームが異なると表示結果が変わるためです（たとえば、テキストと画像を同じ行に並べて表示できません。具体的な解決策については、Ma Haixiang のブログ「CSS コードを使用して画像とテキストを表示する方法」を参照してください）。 「同じ行に表示して整列する」関連の紹介)。
1. 文字サイズ (font-size) 1em で表される長さは親要素の文字 m の標準の幅、1ex は親要素の文字 x の標準の高さを表します。親要素が変更される場合は、これを使用します。両方のユニットの子要素のサイズが比例して変更されます。
2. Line-height (line-height)(1) テキストの 2 行間のベースライン間の距離、つまり、テキストの各行の高さを示します。がベースラインです。
(2) 行の高さの値は、行の高さの単位としてピクセルを使用することも、単位を追加せずに数値のみを記述することもできます。この場合、行の高さはフォント サイズに対する行の高さの比率を表します。フォント サイズ 12px、行の高さ: 1.5 として。実際のサイズは line-height:1.5*12px=18px;
3. 大文字小文字変換 (text-transform)
text-transform は主にテキストの大文字小文字の状態を定義するために使用されます。中国語に適さないは意味がありません。
具体的な構文は次のとおりです:capitalize: 最初の文字を大文字にする
uppercase: 大文字
小文字: 小文字
none: 通常変更なし
inherit: 継承
4.装飾)
text-decoration 属性は、テキストに追加される装飾を指定します。この属性により、テキストに下線などの特定の効果を設定できます。子孫要素に独自の装飾がない場合、祖先要素に設定された装飾が適用されます。子孫要素まで「拡張」します。
テキスト装飾の値には、下線、上線、行の高さ、点滅などが含まれます。
5. テキストの配置と最初の段落のインデント
(1)、段落の水平方向の配置: text-align
(2)、最初の段落のインデント text-indent: 中国語の Web ページの場合、「2em」に設定します。できる。
6. 段落の垂直方向の配置 (vertical-align)
現在のブラウザでは、テーブル セル内のオブジェクトの垂直方向の配置設定のみを使用でき、div などの一般的なブロック レベルの要素に対しては機能しません。 。
7. 画像スタイル
(1)、background-position: 2 つの値が設定されている場合、それらはそれぞれ水平位置と垂直位置を決定するために使用されます。値が 1 つだけ設定されている場合、デフォルト値は center です。
これはタイリングに関連しており、実際には上、左、下、右、中央を使用することに加えて、5% などの相対値と絶対値も使用します。 18pxなど
数値は左からの距離と上からの距離を表します。
(2)、background-attachment: スクロールバーを引くと、テキストのみが移動し、画像は移動しません。
(3) 画像の水平方向の配置 (水平方向の配置): 画像の text-align 属性は直接設定できず、その親ピクセルの属性によって実装されますが、垂直方向の配置は垂直方向の配置によって実現できます。画像セットの align 属性。これはテキストの配置とまったく逆です。
6. リンクとナビゲーション
div+css を使用して Web ページを作成するプロセスでは、よく使用する別のタイプがあります。それは、リンクとナビゲーションです。
1. 疑似クラス
(1)、疑似クラス
の宣言順序a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline; }
Ma Haixiang は皆さんに注意してください。上記のステートメントの順序は変更できません。変更しても効果はありません。
(2)、a:link と a は同じに設定されており、通常は両者に違いはありませんが、実際の作業では、a, a:visited｛｝;
2. リンク上のボタン
通常のハイパーリンクとクリックされたリンクの設定は同じであり、マウス ポインターがハイパーリンク上を通過すると、境界線のスタイルがボタンの効果をシミュレートするために使用され、テキストの色、背景色、位置、境界線がそれに応じて変更され、それによって「」がシミュレートされます。 「押し込み」の特殊効果。
3. 高さ (幅) および幅 (高さ) 属性
FF ブラウザは、a 要素の高さ (幅) および幅 (高さ) 属性をサポートしていません。
4. 箇条書き
(1)、list-style-type: 属性は、ull または ol マークのシンボル スタイルを設定します。
(2)、list-style-image: 属性設定の箇条書きは画像として表示されますが、ブラウザー間の違いにより、この属性は通常使用されません。代わりに、list-style-type 属性値を none に設定します。 li タグのバックグラウンド実装を設定します。
5. シンプルなメニューナビゲーション
リンクはブロックレベルの要素として設定されていますが、マウスオーバー効果はマウスがテキスト上を通過したときのみトリガーされます (IE6)。マウスが長方形に入ったときはトリガーされません。エリア。
IE7 はこのエラーを修正しました: "#navigation li a": height: 1em; に CSS ルールを追加し、Web ページに div タグを挿入し、対応する CSS ルールを定義します。
1. 固定幅レイアウト
(1)、最初のメソッド
body{text-align:center;} #container{position:relative;margin:1 auto;widht:760px;text-align : left;}
(2) 2つ目の方法body{margin:0px;}
#contaniner{position:relative;left:50%;width:760px;margin-left:-330px;}
２．左、中、右のレイアウト
(1)。左と右のブロックは絶対に配置され、ブロックの幅は固定されます。中央のブロックの幅は設定されず、幅は自動的に調整されます。 left とpadding-right は、それぞれ左ブロックと右ブロックの幅に設定する必要があります (詳細については、Ma Haixiang のブログ「よく使用される CSS コードの使用スキルの完全版」の関連する紹介文を確認してください)。
(2) ブロックの背景色の問題: 左右のブロックの背景色がページの下部まで拡張されていないため、Ma Haixiang のブログで提案されている解決策は次のとおりです: フッターがある場合、コンテンツ ブロック全体を変更する（左、中、右の3つのブロック）を1つのブロックにまとめ（ここに置くかどうかは関係ありません。主に管理を容易にするためです）、本体の背景色を右のブロックと同じ色に設定し、左と同じ幅、左と同じ色の絵を作る 同じ背景色のブロックは #container の背景画像を作り、それを設定して下へ繰り返します。
8. ドキュメントフロードキュメントフローとは、ドキュメントの内容がプログラムプロセスに継続的に読み込まれ、処理後にプログラムプロセスから継続的に読み出され、モニターに出力されることを意味します。 、読み取り中 読み取りと読み取りには一定の順序があります。ランダムではありません。ここで「ストリーム」という言葉が使用されている理由は、主にデータが水の流れと非常に密接に関係しているためです。読み込みと読み出しの送信プロセス中も同様であるため、「ストリーム」という言葉はデータの送信プロセスを非常に鮮明に説明するために使用されますが、この言葉は読み込みと読み出しの順序を強調するものではありません。
ここでは、ドキュメントの入力ストリームについてあまり気にする必要はありません。プログラムプロセスが各レイヤーを出力する順序の違いにより、重複する効果が異なるため、ドキュメントの出力ストリームについて詳しく知る必要があります。最後に表示されるレイヤー。 レイヤー上のドキュメント フローのさまざまな制御に従って、ドキュメント フローを通常のフロー、絶対配置フロー、およびフローティング フローに分けることができます。このフローをレイヤーの意味として考えることができます。
通常のフロー: 最初はこのレイヤーにすべての要素が含まれています。もちろん、他の人のものを削除する場合は、そのレイヤーに説明を与える必要があります。
絶対配置フロー: このレイヤーが元のレイヤー要素を取り除くと、私が奪ったものは完全に私のものであり、それに関するものは将来何も存在できないことが他の人に伝わります
フローティング フロー: このレイヤーも正直に言うと、とは異なります。絶対位置決めフローは他人の物を奪い一銭も残さないが、浮遊フローが他人の物を奪うと墓場を残しておいても良いと一般層に告げる元の家が残っている場合、墓地の場所は私が決定します。その場合、その本体は墓地の上にあります。本物の遺体はそのまま残されますが、墓地に残しておきたいか、家に帰りたいかは私がお伝えします。
9. 体験
DIV は HTML のブロックタグで、CSS では DIV タグを使用して操作するオブジェクトの粒度を柔軟に変更できます。および div は、span の効果を達成するように設定できますが、span が div の効果の一部を達成するのは困難です (詳細については、Ma Haixiang のブログ「How to Standardize the HTML Code of Large Websites」の関連する紹介文を参照してください)。 。1. 項目リストで、
2. 差異を減らすために、通常、
などのレイアウト ブロック内のマージンとパディング属性の値を設定するようにしてください。 .、または必要に応じて対応する値に設定します。
3. 画像は、最初にタイトル テキストを非表示にしてから、置換画像を設定するために使用されます。ブロックの背景画像として使用する場合は、通常、これが設定されます。
横長の画像の場合は、通常、タイトルを含むテキストを非表示にし、対応する親要素の幅と高さ、外側と内側の余白を設定し、親要素の背景画像を設定します。差し替え画像として。
例:
H3 span{display:none;}
H3{width:170px;height:60px;margin:0px; padding:0px;}
H3{bacground:url(1.jpg) no-repeat;}
Ma Haixiang のブログ コメント:
行セット要素をボックスとして使用すると、その本質は依然として通常の流れにありますが、要素の上に突起が形成されるため、上から見ると、ブロック セット要素がボックスとして使用される場合、それは全体に作用し、要素の位置 (float およびposition 属性) を再配置する突出やカバー現象は発生しません。設定）の時に登場しました。この記事は Ma Haixiang のブログのオリジナル記事です。転載する場合は、元の URL が http://www.mahaixiang.cn/css/1160.html から取得されたものであることを明記し、それ以外の場合は出典を明記してください。 、転載は禁止です; ご協力ありがとうございます！
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
