From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- .../cascade_and_inheritance/index.html | 160 ++++++++ .../learn/css/building_blocks/selectors/index.html | 430 +++++++++++++++++++++ .../building_blocks/values_and_units/index.html | 394 +++++++++++++++++++ .../building_blocks/werten_einheiten/index.html | 394 ------------------- .../first_steps/how_css_is_structured/index.html | 166 ++++++++ .../learn/css/first_steps/how_css_works/index.html | 113 ++++++ .../learn/css/styling_text/fundamentals/index.html | 152 ++++++++ 7 files changed, 1415 insertions(+), 394 deletions(-) create mode 100644 files/de/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/de/learn/css/building_blocks/selectors/index.html create mode 100644 files/de/learn/css/building_blocks/values_and_units/index.html delete mode 100644 files/de/learn/css/building_blocks/werten_einheiten/index.html create mode 100644 files/de/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/de/learn/css/first_steps/how_css_works/index.html create mode 100644 files/de/learn/css/styling_text/fundamentals/index.html (limited to 'files/de/learn/css') diff --git a/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..79ce577e7f --- /dev/null +++ b/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,160 @@ +--- +title: Kaskadierung und Vererbung +slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Wie CSS funktioniert.")}}Das ist der vierte Abschnitt des CSS Getting Started Tutorials. Er erklärt wie Stylesheets in einer Kaskade interagieren und wie Element den Style von ihren Elternelmenten erben können. Sie werden Vererbung verwenden, um eine Menge von Teilen in Ihrem Beispieldokument in einem Schritt zu verändern.

+ +

Information: Kaskadierung und Vererbung

+ +

Der schlussendliche Style eines Elements kann an vielen verschiedenen Orten angegeben werden, die auf eine komplexe Art miteinander interagieren. Diese Komplexität macht CSS mächtig. Aber dadurch kann es auch verwirrend und schwer zu debuggen werden.

+ +

Drei Hauptquellen von Styleinformationen bilden eine Kaskade. Diese sind:

+ + + +

Der Style des Benutzers verändert den standardmäßigen Style des Webbrowsers. Der Style des Autors des Dokuments verändert dann den Style ein weiteres Mal. In diesem Tutorial sind Sie der Autor des Beispieldokuments und es wird nur mit Stylesheets vom Autor gearbeitet.

+ +
+
Beispiel
+ +

Wenn Sie dieses Dokument in einem Webbrowser lesen, kommen Teile des Styles, den Sie sehen, von dem standardmäßigen Style des Webbrowsers für HTML.

+ +

Teile vom Style können von angepassten Webbrowsereinstellungen oder von einer angepassten Styledefinitionsdatei stammen. In Firefox können die Einstellungen im Preferences Dialog vorgenommen werden, oder Sie geben Styles in der Datei userContent.css innerhalb Ihres Browserprofils an.

+ +

Andere Teile vom Style kommen aus Stylesheets, die vom Wiki-Server mit dem Dokument verlinkt werden.

+
+ +

Wenn Sie Ihr Beispieldokument in Ihrem Webbrowser öffnen, werden die {{ HTMLElement("strong") }} Elemente mit dickeren Buchstaben als der Rest des Textes dargestellt. Das kommt aus dem standardmäßigen Style des Webbbrowsers für HTML.

+ +

Die {{ HTMLElement("strong") }} Elemente sind rot. Das kommt aus Ihrem Beispielstylesheet.

+ +

Die {{ HTMLElement("strong") }} Elemente erben auch viele Eigenschaften vom Style des {{ HTMLElement("p") }} Elements, weil sie ein Kindelement davon sind. Auf dieselbe Art erbt das {{ HTMLElement("p") }} Element vom Style des {{ HTMLElement("body") }} Elements.

+ +

Für Styles in der Kaskade haben die Stylesheets vom Autor höchste Priorität. Danach folgen die Stylesheets des Benutzers und der standardmäßige Stylesheet vom Webbrowser.

+ +

Bei vererbten Styles haben die eigenen Styles von Kindelementen eine höhere Priorität als die von dessen Elternelementen.

+ +

Das sind nicht alle Prioritäten, die angwendet werden. Folgende Seiten in diesem Tutorial gehen noch detaillierter darauf ein.

+ +
+
Mehr Details
+ +

CSS ermöglicht es auch mit dem Schlüsselwort !important die Styles vom Autor zu überschreiben.

+ +

Das bedeutet, dass ein Autor nicht immer genau vorhersehen kann, was genau die Leser sehen werden.

+ +

Wenn Sie alle Details über Kaskadierung und Vererbung erfahren wollen, rufen Sie bitte die Seite Assigning property values, Cascading, and Inheritance in der CSS Spezifikation auf.

+
+ +

Aktion: Vererbung verwenden

+ +
    +
  1. Editieren Sie Ihre CSS Datei.
    2. +
  2. Kopieren Sie die folgende Zeile in Ihre CSS Datei. Es macht dabei keinen Unterschied, ob Sie die Zeile vor oder nach der bereits enthaltenen Zeile einfügen. Es ist aber verständlicher die Zeile oben einzufügen, da das {{ HTMLElement("p") }} Element in Ihrem Dokument das Elternelement vom {{ HTMLElement("strong") }} Element ist: + 
    p {
+  color: blue;
+  text-decoration: underline;
+}
+
    +
    3. +
  3. Laden Sie die Seite im Webbrowser erneut, damit die Änderung an Ihrem Beispieldokument sehen können. Die unterstreichende Line betrifft den gesamten Text im Absatz und somit auch alle Anfangsbuchstaben. Die {{ HTMLElement("strong") }} Elemente haben den Unterstrich von ihrem Elternknoten {{ HTMLElement("p") }} geerbt.
    + +

    Die {{ HTMLElement("strong") }} Elemente sind aber immer noch rot. Die rote Farbe gehört zu ihrem eigenen Style und hat somit Priorität gegenüber dem blau des {{ HTMLElement("p") }} Elternelements.

    +
    4. +
+ +

Davor

+ +

HTML Inhalt

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

CSS Inhalt

+ +
strong {
+  color:red
+}
+
+ +

{{ EmbedLiveSample('Before') }}

+ +

Danach

+ +

HTML Inhalt

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+ +

CSS Inhalt

+ +
p {
+  color:blue;
+  text-decoration:underline;
+}
+
+strong {
+  color:red;
+}
+ +

{{ EmbedLiveSample('After') }}

+ +

 

+ +
+
Herausforderung
+Verändern Sie Ihren Stylesheet, damit nur die roten Buchstaben unterstrichen sind: + + + + + + + +
Cascading Style Sheets
+ +
+
Mögliche Lösung
+ +

Verschieben Sie die Deklaration für die untersteichende Linie aus der Regel für {{ HTMLElement("p") }} in die für {{ HTMLElement("strong") }}. Die resultierende Datei sieht folgendermaßen aus:

+ +
p {
+  color: blue;
+}
+
+strong {
+  color: red;
+  text-decoration: underline;
+}
+
+ +

 

