In diesem Artikel werden 9 praktische Techniken zum Erstellen von CSS-Webseiten vorgestellt, um die Grundlage für die Website-Rekonstruktion zu legen. Ich hoffe, Sie können etwas Nützliches lernen.
1. Verwenden Sie die CSS-Abkürzung
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
Ich habe vergessen, die Größeneinheit zu definieren: CSS-Neuling
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-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 einer 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 in Um diesen Fehler zu vermeiden, empfehle ich, dass bei allen Definitionsnamen in HTML und XHTML die Groß-/Kleinschreibung beachtet wird Bestätigen Sie sorgfältig, 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 dies tun Lassen Sie die vorherige Elementqualifizierung weg, da die ID auf einer Seite eindeutig ist und mehrfach auf der Seite verwendet werden kann. Es ist für Sie sinnlos, ein bestimmtes Element einzuschränken. Zum Beispiel: p#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 wie folgt auf 0 festlegen: * { margin:0; 0;
}
6. Keine Notwendigkeit, vererbbare Werte wiederholt zu definieren
In CSS erben untergeordnete Elemente automatisch die Attributwerte des übergeordneten Elements, wie z. B. Farbe, Schriftart usw. , die im übergeordneten Element definiert wurden, können ohne wiederholte Definition direkt an untergeordnete Elemente vererbt werden. Beachten Sie jedoch, dass der Browser Ihre Definition möglicherweise mit einigen Standardwerten überschreibt.
7. Prinzip „Nächstes erstes“
Wenn es mehrere Definitionen desselben Elements gibt, hat die nächstliegende Definition (Minimalebene) Vorrang. Zum Beispiel gibt es diesen Codeabschnitt
Update: Lorem ipsum dolor setIn der CSS-Datei haben Sie das Element p definiert und auch ein classupdatep {
margin:1em 0;
font-size:1em
color:#333;
}
.update {
font-weight:bold;
}
Von diesen beiden Definitionen wird „class="update" verwendet, da „class“ näher als „p“ ist. Weitere Informationen finden Sie in „Berechnen der Spezifität eines Selektors“ des W3C.
8. Mehrere Klassendefinitionen
Ein Tag kann mehrere Klassen gleichzeitig definieren. Beispiel: Wir definieren zunächst zwei Stile, der erste Stil hat einen Hintergrund von #666; der zweite Stil hat einen 10-Pixel-Rahmen.
.one{;background:#666;}
.two{border:10px solid #F00;}
Im Seitencode können wir es so nennen
＜p class="one" two＞＜/p＞
Der endgültige Anzeigeeffekt besteht darin, dass das p sowohl einen #666-Hintergrund als auch einen 10-Pixel-Rand hat. Ja, das ist möglich, Sie können es ausprobieren.
9. Verwenden Sie Nachkommenselektoren
CSS-Anfänger wissen nicht, dass die Verwendung von Nachkommenselektoren einer der Gründe ist, die ihre Effizienz beeinträchtigen. Unterselektoren können Ihnen dabei helfen, viele Klassendefinitionen zu speichern. Schauen wir uns den folgenden Code an:
＜p id="subnav＞"
＜ul＞ ＜li class="subnavitem＞" ＜a href=# class="subnavitem＞"Item 1＜ / a＞＜/li＞＞ ＜li class="subnavitemselected＞" ＜a href=# class="subnavitemselected＞" Element 1＜/a＞ ＜/li＞
＜li class="subnavitem＞ " ＜a href=# class="subnavitem＞" Element 1＜/a＞ ＜/li＞
＜/ul＞
＜/p＞
Die CSS-Definition dieses Codes lautet:
p#subnav ul { /* Einige Stile */ }
p#subnav ul li.subnavitem { /* Einige Stile */ }
p#subnav ul li.subnavitem a.subnavitem { /* Einige Stylings */ }
p#subnav ul li.subnavitemselected { /* Einige Stylings */ }
p#subnav ul li.subnavitemselected a.subnavitemselected { /* Einige Styling */ }
Sie können die folgende Methode verwenden, um den obigen Code zu ersetzen
＜ul id="subnav＞"
＜li＞ ＜a href=#＞ Item 1＜/a＞ ＜/li ＞
＜li class="sel＞" ＜a href=#＞ Element 1＜/a＞ ＜/li＞
＜li＞ ＜a href=#＞ Element 1＜/a＞ ＜/li＞
＜/ul＞
Die Stildefinition lautet:
#subnav { /* Some Styling */ }
#subnav li { /* Some Styling */ }
#subnav a { / * Etwas Styling */ }
#subnav .sel { /* Etwas Styling */ }
#subnav .sel a { /* Etwas Styling */ }
Verwenden Sie Unterselektoren, um Ihren Code und Ihr CSS prägnanter und leichter lesbar zu gestalten.
Das obige ist der detaillierte Inhalt vonTeilen Sie 9 praktische Tipps zum Erstellen von CSS-Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
