Zehn Tipps für das CSS-Stylesheet-Design

1. Regeln für die Abkürzung von CSS-Schriftarten

Wenn Sie Schriftarten mithilfe von CSS definieren, können Sie Folgendes tun:

Tatsächlich können Sie diese Eigenschaften abkürzen:

Schriftart: 1em/1,5em fett kursiv, Kapitälchen Verdana, Serif

Es ist jetzt viel besser, aber es gibt eine Sache zu beachten: Um diese Kurzschriftmethode verwenden zu können, müssen Sie mindestens die Attribute „font-size“ und „font-family“ angeben. varient) nicht angegeben werden, werden sie automatisch verwendet. Der Standardwert wird automatisch verwendet.

2. Verwenden Sie zwei Klassen gleichzeitig

Normalerweise geben wir nur eine Klasse für das Attribut an, aber das bedeutet nicht, dass Sie nur eine angeben können. Tatsächlich können Sie so viele angeben, wie Sie möchten, zum Beispiel:

<p class="text side">...</p>Durch die gleichzeitige Verwendung zweier Klassen (getrennt durch Leerzeichen statt Kommas) wendet dieser Absatz die in beiden Klassen angegebenen Regeln an. Sollte sich eine der Regeln überschneiden, hat die letztere Vorrang.

3. Standardwert des Rahmens in CSS

Beim Schreiben einer Rahmenregel geben Sie normalerweise Farbe, Breite und Stil an (in beliebiger Reihenfolge). Beispiel: border: 3px solid #000 (3 Pixel breiter schwarzer solider Rand). Tatsächlich muss in diesem Beispiel nur der Stil angegeben werden. Wenn Sie den Stil als einfarbig angeben, werden für die restlichen Werte die Standardwerte verwendet: Die Standardbreite ist mittel (entspricht 3 bis 4 Pixel); die Standardfarbe ist die Farbe des Texts im Rahmen . Wenn dies genau das ist, was Sie möchten, müssen Sie es nicht im CSS angeben.

4. !important wird vom IE ignoriert

In CSS hat normalerweise die zuletzt angegebene Regel Vorrang. Bei anderen Browsern als IE erhält jedoch jede mit !important gekennzeichnete Anweisung absolute Priorität, zum Beispiel: margin-top: 3.5em !important; margin-top: 2em in allen Browsern außer IE. Der obere Rand beträgt immer 3.5em, while IE ist 2em, insbesondere wenn relative Randwerte verwendet werden (wie in diesem Beispiel), um die subtilen Unterschiede zwischen IE und anderen Browsern aufzuzeigen. (Vielen Leuten fällt möglicherweise auch auf, dass CSS-Unterselektoren vom IE ebenfalls ignoriert werden.)

5. Fähigkeiten zum Ersetzen von Bildern

Oft ist es klüger, Standard-HTML anstelle von Bildern zum Anzeigen von Text zu verwenden, da dies nicht nur die Downloads beschleunigt, sondern auch die Benutzerfreundlichkeit verbessert. Wenn Sie jedoch entschlossen sind, eine Schriftart zu verwenden, die auf dem Computer Ihres Besuchers möglicherweise nicht verfügbar ist, können Sie nur Bilder auswählen.

Sie möchten beispielsweise den Titel „Widgets kaufen“ oben auf jeder Seite verwenden, möchten aber auch, dass diese von Suchmaschinen entdeckt wird. Wenn Sie aus ästhetischen Gründen eine seltene Schriftart verwenden, müssen Sie zur Anzeige ein Bild verwenden es.

<h1><img src="/widget-image.gif" alt="Widgets kaufen" /></h1>

Das ist sicherlich wahr, aber es gibt Hinweise darauf, dass Suchmaschinen echten Text viel mehr schätzen als Alternativtext (da zu viele Websites bereits Alttext als Schlüsselwörter verwenden), daher müssen wir eine andere Methode verwenden: <h1><span >Widgets kaufen< /span></h1>, was ist mit Ihren schönen Schriftarten? Das folgende CSS kann helfen:

Jetzt haben Sie sowohl ein schönes Bild als auch eine gute Ausblendung des echten Textes – mit Hilfe von CSS wird der Text -2000 Pixel von der linken Seite des Bildschirms entfernt positioniert.

6. Eine weitere Option für den CSS-Box-Modell-Hack

Der CSS-Box-Modell-Hack wurde verwendet, um Browser-Anzeigeprobleme vor IE6 zu lösen. Versionen vor IE6.0 enthielten den Rahmenwert und den Füllwert eines Elements innerhalb der Breite (anstatt ihn zum Breitenwert hinzuzufügen). Sie könnten beispielsweise das folgende CSS verwenden, um die Abmessungen eines Containers anzugeben:

