Web 標準を使用した Web サイト構築 8 日目: CSS レイアウトの開始

CSS レイアウトと従来のテーブル レイアウトの最大の違いは、元の配置ではテーブルを使用し、テーブルの間隔または無色透明の GIF 画像を使用してテキスト レイアウト セクションの間隔を制御することです。ただし、現在はレイヤー (div) が使用されています。位置を調整し、マージン、パディング、境界線、およびレイヤーのその他の属性を通じてセクションの間隔を制御します。 1. DIV を定義します

典型的な定義 div の例を分析します:

#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-RIGHT: #CCC 2px Solid;
BORDER-BOTTOM: # CCC 2px ソリッド;
ボーダー左: #CCC 2px ソリッド;
ボーダートップ: #CCC 2px ソリッド;
背景: url(images/bg_poem.jpg) #FEFEFE リピートなし右下;
カラー: #666;
テキスト-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }

説明は次のとおりです:

レイヤーの名前は、

BACKGROUND: #FEFEFE

COLOR は、前のセクションで紹介したフォントの色を定義するために使用されます。

TEXT-ALIGN は、レイヤー内のコンテンツの配置を定義するために使用されます。center は中央、left は左側、right は右側です。

LINE-HEIGHT は行の高さを定義します。150% は、高さが標準の高さの 150% であることを意味します。

LINE-HEIGHT:1.5

または LINE-HEIGHT:1.5em のように記述することもできます。同じ意味を持ちます。

WIDTH は定義されたレイヤーの幅で、500px などの固定値、またはここでは「60%」などのパーセンテージにすることができます。この幅はコンテンツの幅のみを指し、マージン、ボーダー、パディングは含まれないことに注意してください。ただし、一部のブラウザではこのように定義されていないため、さらに試してみる必要があります。

以下はこのレイヤーの実際のパフォーマンスです:

境界線が 2px グレーで、背景画像が右下に繰り返されておらず、コンテンツが左境界線から 20px 離れていることがわかります。内容はすべて期待どおりです。ほほ、見た目は良くありませんが、これをマスターすれば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 を使用してすべての外観とパフォーマンスを制御し、改訂を容易にする。

ページをより使いやすく、フレンドリーにします。たとえば、視覚障害者がスクリーン リーダーを使用する場合、バックグラウンド テクノロジを使用して実装された画像は読み上げられません。

上記は、Web 標準を使用した Web サイト構築の 8 日目の内容です: CSS レイアウトの開始 詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。