+Lösung ausblenden
+Sehen Sie sich die Lösung an.
+ +

 

+ +

Was kommt als Nächstes?

+ +

{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selektoren")}}Ihr Beispielstylesheet definiert Styles für die Tags <p> und <strong>, um den Style der entsprechenden Elemente im gesamten Dokument zu verändern. Der nächste Abschnitt beschreibt, wie Sie den Style auf eine noch selektivere Art angeben können.

diff --git a/files/de/learn/css/building_blocks/selectors/index.html b/files/de/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..f61b8bb577 --- /dev/null +++ b/files/de/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,430 @@ +--- +title: Selektoren +slug: Web/Guide/CSS/Getting_started/Selektoren +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Kaskadierung_und_vererbung", "Kaskadierung & Vererbung")}}Das ist der fünfte Abschnitt des CSS Getting Started Tutorials. Er erklärt wie sie Styles selektiv anwenden können und wie verschiedene Arten von Selektoren verschiedene Prioritäten haben können. Sie fügen einige Attribute zu den Tags in Ihrem Beispiel-Dokument hinzu und Sie verwenden diese Attribute in Ihrem Beispielstylesheet.

+ +

Information: Selektoren

+ +

CSS hat eine eigene Terminologie, die die CSS Sprache beschreibt. Früher in diesem Tutorial haben Sie eine Zeile wie die folgende geschrieben:

+ +
strong {
+  color: red;
+}
+
+ +

In der CSS Terminologie ist die gesamte Zeile eine Regel. Diese Regel beginnt mit strong, welches ein Selektor ist. Sie wählt aus, auf welche Elemente im DOM die Regel angewandt wird.

+ +
+
Mehr Details
+ +

Der Teil innerhalb der geschwungenen Klammern ist die Deklaration.

+ +

Das Schlüsselwort color ist eine Eigenschaft (Property) und red is ein Wert (value).

+ +

Das Semicolon nach dem Property-Value Pair trennt es von anderen Property-Value Pairs in derselben Deklaration.

+ +

Dieser Tutorial bezeichnet einen Selektor wie strong als einen Tag-Selektor. Die CSS Spezifikation bezeichnet es als Type-Selector.

+
+ +

Diese Seite vom Tutorial geht detaillierter auf die Selektoren ein, die in CSS Regeln verwendet werden können.

+ +

Zusätzlich zu Tagnamen können Werte von Attributen in Selektoren verwendet werden. Damit können Regeln spezifischer gemacht werden.

+ +

Zwei Attribute haben einen speziellen Status in CSS. Diese sind class und id.

+ +

Class Selektoren

+ +

Verwenden Sie das class Attribut in einem Element, um das Element einer Klasse zuzuordnen. Der Name der Klasse ist frei wählbar. Mehrere Elemente in einem Dokument können denselben Wert für die Klasse haben.

+ +

Tippen Sie einen Punkt direkt vor dem Klassennamen im Stylesheet, um die Klasse im Selektor zu verwenden.

+ +

ID Selektoren

+ +

Verwenden Sie das id Attribut in einem Element, um dem Elemente eine ID zuzuweisen. Der Name der ID ist frei wählbar. Die ID muss innerhalb vom Dokument eindeutig sein.

+ +

Tippen Sie eine Raute (Hash) direkt vor der ID im Styleshet, um die ID im Selektor zu verwenden.

+ +
+
Beispiel
+Dieser HTML Tag hat ein class Attribut und ein id Attribute: + +
<p class="key" id="principal">
+
+ +

Der id Wert, principal, muss innerhalb vom Dokument eindeutig, aber andere Tags Dokument dürfen denselben Klassennamen, key, haben.

+ +

In einem CSS Stylesheet macht diese Regel alle Elemente mit der class key grün. (Sie müssen dazu kein {{ HTMLElement("p") }} sein.)

+ +
.key {
+  color: green;
+}
+
+ +

Diese Regel macht das eine Element mit der id principal fettgedruckt:

+ +
#principal {
+  font-weight: bolder;
+}
+
+
+ +

Wenn mehr als eine Regel auf ein Element zutreffen und dieselbe Eigenschaft spezifiziert wird, gibt CSS der Regel mit dem spezifischeren Selektor Priorität. Ein ID Selektor ist spezifischer als ein class Selektor, welcher wiederum spezifischer als ein tag Selektor ist.

+ +
+
Mehr Details
+ +

Sie können Selektoren kombinieren, um einen selektiveren Selektor zu erstellen.

+ +

Der Selektor .key zum Beispiel selektier alle Elements mit der Klasse key. Der Selektor p.key selektiert nur {{ HTMLElement("p") }} Elemente, die die Klasse key haben.

+ +

Sie sind nicht auf die zwei speziellen Attribute class und id eingeschränkt. Mit eckigen Klammern können Sie auch andere Attribute spezifizieren. Der Selektor [type='button'] zum Beispiel selektiert alle Elemente, die ein type Attribut mit dem Wert button haben.

+
+ +

Wenn ein Stylesheet Regeln mit einem Konflikt hat und und diese gleich spezifisch sind, dann gibt CSS der Regel, die später im Stylesheet ist, Priorität.

+ +

Wenn Sie Probleme mit konfliktierenden Regeln haben, versuchen Sie eine Regel spezifischer zu machen, damit sie Priorität hat. Wenn Sie das nicht können, verschieben Sie eine der Regeln ans Ende des Stylesheet, damit sie Priorität bekommt.

+ +

Pseudo-classes Selektoren

+ +

Eine CSS pseudo-class ist ein Schlüsselwort, welches einem Selektor hinzugefügt wird. Damit kann ein bestimmter Zustand des selektierten Elements spezifiziert werden. {{ Cssxref(":hover") }} zum Beispiel wenden seinen Style an, wenn der Benutzer mit dem Mauszeiger über das selektierte Element fährt.

+ +

Pseudo-classes zusammen mit pseudo-elements lassen Sie eine Style für ein Element nicht nur in Relation zum Inhalt vom Document Tree sondern auch in Relation zu externen Faktoren wie den Verlauf  der Navigation ({{ cssxref(":visited") }}, zum Beispiel), dem Zustand seines Inhalt (wie {{ cssxref(":checked") }} auf manchen form Elementen) oder der Position des Mauszeigers (wie {{ cssxref(":hover") }} das angibt, ob sich der Mauszeiger über dem Element befindet) anwenden. Eine vollständige Liste der Selektoren ist unter CSS3 Selectors working spec zu finden.

+ +
+
Syntax
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

Liste von pseudo-classes

+ + + +

Information: Selektoren basieren auf Beziehungen

+ +

CSS hat einige Wege um Elemente basieren auf ihrer Bezieung zu anderen Eementen zu selektieren. Damit können Selektoren spezifischer gemacht werden.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Gängige Selektoren basierend auf Beziehungen
SelektorSelektiert
A EJedes E Element, das ein Nachfolger eines A Elements ist (das heißt: ein Kind oder ein Kind eines Kindes, etc.)
A > EJedes E Element, das ein Kind eines A Elements ist
E:first-childJedes E Element, das das erste Kind seines Parent ist
B + EJedes E Element, das das nächste Sibling eines B Elements ist (das heißt: das nächste Kind von demselben Parent)
+ +

