CSS: Selektoren und Eigenschaften-CSS-Tutorial-php.cn

CSS: Selektoren und Eigenschaften

王林

Freigeben： 2024-08-22 06:30:32

Original

873 Leute haben es durchsucht

CSS: selectors and properties

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

Element-(Typ-)Selektor:
- Zielt auf alle Elemente eines bestimmten Typs.
- Beispiel:
```
 p {
   color: green;
 }
```
Nach dem Login kopieren
Dadurch wird die Farbe aller
Elemente zu grün.
Klassenauswahl:
- Zielt auf Elemente mit einem bestimmten Klassenattribut ab.
- Beispiel:
```
 .highlight {
   background-color: yellow;
 }
```
Nach dem Login kopieren
In Ihrem HTML hat jedes Element mit class="highlight" einen gelben Hintergrund.
```
 <p class="highlight">This is highlighted text.</p>
```
Nach dem Login kopieren
ID-Auswahl:
- Zielt auf ein einzelnes Element mit einem eindeutigen ID-Attribut ab.
- Beispiel:
```
 #header {
   font-size: 24px;
 }
```
Nach dem Login kopieren
Nur das Element mit der ID="header" hat eine Schriftgröße von 24 Pixel.
```
 <div id="header">Welcome to My Website</div>
```
Nach dem Login kopieren
Gruppenauswahl:
- Wendet denselben Stil auf mehrere Selektoren an.
- Beispiel:
```
 h1, h2, h3 {
   color: blue;
 }
```
Nach dem Login kopieren
Diese Regel sorgt dafür, dass alle
,
und
Elemente blau.
Nachkommenauswahl:
- Zielt auf Elemente ab, die sich innerhalb (Nachkommen) anderer Elemente befinden.
- Beispiel:
```
 div p {
   font-style: italic;
 }
```
Nach dem Login kopieren
Dadurch werden alle
Elemente innerhalb eines
kursiv geschrieben.
```
 <div>
   <p>This text is italicized because it's inside a div.</p>
 </div>
```
Nach dem Login kopieren

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;
}
```
Nach dem Login kopieren
Hintergrundfarbe:
- Legt die Hintergrundfarbe fest.
- Beispiel:
```
body {
  background-color: #f0f0f0;
}
```
Nach dem Login kopieren
Schriftgröße:
- Legt die Größe des Textes fest.
- Beispiel:
```
p {
  font-size: 16px;
}
```
Nach dem Login kopieren
Marge:
- Legt den Abstand außerhalb eines Elements fest.
- Beispiel:
```
.box {
  margin: 20px;
}
```
Nach dem Login kopieren
Polsterung:
- Legt den Abstand innerhalb eines Elements zwischen dem Inhalt und dem Rahmen fest.
- Beispiel:
```
.content {
  padding: 10px;
}
```
Nach dem Login kopieren

Praktische Beispiele:

Kombinieren wir das Gelernte mit einem einfachen Beispiel.

HTML:

<div id="container">
  <h1>Welcome to CSS Basics</h1>
  <p class="intro">This is an introduction to CSS selectors and properties.</p>
  <p>Selectors help you target elements, and properties allow you to style them.</p>
</div>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

In diesem Beispiel:

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

Übungsübung

Erstellen Sie eine einfache HTML-Datei mit Überschriften, Absätzen und Abschnitten.
Experimentieren Sie mit verschiedenen Selektoren und Eigenschaften, um Ihre Inhalte zu gestalten.
Versuchen Sie, den Nachkommenselektor zu verwenden, um verschachtelte Elemente zu formatieren.
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!