9 praktische Tipps zum Erstellen von CSS-Webseiten

Dieser Artikel fasst einige gängige CSS-Techniken zusammen, um den Grundstein für die Website-Rekonstruktion zu legen.

1. Verwenden Sie CSS-Abkürzungen

Die Verwendung von Abkürzungen kann dazu beitragen, die Größe Ihrer CSS-Datei 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 klar, es sei denn, der Wert ist 0

Das Vergessen, die Einheit der Größe 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 Andere Werte müssen der Einheit folgen.

3. Beachten Sie bei der Verwendung von CSS in XHTML den Elementnamen in CSS. Um diesen Fehler zu vermeiden, empfehle ich, dass bei allen Definitionsnamen in HTML und XHTML die Groß-/Kleinschreibung beachtet wird Bitte bestätigen Sie beim Schreiben sorgfältig, dass Ihre Definition in CSS mit den Tags in XHTML übereinstimmt

4. Heben Sie die Elementbeschränkung vor Klasse und ID auf

Wenn Sie schreiben, um eine Klasse für ein Element zu definieren. Oder id, Sie können die vorherige Elementqualifikation weglassen, da ID auf einer Seite eindeutig ist und mehrmals auf der Seite verwendet werden kann. Beispiel:

#content { /* Deklarationen */ }

　fieldset.details { /* Deklarationen */ }

　Kann geschrieben werden als

　#content { /* Deklarationen */ }

　.details { /* Deklarationen */ }

　 Dadurch können einige Bytes eingespart werden

　 5. Standardwert

Normalerweise ist der Standardwert für die Polsterung 0 und der Standardwert für die Hintergrundfarbe Der Standardwert kann in verschiedenen Browsern unterschiedlich sein. Wenn Sie Konflikte befürchten, können Sie die Rand- und Füllwerte aller Elemente am Anfang des Stylesheets wie folgt definieren:

　* {

margin:0;

padding:0;

}

6. Keine Notwendigkeit, vererbbare Werte wiederholt zu definieren

In CSS erben untergeordnete Elemente automatisch die Werte ​​der im übergeordneten Element definierten Attributwerte wie Farbe, Schriftart usw. können ohne wiederholte Definition direkt an das untergeordnete Element vererbt werden. Beachten Sie jedoch, dass der Browser Ihre Definition möglicherweise überschreibt einige Standardwerte.

7. Das Prinzip der nächsten Priorität

Wenn es mehrere Definitionen desselben Elements gibt, hat die nächstliegende Definition (Minimalebene) Vorrang Code

Update: Lorem ipsum dolor set

　In der CSS-Datei haben Sie das Element p definiert und auch ein Klassenupdate definiert

　p {

　margin:1em 0;

　font- size:1em;

color:#333; }

.update {

font-weight:bold; weil die Klasse näher ist als p. Weitere Informationen finden Sie in „Berechnen der Spezifität eines Selektors“ des W3C.

8. Mehrere Klassendefinitionen

Ein Tag kann mehrere Klassen gleichzeitig definieren. Definieren wir beispielsweise zwei Stile Erstens hat der erste Stil einen Hintergrund von #666; der zweite Stil hat einen Rand von 10 px.

Im Seitencode können wir

wie folgt aufrufen: ＜div class="one " two＞＜/div＞

Auf diese Weise besteht der endgültige Anzeigeeffekt darin, dass dieses Div beides hat. Der Hintergrund von #666 hat auch einen 10-Pixel-Rand. Ja, das ist möglich, Sie können es versuchen.

9. Verwenden Sie Nachkommenselektoren

CSS-Anfänger wissen nicht, dass die Verwendung von Unterselektoren einer der Gründe ist, die sich auf ihre Effizienz auswirken Schauen Sie sich den folgenden Code an:

　

＜ul＞ ＜🎜> ＜li class="subnavitem＞" ＜a href="http://www.php1. cn/"> ＜li class="subnavitemselected＞" ＜a href="http:// www.php1.cn/"> 🎜> Die CSS-Definition dieses Codes lautet:

div#subnav ul { /* Etwas Styling */ }

div#subnav ul li.subnavitem { /* Etwas Styling */ }

div #subnav ul li.subnavitem a.subnavitem { /* Etwas Styling */ }

div#subnav ul li.subnavitemselected { /* Einige Stile */ }

　div#subnav ul li.subnavitemselected a.subnavitemselected { / * Einige Stile */ }

Sie können die folgende Methode zum Ersetzen verwenden der obige Code

　＜ul id="subnav＞"

　＜li＞＜a href="http:/ /www.php1.cn/"> a href="http://www.php1.cn/"> ＜li＞ ＜a href="http://www. php1.cn/">　 ＜/ul＞

　 Stildefinition ist:

　#subnav { /* Einige Styling */ } 
　#subnav li { /* Einige Styling */ } 
　#subnav a { /* Einige Styling */ } 
　#subnav .sel { / * Etwas Styling */ }
　 #subnav .sel a { /* Etwas Styling */ }

　 Durch die Verwendung von Unterselektoren können Sie Ihren Code und Ihr CSS prägnanter und leichter lesbar machen.