Über eine Kombination der selektoren können komplexe Beziehungen ausgedrückt werden.

+ +

Sie können auch das Symbol * (asterisk) verwenden, welches "jedes Element" bedeutet.

+ +
+
Beispiel
+ +

Eine HTML Tabelle hat ein id Attribute aber die Zeilen und Zellen haben keinen eigenen Identifier:

+ +
<table id="data-table-1">
+...
+<tr>
+<td>Prefix</td>
+<td>0001</td>
+<td>default</td>
+</tr>
+...
+
+ +

Diese Regeln machen die erste Zelle jeder Zeile fettgedruckt und die zweite Zelle jeweils monospaced. Sie betreffen nur eine bestimmte Tabelle im Dokument:

+ +
#data-table-1 td:first-child {
+  font-weight: bolder;
+}
+
+#data-table-1 td:first-child + td {
+  font-family: monospace;
+}
+
+ +

Das Ergebnis sieht so aus:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
Mehr Details
+ +

Wenn Sie einen Selektor spezifischer machen, erhöhen Sie normalerweise seine Priorität.

+ +

Wenn Sie diese Technik anwenden, können Sie es vermeiden vielen Tags in ihrem Dokument ein class oder ein id Attribut zu geben. Stattdessen erledigt CSS die Arbeit.

+ +

In umfassenden Designs, bei denen Geschwindigkeit wichtig ist, können Sie ihre Stylesheets effizienter machen, indem Sie komplexe Regeln mit Beziehungen zu anderen Elementen vermeiden.

+ +

Mehr Beispiele zu Tabellen finden Sie auf der CSS Referenzseite.

+
+ +

Aktion: class und ID Selektoren verwenden

+ +
    +
  1. Bearbeiten Sie Ihre HTML Datei und duplizieren Sie den Absatz mit copy and paste.
    2. +
  2. Danach setzen Sie ein id und class Attribut auf den ersten Absatz und ein id Attribut auf dem zweiten wie unten dargestellt. Alternativ können Sie die gesamte Datei kopieren und einfügen: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit: + 
    strong {
+  color: red;
+}
+
+.carrot {
+  color: orange;
+}
+
+.spinach {
+  color: green;
+}
+
+#first {
+  font-style: italic;
+}
+
    +
    4. +
  4. Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    + +

    Sie können die Zeilen in Ihrer CSS Datei neu anordnen, um zu sehen, dass die Reihenfolge keine Auswirkungen hat.

    + +

    Die class Selektoren .carrot und .spinach haben Priorität gegenüber dem tag Selektor strong.

    + +

    Der ID Selektor #first hat Priorität gegenüber den class und den tag Selektoren.

    +
    5. +
+ +
+
Herausforderungen
+ +
    +
  1. Ohne die HTML Datei zu verändern, fügen sie eine einzige Regel in Ihrer CSS Datei hinzu, die die Farbe aller Anfangsbuchstaben wie jetzt beibehält aber alle anderen Buchstaben im zweiten Absatz blau macht: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. Ändern sie jetzt die neue Regel (ohne etwas anderes zu ändern), um den ersten Absatz auch blau zu machen: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+ +
+
Mögliche Lösung
+ +
    +
  1. Fügen Sie eine Regel mit dem ID Selektor #second und einer Deklaration color: blue; wie unten dargestellt hinzu: + + 
    #second {
+  color: blue;
+}
+
    + Ein noch spezifischerer Selektor p#second funktioniert auch.
    2. +
  2. Ändern Sie den Selektor der neuen Regel auf p, damit er ein Tag-Selektor ist: + 
    p {
+  color: blue;
+}
+
    +
    3. +
+Lösung ausblenden
+Sehen Sie sich die Lösung an.
+ +

Aktion: pseudo-classes Selektoren verwenden

+ +
    +
  1. Erstellen Sie eine HTML Datei wie folgt: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
+
    +
    2. +
  2. Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit: + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+
    +
    3. +
  3. Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen (fahren sie mit dem Mauszeiger über den folgenden Link, um den Effekt zu sehen): + + + + + + +
    Go to our Home page  
    +
    4. +
+ +

Aktion: Selektoren basierend auf Beziehungen und pseudo-classes verwenden

+ +

Mit Selektoren basierung auf Beziehungen und pseudo-classes können Sie komplexe Algorithmen mit Kaskadierung erstellen. Das ist eine gängige Technik, um zum Beispiel reine CSS Dropdown Menüs zu erstellen (die nur aus CSS ohne JavaScript bestehen). Die Essenz dieser Technik ist die Erstellung einer Regel wie die folgende:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+ +

Angewendet auf eine HTML Struktur wie die folgende:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

Sehen sie in das komplette CSS-basierte Dropdown Menü Beispiel für mögliche Hinweise.

+ +

Was kommt als Nächstes?

+ +

Ihr Beispiel-Stylesheet sieht langsam kompakt und kompliziert aus. Der nächste Anschnit beschreibt die Wege, um CSS leichter lesbar zu machen.{{nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}

diff --git a/files/de/learn/css/building_blocks/values_and_units/index.html b/files/de/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..8c45b5ba69 --- /dev/null +++ b/files/de/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,394 @@ +--- +title: Werte und Einheiten in CSS +slug: Learn/CSS/Building_blocks/Werten_Einheiten +tags: + - CSS + - Einheiten + - Farbe + - Lernen + - Werte +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
+ +

Every property used in CSS has a value or set of values that are allowed for that property, and taking a look at any property page on MDN will help you understand the values that are valid for any particular property. In this lesson we will take a look at some of the most common values and units in use.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To learn about the different types of values and units used in CSS properties.
+ +

What is a CSS value?

+ +

In CSS specifications and on the property pages here on MDN you will be able to spot values as they will be surrounded by angle brackets, such as <color> or <length>. When you see the value <color> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <color> reference page.

+ +
+

Note: You'll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.

+
+ +
+

Note: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the <color> data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.

+
+ +

In the following example we have set the color of our heading using a keyword, and the background using the rgb() function:

+ +
h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} 
+
+ +

A value in CSS is a way to define a collection of allowable sub-values. This means that if you see <color> as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, rgb() functions, etc. You can use any available <color> values assuming they are supported by your browser. The page on MDN for each value will give you information about browser support. For example, if you look at the page for <color> you will see that the browser compatibility section lists different types of color value and support for them.

+ +

Let's have a look at some of the types of value and unit you may frequently encounter, with examples so that you can try out different possible values.

+ +

Numbers, lengths, and percentages

+ +

