Diese Lektion beteiligt sich mit der Verbesserung von HTML -Visuals mithilfe von Cascading Style Sheets (CSS). Wir beginnen mit CSS -Selektoren - die Tools zum Zieleln von spezifischen HTML -Elementen.

kaskadierende Stilblätter (CSS)

css diktiert das Aussehen von HTML -Komponenten: Farbe, Abstand, Größe und mehr. Während Sie individuelle Elemente mit Inline style -attributen stylen können (z. B.

), ist dies für große Websites ineffizient.

.

Ein effektiverer Ansatz beinhaltet die Verwendung eines Elements in der Abteilung Ihrer HTML oder einer separaten CSS -Datei (wie style.css ) mit Ihrem HTML mit verknüpft:

oder

/* style.css */
p {
  color: red;
  text-decoration: underline;
}

Dies wendet denselben Stil auf alle

Elemente an. Browser-Entwickler-Tools (z. B. mit der rechten Maustaste, "inspizieren" in Chrome) mit der Untersuchung und Änderung von angewandten Stilen zur Fehlerbehebung.

wählen Sie html Elements aus

die p in p {color: rot; } wählt alle

Elemente aus. Für komplexere Strukturen id und class Attribute geben eine feinere Kontrolle.

.

Klasse und ID -Selektoren

Jedes Element kann eine eindeutige id haben. ID -Selektoren (#idname ) Zielelemente durch ihre id . Allerdings muss id S eindeutig sein und ihre Flexibilität einschränken.

Klassen bieten eine größere Vielseitigkeit. Mehrere Elemente können dieselbe Klasse teilen. Klasse Selectors (. ClassName ) Zielelemente mit dieser Klasse. Elemente können mehrere Klassen haben (z. B.

).

.

. Red-Text {color: rot; } styles alle Elemente mit der rot-text Klasse. p.red-text styles nur nur

Elemente mit red-text .

combinator selectors

Das Dokumentobjektmodell (DOM) repräsentiert die Struktur der Seite als Baum. Kombinatorauswahlern nutzen diese Hierarchie.

• div p : wählt alle
  Elemente in
  Elements (Nachkommen). aus
• div> p : wählt nur die direkten Kinder aus
  Elemente von
  Elementen.
• p span : wählt die unmittelbar folgt einem
  .
• p ~ span : wählt alle silblings nach A
  .


Übermäßig komplexe Kombinatorkombinationen sind entmutigt. Sie können sie mit Klassenauswahlern kombinieren (z. B. . Intro p ).

pseudo-selectors

Pseudo-Klasse-Selektoren Stilelemente basierend auf ihrem Zustand (z. B. a: hover , a: active , a: besucht ). Pseudo-Element-Selektoren zielen auf Teile eines Elements (z. B. :: First-Letter ).

.

Andere Selektoren

• *
: Der universelle Selektor, die alle Elemente auswählen.
• Group Selectors (z. B. H1, H2, p
): Wählen Sie mehrere Elementtypen aus.
• . Attribut -Selektoren (z. B. p [Lang] , p [Lang = "en"]
): Elemente basierend auf Attributen ausgewählt.

Weiterlesen:

Responsive Design
reaktionsschnelle Bilder
css Animationen
Dieser Beitrag erschien ursprünglich auf TheeDevspace.