CSS-Selektoren, Eigenschaften und Werte

CSS ist ein Stylesheet, mit dem man HTML-Elemente sorgfältig gestalten kann. Neben der Interaktion mit HTML-Elementen zur Gestaltung, kontrolliert CSS das Aussehen, die Topographie, die Boxmodelle, die Anpassung des Bildschirms/Geräts und das allgemeine Layout einer Webseite.

CSS hat eine grundlegende Syntax. Sie besteht aus einem Selektor, einer Eigenschaft und einem Wert, der von einem Deklarationsblock gefolgt wird.

p { 
  color: blue; 
  text-transform: uppercase; 
}

Im obigen Code-Ausschnitt ist p (Absatz) ein Selektor, der auf das HTML-Element zeigt, das gestaltet werden soll. Farbe und Textumwandlung sind Eigenschaften. Blau (blue) und Großbuchstaben (uppercase) sind Werte der Eigenschaft. Der Deklarationsblock für p beginnt bei der ersten geschweiften Klammer - '{' und endet bei der zweiten geschweiften Klammer '}'. Jede Deklaration muss eine Eigenschaft und einen Wert enthalten und wird durch ein Semikolon von anderen Deklarationen abgetrennt.

CSS SELEKTOREN

Ein Selektor ist einfach das Element, das gestaltet werden soll. Wenn du mehr und mehr CSS-Code schreiben wirst, so wirst du irgendwann feststellen, dass Selektoren nicht nur Elemente sind. Sie könnten Attribute, Pseudo-Klassen, Ids, Klassen und Nachfahren sein.
Laut W3Resource "wählen CSS-Selektoren die Elemente auf einer HTML-Seite aus, die den in einem Selektor beschriebenen Mustern entsprechen, und die dem Selektor entsprechenden Stilregeln werden auf diese ausgewählten Elemente angewendet".
In diesem Abschnitt befassen wir uns mit den verschiedenen CSS-Selektoren und wie du sie implementieren kannst.
Die Syntax für die Verwendung eines der Selektoren ist die gleiche wie die grundlegende CSS-Syntax.

Universal-Selektor

Ein Universal-Selektor ist mit dem Symbol * gekennzeichnet. Er wirkt sich auf jedes einzelne Element im Dokumentenbaum aus.

*{ 
  color: purple; 
}

Dies ändert die Farbe aller HTML-Dokument-Elemente auf lila. Ganz gleich, ob es sich um einen Absatz, ein h1, h4 oder eine Liste handelt. * werden auch verwendet, um alle Werte eines bestimmten Elements anzusteuern.

*h1 { 
  text-transform: uppercase; 
}

Dadurch wird der Wert aller h1-Elemente nur auf Großbuchstaben geändert. Kein anderes Element ist davon betroffen.

Element-Selektoren

Dies Art des Selektors ist die gebräuchlichste. Mithilfe dieses Selektors werden Mitglieder eines bestimmten Elements gezielt angesprochen, wenn dieses Element definiert ist.

p{ 
  font-style: italic; 
}

Dieser Code zielt auf alle Absätze in einem Dokument und ändert sie in kursiv.

Klassen und IDs

Klassen und IDs werden im HTML definiert und im CSS mit '.' (für Klassen) und '#' (für IDs) gekennzeichnet. Sie zielen auf HTML-Elemente mit bestimmten Klassen- oder ID-Namen ab.

<p> This is a paragraph </p> 
<p class="red"> This is a red text </p> 
<h4 id="uppercase"> This is an uppercase text </p> 

.red { 
  color: red; 
} 
 
#uppercase{ 
  text-transform: uppercase; 
}

Das <p>-Tag ohne zugewiesene Klasse oder ID wird von den Klassen- oder ID-Selektoren nicht beeinflusst.

Nachfahren-Selektoren

Ein Nachfahren-Selektor ist ein Selektor, der ein Kind eines anderen Selektors ist.

nav > li { 
  list-style: none; 
}

Pseudo-Klassen