Dann bewerben Sie sich im HTML:

<div id="box">...</div>

Die Gesamtbreite der Box beträgt in fast allen Browsern 150 Pixel (100 Pixel Breite + zwei 5-Pixel-Ränder + zwei 20-Pixel-Auffüllungen), außer in Browsern vor IE6 sind es immer noch 100 Pixel (Rahmenwert und der Auffüllungswert sind im enthalten). Breitenwert), soll der Box-Modell-Hack dieses Problem lösen, wird aber auch Probleme verursachen. Eine einfachere Möglichkeit ist wie folgt:

Dies führt dazu, dass die Gesamtbreite der Box in jedem Browser 150 Pixel beträgt.

7. Zentrieren Sie das Blockelement

Vorausgesetzt, Ihre Website verwendet ein Layout mit fester Breite, bei dem alle Inhalte in der Mitte des Bildschirms platziert sind, können Sie sie verwenden

Das folgende CSS:

Sie können jedes Element im HTML-Text platzieren, und das Element erhält automatisch gleiche linke und rechte Randwerte, um eine zentrierte Anzeige zu gewährleisten. Dies ist jedoch in Browsern vor IE6 immer noch ein Problem und wird nicht zentriert, sodass es wie folgt geändert werden muss:

Das Festlegen des Hauptinhalts führt dazu, dass der Hauptinhalt zentriert wird, aber selbst der gesamte Text wird wahrscheinlich nicht zentriert. Aus diesem Grund muss das Div von #content auch einen Wert angeben: text-align: left

8. Verwenden Sie CSS, um eine vertikale Zentrierung zu erreichen

Die vertikale Zentrierung ist für Tabellen ein Kinderspiel. Geben Sie einfach die Zelle als „vertikal-align: middle“ an, aber das funktioniert im CSS-Layout nicht. Angenommen, Sie stellen die Höhe eines Navigationsmenüs auf 2em ein und geben dann die vertikalen Ausrichtungsregeln in CSS an. Der Text wird weiterhin oben im Feld angeordnet, es gibt überhaupt keinen Unterschied.

Um dieses Problem zu lösen, stellen Sie einfach die Zeilenhöhe der Box auf die gleiche ein wie die Boxhöhe in diesem Beispiel. Fügen Sie dann einfach eine weitere Zeilenhöhe hinzu: 2em zum CSS !

9. CSS-Positionierung innerhalb des Containers

Einer der größten Vorteile von CSS besteht darin, dass Objekte an einer beliebigen Stelle im Dokument und auch innerhalb eines Containers positioniert werden können. Fügen Sie dem Container einfach eine CSS-Regel hinzu:

Dann wird jedes Element innerhalb des Containers relativ zum Container positioniert. Angenommen, Sie verwenden die folgende HTML-Struktur:

Wenn Sie die Navigation innerhalb des Containers 30 Pixel vom linken Rand und 5 Pixel von oben positionieren möchten, können Sie die folgende CSS-Anweisung verwenden:

10. Hintergrundfarbe reicht bis zum unteren Bildschirmrand

Einer der Nachteile von CSS ist das Fehlen einer vertikalen Kontrolle, was zu Problemen führt, die bei einem Tabellenlayout nicht auftreten. Angenommen, Sie richten auf der linken Seite der Seite eine Spalte ein, um die Navigation Ihrer Website zu platzieren. Die Seite hat einen weißen Hintergrund, aber Sie möchten, dass die Navigationsspalte einen blauen Hintergrund hat. Verwenden Sie einfach das folgende CSS:

Das Problem besteht darin, dass das Navigationselement nicht bis zum unteren Rand der Seite reicht und natürlich auch die Hintergrundfarbe nicht bis zum unteren Rand reicht. Dadurch wird der blaue Hintergrund der linken Spalte auf der Hälfte der Seite abgeschnitten, wodurch Ihr Design verschwendet wird. Was sollen wir tun? Leider können wir nur Täuschung verwenden, das heißt, den Hintergrund des Körpers als Bild mit der gleichen Farbe und Breite wie die linke Spalte angeben.

Das Hintergrundbild sollte ein blaues Bild mit einer Breite von 150 Pixeln sein. Der Nachteil dieser Methode besteht darin, dass em nicht zum Festlegen der Breite der linken Spalte verwendet werden kann. Wenn der Benutzer die Größe des Texts ändert und die Breite des Inhalts erweitert wird, ändert sich die Breite der Hintergrundfarbe nicht entsprechend.

Zum jetzigen Zeitpunkt ist dies die einzige Lösung für diese Art von Problem. Sie können also nur Pixelwerte für die linke Spalte verwenden, um eine andere Hintergrundfarbe zu erhalten, die automatisch gestreckt wird.