There are various numeric data types that you might find yourself using in CSS. The following are all classed as numeric:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Data typeDescription
<integer>An <integer> is a whole number such as 1024 or -55.
<number>A <number> represents a decimal number — it may or may not have a decimal point with a fractional component, for example 0.255, 128, or -1.2.
<dimension>A <dimension> is a <number> with a unit attached to it, for example 45deg, 5s, or 10px. <dimension> is an umbrella category that includes the <length>, <angle>, <time>, and <resolution> types.
<percentage>A <percentage> represents a fraction of some other value, for example 50%. Percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length.
+ +

Lengths

+ +

The numeric type you will come across most frequently is <length>, for example 10px (pixels) or 30em. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.

+ +

Absolute length units

+ +

The following are all absolute length units — they are not relative to anything else and are generally considered to always be the same size.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
+ +

Most of these values are more useful when used for print, rather than screen output. For example we don't typically use cm (centimeters) on screen. The only value that you will commonly use is px (pixels).

+ +

Relative length units

+ +

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scale relative to everything else on the page. Some of the most useful units for web development are listed in the table below.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitRelative to
emFont size of the element.
exx-height of the element's font.
chThe advance measure (width) of the glyph "0" of the element's font.
remFont size of the root element.
lhLine height of the element.
vw1% of the viewport's width.
vh1% of the viewport's height.
vmin1% of the viewport's smaller dimension.
vmax1% of the viewport's larger dimension.
+ +

Exploring an example

+ +

In the example below you can see how some relative and absolute length units behave. The first box has a {{cssxref("width")}} set in pixels. As an absolute unit this width will remain the same no matter what else changes.

+ +

The second box has a width set in vw (viewport width) units. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <iframe>, so this won't work. To see this in action you'll have to try the example after opening it in its own browser tab.

+ +

The third box uses em units. These are relative to the font size. I've set a font size of 1em on the containing {{htmlelement("div")}}, which has a class of .wrapper. Change this value to 1.5em and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size.

+ +

After following the instructions above, try playing with the values in other ways, to see what you get.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

+ +

ems and rems

+ +

Die relativen Maßeneinheiten, em und rem,die oft ins Größe Veränderung sich handeln, so dass eine Anpassung in absolute Werten  when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like styling text or CSS layout. The below example provides a demonstration.

+ +

The HTML is a set of nested lists — we have three lists in total and both examples have the same HTML. The only difference is that the first has a class of ems and the second a class of rems.

+ +

To start with, we set 16px as the font size on the <html> element.

+ +

To recap, the em unit means "my parent element's font-size". The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of ems take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent's font size.

+ +

To recap, the rem unit means "The root element's font-size". (rem standards for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of rems take their sizing from the root element (<html>). This means that each successive level of nesting does not keep getting larger.

+ +

However, if you change the <html> font-size in the CSS you will see that everything else changes relative to it — both rem- and em-sized text.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

+ +

Percentages

+ +

In a lot of cases a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element's font-size as a percentage it will be a percentage of the font-size of the element's parent. If you use a percentage for a width value, it will be a percentage of the width of the parent.

+ +

In the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. Both sets are 200px and 40% wide respectively.

+ +

The difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide. The second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one!

+ +

Try changing the width of the wrapper or the percentage value to see how this works.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

+ +

The next example has font sizes set in percentages. Each <li> has a font-size of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

+ +

Note that, while many values accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes <length-percentage> then you can use a length or a percentage. If the allowed value only includes <length>, it is not possible to use a percentage.

+ +

Numbers

+ +

Some values accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the opacity property, which controls the opacity of an element (how transparent it is). This property accepts a number between 0 (fully transparent) and 1 (fully opaque).

+ +

In the below example, try changing the value of opacity to various decimal values between 0 and 1 and see how the box and its contents become more or less opaque.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

+ +
+

Note: When you use a number in CSS as a value it should not be surrounded in quotes.

+
+ +

Color

+ +

There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.

+ +

The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) Let's have a look at some of the ways in which we can specify colors in CSS.

+ +
+

Note: In this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common.

+
+ +

Color keywords

+ +

Quite often in examples here in the learn section or elsewhere on MDN you will see the color keywords used, as they are a simple and understandable way of specifying color. There are a number of these keywords, some of which have fairly entertaining names! You can see a full list on the page for the <color> value.

+ +

Try playing with different color values in the live examples below, to get more of an idea how they work.

+ +

Hexadecimal RGB values

+ +

The next type of color value you are likely to encounter is hexadecimal codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so 0123456789abcdef. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)

+ +

These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

+ +

Again, try changing the values to see how the colors vary.

+ +

RGB and RGBA values

+ +

The third scheme we'll talk about here is RGB. An RGB value is a function — rgb() — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand.

+ +

Let's rewrite our last example to use RGB colors:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

+ +

You can also use RGBA colors — these work in exactly the same way as RGB colors, and so you can use any RGB values, however there is a fourth value that represents the alpha channel of the color, which controls opacity. If you set this value to 0 it will make the color fully transparent, whereas 1 will make it fully opaque. Values in between give you different levels of transparency.

+ +
+

Note: Setting an alpha channel on a color has one key difference to using the {{cssxref("opacity")}} property we looked at earlier. When you use opacity you make the element and everything inside it opaque, whereas using RGBA colors only makes the color you are specifying opaque.

+
+ +

In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

+ +

In this example, try changing the alpha channel values to see how it affects the color output.

+ +
+

Note: At some point modern browsers were updated so that rgba() and rgb(), and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same. So for example both rgba() and rgb() accept colors with and without alpha channel values. Try changing the above example's rgba() functions to rgb() and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.

+
+ +

HSL and HSLA values

+ +

Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the hsl() function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:

+ + + +

We can update the RGB example to use HSL colors like this:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

+ +

Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

+ +

You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!

+ +

Images

+ +

The <image> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a url() function, or a gradient.

+ +

In the example below we have demonstrated an image and a gradient in use as a value for the CSS background-image property.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

+ +
+

Note: there are some other possible values for <image>, however these are newer and currently have poor browser support. Check out the page on MDN for the <image> data type if you want to read about them.

+
+ +

Position

+ +

The <position> data type represents a set of 2D coordinates, used to position an item such as a background image (via background-position). It can take keywords such as top, left, bottom, right, and center to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.

+ +

A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to center.

+ +

In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

+ +

Play around with these values to see how you can push the image around.

+ +

Strings and identifiers

+ +

Throughout the examples above, we've seen places where keywords are used as a value (for example <color> keywords like red, black, rebeccapurple, and goldenrod). These keywords are more accurately described as identifiers, a special value that CSS understands. As such they are not quoted — they are not treated as strings.

+ +

There are places where you use strings in CSS, for example when specifying generated content. In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

+ +

Functions

+ +

The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — rgb(), hsl(), etc. The value used to return an image from a file — url() — is also a function.

+ +

A value that behaves more like something you might find in a traditional programming language is the calc() CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.

+ +

For example, below we are using calc() to make the box 20% + 100px wide. The 20% is calculated from the width of the parent container .wrapper and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use calc() to tell the browser to do it for us.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

+ +

Summary

+ +

