div+css レイアウト_CSS/HTML を始める

CSSレイアウトを勉強していますか？まだ純粋な CSS レイアウトを完全にマスターできていませんか?通常、学習を妨げる状況は 2 つあります:

最初の可能性は、CSS ページ処理の原則をまだ理解していないことです。ページの全体的なパフォーマンスを検討する前に、まずコンテンツのセマンティクスと構造を検討し、次にセマンティクスと構造用の CSS を追加する必要があります。この記事では、HTML を構造化する方法について説明します。

もう 1 つの理由は、非常によく知られたプレゼンテーション層の属性 (cellpadding、hspace、align="left" など) について戸惑いがあり、それらをどの CSS ステートメントに変換すればよいかわからないことです。 。最初の問題を解決し、HTML の構造化方法を理解したら、元のプレゼンテーション属性を置き換えるためにどの CSS を使用するかを詳しく説明したリストを提供します。

構造化 HTML
初めて Web ページの作成を学ぶとき、私たちは常に最初に、画像、フォント、色、レイアウト計画を考慮して、どのようにデザインするかを検討します。次に、Photoshop または Fireworks を使用してそれを描画し、小さな絵に切り取ります。最後に、HTML を編集して、すべてのデザインをページに復元します。

HTML ページを CSS でレイアウトしたい場合 (CSS フレンドリーです)、「外観」を最初に考えるのではなく、最初に戻って最初からやり直す必要があります。ページコンテンツのセマンティクスと構造。

外見は最も重要なことではありません。適切に構造化された HTML ページは、どのような外観でも表示できます。CSS Zen Garden はその典型的な例です。 CSS Zen Garden は、CSS の力を最終的に認識するのに役立ちます。

HTML はコンピューター画面上で読むためだけのものではありません。 Photoshop で慎重にデザインした画像は、PDA、携帯電話、スクリーン リーダーでは表示されない場合があります。ただし、適切に構造化された HTML ページは、CSS のさまざまな定義を使用して、どこにでも、どのネットワーク デバイスでも表示できます。

考え始めます
まず第一に、「構造」とは何なのかを学ぶ必要があります。これを一部の作家は「意味論」とも呼んでいます。この用語が意味するのは、コンテンツ ブロックと各コンテンツが果たす目的を分析し、これらのコンテンツの目的に基づいて対応する HTML 構造を構築する必要があるということです。

じっくりとページ構造を分析して計画すると、次のようないくつかの部分が完成するかもしれません:

ロゴとサイト名
メインページのコンテンツ
サイトナビゲーション (メインメニュー)
サブメニュー
検索ボックス
儀式エリア (ショッピングカート、チェックアウトなど)
フッター (著作権および関連する法的通知)
通常、これらの構造を組み合わせるには DIV 要素を使用します。次のように定義します:

これはレイアウトではなく、構造です。これはコンテンツ ブロックの意味論的な記述です。構造を理解したら、対応する ID を DIV に追加できます。任意のコンテンツ ブロックを DIV コンテナ内に含めることができ、その中に別の DIV をネストすることができます。コンテンツ ブロックには、タイトル、段落、画像、表、リストなど、あらゆる HTML 要素を含めることができます。

上記によると、HTML の構造化方法はすでにわかりましたので、レイアウトとスタイルを定義できるようになりました。各コンテンツ ブロックはページ上のどこにでも配置でき、ブロックの色、フォント、境界線、背景、配置プロパティなどを指定できます。

セレクターの使用は素晴らしいことです
ID の名前は、特定のコンテンツ ブロックを制御する手段です。このコンテンツ ブロックを DIV で囲み、一意の ID を追加することで、CSS を使用して選択することができます。タイトル、リスト、画像、リンク、段落などの各ページ要素の外観を正確に定義するコンバーター。たとえば、#header の CSS ルールを作成する場合、それは #content の画像ルールとはまったく異なるものになる可能性があります。

もう 1 つの例は、異なるルールを通じて異なるコンテンツ ブロックにリンク スタイルを定義できることです。このようなもの: #globalnav a:link または #subnav a:link または #content a:link異なるコンテンツ ブロック内の同じ要素に異なるスタイルを定義することもできます。たとえば、#content p と #footer p を通じて、それぞれ #content と #footer の p のスタイルを定義します。構造的に言えば、ページは画像、リンク、リスト、段落などで構成されます。これらの要素自体は、どのネットワーク デバイス (PDA、携帯電話、またはインターネット TV) に表示されるかには影響しません。これらは、任意のパフォーマンスの外観として定義できます。

