von
am
CSS steht für Cascading Style Sheets und ist eine Stylesheet-Sprache, die zum Beschreiben des Aussehens und der Formatierung eines Dokuments, das in einer Auszeichnungssprache wie HTML geschrieben ist, verwendet wird. CSS hilft uns, das Design unserer Webseiten zu steuern und zu gestalten.
In CSS können wir Styles auf verschiedene Weisen anwenden: auf HTML-Tags, Klassen, IDs und Attribute. Tags beziehen sich auf HTML-Elemente, Klassen und IDs ermöglichen das Styling spezifischer Elemente, und Attribute ermöglichen das Styling basierend auf bestimmten Attributen oder Attributwerten.
/* Stil für ein HTML-Tag */
p {
color: blue;
}
/* Stil für eine Klasse */
.myClass {
color: red;
}
/* Stil für eine ID */
#myId {
color: green;
}
/* Stil basierend auf einem Attribut */
a[href] {
color: purple;
}
Es gibt verschiedene CSS-Regeln zur Steuerung von Schriftgröße, -gewicht, -stil und -höhe. Wir können diese verwenden, um das Aussehen und die Lesbarkeit unseres Textes zu steuern.
p {
font-size: 16px;
font-weight: bold;
font-style: italic;
line-height: 1.5;
}
Es gibt verschiedene Einheiten in CSS, die wir verwenden können, um Größen, Abstände und andere Werte zu bestimmen. Einige davon sind absolute Einheiten wie Pixel (px), während andere relative Einheiten sind, wie em, rem, vh, vw und %.
/* Absolute Einheit */
.box {
width: 300px;
height: 200px;
}
/* Relative Einheit */
.box {
width: 50%;
height: 50vh;
}
Wir können die `height`, `min-height` und `max-height` Eigenschaften verwenden, um die Höhe eines Elements zu kontrollieren. Ähnliche Eigenschaften existieren für die Breite: `width`, `min-width` und `max-width`.
.box {
height: 200px;
min-height: 100px;
max-height: 300px;
}
Die Eigenschaften `color` und `background-color` werden verwendet, um die Farbe des Textes bzw. des Hintergrunds eines Elements zu bestimmen. Wir können verschiedene Farbsysteme verwenden, darunter Hexadezimalcodes und RGB-/RGBA-Farben.
.box {
color: #000000; /* Schwarz in Hexadezimal */
background-color: rgba(255, 0, 0, 0.5); /* Halbtransparentes Rot in RGBA */
}
Übergänge ermöglichen es uns, Änderungen von CSS-Eigenschaften über eine bestimmte Dauer hinweg sanft statt sofort zu ändern, was zu einem glatteren und ansprechenderen Effekt führt.
.box {
transition: background-color 0.5s ease-in-out;
}
.box:hover {
background-color: red;
}
Die `translate` Funktion ist eine 2D-Transformationsmethode, die es uns ermöglicht, ein Element entlang der X- und Y-Achse zu verschieben.
.box {
transform: translate(50px, 100px);
}
Hier sind ein paar zusätzliche Beispiele für die Verwendung der CSS-Transformeigenschaft:
/* Drehen Sie das Element um 45 Grad */
.box {
transform: rotate(45deg);
}
/* Skalieren Sie das Element um das 1,5-fache seiner Originalgröße */
.box {
transform: scale(1.5);
}
/* Verschieben Sie das Element um 50 Pixel auf der x-Achse und 100 Pixel auf der y-Achse, und drehen Sie es dann um 30 Grad */
.box {
transform: translate(50px, 100px) rotate(30deg);
}
Die `@keyframes` Regel ermöglicht es uns, Animationen zu erstellen, indem wir die CSS-Stile des Elements im Laufe der Zeit ändern.
@keyframes myAnimation {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: blue;
}
}
.box {
animation: myAnimation 5s infinite;
}
Die CSS `filter` Eigenschaft ermöglicht es uns, verschiedene visuelle Effekte auf ein Element anzuwenden, wie zum Beispiel Unschärfe, Helligkeit, Kontrast und vieles mehr.
.image {
filter: blur(5px);
}
Hier sind ein paar zusätzliche Beispiele für die Verwendung der CSS-Filtereigenschaft:
/* Erhöhen Sie die Helligkeit des Bildes */
.image {
filter: brightness(150%);
}
/* Ändern Sie den Kontrast des Bildes */
.image {
filter: contrast(200%);
}
/* Wenden Sie einen Sepia-Effekt auf das Bild an */
.image {
filter: sepia(100%);
}
'Can I use' ist eine Webseite, die Informationen darüber liefert, wie gut verschiedene Web-Technologien von verschiedenen Browsern unterstützt werden. Es ist ein unverzichtbares Tool für jeden Webentwickler.
Besuchen Sie 'Can I use'Der Element-Selektor wählt Elemente basierend auf dem Elementnamen. Hier ist ein Beispiel:
/* Diese Regel trifft auf alle <p>-Elemente zu */
p {
color: red;
}
Der Klassen-Selektor wählt Elemente basierend auf der Klassen-Attribut. Elemente mit der spezifischen Klasse werden durch den Selektor ausgewählt. Hier ist ein Beispiel:
/* Diese Regel trifft auf alle Elemente zu, die die Klasse 'highlight' haben */
.highlight {
color: yellow;
}
Der ID-Selektor wählt Elemente basierend auf der ID-Attribut. Es gibt nur ein Element mit einer bestimmten ID in einem Dokument. Hier ist ein Beispiel:
/* Diese Regel trifft auf das Element mit der ID 'special' zu */
#special {
color: green;
}
Pseudo-Klassen sind Schlüsselwörter, die zu einem Selektor hinzugefügt werden, um den Zustand eines Elements auszuwählen. Hier ist ein Beispiel:
/* Diese Regel trifft auf ein <a>-Element zu, wenn es mit der Maus überfahren wird */
a:hover {
color: purple;
}
Ein Pseudoelemente-Selektor (X::pseudo-element) wählt einen spezifischen Teil eines X-Elements aus. Hier sind ein paar Beispiele:
/* Diese Regel fügt ein rotes Quadrat vor jedem <p>-Element ein */
p::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}
/* Diese Regel ändert die Farbe der ersten Zeile jedes <p>-Elements */
p::first-line {
color: blue;
}
Der Attribut-Selektor (X[attr]) wählt alle X-Elemente aus, die ein bestimmtes Attribut haben. Hier ist ein Beispiel:
/* Diese Regel trifft auf <a>-Elemente zu, die ein 'href'-Attribut haben */
a[href] {
color: purple;
}
Der Attributwert-Selektor (X[attr="value"]) wählt alle X-Elemente aus, deren bestimmtes Attribut einen spezifischen Wert hat. Hier ist ein Beispiel:
/* Diese Regel trifft auf <input>-Elemente zu, deren 'type'-Attribut den Wert 'text' hat */
input[type="text"] {
background-color: yellow;
}
Der Nachbarschafts-Selektor (X + Y) wählt das nächste Geschwisterelement aus. Es wählt nur das direkt nachfolgende Geschwister-Element aus. Hier ist ein Beispiel:
/* Diese Regel trifft auf ein <p>-Element zu, das direkt auf ein anderes <p>-Element folgt */
p + p {
color: green;
}
Der Kinds-Selektor (X > Y) wählt alle Y aus, die Kind-Elemente von X sind. Hier ist ein Beispiel:
/* Diese Regel trifft auf <li>-Elemente zu, die direkte Kinder eines <ul>-Elements sind */
ul > li {
color: blue;
}
Der Geschwister-Selektor (X ~ Y) wählt alle Y aus, die Geschwister von X sind und nach X kommen. Hier ist ein Beispiel:
/* Diese Regel trifft auf <h2>-Elemente zu, die Geschwister eines <h1>-Elements sind und nach dem <h1> kommen */
h1 ~ h2 {
color: red;
}
SCSS (Sassy CSS) ist eine CSS-Präprozessorsprache, die zusätzliche Funktionen wie Verschachtelung, Variablen, Mixins, Vererbung und andere nützliche Funktionen bietet, die in normalem CSS nicht vorhanden sind. Der SCSS-Code wird dann in normales CSS kompiliert, das von Webbrowsern gelesen werden kann.
SCSS ermöglicht es Ihnen, Selektoren zu verschachteln, was bedeutet, dass Sie die Beziehung zwischen verschiedenen Elementen in Ihrer HTML-Struktur direkt in Ihrem CSS darstellen können. Dies kann dazu beitragen, Ihren Code sauberer und organisierter zu machen.
.parent {
color: blue;
.child {
color: red;
}
}
SCSS unterstützt alle normalen CSS-Selektoren und fügt einige zusätzliche Funktionen hinzu. Zum Beispiel können Sie den `&` Operator verwenden, um den aktuellen Selektor zu beziehen.
a {
color: blue;
&:hover {
color: red;
}
}
SCSS bietet Funktionen und Mixins, die Ihnen erlauben, wiederverwendbare Styles zu erstellen. Eine Funktion gibt einen Wert zurück und kann in jeder CSS-Regel verwendet werden, während ein Mixin eine Gruppe von CSS-Regeln ist, die Sie in einem Selektor einfügen können.
@function calculate-rem($size) {
$rem-size: $size / 16;
@return #{$rem-size}rem;
}
p {
font-size: calculate-rem(32);
}
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box {
@include transform(rotate(30deg));
}
Nutzt das HTML von Gestern und fügt sowohl inline styles, den Style Tag und eine externe CSS Datei hinzu.
Versucht ein div Element zu zentrieren.
Versteht die Unterschiede zwischen den verschiedenen Möglichkeiten. Welche CSS Regel gewinnt wann?
Ansonsten tobt euch aus und macht die Seiten schön.
Joel Maximilian Mai