This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through these lessons.

+ +

The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.

+ +

For example, understanding that <image> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/de/learn/css/building_blocks/werten_einheiten/index.html b/files/de/learn/css/building_blocks/werten_einheiten/index.html deleted file mode 100644 index 8c45b5ba69..0000000000 --- a/files/de/learn/css/building_blocks/werten_einheiten/index.html +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Werte und Einheiten in CSS -slug: Learn/CSS/Building_blocks/Werten_Einheiten -tags: - - CSS - - Einheiten - - Farbe - - Lernen - - Werte -translation_of: Learn/CSS/Building_blocks/Values_and_units ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
- -

Every property used in CSS has a value or set of values that are allowed for that property, and taking a look at any property page on MDN will help you understand the values that are valid for any particular property. In this lesson we will take a look at some of the most common values and units in use.

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To learn about the different types of values and units used in CSS properties.
- -

What is a CSS value?

- -

In CSS specifications and on the property pages here on MDN you will be able to spot values as they will be surrounded by angle brackets, such as <color> or <length>. When you see the value <color> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <color> reference page.

- -
-

Note: You'll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.

-
- -
-

Note: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the <color> data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.

-
- -

In the following example we have set the color of our heading using a keyword, and the background using the rgb() function:

- -
h1 {
-  color: black;
-  background-color: rgb(197,93,161);
-} 
-
- -

A value in CSS is a way to define a collection of allowable sub-values. This means that if you see <color> as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, rgb() functions, etc. You can use any available <color> values assuming they are supported by your browser. The page on MDN for each value will give you information about browser support. For example, if you look at the page for <color> you will see that the browser compatibility section lists different types of color value and support for them.

- -

Let's have a look at some of the types of value and unit you may frequently encounter, with examples so that you can try out different possible values.

- -

Numbers, lengths, and percentages

- -

There are various numeric data types that you might find yourself using in CSS. The following are all classed as numeric:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Data typeDescription
<integer>An <integer> is a whole number such as 1024 or -55.
<number>A <number> represents a decimal number — it may or may not have a decimal point with a fractional component, for example 0.255, 128, or -1.2.
<dimension>A <dimension> is a <number> with a unit attached to it, for example 45deg, 5s, or 10px. <dimension> is an umbrella category that includes the <length>, <angle>, <time>, and <resolution> types.
<percentage>A <percentage> represents a fraction of some other value, for example 50%. Percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length.
- -

Lengths

- -

The numeric type you will come across most frequently is <length>, for example 10px (pixels) or 30em. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.

- -

Absolute length units

- -

The following are all absolute length units — they are not relative to anything else and are generally considered to always be the same size.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
- -

Most of these values are more useful when used for print, rather than screen output. For example we don't typically use cm (centimeters) on screen. The only value that you will commonly use is px (pixels).

- -

Relative length units

- -

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scale relative to everything else on the page. Some of the most useful units for web development are listed in the table below.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitRelative to
emFont size of the element.
exx-height of the element's font.
chThe advance measure (width) of the glyph "0" of the element's font.
remFont size of the root element.
lhLine height of the element.
vw1% of the viewport's width.
vh1% of the viewport's height.
vmin1% of the viewport's smaller dimension.
vmax1% of the viewport's larger dimension.
- -

Exploring an example

- -

In the example below you can see how some relative and absolute length units behave. The first box has a {{cssxref("width")}} set in pixels. As an absolute unit this width will remain the same no matter what else changes.

- -

The second box has a width set in vw (viewport width) units. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <iframe>, so this won't work. To see this in action you'll have to try the example after opening it in its own browser tab.

- -

The third box uses em units. These are relative to the font size. I've set a font size of 1em on the containing {{htmlelement("div")}}, which has a class of .wrapper. Change this value to 1.5em and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size.

- -

After following the instructions above, try playing with the values in other ways, to see what you get.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

- -

ems and rems

- -

Die relativen Maßeneinheiten, em und rem,die oft ins Größe Veränderung sich handeln, so dass eine Anpassung in absolute Werten  when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like styling text or CSS layout. The below example provides a demonstration.

- -

The HTML is a set of nested lists — we have three lists in total and both examples have the same HTML. The only difference is that the first has a class of ems and the second a class of rems.

- -

To start with, we set 16px as the font size on the <html> element.

- -

To recap, the em unit means "my parent element's font-size". The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of ems take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent's font size.

- -

To recap, the rem unit means "The root element's font-size". (rem standards for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of rems take their sizing from the root element (<html>). This means that each successive level of nesting does not keep getting larger.

- -

However, if you change the <html> font-size in the CSS you will see that everything else changes relative to it — both rem- and em-sized text.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

- -

Percentages

- -

In a lot of cases a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element's font-size as a percentage it will be a percentage of the font-size of the element's parent. If you use a percentage for a width value, it will be a percentage of the width of the parent.

- -

In the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. Both sets are 200px and 40% wide respectively.

- -

The difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide. The second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one!

- -

Try changing the width of the wrapper or the percentage value to see how this works.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

- -

The next example has font sizes set in percentages. Each <li> has a font-size of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

- -

Note that, while many values accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes <length-percentage> then you can use a length or a percentage. If the allowed value only includes <length>, it is not possible to use a percentage.

- -

Numbers

- -

Some values accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the opacity property, which controls the opacity of an element (how transparent it is). This property accepts a number between 0 (fully transparent) and 1 (fully opaque).

- -

In the below example, try changing the value of opacity to various decimal values between 0 and 1 and see how the box and its contents become more or less opaque.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

- -
-

Note: When you use a number in CSS as a value it should not be surrounded in quotes.

-
- -

Color

- -

There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.

- -

The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) Let's have a look at some of the ways in which we can specify colors in CSS.

- -
-

Note: In this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common.

-
- -

Color keywords

- -

Quite often in examples here in the learn section or elsewhere on MDN you will see the color keywords used, as they are a simple and understandable way of specifying color. There are a number of these keywords, some of which have fairly entertaining names! You can see a full list on the page for the <color> value.

- -

Try playing with different color values in the live examples below, to get more of an idea how they work.

- -

Hexadecimal RGB values

- -

The next type of color value you are likely to encounter is hexadecimal codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so 0123456789abcdef. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)

- -

These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

- -

Again, try changing the values to see how the colors vary.

- -

RGB and RGBA values

- -

The third scheme we'll talk about here is RGB. An RGB value is a function — rgb() — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand.

- -

Let's rewrite our last example to use RGB colors:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

- -

You can also use RGBA colors — these work in exactly the same way as RGB colors, and so you can use any RGB values, however there is a fourth value that represents the alpha channel of the color, which controls opacity. If you set this value to 0 it will make the color fully transparent, whereas 1 will make it fully opaque. Values in between give you different levels of transparency.

- -
-

Note: Setting an alpha channel on a color has one key difference to using the {{cssxref("opacity")}} property we looked at earlier. When you use opacity you make the element and everything inside it opaque, whereas using RGBA colors only makes the color you are specifying opaque.

