CSS: Selektoren und Eigenschaften

Vorlesung 2: Selektoren und Eigenschaften

In dieser Vorlesung befassen wir uns mit den Bausteinen von CSS: Selektoren und Eigenschaften. Dies sind wesentliche Konzepte, die es Ihnen ermöglichen, bestimmte Elemente auf Ihrer Webseite gezielt anzusprechen und sie effektiv zu gestalten.

---

Was sind CSS-Selektoren?

CSS-Selektoren sind Muster, mit denen Sie die HTML-Elemente auswählen, die Sie formatieren möchten. Mit verschiedenen Arten von Selektoren können Sie Stile auf verschiedene Elemente anwenden, basierend auf deren Tag, Klasse, ID, Attributen und mehr.

Arten von Selektoren

1. Element-(Typ-)Selektor:

   • Zielt auf alle Elemente eines bestimmten Typs.
   • Beispiel:

    p {
      color: green;
    }
   

   Dadurch wird die Farbe aller e388a4556c0f65e1904146cc1a846bee Elemente zu grün.

2. Klassenauswahl:

   • Zielt auf Elemente mit einem bestimmten Klassenattribut ab.
   • Beispiel:

    .highlight {
      background-color: yellow;
    }
   

   In Ihrem HTML hat jedes Element mit class="highlight" einen gelben Hintergrund.
   

    <p class="highlight">This is highlighted text.</p>
   

3. ID-Auswahl:

   • Zielt auf ein einzelnes Element mit einem eindeutigen ID-Attribut ab.
   • Beispiel:

    #header {
      font-size: 24px;
    }
   

   Nur ​​das Element mit der ID="header" hat eine Schriftgröße von 24 Pixel.
   

    <div id="header">Welcome to My Website</div>
   

4. Gruppenauswahl:

   • Wendet denselben Stil auf mehrere Selektoren an.
   • Beispiel:

    h1, h2, h3 {
      color: blue;
    }
   

   Diese Regel sorgt dafür, dass alle 4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da und 684271ed9684bde649abda8831d4d355 Elemente blau.

5. Nachkommenauswahl:

   • Zielt auf Elemente ab, die sich innerhalb (Nachkommen) anderer Elemente befinden.
   • Beispiel:

    div p {
      font-style: italic;
    }
   

   Dadurch werden alle e388a4556c0f65e1904146cc1a846bee Elemente innerhalb eines dc6dce4a544fdca2df29d5ac0ea9906b kursiv geschrieben.
   

    <div>
      <p>This text is italicized because it's inside a div.</p>
    </div>
   

CSS-Eigenschaften verstehen

CSS-Eigenschaften definieren, welche Aspekte der ausgewählten Elemente Sie formatieren möchten. Auf jede Eigenschaft folgt ein Wert, der das gewünschte Ergebnis angibt.

Beispieleigenschaften:

• Farbe:

  • Legt die Textfarbe fest.
  • Beispiel:

  h1 {
    color: red;
  }
  

• Hintergrundfarbe:

  • Legt die Hintergrundfarbe fest.
  • Beispiel:

  body {
    background-color: #f0f0f0;
  }
  

• Schriftgröße:

  • Legt die Größe des Textes fest.
  • Beispiel:

  p {
    font-size: 16px;
  }
  

• Marge:

  • Legt den Abstand außerhalb eines Elements fest.
  • Beispiel:

  .box {
    margin: 20px;
  }
  

• Polsterung:

  • Legt den Abstand innerhalb eines Elements zwischen dem Inhalt und dem Rahmen fest.
  • Beispiel:

  .content {
    padding: 10px;
  }
  

Praktische Beispiele:

Kombinieren wir das Gelernte mit einem einfachen Beispiel.

HTML:

8ca2b4eb17525146e680c309e9dfa6a5
  4a249f0d628e2318394fd9b75b4636b1Welcome to CSS Basics473f0a7621bec819994bb5020d29372a
  03c914392195facb4bb03ef129401e65This is an introduction to CSS selectors and properties.94b3e26ee717c64999d7867364b1b4a3
  e388a4556c0f65e1904146cc1a846beeSelectors help you target elements, and properties allow you to style them.94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

CSS:

/* ID Selector */
#container {
  border: 2px solid black;
  padding: 10px;
}

/* Element Selector */
h1 {
  color: purple;
}

/* Class Selector */
.intro {
  background-color: lightblue;
  font-size: 18px;
}

/* Group Selector */
h1, p {
  font-family: Arial, sans-serif;
}

/* Descendant Selector */
#container p {
  margin-bottom: 15px;
}

In diesem Beispiel:

• Das #container-Div ist mit einem schwarzen Rand und einer Polsterung versehen.
• Das 4a249f0d628e2318394fd9b75b4636b1 Die Überschrift ist lila gefärbt.
• Der Absatz mit der Klasseneinleitung hat einen hellblauen Hintergrund und eine größere Schriftgröße.
• Beide 4a249f0d628e2318394fd9b75b4636b1 und e388a4556c0f65e1904146cc1a846bee Elemente verwenden die Schriftart Arial.
• Alle Absätze im #Container haben einen unteren Rand für den Abstand.

Übungsübung

1. Erstellen Sie eine einfache HTML-Datei mit Überschriften, Absätzen und Abschnitten.
2. Experimentieren Sie mit verschiedenen Selektoren und Eigenschaften, um Ihre Inhalte zu gestalten.
3. Versuchen Sie, den Nachkommenselektor zu verwenden, um verschachtelte Elemente zu formatieren.
4. Spielen Sie mit der Gruppierungsauswahl, um dieselben Stile auf mehrere Elemente anzuwenden.

---

Nächstes Thema: In der nächsten Vorlesung werden wir das CSS-Box-Modell erkunden und erfahren, wie Ränder, Ränder, Innenabstände und Inhalte zusammenkommen, um das Layout Ihres zu definieren Webelemente. Wir sehen uns dort!

Folge mir auf -

LinkedIn- Ridoy Hasan

-

Das obige ist der detaillierte Inhalt vonCSS: Selektoren und Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!