div＋css佈局入門_CSS/HTML

Are you learning CSS layout? Are you still unable to fully master pure CSS layout? There are usually two situations that hinder your learning:

The first possibility is that you have not yet understood the principles of CSS processing pages. Before you consider the overall performance of your page, you should first consider the semantics and structure of the content, and then add CSS for the semantics and structure. This article will tell you how to structure HTML.

Another reason is that you are at a loss for those very familiar presentation layer attributes (such as cellpadding, hspace, align="left", etc.) and don't know what CSS statement to convert them into. Once you have solved the first problem and know how to structure your HTML, I will give you a list detailing what CSS to use to replace the original presentation attributes.

Structured HTML
When we first learn to make web pages, we always consider how to design them first, considering the pictures, fonts, colors, and layout plans. Then we use Photoshop or Fireworks to draw it and cut it into small pictures. Finally, edit the HTML to restore all the designs to the page.

If you want your HTML page to be laid out with CSS (it is CSS-friendly), you need to go back and start over. Don't think about "appearance" first, but first think about the semantics and structure of your page content.

Appearance is not the most important thing. A well-structured HTML page can be presented in any appearance, and CSS Zen Garden is a typical example. CSS Zen Garden helps us finally realize the power of CSS.

HTML is not just for reading on a computer screen. Your carefully designed images in Photoshop may not be displayed on PDAs, mobile phones, and screen readers. But a well-structured HTML page can be displayed anywhere and on any network device through different definitions of CSS.

Start thinking
First of all, you need to learn what "structure" is, which some writers also call "semantics". What this term means is that you need to analyze your content blocks and the purpose each piece of content serves, and then build the corresponding HTML structure based on these content purposes.

If you sit down and carefully analyze and plan your page structure, you might end up with a few pieces like this:

Logo and site name
Main page content
Site navigation ( Main menu)
Submenu
Search box
Ritual area (such as shopping cart, checkout)
Footer (copyright and related legal notices)
We usually use DIV elements to combine these structures Define it like this:

これはレイアウトではなく、構造です。これはコンテンツ ブロックの意味論的な記述です。構造を理解したら、対応する 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) 以及更多