-
- -

In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

- -

In this example, try changing the alpha channel values to see how it affects the color output.

- -
-

Note: At some point modern browsers were updated so that rgba() and rgb(), and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same. So for example both rgba() and rgb() accept colors with and without alpha channel values. Try changing the above example's rgba() functions to rgb() and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.

-
- -

HSL and HSLA values

- -

Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the hsl() function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:

- - - -

We can update the RGB example to use HSL colors like this:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

- -

Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

- -

You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!

- -

Images

- -

The <image> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a url() function, or a gradient.

- -

In the example below we have demonstrated an image and a gradient in use as a value for the CSS background-image property.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

- -
-

Note: there are some other possible values for <image>, however these are newer and currently have poor browser support. Check out the page on MDN for the <image> data type if you want to read about them.

-
- -

Position

- -

The <position> data type represents a set of 2D coordinates, used to position an item such as a background image (via background-position). It can take keywords such as top, left, bottom, right, and center to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.

- -

A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to center.

- -

In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

- -

Play around with these values to see how you can push the image around.

- -

Strings and identifiers

- -

Throughout the examples above, we've seen places where keywords are used as a value (for example <color> keywords like red, black, rebeccapurple, and goldenrod). These keywords are more accurately described as identifiers, a special value that CSS understands. As such they are not quoted — they are not treated as strings.

- -

There are places where you use strings in CSS, for example when specifying generated content. In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

- -

Functions

- -

The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — rgb(), hsl(), etc. The value used to return an image from a file — url() — is also a function.

- -

A value that behaves more like something you might find in a traditional programming language is the calc() CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.

- -

For example, below we are using calc() to make the box 20% + 100px wide. The 20% is calculated from the width of the parent container .wrapper and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use calc() to tell the browser to do it for us.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

- -

Summary

- -

This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through these lessons.

- -

The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.

- -

For example, understanding that <image> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

- -

In this module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/de/learn/css/first_steps/how_css_is_structured/index.html b/files/de/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..4c16c3e18d --- /dev/null +++ b/files/de/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,166 @@ +--- +title: Lesbares CSS +slug: Web/Guide/CSS/Getting_started/Lesbares_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Selektoren", "Selektoren")}}Das ist der sechste Teil des CSS Getting Started Tutorials. Er erklärt den Stil und die Grammatik der CSS Sprache selbst. Sie ändern das Layout Ihrer CSS Datei, damit sie lesbarer wird.

+ +

Information: Lesbares CSS

+ +

Sie können Leerstellen und Kommentare in Ihren Stylesheets einfügen, um sie lesbarer zu machen. Wenn verschiedene Selektoren dasselbe Element nur auf verschiedene Arten auswählen und deren Regeln darauf angewendet werden, können Sie diese Selektoren im Stylesheet nacheinander gruppieren.

+ +

Leerstellen

+ +

Leerstellen können Leerzeichen, Tabs und Leerzeilen sein. Sie können Leerstellen in Ihren Stylesheets einfügen, um sie lesbarer zu machen.

+ +

Im Kontext eines Seitenlayouts und -zusammenstellung sind Leerstellen die Teile einer Seite, die frei bleiben: Seitenränder, Zwischenräume und Platz zwischen Spalten und beschriebene Zeilen.

+ +

Ihre CSS Datei aus den Beispielen hat momentan eine Regel pro Zeile und fast nur das Minimum von Leerstellen. In einem komplexen Stylesheet würde diese Layout schwer zu lesen und somit auch schwer zu warten sein.

+ +

Das gewählte Layout ist normalerweise eine persönliche Vorliebe. Doch wenn Ihre Stylesheets Teil eines gemeinsammen Projekts sind, könnten diese Projekte eigene Konventionen für das Layout haben.

+ +
+
Beispiele
+ +

Einige Personen mögen das kompakte Layout, das wir bis jetzt verwendet haben, in dem eine Zeile nur geteilt wird, wenn sie sonst sehr lange sein würde:

+ +
.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+ +

Einige Personen bevorzugen, wenn pro Zeile ein Property-Wert-Paar steht:

+ +
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+ +

Einige Personen verwenden dann auch Einzüge — zwei oder vier Leerzeichen oder ein Tab sind gebräuchlich:

+ +
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+ +

Einige Personen richten alles vertikal an (aber solche Layouts sind schwer zu warten):

+ +
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+ +

Einige Personen verwenden verschieden viele Leerzeichen, um die Lesbarkeit zu verbessern.

+ +
.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+
+
+ +

Einige Personen verwenden Tabs für das Layout, während andere nur Leerzeichen verwenden.

+ +

Kommentare

+ +

Kommentare in CSS beginnen mit /* und enden mit */.

+ +

Sie können Kommentare in Stylesheets für Anmerkungen verwenden oder auch Teile vorübergehend für Testzwecke auskommentieren.

+ +

Um Teile eines Stylesheets auszukommentieren, platzieren Sie diesen Teil in einem Kommentar, damit der Webbrowser ihn nicht auswertet. Seien Sie mit dem Start und dem Ende eines Kommentars vorsichtig. Der Rest des Stylesheets muss weiterhin eine korrekte Syntax haben.

+ +
+
Beispiel
+ +
/* style for initial letter C in first paragraph */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+ +

Gruppierte Selektoren

+ +

Wenn mehrere Elemente denselben Style haben, können Sie eine Gruppe von Selektoren getrennt mit einem Komma spezifizieren. Die Deklaration wird dann auf alle selektierten Elemente angewendet.

+ +

An einer anderen Stelle in Ihrem Stylesheet können Sie einen einzelnen Selektor erneut spezifizieren, um zusätzlich individuelle Regeln dazu anzugeben.

+ +
+
Beispiel
+ +

Diese Regel macht {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} und {{ HTMLElement("h3") }} Elemente in derselben Farbe.

+ +

Es ist angenehm die Farbe an nur einer Stelle zu spezifizieren, denn dann kann sie später einfacher verändert werden.

+ +
/* color for headings */
+h1, h2, h3 {color: navy;}
+
+
+ +

Aktion: Kommentare hinzufügen und das Layout verbessern

+ +
    +
  1. Bearbeiten Sie Ihre CSS Datei und schreiben Sie die folgenden Regeln hinein (in beliebiger Reihenfolge): + 
    strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
    +
    2. +
  2. Machen Sie den Stylesheet lesbaren, in dem sie die Regeln in eine für Sie logische Reihenfolge bringen und Sie Ihrer Meinung nach sinnvolle Leerstellen und Kommentare einfügen.
    3. +
  3. Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser, um sicherzustellen, dass Ihre Änderungen keinen Einfluss auf die Anwendung des Stylesheets haben: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    4. +
+ +
+
Herausforderung
+ +

Kommentiere Sie nur Teile Ihres Stylesheets aus, damit nur der allererste Buchstabe in Ihrem Dokument rot ist:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

(Es gibt mehrere Wege dies zu erreichen.)

