Vorlesung 2: Selektoren und Eigenschaften

In dieser Vorlesung befassen wir uns mit den Bausteinen von CSS: Selektoren und Eigenschaften. Hierbei handelt es sich um wesentliche Konzepte, mit denen Sie bestimmte Elemente auf Ihrer Webseite gezielt ansprechen und effektiv gestalten können.

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.

Typen von Selektoren

1. Element (Typ)-Selektor:

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

    p {
      color: green;
    }
   

   Dadurch wird die Farbe aller

   -Elemente in Grün geändert.

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.
   

    
   This is highlighted text.
   

3. ID-Auswahl:

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

    #header {
      font-size: 24px;
    }
   

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

    
   Welcome to My Website
   

4. Gruppenauswahl:

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

    h1, h2, h3 {
      color: blue;
    }
   

   Diese Regel macht alle Elemente

   ,

   und

   blau.

5. Nachkommenselektor:

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

    div p {
      font-style: italic;
    }
   

   Dadurch werden alle

   -Elemente innerhalb eines

   kursiv geschrieben.
   

    
   
      
   This text is italicized because it's inside a 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;
     }
     

   Praxisbeispiele:

   Kombinieren wir das Gelernte mit einem einfachen Beispiel.

   HTML:
   

   
     
   Welcome to CSS Basics
     
   This is an introduction to CSS selectors and properties.
     
   Selectors help you target elements, and properties allow you to style them.
   
   

   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.
   • Die Überschrift

     ist lila gefärbt.

   • Der Absatz mit der Klasseneinleitung hat einen hellblauen Hintergrund und eine größere Schriftgröße.
   • Sowohl die Elemente

     als auch

     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 Ihren Inhalt 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 lernen, 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

   -