CSS レイアウト入門_CSS/HTML

CSS レイアウトと従来のテーブル レイアウトの最大の違いは、元の配置ではテーブルを使用し、テーブルの間隔または無色透明の GIF 画像を使用してテキスト レイアウト セクションの間隔を制御しますが、現在はレイヤー (div) を使用して配置していることです。レイヤーのマージン、パディング、ボーダー、その他の属性によってセクションの間隔を制御します。

1. DIV を定義します。
一般的な定義 div の例を分析します。

#sample{ MARGIN: 10px 10px 10px 10px;
PADDING-LEFT: 20px; TOP: 20px;
PADDING-BOTTOM: 10px;
BORDER-BOTTOM: #CCC 2px; -LEFT: #CCC 2px ソリッド;
BORDER-TOP: #CCC 2px ソリッド;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE ノーリピート右下; 🎜>TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; } 説明は次のとおりです:

を使用して呼び出すことができます。
ページではこのスタイルです。
MARGIN は、レイヤーの境界線の外側に残された空白スペースを指し、ページの余白または他のレイヤーとの隙間を作成するために使用されます。 「10px 10px 10px 10px」は、それぞれ「上・右・下・左」（時計回り）の４つの余白を表し、すべて同じであれば「MARGIN: 10px;」と省略できます。マージンがゼロの場合は、「MARGIN: 0px;」と記述します。注: 値がゼロの場合、後にパーセント記号を続ける必要がある RGB カラー値 0% を除き、その他の場合には単位「px」を続ける必要はありません。 MARGIN は透明な要素であるため、色を定義できません。
PADDING は、レイヤーの境界線とレイヤーのコンテンツの間のスペースを指します。 「PADDING-LEFT」は、左端からコンテンツまでの距離などを指します。すべて同じである場合は、「PADDING:0px」と省略できます。 PADDING は透明な要素であるため、色を定義できません。
BORDER は、レイヤーの境界線を指します。「BORDER-RIGHT: #CCC 2px Solid;」は、レイヤーの右側の境界線の色を「#CCC」、幅を「2px」、スタイルを「solid」として定義します。 「直線。点線のスタイルが必要な場合は、「dotted」を使用できます。
BACKGROUND は、レイヤーを定義する背景です。これは 2 つのレベルで定義されます。最初に画像の背景を定義し、「url(../images/bg_logo.gif)」を使用して背景画像のパスを指定します。次に、背景色「#FEFEFE」を定義します。 「on-repeat」は、背景画像を繰り返す必要がないことを意味します。水平方向に繰り返す必要がある場合は「repeat-x」を使用し、垂直方向に繰り返す場合は「repeat-y」を使用し、カバーするまで繰り返します。背景全体を印刷するには、「リピート」を使用します。次の「rightbottom;」は、背景画像が右下隅から始まることを意味します。背景画像がない場合は、背景色のみを定義できます。 BACKGROUND: #FEFEFE
COLOR は、前のセクションで紹介したフォントの色を定義するために使用されます。

TEXT-ALIGN は、レイヤー内のコンテンツの配置を定義するために使用されます。中央は中央、左は左、右は右です。
LINE-HEIGHT は行の高さを定義します。150% は、高さが標準の高さの 150% であることを意味します。LINE-HEIGHT:1.5 または LINE-HEIGHT:1.5em と書くこともできます。これらは同じ意味です。 。
WIDTH は定義されたレイヤーの幅で、500px などの固定値、またはここでは「60%」などのパーセンテージにすることができます。この幅はコンテンツの幅のみを指し、マージン、ボーダー、パディングは含まれないことに注意してください。ただし、一部のブラウザではこのように定義されていないため、さらに試してみる必要があります。
このレイヤーの実際のパフォーマンスは次のとおりです:

デモ コンテンツはこちらです。デモ コンテンツはこちらです。デモ コンテンツはこちらです。デモ コンテンツはこちらです。デモ コンテンツはこちらです。はデモ コンテンツです。ここはデモ コンテンツです。ここはデモ コンテンツです。

ここはデモ コンテンツです。ここはデモ コンテンツです。

ここはデモ コンテンツです。ここはデモ コンテンツ、

これがデモ コンテンツです。
境界線が 2 ピクセルの灰色で、背景画像が右下に繰り返されておらず、コンテンツが左の境界線から 20 ピクセル離れていることがわかります。 、内容はすべて予想通りです。ほほ、見た目は良くありませんが、これをマスターすればCSSレイアウト技術の半分は学べたことになります。それだけです、全然難しくありません！ (残りの半分は何ですか?残りの半分はレイヤー間の位置決めです。後で順を追って説明します。)


2. CSS2 ボックス モデル

1996 年の CSS1 以降W3C 組織は、Web ページ上のすべてのオブジェクトをボックスに配置することを推奨しています。これらのオブジェクトには、段落、リスト、タイトル、レイヤーが含まれます。 。ボックス モデルは主に、コンテンツ、パディング、ボーダー、マージンの 4 つの領域を定義します。上で説明したサンプル レイヤーは典型的なボックスです。初心者にとっては、margin、background-color、background-image、padding、content、border のレベル、関係、相互影響について混乱することがよくあります。ここにボックス モデルの 3D 概略図を示します。理解しやすく、覚えやすいと思います。


3. 補助画像はすべてバックグラウンド処理を使用する XHTML+CSS レイアウトを使用する 最初は慣れない技術があると言うべきです。これは従来のテーブル レイアウトとは異なる考え方です。つまり、すべての補助画像は背景とともに実装されます。次のようなもの:
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat rightbottom;

を使用してコンテンツに直接挿入することはできますが、これは許可されていません。 。ここでいう「補助絵」とは、ページ上で表現すべき内容ではなく、装飾や間取り、注意喚起などにのみ使用される絵のことを指します。たとえば、フォト アルバムの写真、写真ニュースの写真、および上記の 3D ボックス モデルの写真はすべてコンテンツの一部であり、 要素を使用してページに直接挿入できますが、他のものはロゴやタイトルに似ています。画像、およびリスト プレフィックス画像はすべて、バックグラウンド モードまたは他の CSS メソッドを使用して表示する必要があります。

これには 2 つの理由があります:

パフォーマンスを構造から完全に分離し、CSS を使用してすべての外観とパフォーマンスを制御し、修正を容易にします。
ページをより使いやすく、親しみやすいものにします。たとえば、視覚障害者がスクリーン リーダーを使用する場合、バックグラウンド テクノロジを使用して実装された画像は読み上げられません。​