+ +
+
Mögliche Lösung
+Eine mögliche Lösung wäre das Auskommentieren der Regel .carrot: + +
/*.carrot {
+  color: orange;
+}*/
+Lösung ausblenden
+Sehen Sie sich die Lösung an.
+ +

Was kommt als Nächstes?

+ +

{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Textstyles") }}Ihr Beispiel-Stylesheet verwendet kursiven und unterstrichenen Text. Die nächste Seite beschreibt weitere Wege, um das Aussehen von Text in Ihrem Dokument zu spezifizieren.

diff --git a/files/de/learn/css/first_steps/how_css_works/index.html b/files/de/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..0641d048e4 --- /dev/null +++ b/files/de/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,113 @@ +--- +title: Was ist CSS +slug: Web/Guide/CSS/Getting_started/Was_ist_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +
{{CSSTutorialTOC}}
+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Einführung")}} Das erste Kapitel von CSS für Einsteiger erklärt kurz CSS. Sie werden in den nächsten Kapiteln ein simples Dokument zum Üben erstellen.

+ +

Was ist CSS

+ +

Cascading Style Sheets (CSS für "gestufte Gestaltungsbögen") ist eine Sprache, die definiert wie Dokumente dem Benutzer präsentiert werden.

+ +

Ein Dokument ist eine Ansammlung von Informationen (Texte, Bilder, …), die mit einer Auszeichnungssprache (Markup Language) strukturiert werden. In der Auszeichnungssprache wird angegeben, dass ein Text beispielsweise als Überschrift oder als Link dargestellt werden soll. Es wird jedoch NICHT angegeben, WIE eine Überschrift oder ein Link dargestellt werden sollen. Das genau macht CSS.

+ +

Ein solches Dokument einem Benutzer zu präsentieren bedeutet, es in einer lesbaren Form darzustellen. Browser wie Firefox, Chrome oder Internet Explorer sind dafür entworfen, Dokumente visuell zu präsentieren. Beispielsweise auf einem Computer Monitor, Beamer oder Drucker.

+ +
+

Beispiele

+ + +
+ +

In dieser Anleitung gibt es Boxen mit der Beschriftung Weitere Details, wie sie unten zu sehen ist. Solche Boxen stellen weiterführende Informationen und Links zu einem Thema bereit. Lesen Sie sie, folgen Sie den Links oder überspringen Sie diese Boxen und lesen Sie sie später.

+ +
+
Weitere Details
+ +

Ein Dokument ist nicht dasselbe wie eine Datei. Sie können aber selbstverständlich ein Dokument als Datei abspeichern.

+ +

Das Dokument, das Sie gerade lesen, ist nicht als Datei gespeichert. Wenn Ihr Browser diese Seite anfragt, durchsucht der Server eine Datenbank und generiert dieses Dokument indem er Teile daraus aus mehreren, verschiedenen Dateien zusammensetzt.

+ +

Sie werden dennoch in diesem Tutorial mit Dokumenten arbeiten, die in Dateien gespeichert sind.

+ +

Weiterführende Infromationen über Dokumente und Auszeichnungssprachen finden Sie hier:

+ + + + + + + + + + + + + + + + + + + + +
HTMLfür Webseiten
XMLallgemein für strukturierte Dokumente
SVGfür Grafiken
XULfür Userinterfaces in Mozilla
+ +

Im Teil II dieses Tutorials werden Sie Beispiele für diese Auszeichnungssprachen sehen.

+
+ +
+
Weitere Details
+ +

In korrekter CSS-Terminologie wird das Programm, das ein Dokument darstellt user agent (UA) genannt. Ein Browser ist nur eine Art eines UA. CSS ist nicht nur für Browser oder Präsentationen interessant, aber im Teil I dieses Tutorials werden Sie nur mit CSS in einem Browser arbeiten.

+ +

Für korrekte Definitionen der CSS-Terminologie sehen Sie unter Definitions in der CSS Spezifikation des World Wide Web Consortium (W3C) nach. Das ist eine internationale Gemeinschaft, die offene Standards für das Web definiert.

+
+ +

Action: Ein Dokument erstellen

+ +
<!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+ +

{{ LiveSampleLink('Action_Ein_Dokument_erstellen', 'Schauen Sie sich die Demo an') }}

+ +
    +
  1. Erstellen Sie einen neuen Ordner irgendwo auf Ihrem Computer, um die Übungen für dieses Tutorial abzuspeichern.
    2. +
  2. Öffnen Sie einen Texteditor und erstellen Sie eine neue Textdatei. Diese Datei wird das Dokument für die nächsten Übungen enthalten.
    3. +
  3. Kopieren Sie den folgenden HTML-Code in Ihre Datei, und speichern Sie diese unter dem Namen doc1.html
    4. +
  4. Öffnen Sie in Ihrem Browser ein neues Fenster oder einen neuen Tab und dann öffnen Sie darin die Datei, die Sie gerade gespeichert haben. Sie sollten dann folgenden Text mit fetten Anfangsbuchstaben sehen:
    5. +
+ + + + + + + +
Cascading Style Sheets
+ +

Möglicherweise sieht der Text in Ihrem Browser etwas anders aus als hier dargestellt. Das liegt daran, dass manche der Einstellungen in Ihrem Browser anders sein können, als wir sie hier verwendet haben. Das tut aber vorerst nichts zur Sache.

+ +

Was nun?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Wofür CSS?")}}Ihr Dokument verwendet vorerst noch kein CSS. Im nächsten Abschnitt werden Sie CSS verwenden um die Darstellung Ihres Dokumentes zu verändern.

diff --git a/files/de/learn/css/styling_text/fundamentals/index.html b/files/de/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..7a3a40f6e0 --- /dev/null +++ b/files/de/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,152 @@ +--- +title: Textstyles +slug: Web/Guide/CSS/Getting_started/Textstyles +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}Das ist der siebte Teil des CSS Getting Started Tutorials. Er enthält weitere Beispiele für Textstyles. Sie verändern Ihren Stylesheet, um verschiedene Schriftarten zu verwenden.

+ +

Information: Textstyles

+ +

CSS besitzt verschiedene Eigenschaften, um Text zu gestalten.

+ +

Es gibt zur Gemütlichkeit eine Eigenschaft {{ cssxref("font") }}, mit der sich verschiedene Aspekte auf einmal definieren lassen, wie zum Beispiel:

+ + + +
+
Beispiel
+ +
p {
+  font: italic 75%/125% "Comic Sans MS", cursive;
+}
+
+ +

Diese Regel setzt verschiedene Eigenschaften der Schrift und macht alle Absätze kursiv.

+ +

Die Schriftgröße wird auf drei Viertel der Größe jedes Absatzelements gesetzt und die Zeilenhöhe wird auf 125% (ein wenig größer als normal) gesetzt.

+ +

Die Art der Schrift wird auf auf Comic Sans MS gesetzt. Wenn aber die Schriftart im Webbrowser nicht verfügbar ist, wird die standardmäßig kursiv (handgeschriebene) Art verwendet.