Bei Pseudo-Klassen handelt es sich um Klassen, die sich nach ihrem Zustand richten. Ihr Status ist auch eine Antwort auf die Aktion eines Users. Pseudo-Klassen stehen nicht für sich alleine. Sie sind mit anderen Selektoren verbunden. Sie werden sofort von einem Doppelpunkt gefolgt, dann dem Status. Hover, visited, before und active sind gewöhnliche Pseudo-Klassen.

a:hover{ 
  color: green; 
}

CSS-EIGENSCHAFTEN

CSS-Eigenschaften sind die Stile, die für bestimmte Selektoren verwendet werden. Sie werden vor Werte geschrieben und sind durch einen Doppelpunkt von Eigenschaftswerten getrennt. Verschiedene HTML-Selektoren und Elemente haben unterschiedliche Eigenschaften. Einige Eigenschaften sind universell und können für jeden Selektor verwendet werden. Andere funktionieren nur auf bestimmten Selektoren und unter bestimmten Bedingungen.
Ein Beispiel dafür sind Grid-Template-Spalten, mit denen das Layout einer Seite gestaltet werden kann. Es funktioniert hauptsächlich mit divs, deren display-Eigenschaft auf grid gesetzt ist (display:grid).
Es gibt viele Eigenschaften und entsprechende Werte für HTML-Selektoren. Laut CSS Tricks soll es "520 verschiedene Eigenschaftsnamen aus 66 technischen Berichten und 66 Editor's Drafts" geben. Hier sind vier geläufige Eigenschaften, mit denen man arbeiten kann

• Listen-Eigenschaften
• Font-Eigenschaften
• Rand-Eigenschaften
• Text-Eigenschaften

Diese Eigenschaften kommen häufig vor, da sie in allen CSS-Dokumenten verwendet werden und auf verschiedene Selektoren angewendet werden können. Eine einzigartige Sache an Eigenschaften ist, dass sie mehr als einen Wert haben. Text-transform ist zum Beispiel eine Eigenschaft, welche die Groß- und Kleinschreibung eines Textes steuert. Sie kann auf Großbuchstaben, Kleinbuchstaben, Großschreibung oder keinen Wert gesetzt werden. Aber das stellt auch eine Beschränkung dar. Du musst der richtigen Eigenschaft einen Wert zuweisen, sonst passiert nichts. Wenn wir 'text-transform: underline;' haben, ändert sich nichts am Textteil, denn underline ist ein Wert für die Textdekoration.
Folgend haben wir einige Eigenschaften, ihre Beschreibungen und die Werte, die sie aufnehmen aufgelistet.

Text-Eigenschaften

Rand-Eigenschaften

Font-Eigenschaften

Listen-Eigenschaften

Aufgrund ihrer schieren Anzahl können wir hier natürlich nicht auf alle CSS-Eigenschaften eingehen, aber du kannst eine umfangreiche Liste mit Eigenschaften, ihren Werten und CSS-Versionen hier auf meiert.com finden. W3schools hat auch eine CSS-Referenz, die Eigenschaften, ihre Beschreibungen und Werte hier abdeckt.

CSS WERTE

Werte werden direkt nach dem Doppelpunkt geschrieben, der sie von CSS-Eigenschaften abgrenzt. CSS-Werte sind nicht einfach nur Text; sie kommen in verschiedenen Formen vor - URLs, Einheiten, Maße, ganze Zahlen, Strings, inherit, auto, none, etc. Wir werden uns verschiedene CSS-Werte ansehen und wie man sie implementiert.

Text

Textwerte sind in CSS weit verbreitet. Sie werden normalerweise ohne Anführungszeichen geschrieben, im Gegensatz zu Strings. Jede gültige CSS-Eigenschaft hat einen Text als Wert. Margin nimmt Einheiten als Werte an, hat aber auch auto, was in diesem Fall als Text genommen wird.

h1 { 
  color: red; 
  text-align: center; 
}

Rot (red) und Mitte (center) sind Textwerte von Farbe und Textausrichtung.

Ganze Zahlen (Integer)

Ganze Zahlen sind Zahlen von eins bis null oder null bis neun. Einige CSS-Eigenschaften lassen es zu, dass ihre Werte als ganze Zahlen definiert werden, sogar negative ganze Zahlen. Die Werte für Eigenschaften wie column-count und z-index werden durch ganze Zahlen definiert.

