Lernen Sie CSS-Layout? Können Sie das reine CSS-Layout immer noch nicht vollständig beherrschen? Normalerweise gibt es zwei Situationen, die Ihr Lernen behindern:
Die erste Möglichkeit besteht darin, dass Sie das Prinzip der CSS-Seitenverarbeitung 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 erfahren Sie, wie Sie HTML strukturieren.
Ein weiterer Grund besteht darin, dass Ihnen die sehr vertrauten Eigenschaften der Präsentationsebene (z. B. cellpadding, hspace, align=left usw.) fehlen und Sie nicht wissen, in welche CSS-Anweisungen Sie sie konvertieren sollen. Sobald Sie das erste Problem gelöst haben und wissen, wie Sie Ihren HTML-Code strukturieren, gebe ich Ihnen eine Liste mit detaillierten Angaben darüber, welches CSS Sie verwenden sollten, um die ursprünglichen Präsentationsattribute zu ersetzen.
Strukturiertes HTML
Wenn wir zum ersten Mal lernen, eine Webseite zu erstellen, überlegen wir immer zuerst, wie wir sie gestalten sollen, und berücksichtigen dabei die Bilder, Schriftarten, Farben und Layoutpläne. Dann zeichnen wir es mit Photoshop oder Fireworks und schneiden es in kleine Bilder. Bearbeiten Sie abschließend den HTML-Code, um alle Designs auf der Seite wiederherzustellen.
Wenn Sie möchten, dass Ihre HTML-Seite mit CSS (CSS-freundlich) gestaltet wird, müssen Sie noch einmal von vorne beginnen. Denken Sie nicht zuerst an das „Erscheinungsbild“, sondern zuerst an die Semantik und Struktur Ihres Seiteninhalts.
Das Aussehen ist nicht das Wichtigste. Eine gut strukturierte HTML-Seite kann in jedem Erscheinungsbild dargestellt werden, und CSS Zen Garden ist ein klassisches Beispiel. CSS Zen Garden hilft uns, endlich die Leistungsfähigkeit von CSS zu erkennen.
HTML dient nicht nur zum Lesen auf einem Computerbildschirm. Ihre sorgfältig in Photoshop gestalteten Bilder werden möglicherweise nicht auf PDAs, Mobiltelefonen und Bildschirmleseprogrammen angezeigt. Aber eine gut strukturierte HTML-Seite kann durch verschiedene CSS-Definitionen überall und auf jedem Netzwerkgerät angezeigt werden.
Fang an zu denken
Beginnen Sie damit, zu lernen, was Struktur ist, die manche Autoren auch Semantik nennen. Dieser Begriff bedeutet, dass Sie Ihre Inhaltsblöcke und den Zweck, dem jeder Inhalt dient, analysieren und dann die entsprechende HTML-Struktur basierend auf diesen Inhaltszwecken erstellen müssen.
Wenn Sie sich hinsetzen und Ihre Seitenstruktur sorgfältig analysieren und planen, könnten Sie am Ende so etwas erhalten:
Logo und Site-Name
Inhalt der Hauptseite
Site-Navigation (Hauptmenü)
Untermenü
Suchfeld
Funktionsbereiche (z. B. Warenkorb, Kasse)
Fußzeile (Urheberrecht und damit verbundene rechtliche Hinweise)
Normalerweise verwenden wir DIV-Elemente, um diese Strukturen zu definieren, ähnlich wie hier:
<div id=header></div>
<div id=content></div>
<div id=globalnav></div>
<div id=subnav></div>
<div id=search></div>
<div id=shop></div>
<div id=footer></div>
Es ist nicht das Layout, es ist die Struktur. Dies ist eine semantische Beschreibung von Inhaltsblöcken. Wenn Sie Ihre Struktur verstanden haben, können Sie die entsprechende ID zum DIV hinzufügen. Jeder Inhaltsblock kann in einem DIV-Container enthalten sein und ein anderer DIV kann darin verschachtelt sein. Inhaltsblöcke können jedes HTML-Element enthalten – Titel, Absätze, Bilder, Tabellen, Listen usw.
Basierend auf dem oben Gesagten wissen Sie bereits, wie man HTML strukturiert, und können nun Layout und Stile definieren. Jeder Inhaltsblock kann an einer beliebigen Stelle auf der Seite platziert werden und Farbe, Schriftart, Rahmen, Hintergrund, Ausrichtungseigenschaften usw. des Blocks können angegeben werden.
Die Verwendung von Selektoren ist eine wunderbare Sache
Der Name der ID ist ein Mittel zur Steuerung eines bestimmten Inhaltsblocks mit einem DIV und dem Hinzufügen einer eindeutigen ID. Mithilfe von CSS-Selektoren können Sie das Erscheinungsbild jedes Seitenelements, einschließlich Titel, Listen und Bilder, genau definieren , Links oder Absätze usw. Wenn Sie beispielsweise eine CSS-Regel für #header schreiben, kann diese völlig anders sein als die Bildregel in #content.
Ein weiteres Beispiel: Sie können unterschiedliche Regeln verwenden, um Link-Stile in verschiedenen Inhaltsblöcken zu definieren. Etwa so: #globalnav a:link oder #subnav a:link oder #content a:link. Sie können auch unterschiedliche Stile für dasselbe Element in verschiedenen Inhaltsblöcken definieren. Definieren Sie beispielsweise die Stile von p in #content bzw. #footer durch #content p und #footer p. Strukturell gesehen besteht Ihre Seite aus Bildern, Links, Listen, Absätzen usw. Diese Elemente selbst haben keinen Einfluss darauf, auf welchem Netzwerkgerät sie angezeigt werden (PDA, Mobiltelefon oder Internet-TV). Sie können als beliebiges Erscheinungsbild definiert werden.
Eine sorgfältig strukturierte HTML-Seite ist sehr einfach und jedes Element dient strukturellen Zwecken. Wenn Sie einen Absatz einrücken möchten, müssen Sie das Blockquote-Tag nicht verwenden. Verwenden Sie einfach das p-Tag und fügen Sie eine CSS-Randregel zu p hinzu, um den Einrückungszweck zu erreichen. p ist ein strukturiertes Tag und margin ist ein Präsentationsattribut. Ersteres gehört zu HTML und letzteres gehört zu CSS. (Dies ist die Trennung von Struktur und Ausdruck.)
Gut strukturierte HTML-Seiten haben fast keine Attribut-Tags. Der Code ist sehr sauber und prägnant. Beispielsweise kann der ursprüngliche Code <table width=80% cellpadding=3 border=2 align=left> nur noch <table> in HTML schreiben, und alle Dinge, die die Leistung steuern, sind in CSS geschrieben. In strukturiertem HTML ist table eine Tabelle, nichts anderes (z. B. zur Verwendung für Layout und Positionierung).
Üben Sie, sich selbst zu strukturieren
Das Obige ist nur die grundlegendste Struktur. In der tatsächlichen Anwendung können Sie die Inhaltsblöcke entsprechend Ihren Anforderungen anpassen. DIV-Verschachtelung kommt häufig vor, und Sie werden sehen, dass es in der Containerschicht weitere Ebenen mit einer ähnlichen Struktur gibt:
<div id=navcontainer>
<div id=globalnav>
<ul>eine Liste</ul>
</div>
<div id=subnav>
<ul>eine andere Liste</ul>
</div>
</div>
Mit verschachtelten div-Elementen können Sie weitere CSS-Regeln definieren, um die Darstellung zu steuern. Sie können beispielsweise #navcontainer eine Regel geben, um die Liste nach rechts zu zentrieren, #globalnav eine Regel, um die Liste nach links zu zentrieren, und #subnav eine weitere geben Regel, um die Liste vollständig zu zentrieren.
Ersetzen Sie traditionelle Methoden durch CSS
Die folgende Liste hilft Ihnen, herkömmliche Methoden durch CSS zu ersetzen:
HTML-Attribute und entsprechende CSS-Methoden
Beschreibung der CSS-Methode für HTML-Attribute
ausrichten=links
align=right float: left;
float: right; Verwenden Sie CSS, um jedes Element zu schweben: Bilder, Absätze, Divs, Titel, Tabellen, Listen usw.
Wenn Sie das Float-Attribut verwenden, müssen Sie eine Breite für das Float-Element definieren.
marginwidth=0 leftmargin=0 marginheight=0 topmargin=0 margin: 0; Mit CSS kann der Rand für jedes Element festgelegt werden, nicht nur für das Körperelement. Noch wichtiger ist, dass Sie den oberen, rechten, unteren und linken Rand des Elements festlegen können separat.
vlink=#333399 alink=#000000 link=#3333FF a:link #3ff;
a:besucht: #339;
a:hover: #999;
a:aktiv: #00f;
In HTML wird die Farbe eines Links als Attributwert des Körpers definiert. Der Linkstil ist auf der gesamten Seite gleich. Mithilfe von CSS-Selektoren können Link-Stile in verschiedenen Teilen der Seite unterschiedlich sein.
bgcolor=#FFFFFF Hintergrundfarbe: #fff; In CSS kann die Hintergrundfarbe für jedes Element definiert werden, nicht nur für Körper- und Tabellenelemente.
bordercolor=#FFFFFF border-color: #fff; Jedes Element kann einen Rand (boeder) festlegen. Sie können jeweils oben, rechts, unten und links definieren.
Grenze=3
cellpacing=3 border-width: 3px; Mit CSS können Sie die Ränder der Tabelle als einheitlichen Stil definieren oder Sie können die Farbe, Größe und den Stil des oberen, rechten, unteren und linken Rands definieren.
Sie können Tabellen-, TD- oder TH-Selektoren verwenden.
Wenn Sie einen randlosen Effekt festlegen müssen, können Sie die CSS-Definition verwenden: border-collapse:collapse;
<br klar=links>
<br klar=richtig>
<br clear=all>
klar: links;
klar: richtig;
klar: beides;
Viele 2- oder 3-Spalten-Layouts verwenden das Float-Attribut zur Positionierung. Wenn Sie in der schwebenden Ebene eine Hintergrundfarbe oder ein Hintergrundbild definieren, können Sie das Attribut „clear“ verwenden.
Zellauffüllung=3
vspace=3
hspace=3 padding: 3px; Mit CSS kann das Padding-Attribut für jedes Element festgelegt werden. Ebenso kann das Padding oben, rechts, unten und links festgelegt werden. Polsterung ist transparent.
align=center text-align: center;
Rand rechts: auto; Rand links: auto;
Die Textausrichtung funktioniert nur mit Text.
Elemente auf Blockebene wie div und p können mit margin-right: auto und margin-left: auto horizontal zentriert werden;
Einige bedauerliche Techniken und Arbeitsumgebung
Aufgrund der unvollständigen Unterstützung von CSS durch Browser müssen wir manchmal einige Tricks (Hacks) anwenden oder eine Umgebung (Workarounds) einrichten, damit CSS den gleichen Effekt wie herkömmliche Methoden erzielen kann. Beispielsweise müssen Elemente auf Blockebene manchmal horizontale Zentrierungstechniken, Box-Model-Bug-Techniken usw. verwenden. Alle diese Techniken werden in Molly Holzschlags Artikel „Integrated Web Design: Strategies for Long-Term CSS Hack Management“ ausführlich beschrieben.
Eine weitere Ressource zu CSS-Techniken ist „Position is Everything“ von Big John und Holly Bergevin.
Float-Verhalten verstehen
„Containing Floats“ von Eric Meyer hilft Ihnen dabei, die Verwendung von Float-Attributen für das Layout zu erlernen. Manchmal müssen Float-Elemente gelöscht werden. Die Lektüre von „So löschen Sie Floats ohne Strukturmarkierung“.