CSS-Eigenschaften: Ändern des Aussehens und Layouts von Elementen

CSS (Cascading Style Sheets) ist eine Grundtechnologie für die Gestaltung und Gestaltung von Webseiten. Es ermöglicht Entwicklern, das Erscheinungsbild und Layout von HTML-Elementen zu ändern und alles von Farben, Schriftarten und Abständen bis hin zu Positionierung, Ausrichtung und Animation zu steuern. CSS-Eigenschaften stellen die Werkzeuge bereit, um Webinhalten visuelles Flair und Benutzerfreundlichkeit zu verleihen.

In diesem Artikel untersuchen wir wichtige CSS-Eigenschaften, mit denen Entwickler sowohl das Erscheinungsbild als auch das Layout von Webelementen ändern können. Wir behandeln grundlegende Eigenschaften für das Styling und fortgeschrittenere für das Layout der Struktur einer Webseite.

Was sind CSS-Eigenschaften?

CSS-Eigenschaften sind Regeln, die das Aussehen und Verhalten von HTML-Elementen definieren. Durch Anwenden von CSS-Eigenschaften auf ein Element können Sie dessen Aussehen und Platzierung auf der Seite steuern. CSS-Eigenschaften werden immer mit Werten gepaart, die angeben, wie das Element gestaltet oder angeordnet werden soll.

Zum Beispiel:

p {
  color: blue;
  font-size: 16px;
}

In diesem Beispiel zielt der p-Selektor auf alle Absätze auf der Seite ab und die Eigenschaften „Farbe“ und „Schriftgröße“ ändern ihre Textfarbe und Schriftgröße.

Aussehenseigenschaften

Darstellungseigenschaften in CSS werden verwendet, um die visuelle Darstellung von Elementen wie Farbe, Schriftart, Rahmen, Hintergrund und Schatten zu ändern. Diese Eigenschaften verbessern das Erscheinungsbild Ihrer Webseite und verbessern die Lesbarkeit und Benutzererfahrung.

1. Farb- und Hintergrundeigenschaften

• Farbe: Ändert die Textfarbe eines Elements.

  p {
    color: red;
  }

• Hintergrundfarbe: Ändert die Hintergrundfarbe eines Elements.

  div {
    background-color: lightblue;
  }

• Hintergrundbild: Wendet ein Hintergrundbild auf ein Element an.

  div {
    background-image: url('background.jpg');
  }

• Hintergrundwiederholung: Legt fest, ob und wie sich das Hintergrundbild wiederholen soll.

  div {
    background-repeat: no-repeat;
  }

2. Typografieeigenschaften

• Schriftgröße: Steuert die Größe des Textes.

  h1 {
    font-size: 24px;
  }

• font-family: Gibt den Schriftarttyp für Text an.

  p {
    font-family: Arial, sans-serif;
  }

• Schriftstärke: Passt die Dicke oder Fettstärke des Textes an.

  h1 {
    font-weight: bold;
  }

• Zeilenhöhe: Legt die Höhe jeder Textzeile fest und verbessert so die Lesbarkeit.

  p {
    line-height: 1.5;
  }

• text-align: Richtet Text innerhalb eines Elements aus (links, rechts, zentriert oder im Blocksatz).

  h1 {
    text-align: center;
  }

3. Rahmen- und Boxeigenschaften

• Rahmen: Fügt einen Rahmen um ein Element hinzu und definiert dessen Dicke, Stil und Farbe.

  div {
    border: 2px solid black;
  }

• border-radius: Rundet die Ecken des Randes eines Elements ab.

  button {
    border-radius: 10px;
  }

• box-shadow: Fügt Schatteneffekte um ein Element hinzu.

  div {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  }

4. Deckkraft und Sichtbarkeit

• Opazität: Steuert die Transparenz eines Elements. Ein Wert von 1 bedeutet völlig undurchsichtig und 0 bedeutet völlig transparent.

  img {
    opacity: 0.8;
  }

• Sichtbarkeit: Schaltet um, ob ein Element sichtbar oder ausgeblendet ist, ohne das Layout zu beeinflussen.

  p {
    visibility: hidden;
  }

Layouteigenschaften

CSS-Layouteigenschaften steuern, wie Elemente auf der Seite positioniert und ausgerichtet werden, wie sie sich zueinander verhalten und wie sie über verschiedene Bildschirmgrößen hinweg skaliert werden. Das Verständnis der Layouteigenschaften ist für die Erstellung reaktionsfähiger und benutzerfreundlicher Webseiten von entscheidender Bedeutung.

1. Eigenschaft anzeigen

Die Eigenschaft display definiert, wie ein Element auf der Seite angezeigt wird. Zu den allgemeinen Werten gehören:

• Block: Das Element nimmt die gesamte Breite seines Containers ein (z. B.
  ,

  ).

• inline: Das Element nimmt nur so viel Breite ein wie sein Inhalt (z. B. , ).
• inline-block: Das Element verhält sich wie inline, respektiert jedoch Breite und Höhe.
• keine: Das Element wird vollständig aus dem Dokumentlayout entfernt (unsichtbar).

div {
  display: block;
}

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

div {
  margin: 20px;
  padding: 10px;
}