Die Struktur von Div+CSS
Lernen Sie CSS -Layout? Kannst du das reine CSS -Layout nicht vollständig beherrschen? Es gibt normalerweise zwei Situationen, die Ihr Studium behindern:
Die erste Möglichkeit besteht darin, dass Sie das Prinzip der CSS -Verarbeitungsseiten noch nicht verstanden haben. Bevor Sie die Gesamtleistung Ihrer Seite berücksichtigen, sollten Sie zunächst die Semantik und Struktur des Inhalts berücksichtigen und dann CSS für die Semantik und Struktur hinzufügen. In diesem Artikel werden Sie erfahren, wie Sie HTML strukturieren.
Ein weiterer Grund ist, dass Sie hilflos über diese sehr vertrauten Präsentationsschichtattribute (wie Cellpadding, Hspace, Align = Links usw.) sind und nicht wissen, in welche CSS -Anweisung zu konvertiert ist. Wenn Sie das erste Problem lösen und wissen, wie Sie Ihr HTML strukturieren, werde ich eine Liste der ursprünglichen Leistungsattribute im Detail angeben, welches CSS stattdessen verwendet wird.
Strukturiertes HTML
Wenn wir zum ersten Mal die Webseitenproduktion gelernt haben, überlegen wir immer, wie sie Bilder, Schriftarten, Farben und Layoutpläne entwerfen und berücksichtigen können. Dann verwenden wir Photoshop oder Feuerwerkskörper, um kleine Bilder zu zeichnen und zu schneiden. Schließlich werden alle Designs auf der Seite restauriert und durch Bearbeiten von HTML angezeigt.
Wenn Sie möchten, dass Ihre HTML-Seite mit CSS (was CSS-freundlich ist) gelegt wird, müssen Sie von vorne beginnen, ohne das Erscheinungsbild zuerst zu berücksichtigen und zuerst über die Semantik und Struktur Ihres Seiteninhalts nachzudenken.
Aussehen ist nicht das Wichtigste. Eine gut strukturierte HTML-Seite kann in jedem Erscheinungsbild ausgedrückt werden. CSS Zen Garden ist ein klassisches Beispiel. CSS Zen Garden hilft uns, endlich die Kraft von CSS zu erkennen.
HTML wird nicht nur auf Computerbildschirmen gelesen. Die Bilder, die Sie sorgfältig mit Photoshop entworfen haben, werden möglicherweise nicht auf PDAs, Mobiltelefonen und Bildschirmlesern angezeigt. Eine gut strukturierte HTML-Seite kann jedoch überall auf jedem Netzwerkgerät über verschiedene Definitionen von CSS angezeigt werden.
Fang zu denken
Zunächst müssen wir lernen, was Struktur ist, was einige Schriftsteller auch Semantik bezeichnen. Der Begriff bedeutet, dass Sie Ihre Inhaltsblöcke und den Zweck jedes Inhaltsdienstes analysieren und dann eine entsprechende HTML -Struktur basierend auf diesen Inhaltszwecken festlegen müssen.
Wenn Sie sich hinsetzen und Ihre Seitenstruktur sorgfältig analysieren und planen, erhalten Sie möglicherweise ein paar solche Teile:
Logo und Standortname
Hauptseite Inhalt
Standortnavigation (Hauptmenü)
Untermenü
Suchbox
Funktionsbereich (wie Einkaufswagen, Kassierer)
Fußzeile (Urheberrecht und relevante Rechtsaussagen)
Wir verwenden normalerweise Divisionselemente, um diese Strukturen wie folgt zu definieren:
＜ div id = header ＞＜/div ＞
＜ div id = Inhalt ＞＜/div ＞
＜ div id = globalnav ＞＜/div ＞
＜ div id = subnav ＞＜/div ＞
＜ div id = suche ＞＜/div ＞
＜ div id = Shop ＞＜/div ＞
＜ Div id = Fußzeile ＞＜/div ＞
Dies ist kein Layout, sondern eine Struktur. Dies ist eine semantische Beschreibung von Inhaltsblöcken. Wenn Sie Ihre Struktur verstehen, können Sie die entsprechende ID zum Div hinzufügen. Der DIV -Container kann einen beliebigen Inhaltsblock oder einen anderen Div enthalten. Der Inhaltsblock kann alle HTML -Elemente enthalten - Titel, Absatz, Bild, Tabelle, Liste usw.
Nach dem, was oben erzählt wurde, wissen Sie bereits, wie Sie HTML strukturieren können, und jetzt können Sie Layout- und Stildefinitionen durchführen. Jeder Inhaltsblock kann überall auf der Seite platziert werden, und dann werden die Farbe, Schriftart, Rand, Hintergrund, Ausrichtungsattribute usw. des Blocks angegeben.
Die Verwendung eines Selektors ist eine wunderbare Sache
Der Name einer ID ist ein Mittel, um einen bestimmten Inhaltsblock zu steuern. Wenn Sie einen DIV auf diesen Inhaltsblock und das Hinzufügen einer eindeutigen ID einstellen, können Sie den CSS -Selektor verwenden, um das Erscheinungsbild jedes Seitenelements genau zu definieren, einschließlich Titel, Liste, Bild, Link oder Absatz usw. Wenn Sie beispielsweise eine CSS -Regel für #header schreiben, kann es sich vollständig von den Bildregeln in #Content unterscheiden.
Ein weiteres Beispiel ist: Sie können Linkstile in verschiedenen Inhaltsblöcken über verschiedene Regeln definieren. Ähnlich wie folgt: #Globalnav A: Link oder #Subnava: Link oder #Content A: Link. Sie können dieselben Elemente auch in verschiedenen Inhaltsblöcken mit unterschiedlichen Stilen definieren. Beispielsweise werden die Stile von P in #Content und #Foter durch #Content P bzw. #Foterp definiert. Strukturell besteht Ihre Seite aus Bildern, Links, Listen, Absätzen usw. Diese Elemente selbst haben keinen Einfluss darauf, welches Netzwerkgerät (PDA oder Mobiltelefon oder Netzwerk -TV) angezeigt werden. Sie können als jedes Erscheinungsbild definiert werden.
Eine sorgfältig strukturierte HTML -Seite ist sehr einfach und jedes Element wird für strukturelle Zwecke verwendet. Wenn Sie einen Absatz einlegen möchten, müssen Sie das Blockquote -Tag nicht verwenden. Verwenden Sie einfach das P -Tag und fügen Sie P eine CSS -Margin -Regel hinzu, um den Eindrückungszweck zu erreichen. P ist ein strukturiertes Tag, Margin ist ein Darstellungsattribut, erstere gehört zu HTML und der letztere gehört zu CSS. (Dies ist die Phasentrennung von Struktur und Expression.)
Es gibt fast keine Tags, die Attribute auf einer gut strukturierten HTML-Seite darstellen. Der Code ist sehr sauber und präzise. Beispielsweise kann der ursprüngliche Code <Tablewidth = 80% CellPadding = 3 Border = 2Align = links> jetzt nur <Tabelle> in der HTML schreiben, und alle Dinge, die die Steuerung in das CSS steuern. In der strukturierten HTML ist Tabelle eine Tabelle, nicht etwas anderes (wie sie zum Layout und Positionieren verwendet werden).
Übe Struktur selbst
Was oben erwähnt wird, ist nur die grundlegendste Struktur. In der tatsächlichen Anwendung können Sie die Inhaltsblöcke nach Bedarf anpassen. Es gibt oft Abteilungssituationen, und Sie werden sehen, dass es in der Behälterschicht andere Ebenen gibt, wobei eine Struktur ähnelt:
＜ div id = navcontainer ＞
＜ div id = globalnav ＞
＜ ul ＞ eine Liste ＜/ul ＞
＜/div ＞
＜ div id = subnav ＞
＜ ul ＞ Eine andere Liste ＜/ul ＞
＜/div ＞
＜/div ＞
Mit verschachtelten Divisionen können Sie mehr CSS -Regeln definieren, um die Leistung zu kontrollieren, z.
Ersetzen Sie traditionelle Methoden durch CSS
In der folgenden Liste können Sie traditionelle Methoden durch CSS ersetzen:
HTML -Attribut und entsprechende CSS -Methode
HTML -Attribut
CSS -Methode Beschreibung
ausrichten = links
Align = Right Float: links;
float: rechts; Verwenden Sie CSS, um jedes Element zu schweben: Bild, Absatz, Div, Titel, Tabelle, Liste usw.
Wenn Sie das Float -Attribut verwenden, müssen Sie eine Breite für das schwimmende Element definieren.
marginwidth = 0Leftmargin = 0 marginHeight = 0 Topmargin = 0 Margin: 0; Verwenden Sie CSS, der Rand kann auf jedes Element eingestellt werden, nicht nur auf ein Körperelement, sondern was noch wichtiger ist, Sie können die Randwerte von oben, rechts, unten und links im Element angeben.
vlink =#333399 link =#000000 link =#3333ff a: link#3ff;
A: Besucht: #339;
A: Hover: #999;
A: Active: #00f;
In HTML wird die Farbe des Links als Attributwert des Körpers definiert. Die Linkstile der gesamten Seite sind gleich. Mit dem CSS -Selektor können die Linkstile verschiedener Teile der Seite unterschiedlich sein.
bgcolor = #ffffff Hintergrundfarbe: #fff; In CSS kann jedes Element die Hintergrundfarbe definieren, nicht nur Körper- und Tabellenelemente.
borderColor = #ffffff border-color: #fff; Jedes Element kann Grenzen setzen (Boeder). Sie können oben, rechts, unten bzw. links definieren.
Grenze = 3Cellspacing = 3 Randbreite: 3px; Mit CSS können Sie den Rand des Tisches als einheitlicher Stil definieren oder die Farbe, Größe und Stil der oberen, rechten, unteren und linken Ränder definieren.
Sie können Tabelle, TD- oder TH -Selektoren verwenden.
Wenn Sie einen randlosen Effekt festlegen müssen, können Sie die CSS-Definition verwenden: Grenzkollapse: Zusammenbruch;
＜ br clear = links ＞
＜ br clear = rechts ＞
＜ br clear = alle ＞
klar: links;
Klar: Recht;
klar: beides;
Viele 2-Kolumn- oder 3-Spal-Layouts verwenden das Float-Attribut, um zu lokalisieren. Wenn Sie das Hintergrundfarbe oder das Hintergrundbild in der schwimmenden Ebene definieren, können Sie das klare Attribut verwenden.
cellpadding = 3
vSpace = 3
Hspace = 3 Polsterung: 3px; Bei CSS kann jedes Element Polsterattribute festlegen. In ähnlicher Weise kann die Polsterung oben, rechts, unten bzw. links einstellen. Polsterung ist transparent.
Align = Center Text-Align: Mitte;
Margin-Right: Auto; Rand-Links: Auto;
Text-Align gilt nur für Text.
Blockpegel wie Div und P können horizontal durch Randrechte zentriert werden: Auto; und Rand-Links: Auto;
Einige bedauerliche Tipps und Arbeitsumgebungen
Aufgrund der unvollständigen Unterstützung von CSS durch Browser müssen wir manchmal einige Hacks aufnehmen oder eine Umgebung (Workarounds) schaffen, um CSS zu ermöglichen, den gleichen Effekt zu erzielen wie traditionelle Methoden. Beispielsweise erfordern Block-Ebene-Elemente manchmal die Verwendung horizontaler Zentrierungstechniken, Kastenmodell-Fehlertechniken usw. Alle diese Tipps werden in dem Artikel von Mollyholzschlag "Integriertes Webdesign: Strategien für das langfristige CSS-Hackmanagement" beschrieben.
Ein weiterer Ressourcenplatz für CSS -Tricks ist die Position von Big John und Holly Bergevins Position ist alles.
Schwimmverhalten verstehen
Eric Meyers "enthaltende Floats" hilft Ihnen, die Verwendung von Float -Attributlayout zu beherrschen. Das Float -Element muss manchmal gelöscht werden, und das Lesen "Wie man Schwimmkörper ohne strukturelles Markup löscht" ist sehr hilfreich.