In diesem Lab schlüpfen wir in die Rolle von Alex, einem aufstrebenden Webentwickler, der mit der Aufgabe betraut ist, eine ansprechende und stilvolle Website für einen neuen Haustierdienst zu erstellen. Das Ziel besteht darin, die angebotenen Dienstleistungen zu präsentieren, das Team vorzustellen und potenziellen Kunden eine einfache Möglichkeit zu geben, Kontakt aufzunehmen. Die Handlung spielt in einer lebhaften Stadt, in der die Anzahl der Haustierbesitzer steigt und die Nachfrage nach hochwertigen Haustierbetreuungsdiensten stark ansteigt. Alex' Aufgabe ist es, eine Website zu gestalten, die sich in diesem wettbewerbsreichen Markt durch die Verwendung grundlegender CSS-Techniken und Selektor (Selectors) auszeichnet und ein visuell ansprechendes und benutzerfreundliches Erlebnis bietet.
Als nächstes werden wir 5 Labs durchlaufen, um das CSS für "Pet's House" zu vervollständigen.
Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Fortgeschrittener mit einer Abschlussquote von 77% ist. Es hat eine positive Bewertungsrate von 99% von den Lernenden erhalten.
Lesen reicht nicht – Programmieren ist Praxis.
CSS-Selektoren
Wir öffnen eine Webseite und drücken auf der Tastatur F12, um die Entwicklertools zu öffnen. Wir können zwei Teile sehen: "Elements" (Elemente) und "Styles" (Stile).
Wenn Sie HTML gelernt haben, sollten Sie wissen, dass Elemente die verschiedenen HTML-Tags sind, die für das Layout der Seite verwendet werden, während Stile die CSS-Regeln der Seite darstellen.
Wir können CSS verwenden, um die Farbe, Größe, Form usw. von HTML-Elementen zu ändern und sie auch zu animieren.
Nachdem wir die Nützlichkeit von CSS kennen, müssen wir uns über eine Frage Gedanken machen: Wie können wir einem bestimmten Ort eines Elements einen spezifischen Stil hinzufügen, wenn es so viele Elemente auf der Seite gibt?
Wir können CSS-Selektoren verwenden, um die Elemente auszuwählen, die wir gestalten möchten, und dann die CSS-Eigenschaften nutzen, um den gewünschten Stil anzuwenden.
Beginnen wir mit dem grundlegendsten CSS-Selektor.
Ein CSS-Selektor ist der erste Teil einer CSS-Regel. Es ist ein Muster von Elementen und anderen Begriffen, das dem Browser mitteilt, welche HTML-Elemente ausgewählt werden sollen, um die CSS-Eigenschaftswerte innerhalb der Regel auf sie anzuwenden. Das oder die Elemente, die vom Selektor ausgewählt werden, werden als das Subjekt des Selektor bezeichnet.
Es gibt viele Arten von CSS-Selektoren, und die grundlegendsten sind:
Typ-Selektoren (Type selectors)
Klassen-Selektoren (Class selectors)
ID-Selektoren (ID selectors)
Nachfahren-Selektor (Descendant Selector)
Universal-Selektor (Universal Selector)
Typ-Selektoren (Type selectors)
Wenn Sie für eine bestimmte Art von Tag auf einer Seite einen einheitlichen Stil festlegen müssen, sollten Sie einen Tag-Selektor verwenden. Der Schlüsselwort des Tag-Selektors wird nach dem Tag benannt.
Beispielsweise, wenn Sie die Schriftfarbe aller <p>-Tags auf einer Seite auf rot setzen möchten, würden Sie die folgende CSS-Regel verwenden:
Klassen-Selektoren (Class selectors)
Beim Definieren eines Klassen-Selektors müssen Sie ihn mit einem Punkt und einem Klassennamen definieren. Beim Verwenden dieses Klassen-Selektors müssen Sie das Attribut class="class-name" (ohne Punkt) dem Tag des Elements hinzufügen, das diesen Klassen-Selektor verwendet, um anzuzeigen, dass das Tag den angegebenen Klassen-Selektor nutzt.
Beispielsweise, wenn Sie die Schriftgröße eines HTML-Elements mit class="text-paragraph" auf 50 Pixel setzen möchten, würden Sie die folgende CSS-Regel verwenden:
ID-Selektoren (ID selectors)
Der ID-Selektor gibt einen bestimmten Stil für HTML-Elemente an, die mit einer bestimmten ID markiert sind.
Beim Definieren eines ID-Selektors müssen Sie den Selektor mit einem "#"-Zeichen und einem ID-Namen definieren. Beim Verwenden des ID-Selektors müssen Sie das Attribut id="id name" (ohne "#"-Zeichen) dem HTML-Tag-Element hinzufügen, um die ID dieses HTML-Elements anzugeben, die in der HTML-Dokument einzigartig ist.
Beispielsweise, wenn Sie die Schriftfarbe eines HTML-Elements mit id="list-option" auf blau setzen möchten, würden Sie die folgende CSS-Regel verwenden:
Nachfahren-Selektor (Descendant Selector)
Der Nachfahren-Selektor wählt alle Elemente eines Tags innerhalb eines anderen Tags aus, einschließlich Kinder und andere Nachkommen.
Beim Verwenden von Nachfahren-Selektoren müssen der Name des übergeordneten Tags und der Name des Nachfahren-Tags durch ein Leerzeichen getrennt werden, um die Nachfahren-Elemente innerhalb eines Tags zu identifizieren.
Beispielsweise setzen wir die Textfarbe auf Aqua für <span>, ein Kind des <div>-Elements.
Universal-Selektor (Universal Selector)
Der Universal-Selektor wählt alle Elemente in einem HTML-Dokument aus. Beim Verwenden von Universal-Selektoren müssen Sie ein "*"-Zeichen verwenden.
Beispielsweise setzen wir die Textgröße für alle Elemente auf 50 Pixel.
Nachdem wir nun wissen, wie man Selektoren verwendet, lernen wir, wie man verschiedene Stilattribute einsetzt.
Wie Sie sehen können, haben verschiedene Teile der Seite unterschiedliche Hintergrundfarben. In CSS können Sie die Hintergrundfarbe eines Elements mit background-color festlegen.
Auf der Haustier-Website sind die Hintergrundfarben im Header, im Über-Uns-Abschnitt (about section), im Kontakt-Abschnitt (contact section) und im Footer rgb(233, 174, 87) und rgb(239, 206, 157), und die Schriftfarbe im Über-Uns-Abschnitt, im Kontakt-Abschnitt und im Footer ist #fff. Daher müssen wir unten die Hintergrund- und Schriftfarben festlegen.
background-color wird verwendet, um die Hintergrundfarbe festzulegen.
color wird verwendet, um die Schriftfarbe festzulegen.
Jetzt können Sie sehen, dass einige Elemente zu groß sind, wie beispielsweise das Logo. Wir verwenden height, um die Höhe eines Elements festzulegen, und width, um die Breite eines Elements festzulegen.
Die CSS-Eigenschaft max-width legt die maximale Breite eines Elements fest. Sie verhindert, dass der tatsächliche Wert der width-Eigenschaft größer wird als der von max-width angegebene Wert.
Die CSS-Eigenschaft max-height legt die maximale Höhe eines Elements fest. Sie verhindert, dass der tatsächliche Wert der height-Eigenschaft größer wird als der für max-height angegebene Wert.
Der Standardstil einer ungeordneten Liste ist, dass jedes Listenelement einen Aufzählungspunkt hat. Wir verwenden die Eigenschaft list-style (hier im Originaltext fehlerhaft als list-type genannt), um den Aufzählungspunkt vor dem Listenelement zu entfernen.
Das a-Element ist standardmäßig unterstrichen. Wir verwenden die Eigenschaft text-decoration, um die Unterstreichung zu entfernen.
a {
color: grey;
text-decoration: none;
}
Text-Transformation
Die Navigation, der Footer und die Titel jeder Bereich auf einer Haustier-Website sind alle in Großbuchstaben. Wir verwenden die Eigenschaft text-transform, um die Schreibweise des Texts zu ändern.
Die CSS-Eigenschaft text-transform gibt an, wie der Text eines Elements kapitalisiert werden soll. Sie kann verwendet werden, um den Text in Großbuchstaben, Kleinbuchstaben oder mit jedem Wort beginnend mit einem Großbuchstaben anzuzeigen.
Auf der Haustier-Website können wir beobachten, dass zwischen den Zeichen ein bestimmter Abstand besteht. Mit der Eigenschaft letter-spacing können wir den Abstand zwischen den Textzeichen festlegen.
Die CSS-Eigenschaft letter-spacing legt das horizontale Abstandsverhalten zwischen Textzeichen fest. Dieser Wert wird dem natürlichen Abstand zwischen den Zeichen während der Textausgabe hinzugefügt.
In diesem Lab haben Sie gemeinsam mit Alex die Reise zum Erstellen einer Website für "Pet's House" begonnen. Sie haben den Projektarbeitsbereich eingerichtet, grundlegende CSS-Stile angewendet und mit verschiedenen CSS-Selektoren experimentiert, um die Navigation der Website zu verbessern. Durch diese Schritte haben Sie praktische Erfahrungen mit den Grundlagen von CSS und Selektoren gesammelt, die für jeden angehenden Webentwickler unverzichtbare Fähigkeiten sind. Dieses Lab hat die Grundlage für fortgeschrittenere Konzepte und Techniken der Webentwicklung gelegt, die Sie in zukünftigen Projekten erkunden werden.
