Am häufigsten verwendete CSS-Eigenschaften
Am häufigsten verwendete CSS-Eigenschaften
Am häufigsten verwendete CSS-Eigenschaften ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 1 von 1. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 1 Lektionen.
Einführung
Hallo,
In diesem Abschnitt lernen wir die häufigsten CSS-Eigenschaften kennen.
Bisher haben wir meist Beispiele mit einfachen Eigenschaften wie color und font-size erstellt.
Breite und Höhe
Höhe – Breite
Mit den Eigenschaften width und height legen wir die Breiten- und Höhenwerte unserer Elemente fest.
Hier sind zwei Punkte zu beachten.
- Wir können inlineartigen Elementen keine Breite und Höhe zuweisen.
- Die von uns zugewiesenen Eigenschaften width und height sind standardmäßig unabhängig von anderen Eigenschaften wie margin, padding und border. Sie werden nur für den Bereich innerhalb des Elements verwendet.
Auf die oben genannten Ausnahmen gehen wir später noch näher ein.
<!DOCTYPE html>
<html>
<head>
<style>
.my-box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="my-box">My Box</div>
</body>
</html>
Breite und Höhe 2
Im vorherigen Beispiel haben wir die Werte für width und height statisch festgelegt. Die möglichen Werte sind jedoch nicht auf feste Zahlen beschränkt.
Sehen wir uns nun an, wie wir in unserem Beispiel die Breite prozentual festlegen.
<style>
.box1 {
height: 200px;
width: 200px;
background-color: #1cac84;
}
.box2 {
height: 200px;
width: 70%;
background-color: powderblue;
}
.box3 {
background-color: #c974af;
}
</style>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<div class="box3">This box takes
the auto value for the width and height
properties by default.</div>
Content-Box vs. Border-Box
Die Eigenschaft box-sizing verwendet standardmäßig den Wert content-box.
Standardmäßig beziehen sich die Werte für width und height auf den Inhalt.
Die Werte für border und padding werden zu den Werten für width und height addiert.
Angenommen, die Breite einer Box beträgt 100px.
Wenn wir dieser Box 10px padding und einen border-Wert von 20px hinzufügen, beträgt die Gesamtbreite des Elements 100px + 10px + 20px = 130px.
Maximale Breite
Mit der Eigenschaft max-width können wir die maximale Breite festlegen, die ein Element annehmen darf.
Im folgenden Beispiel wird der Wert max-width auf 100px gesetzt. Obwohl der Standardwert von width auto ist (das Element sollte 100 % seines übergeordneten Elements einnehmen), nimmt es 100px ein und der Inhalt ragt aus der Box heraus.
<style>
.box {
height: 200px;
max-width: 100px;
background-color: #1cac84;
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>
Textdekoration
Mit der Eigenschaft text-decoration können wir eine Dekoration für Texte definieren.
Ich denke, es ist sinnvoller, diese Eigenschaft anhand des Beispiels zu untersuchen. Sehen Sie sich die Ausgabe unseres Beispielcodes in der Vorschau an.
<style>
.head1 {
text-decoration: overline;
}
.head2 {
text-decoration: line-through;
}
.head3 {
text-decoration: underline;
}
.head4 {
text-decoration: underline overline;
}
</style>
<h1 class="head1">
Text-decoration is overline
</h1>
<h1 class="head2">
Text-decoration is line-through
</h1>
<h1 class="head3">
Text-decoration is underline
</h1>
<h1 class="head4">
Text-decoration is both underline
and overline
</h1>text-indent
Vielleicht möchten wir am Anfang eines Textes einen Abstand einfügen. Dafür verwenden wir die Eigenschaft text-indent.
<style>
.indent-txt{
text-indent: 20px;
}
</style>
<p class="indent-txt">Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</p>text-align
Mit der Eigenschaft text-align legen wir die horizontale Ausrichtung eines Textes fest.
Definieren wir ein HTML-Beispiel.
<style>
.h1-center {
text-align: center;
}
.h1-left {
text-align: left;
}
.h1-right {
text-align: right;
}
</style>
<h1 class="h1-center">
Lorem ipsum (center)
</h1>
<h1 class="h1-left">
Lorem ipsum (left)
</h1>
<h1 class="h1-right">
Lorem ipsum (right)
</h1>font-family
Mit dem Stil font-family legen wir fest, welche Schriftarten für Texte verwendet werden sollen.
Hier gibt es einige wichtige Punkte, die Sie kennen sollten.
- Die von mir definierte Schriftart muss auf dem System unseres Benutzers registriert sein. Daher müssen wir eine der als websichere Schriftarten bezeichneten Schriftarten verwenden.
- Wenn wir eine benutzerdefinierte Schriftart verwenden möchten, müssen wir die verwendete Schriftart als Drittanbieter-Abhängigkeit zwischen den Head-Tags hinzufügen. Beim Hinzufügen von font-family sollten wir eine primäre und eine sekundäre Schriftartenpräferenz festlegen.
- Wenn der Browser die primäre Präferenz auf dem System nicht finden kann, zeigt er dem Benutzer die sekundäre Präferenz an.
font-family 2
Im folgenden Beispiel wurde der Schrifttyp Times New Roman für die primäre Klasse festgelegt.
Times und Serifenschriften werden jeweils als sekundäre und tertiäre Schriften festgelegt.
Der Browser versucht zuerst, den Schrifttyp Times New Roman zu verwenden. Wenn dieser Typ im System nicht gefunden wird, werden unsere anderen Präferenzen verwendet.
Wenn die von uns festgelegten Schriftarten nicht verfügbar sind, verwendet der Browser die Standardschriftart.
<style>
.header {
font-family: "Times New Roman", Times, serif;
}
</style>
<h1 class="header">
Hello Font Family
</h1>font-style
Wie der Name bereits vermuten lässt, legt diese Eigenschaft den Schriftstil für den verwendeten Text fest.
Sehen wir uns die Eigenschaft font-style nun anhand eines Beispiels an.
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
<p class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum
dolor sit amet. consectetur
adipiscing elit
</p>Glückwunsch
Glückwunsch 🎉
In diesem Abschnitt haben wir die am häufigsten verwendeten CSS-Eigenschaften kennengelernt.
Im nächsten Abschnitt lernen wir CSS-Margins kennen.
Häufig gestellte Fragen
Ist die Lektion „Am häufigsten verwendete CSS-Eigenschaften“ kostenlos?
Ja — der vollständige Text von „Am häufigsten verwendete CSS-Eigenschaften“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 1 Lektionen.
Was lerne ich in „Am häufigsten verwendete CSS-Eigenschaften“?
Am häufigsten verwendete CSS-Eigenschaften Du übst HTML for Kids mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML for Kids zu starten?
Keine Vorkenntnisse erforderlich. HTML for Kids auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 1.
Wie lange dauert die Lektion „Am häufigsten verwendete CSS-Eigenschaften“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML for Kids-Lektion Code schreiben und ausführen?
Ja. Jede HTML for Kids-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.