Dieser Artikel fasst einige gängige CSS-Techniken zusammen, um den Grundstein für die Website-Rekonstruktion zu legen. Ich hoffe, Sie können etwas Nützliches lernen.
1. Verwenden Sie CSS-Abkürzungen
Die Verwendung von Abkürzungen kann dazu beitragen, die Größe Ihrer CSS-Dateien zu reduzieren und sie leichter lesbar zu machen. Die wichtigsten Regeln der CSS-Abkürzung finden Sie unter „CSS Basic Syntax“.
2. Definieren Sie die Einheit eindeutig, es sei denn, der Wert ist 0
Das Vergessen, die Einheiten einer Dimension zu definieren, ist ein häufiger Fehler unter CSS-Neulingen. In HTML können Sie einfach ;100 schreiben, aber in CSS müssen Sie eine genaue Einheit angeben, wie zum Beispiel: „ width:100em. Es gibt nur zwei Ausnahmen, bei denen Sie die Einheit undefiniert lassen können: Zeilenhöhe und 0-Wert. Ansonsten alle anderen Auf Werte muss die Einheit folgen. Achten Sie darauf, keine Leerzeichen zwischen dem Wert und der Einheit einzufügen.
3. Groß- und Kleinschreibung beachten
Bei der Verwendung von CSS in XHTML wird bei in CSS definierten Elementnamen die Groß-/Kleinschreibung beachtet. Um diesen Fehler zu vermeiden, empfehle ich, für alle Definitionsnamen Kleinbuchstaben zu verwenden.
Bei den Werten von class und id wird in HTML und XHTML auch zwischen Groß- und Kleinschreibung unterschieden. Wenn Sie gemischte Groß- und Kleinschreibung schreiben müssen, stellen Sie bitte sorgfältig sicher, dass Ihre Definition in CSS mit den Tags in XHTML übereinstimmt.
4. Heben Sie die Elementbeschränkungen vor Klasse und ID auf
Wenn Sie schreiben, um eine Klasse oder ID für ein Element zu definieren, können Sie die vorherige Elementqualifizierung weglassen, da die ID auf einer Seite eindeutig ist und auf der Seite mehrfach verwendet werden kann. Es macht für Sie keinen Sinn, ein Element zu qualifizieren. Zum Beispiel:
div#content { /* Deklarationen */ }
fieldset.details { /* Deklarationen */ }
kann geschrieben werden als
#content { /* Deklarationen */ }
.details { /* Deklarationen */ }
Das spart einige Bytes.
5.Standardwert
Normalerweise ist der Standardwert für die Polsterung 0 und der Standardwert für die Hintergrundfarbe ist transparent. Der Standardwert kann jedoch in verschiedenen Browsern unterschiedlich sein. Wenn Sie Angst vor Konflikten haben, können Sie die Rand- und Füllwerte aller Elemente am Anfang des Stylesheets auf 0 festlegen, wie folgt:
* {
Rand:0;
Polsterung:0;
}