div { 
  column-count: 4; 
}
div { 
  z-index: -1; 
}

Einheiten/Maße

Da CSS verwendet werden muss, um Elemente auf einer Webseite, das allgemeine Layout und Medienabfragen zu positionieren, nehmen viele Eigenschaften Einheiten und Maße als Wert an. Es gibt viele eigenschaftsspezifische Einheiten für CSS-Werte. Verfügbare Einheiten wie px, em, fr und Prozentwerte sind jedoch Standard.

h3 { 
  font-size: 24px; 
}
div{ 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
}
div { 
  width: 100%; 
  font-size: 2em; 
}

URLs

Eigenschaften wie background-image nehmen eine tatsächliche URL als Wert an. Diese URL kann absolut oder relativ sein. Das heißt, dass du die Adresse eines Bildes online kopieren und als Hintergrundbild verwenden könntest, oder Bilder aus dem Projektverzeichnis/Ordner holen könntest, mit dem du auf deinem Computer arbeitest.

div{ 
  background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"); 
}
div{ 
  background-image: url("./Images/landscape.jpg"); 
}

Strings

Strings sind Text in Anführungszeichen. Die Content-Eigenschaft, mit der du generierten Inhalt einfügen kannst, erlaubt Strings innerhalb des Parameters.

.div :: after { 
  content: "This is me"; 
}

Farben

Die Farbe/Hintergrundfarben sind Eigenschaften, mit denen man die Farbe von HTML-Elementen einstellen kann. Ihre Werte akzeptieren entweder einen hexadezimalen Farbkombinationswert, eine RGB-Spezifikation oder eine definierte Farbe.

h2 { 
  color: red; 
}
div{ 
  background-color: #000000; 
}

Auto, None, Inherit

Auto, None und Inherit sind Keyword Werte in CSS. Auto Werte erlauben es, die Eigenschaft zu füllen oder entsprechend dem Inhalt des Elements anzupassen.

div { 
  width: auto;
  margin: auto; 
}

None fügt der angegebenen Eigenschaft keinen Wert hinzu.

div{ 
  border: none; 
}

Das Inherit Keyword erlaubt es der Eigenschaft, den gleichen Wert vom Elternelement zu erben. Alle CSS-Eigenschaften akzeptieren inherit.

<div> 
  <p> this is me </p> 
  <p id="pickme"> this is not me </p> 
</div> 

p{
  color: red; 
} 
#pickme p { 
  color: inherit; 
}

Obwohl es sich bei allen Beispielen oben um Eigenschaften mit einem Wert handelt, können CSS-Werte mehr als einen Wert haben, und du kannst sie so manipulieren, dass sie in Kurzschreibweise geschrieben werden können. In CSS ist die Kurzschreibweise eine kürzere, kompaktere Art, Werte für ähnliche, aber mehrere Eigenschaften zu setzen.

Diese Werte

div{ 
  border-style: solid; 
  border-color: red; 
  border-width: 5px; 
}

können in der Kurzschreibweise wie folgt aussehen:

div{ 
  border: 5px solid red; 
}

Andere Eigenschaften mit mehreren Werten können so aussehen:

margin: 1px 3px 6px 2px; /* defining the top, left, bottom and left of a margin */
font: italic small-caps bold 12px Georgia, serif; /*defining font-style, font-variant-caps, font-weight, font-size, and font-family. */
box-shadow: 5px 2px 8px #aaaaaa; /* defining the horizontal offset, vertical offset, blur, and color values */

Abschließende Worte

Die Einfachheit und Einheitlichkeit des CSS-Regelsatzes macht es einfacher, sich Syntax und Anwendung unabhängig vom verwendeten Selektor zu merken. Neue Webentwickler werden häufig von der schieren Anzahl an Eigenschaften und Werte, die sie sich merken müssen, überwältigt. Oft verwechseln sie die Werte einer Eigenschaft mit denen einer anderen. Eine Stylesheet-Anleitung oder ein Nachschlagewerk zur Hand zu haben, hilft sicher. Je mehr ein Entwickler jedoch programmiert, desto leichter fällt es ihm auch, sich grundlegende Eigenschaften und Werte zu merken.