Die zehn besten Tipps für CSS im Webseitendesign

1. CSS -Regeln für Schriftartenabkürzungen <br />Wenn Sie CSS zum Definieren von Schriftarten verwenden, können Sie Folgendes tun:

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

Es ist jetzt viel besser, aber es gibt eine Sache zu beachten: Um diese Kurzschriftmethode verwenden zu können, müssen Sie mindestens die Eigenschaften „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:

Durch die gleichzeitige Verwendung zweier Klassen (Trennung durch Leerzeichen statt Kommas) werden in diesem Absatz die in beiden Klassen angegebenen Regeln angewendet. 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 dem IE erhält jedoch jede mit !important markierte Anweisung absolute Priorität, zum Beispiel:

Der obere Rand beträgt in allen Browsern außer IE 3,5em und im IE 2em. Manchmal ist dies nützlich, insbesondere wenn relative Randwerte verwendet werden (wie in diesem Beispiel), um den Unterschied zwischen IE und anderen Browsern anzuzeigen.

(IE bezieht sich hier auf: IE6 und niedriger, ausgenommen IE7. Tatsächlich unterstützt IE7 das !important-Attribut, und das Gleiche gilt für CSS-Unterselektoren.)

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.

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), also müssen wir eine andere Methode verwenden:

Kaufen Sie Widgets, aber 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 wird verwendet, um Browser-Anzeigeprobleme vor IE6 zu lösen der Breitenwert). Sie könnten beispielsweise das folgende CSS verwenden, um die Abmessungen eines Containers anzugeben:

Dann bewerben Sie sich im HTML:
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. Mittelblockelemente

Vorausgesetzt, dass Ihre Website ein Layout mit fester Breite verwendet und alle Inhalte in der Mitte des Bildschirms platziert werden, können Sie das folgende CSS verwenden:

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 so ein, dass sie mit der Höhe der Box übereinstimmt. In diesem Beispiel beträgt die Boxhöhe 2em. Anschließend müssen Sie nur noch eine weitere Zeilenhöhe hinzufügen: 2em zum CSS. Vertikale Zentrierung erreicht!

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.