+ +

Diese Regel hat den Nebeneffekt, dass alle dicken und kleinen Anfangsbuchstaben auf normal zurückgesetzt werden.

+
+ +

Schriftarten

+ +

Sie können nicht vorhersagen welche Schriftarten der Leser Ihres Dokument installiert hat. Deshalb ist es eine gute Idee eine Liste von Alternativen in bevorzugter Reihenfolge anzugeben.

+ +

Beenden Sie die Liste mit einer eingebauten Standardschriftart: serif, sans-serif, cursive, fantasy oder monospace.

+ +

Wenn die Schriftart ein Feature des Dokuments nicht unterstützt, kann der Webbrowser eine andere Schriftart dafür auswählen. Das Dokument könnte zum Beispiel spezielle Zeichen enthalten, die von der Schriftart nicht unterstützt werden. Wenn der Webbrowser eine andere Schriftart finden kann, die diese Zeichen unterstützt, verwendet er diese.

+ +

Um nur Schriftart anzugeben, können Sie die {{ cssxref("font-family") }} Eigenschaft verwenden.

+ +

Schriftgrößen

+ +

Benutzer des Webbrowsers können die standardmäßige Schriftgröße überschreiben oder die Textgröße während dem Lesen ändern. Deshalb macht es überall wo es geht Sinn eine relative Größe zu verwenden.

+ +

Sie können die bereits vordefinierten Werte wie small, medium und large verwenden. Sie können aber auch relative Werte zur Schriftgröße des Elternelements wie smaller, larger, 150% oder 1.5em verwenden. Ein "em" ist äquivalent zu der Breite des Buchstabens "m" (für die Schriftgröße des Elternelements). Damit sind 1.5em eineinhalb Mal so groß als die Schrift im Elternelement.

+ +

Wenn nötig können Sie eine genaue Größe wie 14px (14 Pixel) für einen Bildschirm oder 14pt (14 Punkt) für einen Drucker angeben. Das ist aber für Benutzer mit einer Sehbehinderung nicht zugänglich, da sie damit die Schriftgröße nicht mehr ändern können. Eine zugänglichere Strategie wäre, eine bereits vordefinierten Wert wie medium auf dem höchsten Element im Dokument zu setzen und dann relative Größen auf allen Kindelementen zu verwenden.

+ +

Um nur die Schriftgröße anzugeben, können Sie die {{ cssxref("font-size") }} Eigenschaft verwenden.

+ +

Zeilenhöhe

+ +

Die Zeilenhöhe gibt den Abstand zwischen Zeilen an. Wenn Ihr Dokument lange Absätze über viele Zeilen hat, kann ein größerer Zeilenabstand als normal besonders bei einer kleinen Schriftgröße einfacher zum Lesen zu sein.

+ +

Um nur die Zeilenhöhe anzugeben, können Sie die {{ cssxref("line-height") }} Eigenschaft verwenden.

+ +

Textdekoration

+ +

Die separate {{ cssxref("text-decoration") }} Eigenschaft kann andere Styles wie underline oder line-through definieren. Sie können sie auf none setzen, um explizit jede Textdekoration zu entfernen.

+ +

Andere Eigenschaften

+ +

Um nur kursiv anzugeben, verwenden Sie  {{ cssxref("font-style") }}: italic;
+ Um nur fettgedruckt anzugeben, verwenden Sie {{ cssxref("font-weight") }}: bold;
+ Um nur kleine Großbuchstaben anzugeben, verwenden Sie  {{ cssxref("font-variant") }}: small-caps;

+ +

Um eine Eigenschaft einzeln abzuschalten, können Sie den Wert normal oder inherit angeben.

+ +
+
Mehr Details
+ +

Sie können Textstyles auf viele andere Wege angeben.

+ +

Einige der hier erwähnten Eigenschaften haben zum Beispiel andere Werte, die Sie auch verwenden können.

+ +

Vermeiden Sie in einem komplexen Stylesheet die abgekürzte font Eigenschaft, da sie Nebeneffekte hat (setzt andere individuelle Eigenschaften zurück).

+ +

Für alle Details von Eigenschaften, die mit Schriften zu tun haben, gehen Sie bitte auf Fonts in der CSS Spezifikation. Die kompletten Details zur Textdekoration finden Sie unter Text.

+ +

Wenn Sie nicht von den installierten Schriftarten auf dem System des Benutzers abhängig sein wollen, können Sie {{ cssxref("@font-face") }} verwenden, um einen Online Font anzugeben. Dazu muss der Webbrowser des Benutzers diese Regel aber auch unterstützen.

+
+ +

Aktion: Schriftart angeben

+ +

Für ein einfaches Dokument können sie eine Schrift auf dem {{ HTMLElement("body") }} Element angeben und der Rest des Dokuments erbt diese Regel.

+ +
    +
  1. Bearbeiten Sie Ihre CSS Datei.
    2. +
  2. Fügen sie die folgendene Regel hinzu, um die Schrift im gesamten Dokument zu bestimmen. Der Anfang der CSS Datei ist eine logische Stelle dafür, aber es hat auch an anderen Stellen in der Datei denselben Effekt: + 
    body {
+  font: 16px "Comic Sans MS", cursive;
+}
+
    +
    3. +
  3. Kommentieren sie Regel und fügen Sie nach Ihrem Geschmak Zeilenumbrüche und Leerzeichen hinzu.
    4. +
  4. Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser um die Änderung zu sehen. Wenn Sie die Schrift Comic Sans MS oder eine andere Schrift, welche kursiv nicht unterstützt, auf Ihren Computer haben, wählt Ihr Webbrowser eine andere Schriftart für den kursiven Text in der ersten Zeile aus: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    5. +
  5. Wählen Sie Ansicht > Schirftgröße > Vergrößern (oder Ansicht > Zoom > Vergrößern) im Menü Ihres Webbrowsers aus. Obwohl Sie 16 Pixel im Sil angegeben haben, kann der Benutzer die Schriftgröße in der Ansicht ändern.
    6. +
+ +
+
Herausforderung
+ +

Machen Sie alle sechs Anfangsbuchstaben zweimal so groß in der serif Standardschrift vom Webbrowser ohne etwas anderes zu verändern:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +
+
Mögliche Lösung
+ +

Fügen Sie die folgende Style Deklaration zur strong Regel hinzu:

+ +
  font: 200% serif;
+
+Wenn Sie getrennte Deklarationen für font-size und font-family verwenden, dann wird die font-style Einstellung auf dem ersten Absatz nicht überschrieben. + +

 

+Hide solution
+Sehen Sie sich die Lösung an.
+ +

Was kommt als Nächstes?

+ +

{{nextPage("/de/docs/Web/Guide/CSS/Getting_started/Farbe", "Farbe")}}Ihr Beispieldokument verwendet bereits verschiedene benannte Farben. Der nächste Teil listet die Namen der Standardfarben auf und erklärt wie Sie eigene Farben definieren können.

-- cgit v1.2.3-54-g00ecf