注意深く構造化された HTML ページは非常にシンプルで、すべての要素が構造的な目的で使用されます。段落をインデントする場合は、blockquote タグを使用する必要はありません。p タグを使用し、CSS マージン ルールを p に追加するだけで、インデントの目的を達成できます。 p は構造化タグ、margin はプレゼンテーション属性です。前者は HTML に属し、後者は CSS に属します。 (これは、構造とプレゼンテーションの分離です。)

適切に構造化された HTML ページには、プレゼンテーション属性タグはほとんどありません。コードは非常にクリーンで簡潔です。たとえば、元のコード は HTML で のみを記述することができ、パフォーマンスを制御するすべてのものは CSS で記述されます。構造化 HTML では、テーブルはテーブルであり、レイアウトに使用されるものなどは他のものではありません。そして位置決め）。

自分で構造を練習してください
上記は最も基本的な構造にすぎません。実際のアプリケーションでは、必要に応じてコンテンツ ブロックを調整できます。 DIV のネストは頻繁に発生し、「コンテナ」レイヤー内に次のような構造を持つ他のレイヤーがあることがわかります:

リスト

別のリスト

嵌套的div元素允許你定義更多的CSS規則來控製表現，例如：你可以給#navcontainer一個規則讓列表居右，再給#globalnav一個規則讓列表居左，而給# subnav的list另一個完全不同的表現。

用CSS取代傳統方法
下面的列表將幫助你用CSS取代傳統方法：

HTML屬性以及相對應的CSS方法
HTML屬性  CSS  說明 >align="left"

align="right"  float: left; 

float: right;  使用CSS可以浮動 任何元素:圖片、段落、div、表格、表格、列表等標題、表格、列表等標題、表格、列表等等 

當你使用float屬性，必須為這個浮動元素定義一個寬度。

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0;  使用CSS, margin可以設定在任何元素上, body元素.更重要的，你可以分別指定元素的top, right, bottom和left的margin值。

vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

a:visited: #339;

a:visited: #339;


a:active: #00f; 
在HTML中，連結的顏色作為body的一個屬性值定義。整個頁面的連結風格都一樣。使用CSS的選擇器，頁面不同部分的連結樣式可以不一樣。

bgcolor="#FFFFFF" background-color: #fff;  在CSS中，任何元素都可以定義背景顏色，不僅限於body和table元素。

bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以設定邊框(boeder)，你可以分別定義top, right, bottom和left

border="3 "

cellspacing="3"  border-width: 3px;  用CSS，你可以定義table的邊框為統一樣式，也可以分別定義top, right, bottom and left邊框的顏色、尺寸和樣式。

你可以使用 table, td or th 這些選擇器. 

如果需要設定無邊框效果，可以使用CSS定義： border-collapse: collapse;








 
clear: left;

clear: right;


clear: right;
cellpadding="3"

vspace="3"

hspace= "3"  padding: 3px;  用CSS，任何元素都可以設定padding屬性，同樣，padding可以分別設定top, right, bottom and left。 padding是透明的。

align="center" text-align: center;

margin-right: auto; margin-left: auto; 
Text-align 🎜>象div，p這樣的塊級怨毒可以透過margin-right: auto; 和margin-left: auto;來水平居中


一些令人遺憾的技巧和工作環境
由於瀏覽器對CSS支援的不完善，我們有時候不得不採取一些技巧(hacks)或建立一個環境(Workarounds)來讓CSS實現傳統方法同樣的效果。例如塊級元素有時侯需要使用水平居中的技巧，盒子模型bug的技巧等等。所有這些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中詳細說明。

另一個關於CSS技巧的資源站點是Big John和Holly Bergevin的「Position is Everything」。

理解浮動行為
Eric Meyer的《Containing Floats》將幫助你掌握如何使用float屬性版面。 float元素有時候需要清除(clear)，閱讀《How To Clear Floats Without Structural Markup》將非常有幫助。

更多幫助
已有的《CSS Discussion》列表是很好的資源，它收集了一個WiKiA討論組的信息，其中包括CSS佈局總結(css-discuss.incutio.com/ ?page=CssLayouts)，CSS 技巧總結 (css-discuss.incutio.com/?page=CssHack) 以及更多