diff options
Diffstat (limited to 'files/de/learn/css')
| -rw-r--r-- | files/de/learn/css/building_blocks/index.html | 87 | ||||
| -rw-r--r-- | files/de/learn/css/building_blocks/organizing/index.html | 374 | ||||
| -rw-r--r-- | files/de/learn/css/building_blocks/werten_einheiten/index.html | 394 | ||||
| -rw-r--r-- | files/de/learn/css/css_layout/flexbox/index.html | 352 | ||||
| -rw-r--r-- | files/de/learn/css/css_layout/index.html | 88 | ||||
| -rw-r--r-- | files/de/learn/css/first_steps/index.html | 54 | ||||
| -rw-r--r-- | files/de/learn/css/index.html | 59 | ||||
| -rw-r--r-- | files/de/learn/css/styling_text/index.html | 65 |
8 files changed, 1473 insertions, 0 deletions
diff --git a/files/de/learn/css/building_blocks/index.html b/files/de/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..0924df55f5 --- /dev/null +++ b/files/de/learn/css/building_blocks/index.html @@ -0,0 +1,87 @@ +--- +title: CSS building blocks +slug: Learn/CSS/Building_blocks +tags: + - Beginner + - CSS + - Learn +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Dieses Modul betreibt ab <a href="/de/docs/Learn/CSS/First_steps">CSS Ersten Schritte</a> Endung — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.</p> + +<p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have:</p> + +<ol> + <li>Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)</li> + <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> + <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> + <li>An understanding of the basics of CSS, as discussed in the <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> module.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></dt> + <dd>The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></dt> + <dd>There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows: + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></dt> + <dd>Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson we will take a proper look at the CSS <em>Box Model</em>, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></dt> + <dd>In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></dt> + <dd>In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></dt> + <dd>In this lesson we will look at another important concept in CSS — <strong>overflow</strong>. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide you will learn what it is and how to manage it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a></dt> + <dd>Every property used in CSS has a value or set of values that are allowed for that property. In this lesson we will take a look at some of the most common values and units in use.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></dt> + <dd>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></dt> + <dd>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></dt> + <dd>Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></dt> + <dd>Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></dt> + <dd>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>Want to test your CSS skills? The following assessments will test your understanding of the CSS covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></dt> + <dd>This assessment tests your understanding of basic syntax, selectors, specificity, box model, and more.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></dt> + <dd>If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we'll challenge you to create an online template to achieve such a look.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></dt> + <dd>Here you'll get some practice in using background and border styling to create an eye-catching box.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced styling effects</a></dt> + <dd>This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.</dd> +</dl> diff --git a/files/de/learn/css/building_blocks/organizing/index.html b/files/de/learn/css/building_blocks/organizing/index.html new file mode 100644 index 0000000000..43362d1617 --- /dev/null +++ b/files/de/learn/css/building_blocks/organizing/index.html @@ -0,0 +1,374 @@ +--- +title: Organizing your CSS +slug: Learn/CSS/Building_blocks/Organizing +tags: + - Anfänger + - CSS + - Formatierung + - Kommentare + - Lernen + - Methoden + - Organisieren + - Stlyeguide + - post-processor + - pre-processor +translation_of: Learn/CSS/Building_blocks/Organizing +--- +<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>Wenn Sie anfangen an größeren Stylesheets und großen Projekten zu arbeiten, werden Sie herausfinden, dass es eine echte Herausforderung sein kann, eine sehr umfangreiche CSS-Datei instand zu halten. In diesem Artikel werden wir einen kurzen Blick werfen auf einige bewährte Methoden, CSS so zu schreiben, dass es leicht zu pflegen ist. Einige der Lösungen werden Sie auch bei anderen finden, die damit die Wartbarkeit verbessern.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td> + <p>Grundlegende Computerkenntnisse, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">installierte Basissoftware</a>, Grundkenntnisse im <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Umgang mit Dateien</a>, HTML-Grundlagen (lesen Sie <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a>) und eine Vorstellung davon, wie CSS funktioniert (lesen Sie <a href="/en-US/docs/Learn/CSS/First_steps">erste Schritte mit CSS</a>).</p> + </td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Hier finden Sie einige Tipps und bewährte Verfahren für die Organisation von Stylesheets sowie einige allgemein gebräuchliche Namenskonventionen und Tools, die bei der Organisation von CSS und der Teamarbeit helfen.</td> + </tr> + </tbody> +</table> + +<h2 id="Tipps_um_Ihr_CSS_übersichtlich_zu_halten">Tipps, um Ihr CSS übersichtlich zu halten</h2> + +<p>Hier finden Sie einige allgemeine Vorschläge, wie Sie Ihre Stylsheet organisiert und übersichtlich halten können.</p> + +<h3 id="Gibt_es_einen_Coding_Style_Guide_in_Ihrem_Projekt">Gibt es einen Coding Style Guide in Ihrem Projekt?</h3> + +<p>Wenn Sie im Team an einem bestehenden Projekt arbeiten, sollten Sie als erstes abklären, ob das Projekt einen Style Guide für CSS hat. Der Style Guide des Teams sollte immer Priorität vor Ihren persönlichen Vorlieben haben. Oft gibt es nicht den einen richtigen Weg etwas umzusetzen, wichtig aber ist Konsistenz.</p> + +<p>Sehen Sie sich beispielsweise die <a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">CSS-Richtlinien für MDN Codebeispiele</a> an.</p> + +<h3 id="Bleiben_Sie_konsistent">Bleiben Sie konsistent</h3> + +<p>Wenn Sie die Regeln für das Projekt festlegen oder alleine arbeiten, dann ist es am wichtigsten, die Dinge konsistent zu halten. Konsistenz kann auf alle möglichen Arten angewendet werden, wie z.B. die Verwendung derselben Namenskonventionen für Klassen, die Wahl einer Methode zur Beschreibung von Farbe oder die Beibehaltung einer konsistenten Formatierung (werden Sie z.B. Tabulatoren oder Leerzeichen verwenden, um Ihren Code einzurücken? Wenn Leerzeichen, wie viele Leerzeichen?)</p> + +<p>Ein Regelsystem, das Sie immer befolgen, reduziert den mentalen Aufwand beim Schreiben von CSS, da einige der Entscheidungen bereits getroffen sind.</p> + +<h3 id="CSS_lesbar_formatieren">CSS lesbar formatieren</h3> + +<p>Es gibt unterschiedliche Arten CSS zu formatieren. Einige Entwickler*innen schreiben alle Regeln in eine einzige Zeile, wie hier:</p> + +<pre class="brush: css notranslate">.box { background-color: #567895; } +h2 { background-color: black; color: white; }</pre> + +<p>Andere Entwickler*innen schreiben lieber jede Regel in eine neue Zeile:</p> + +<pre class="brush: css notranslate">.box { + background-color: #567895; +} + +h2 { + background-color: black; + color: white; +}</pre> + +<p>Dem CSS ist es egal, welche dieser Arten Sie nutzen. Wir persönlich finden, dass es besser lesbar ist, jede Eigenschaft und jedes Wertepaar in einer neuen Zeile.</p> + +<h3 id="CSS_kommentieren">CSS kommentieren</h3> + +<p>Kommentare in Stylesheets zu schreiben hilft jeder*m künftigen*m Entwickler*in mit Ihrem Stylesheet zu arbeiten. Aber es wird auch Ihnen helfen, wenn Sie nach einer Pause wieder an dem Projekt arbeiten.</p> + +<pre class="brush: css notranslate">/* This is a CSS comment +It can be broken onto multiple lines. */</pre> + +<p>Ein guter Tipp ist es, auch zwischen logischen Abschnitten in Ihrem Stylesheet einen Block von Kommentaren einzufügen, um verschiedene Abschnitte beim Durchsuchen schnell zu finden, oder um Ihnen sogar etwas zum Suchen zu geben, damit Sie direkt in diesen Teil des CSS springen können. Wenn Sie eine Zeichenfolge verwenden, die nicht im Code erscheint, können Sie von Abschnitt zu Abschnitt springen, indem Sie danach suchen - unten haben wir <code>||</code> verwendet.</p> + +<pre class="brush: css notranslate">/* || General styles */ + +... + +/* || Typography */ + +... + +/* || Header and Main Navigation */ + +... + +</pre> + +<p>Sie müssen nicht jede einzelne Regel in Ihrem CSS kommentieren, da vieles davon selbsterklärend sein wird. Was Sie kommentieren sollten, sind die Dinge, bei denen Sie aus einem bestimmten Grund eine bestimmte Entscheidung getroffen haben.</p> + +<p>Möglicherweise haben Sie eine CSS-Eigenschaft auf eine bestimmte Art und Weise verwendet, um z.B. Inkompatibilitäten älterer Browser zu umgehen:</p> + +<pre class="brush: css notranslate">.box { + background-color: red; /* Fallback für ältere Browser, die keine Gradients unterstützen. */ + background-image: linear-gradient(to right, #ff0000, #aa0000); +} +</pre> + +<p>Vielleicht haben Sie ein Tutorial befolgt, um etwas zu erreichen, und das CSS ist ein nicht selbsterklärend. In diesem Fall könnten Sie die URL des Tutorials zu den Kommentaren hinzufügen. Sie werden sich freuen, wenn Sie in einem Jahr oder so zu diesem Projekt zurückkehren und sich vage daran erinnern können, dass es ein großartiges Tutorial zu diesem Ding gab, aber wo ist es?</p> + +<h3 id="Logische_Abschnitte_im_Stylesheet_schaffen">Logische Abschnitte im Stylesheet schaffen</h3> + +<p>Es ist eine gute Idee, alle häufig verwendeten Stile zuerst im Stylesheet zu haben. Das bedeutet alle Stile, die im Allgemeinen gelten, es sei denn, Sie machen etwas Besonderes mit diesem Element. In der Regel werden Sie Regeln dafür aufgestellt haben:</p> + +<ul> + <li><code>body</code></li> + <li><code>p</code></li> + <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li> + <li><code>ul</code> and <code>ol</code></li> + <li>The <code>table</code> properties</li> + <li>Links</li> +</ul> + +<p>In diesem Abschnitt des Stylesheets stellen wir das Standard-Styling für den Schrifttyp auf der Site zur Verfügung, richten ein Standard-Styling für Datentabellen und Listen ein und so weiter.</p> + +<pre class="brush: css notranslate">/* || ALLGEMEINE STYLES */ + +body { ... } + +h1, h2, h3, h4 { ... } + +ul { ... } + +blockquote { ... } +</pre> + +<p>Nach diesem Abschnitt könnten wir einige Hilfsklassen definieren, z.B. eine Klasse, die den Standardlistenstil für Listen entfernt, die wir als Flex Items oder auf andere Weise anzeigen wollen. Wenn Sie ein paar Dinge haben, von denen Sie wissen, dass Sie sie auf viele verschiedene Elemente anwenden wollen, können sie in diesem Abschnitt behandelt werden.</p> + +<pre class="brush: css notranslate">/* || HILFSKLASSEN */ + +.nobullets { + list-style: none; + margin: 0; + padding: 0; +} + +... + +</pre> + +<p>Dann können wir alles hinzufügen, was überall auf der Website verwendet wird. Das können Dinge wie das grundlegende Seitenlayout, die Kopfzeile, die Gestaltung der Navigation und so weiter sein.</p> + +<pre class="brush: css notranslate">/* || STILE, DIE AUF DER GANZEN SEITE VERWENDET WERDEN */ + +.main-nav { ... } + +.logo { ... } +</pre> + +<p>Schließlich werden wir CSS für bestimmte Dinge aufnehmen, aufgeschlüsselt nach dem Kontext, der Seite oder sogar der Komponente, in der sie verwendet werden.</p> + +<pre class="brush: css notranslate">/* || SHOP SEITEN */ + +.product-listing { ... } + +.product-box { ... } +</pre> + +<p>Indem wir die Dinge auf diese Weise anordnen, haben wir zumindest eine Vorstellung davon, in welchem Teil des Stylesheets wir nach etwas suchen werden, das wir ändern wollen.</p> + +<h3 id="Allzu_spezifische_Selektoren_vermeiden">Allzu spezifische Selektoren vermeiden</h3> + +<p>Wenn Sie sehr spezifische Selektoren erstellen, werden Sie oft feststellen, dass Sie Teile Ihres CSS duplizieren müssen, um die gleichen Regeln auf ein anderes Element anzuwenden. Zum Beispiel könnten Sie etwas wie den unten stehenden Selektor haben, der die Regel auf ein <code><p></code> mit der Klasse <code>box</code> innerhalb eines <code><article></code> mit der Klasse <code>main</code> anwendet.</p> + +<pre class="brush: css notranslate">article.main p.box { + border: 1px solid #ccc; +}</pre> + +<p>Wenn Sie nun die gleiche Regel außerhalb von <code>main</code> oder bei etwas anderem als <code><p></code> anwenden möchten, müssten Sie einen weiteren Selektor zu dieser Regel hinzufügen oder ein ganz neues Regelset erstellen. Stattdessen sollten Sie den Selektor <code>.box</code> verwenden, damit die Regel auf alle Elemente mit der Klasse <code>box</code> angewendet wird:</p> + +<pre class="brush: css notranslate">.box { + border: 1px solid #ccc; +}</pre> + +<p>In einigen Fällen kann es sinnvoll sein, eine höhere Spezifizität zu verwenden. Das wird aber eher die Ausnahme als die übliche Praxis sein.</p> + +<h3 id="Große_Stylesheets_in_mehrere_kleine_aufteilen">Große Stylesheets in mehrere kleine aufteilen</h3> + +<p>Insbesondere in Fällen, in denen Sie sehr unterschiedliche Stile für verschiedene Teile der Website haben, sollten Sie vielleicht ein Stylesheet haben, das alle globalen Regeln enthält, und dann kleinere, die die spezifischen Regeln enthalten, die für diese Abschnitte benötigt werden. Sie können von einer Seite aus auf mehrere Stylesheets verweisen, und es gelten die normalen Regeln der Kaskade, wobei Regeln in später verknüpften Stylesheets auf Regeln in früher verknüpften Stylesheets folgen.</p> + +<p>Zum Beispiel könnten wir einen Online-Shop als Teil der Website haben, wobei viel CSS nur für das Styling der Produktauflistungen und Formulare verwendet wird, die für den Shop benötigt werden. Es wäre sinnvoll, diese Dinge in einem anderen Stylesheet zu haben, auf das nur auf den Shop-Seiten verwiesen wird.</p> + +<p>Dies kann die Organisation Ihres CSS erleichtern und bedeutet auch, dass Sie weniger Situationen haben werden, in denen zwei Personen gleichzeitig am selben Stylesheet arbeiten müssen, was zu Konflikten bei der Quellcodekontrolle führt, wenn mehrere Personen an dem CSS arbeiten.</p> + +<h2 id="Andere_hilfreiche_Tools">Andere hilfreiche Tools</h2> + +<p>CSS an sich hat nicht viel an eingebauter Struktur zu bieten, daher müssen Sie die Arbeit erledigen, um Konsistenz und Regeln für die Erstellung von CSS zu schaffen. Die Web-Community hat auch verschiedene Tools und Ansätze entwickelt, die Ihnen bei der Verwaltung größerer CSS-Projekte helfen können. Da sie für Sie bei der Untersuchung hilfreich sein können und Sie bei der Arbeit mit anderen Personen wahrscheinlich auf diese Dinge stoßen werden, haben wir einen kurzen Leitfaden zu einigen davon beigefügt.</p> + +<h3 id="CSS_Verfahren">CSS Verfahren</h3> + +<p>Anstatt sich eigene Regeln für die Erstellung von CSS ausdenken zu müssen, können Sie einen der Ansätze zu übernehmen, die bereits von der Community entworfen und in vielen Projekten getestet wurden. Bei diesen Methoden handelt es sich im Wesentlichen um CSS-Codierungsleitfäden, die einen sehr strukturierten Ansatz zum Schreiben und Organisieren von CSS verfolgen. In der Regel führen sie zu einer umfassenderen Verwendung von CSS, als wenn Sie jeden Selektor nach einem eigenen Regelsatz für dieses Projekt schreiben und optimieren würden.</p> + +<p>Da viele dieser Systeme sehr weit verbreitet sind, ist es wahrscheinlicher, dass andere Entwickler*innen den von Ihnen verwendeten Ansatz verstehen und ihr CSS auf die gleiche Art und Weise schreiben können, anstatt Ihre persönliche Methodik von Grund auf neu erarbeiten zu müssen.</p> + +<h4 id="OOCSS">OOCSS</h4> + +<p>Die meisten Ansätze, denen Sie begegnen werden, beruhen auf dem Konzept des objektorientierten CSS (Object Oriented CSS, OOCSS), ein Ansatz, der populär wurde durch <a href="https://github.com/stubbornella/oocss/wiki">die Arbeiten von Nicole Sullivan</a>. Die Grundidee von OOCSS besteht darin, Ihr CSS in wiederverwendbare Objekte zu zerlegen, die überall auf Ihrer Website verwendet werden können. Das Standardbeispiel für OOCSS ist das als <a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a> beschriebene Modell. Dabei handelt es sich um ein Modell mit einem Bild, einem Video oder einem anderen Element fester Größe auf der einen Seite und flexiblem Inhalt auf der anderen Seite. Es ist ein Modell, das wir überall auf Websites für Kommentare, Auflistungen und so weiter sehen.</p> + +<p>Wenn Sie keinen OOCSS-Ansatz verfolgen, können Sie für die verschiedenen Stellen, an denen dieses Modell verwendet wird, benutzerdefiniertes CSS erstellen, z.B. eine Klasse namens <code>comment</code> mit einem Bündel von Regeln für die Komponententeile, dann eine Klasse namens <code>list-item</code> mit fast denselben Regeln wie die Klasse <code>comment</code>, abgesehen von einigen winzigen Unterschieden. Der Unterschied zwischen diesen beiden Komponenten besteht darin, dass das Listenelement einen unteren Rand hat und Bilder in Kommentaren einen Rand haben, während Bilder von Listenelementen keinen Rand haben.</p> + +<pre class="brush: css notranslate">.comment { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.comment img { + border: 1px solid grey; +} + +.comment .content { + font-size: .8rem; +} + +.list-item { + display: grid; + grid-template-columns: 1fr 3fr; + border-bottom: 1px solid grey; +} + +.list-item .content { + font-size: .8rem; +}</pre> + +<p>In OOCSS würden Sie ein Schema namens <code>media</code> erstellen, das das gesamte gemeinsame CSS für beide Schemata hat - eine Basisklasse für Dinge, die im Allgemeinen die Form des Medienobjekts darstellen. Dann fügen wir eine zusätzliche Klasse hinzu, die sich mit diesen winzigen Unterschieden befasst und so dieses Styling auf spezifische Weise erweitert.</p> + +<pre class="brush: css notranslate">.media { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.media .content { + font-size: .8rem; +} + +.comment img { + border: 1px solid grey; +} + +.list-item { + border-bottom: 1px solid grey; +} </pre> + +<p>In Ihrem HTML-Code müsste für den Kommentar sowohl die Medien- als auch die Kommentarklasse <code>(media</code> und <code>comment</code>) verwendet werden:</p> + +<pre class="brush: html notranslate"><div class="media comment"> + <img /> + <div class="content"></div> +</div> +</pre> + +<p>Auf das Listenelement würde man die Klassen <code>media</code> und <code>list-item</code> anwenden:</p> + +<pre class="brush: html notranslate"><ul> + <li class="media list-item"> + <img /> + <div class="content"></div> + </li> +</ul></pre> + +<p>Die Arbeit, die Nicole Sullivan geleistet hat, um diesen Ansatz zu beschreiben und zu fördern, bedeutet, dass selbst Personen, die heute nicht strikt einem OOCSS-Ansatz folgen, CSS im Allgemeinen auf diese Weise wiederverwenden werden - es hat sich in unserem Verständnis als eine gute Vorgehensweise im Allgemeinen etabliert.</p> + +<h4 id="BEM">BEM</h4> + +<p>BEM stands for Block Element Modifier. In BEM a block is a standalone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognise code that uses BEM due to the extensive use of dashes and underscores in the CSS classes. For example, look at the classes applied to this HTML from the page about <a href="http://getbem.com/naming/">BEM Naming conventions</a>:</p> + +<pre class="brush: html notranslate"><form class="form form--theme-xmas form--simple"> + <input class="form__input" type="text" /> + <input + class="form__submit form__submit--disabled" + type="submit" /> +</form></pre> + +<p>The additional classes are similar to those used in the OOCSS example, however they use the strict naming conventions of BEM.</p> + +<p>BEM is widely used in larger web projects and many people write their CSS in this way. It is likely that you will come across examples, even in tutorials, that use BEM syntax, without mentioning why the CSS is structured in such a way.</p> + +<p>To read more about the system read <a href="https://css-tricks.com/bem-101/">BEM 101</a> on CSS Tricks.</p> + +<h4 id="Other_common_systems">Other common systems</h4> + +<p>There are a large number of these systems in use. Other popular approaches include <a href="http://smacss.com/">Scalable and Modular Architecture for CSS (SMACSS)</a>, created by Jonathan Snook, <a href="https://itcss.io/">ITCSS</a> from Harry Roberts, and <a href="https://acss.io/">Atomic CSS (ACSS)</a>, originally created by Yahoo!. If you come across a project that uses one of these approaches then the advantage is that you will be able to search and find many articles and guides to help you understand how to code in the same style.</p> + +<p>The disadvantage of using such a system is that they can seem overly complex, especially for smaller projects.</p> + +<h3 id="Build_systems_for_CSS">Build systems for CSS</h3> + +<p>Another way to organise CSS is to take advantage of some of the tooling that is available for front-end developers, which allows you to take a slightly more programmatic approach to writing CSS. There are a number of tools which we refer to as <em>pre-processors</em> and <em>post-processors</em>. A pre-processor runs over your raw files and turns them into a stylesheet, whereas a post-processor takes your finished stylesheet and does something to it — perhaps to optimize it in order that it will load faster.</p> + +<p>Using any of these tools will require that your development environment can run the scripts that do the pre and post-processing. Many code editors can do this for you, or you can install command line tools to help.</p> + +<p>The most popular pre-processor is <a href="https://sass-lang.com/">Sass</a>. This is not a Sass tutorial, so I will briefly explain a couple of the things that Sass can do, which are really helpful in terms of organisation, even if you don't use any of the other Sass features. If you want to learn a lot more about Sass, start with the <a href="https://sass-lang.com/guide">Sass basics</a> article, then move on to their other documentation.</p> + +<h4 id="Defining_variables">Defining variables</h4> + +<p>CSS now has native <a href="/en-US/docs/Web/CSS/Using_CSS_custom_properties">custom properties</a>, making this feature increasingly less important, however one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then use that variable around the project. This means that if you realise you have used the wrong shade of blue, you only need change it in one place.</p> + +<p>If we created a variable called <code>$base-color</code> as in the first line below, we could then use it through the stylesheet anywhere that required that color.</p> + +<pre class="brush: css notranslate"><code>$base-color: #c6538c; + +.alert { + border: 1px solid $base-color; +}</code></pre> + +<p>Once compiled to CSS, you would end up with the following CSS in the final stylesheet.</p> + +<pre class="brush: css notranslate"><code>.alert { + border: 1px solid #c6538c; +}</code></pre> + +<h4 id="Compiling_component_stylesheets">Compiling component stylesheets</h4> + +<p>I mentioned above that one way to organise CSS is to break down stylesheets into smaller stylesheets. When using Sass you can take this to another level and have lots of very small stylesheets — even going as far as having a separate stylesheet for each component. By using the include functionality in Sass (partials) these can then all be compiled together into one, or a small number of stylesheets to actually link into your website.</p> + +<p>So for example, with <a href="https://sass-lang.com/documentation/at-rules/use#partials">partials</a>, you could have several style files inside a directory, say <code>foundation/_code.scss</code>, <code>foundation/_lists.scss</code>, <code>foundation/_footer.scss</code>, <code>foundation/_links.scss</code>, etc., then use the Sass <code>@use</code> role to load them into other stylesheets:</p> + +<pre class="brush: css notranslate">// foundation/_index.sass +@use 'code' +@use 'lists' +@use 'footer' +@use 'links'</pre> + +<p>If the partials are all loaded into an index file, as implied above, you can then load that entire directory into another stylesheet in one go:</p> + +<pre class="brush: css notranslate">// style.sass +@use 'foundation'</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: A simple way to try out Sass is to use <a href="https://codepen.io">CodePen</a> — you can enable Sass for your CSS in the Settings for a Pen, and CodePen will then run the Sass parser for you, in order that you can see the resulting webpage with regular CSS applied. Sometimes you will find that CSS tutorials have used Sass rather than plain CSS in their CodePen demos, so it is handy to know a little bit about it.</p> +</div> + +<h4 id="Post-processing_for_optimization">Post-processing for optimization</h4> + +<p>If you are concerned about adding size to your stylesheets by adding a lot of additional comments and whitespace for example, then a post-processing step could be to optimize the CSS by stripping out anything unnecessary in the production version. An example of a post-processor solution for doing this would be <a href="https://cssnano.co/">cssnano</a>.</p> + +<h2 id="Wrapping_up">Wrapping up</h2> + +<p>This is the final part of our Learning CSS Guide, and as you can see there are many ways in which your exploration of CSS can continue from this point.</p> + +<p>To learn more about layout in CSS, see the <a href="/en-US/docs/Learn/CSS/CSS_layout">Learn CSS Layout</a> section.</p> + +<p>You should also now have the skills to explore the rest of the <a href="/en-US/docs/Web/CSS">MDN CSS</a> material. You can look up properties and values, explore our <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS Cookbook</a> for patterns to use, and read more in some of the specific guides such as our <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a>.</p> + +<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> diff --git a/files/de/learn/css/building_blocks/werten_einheiten/index.html b/files/de/learn/css/building_blocks/werten_einheiten/index.html new file mode 100644 index 0000000000..8c45b5ba69 --- /dev/null +++ b/files/de/learn/css/building_blocks/werten_einheiten/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 +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To learn about the different types of values and units used in CSS properties.</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_CSS_value">What is a CSS value?</h2> + +<p>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 <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> or <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>. When you see the value <code><color></code> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> reference page.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: You'll also see CSS values referred to as <em>data types</em>. 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.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the <a href="/en-US/docs/Web/CSS/color_value"><color></a> 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.</p> +</div> + +<p>In the following example we have set the color of our heading using a keyword, and the background using the <code>rgb()</code> function:</p> + +<pre class="brush: css"><code>h1 { + color: black; + background-color: rgb(197,93,161); +} </code> +</pre> + +<p>A value in CSS is a way to define a collection of allowable sub-values. This means that if you see <code><color></code> as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, <code>rgb()</code> functions, etc. You can use <em>any</em> available <code><color></code> 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 <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> you will see that the browser compatibility section lists different types of color value and support for them.</p> + +<p>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.</p> + +<h2 id="Numbers_lengths_and_percentages">Numbers, lengths, and percentages</h2> + +<p>There are various numeric data types that you might find yourself using in CSS. The following are all classed as numeric:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Data type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/integer"><integer></a></code></td> + <td>An <code><integer></code> is a whole number such as <code>1024</code> or <code>-55</code>.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/number"><number></a></code></td> + <td>A <code><number></code> represents a decimal number — it may or may not have a decimal point with a fractional component, for example <code>0.255</code>, <code>128</code>, or <code>-1.2</code>.</td> + </tr> + <tr> + <td><code><dimension></code></td> + <td>A <code><dimension></code> is a <code><number></code> with a unit attached to it, for example <code>45deg</code>, <code>5s</code>, or <code>10px</code>. <code><dimension></code> is an umbrella category that includes the <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>, <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/en-US/docs/Web/CSS/time"><time></a></code>, and <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code> types<a href="/en-US/docs/Web/CSS/resolution">.</a></td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> + <td>A <code><percentage></code> represents a fraction of some other value, for example <code>50%</code>. Percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length.</td> + </tr> + </tbody> +</table> + +<h3 id="Lengths">Lengths</h3> + +<p>The numeric type you will come across most frequently is <code><length></code>, for example <code>10px</code> (pixels) or <code>30em</code>. 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.</p> + +<h4 id="Absolute_length_units">Absolute length units</h4> + +<p>The following are all <strong>absolute</strong> length units — they are not relative to anything else and are generally considered to always be the same size.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Name</th> + <th scope="col">Equivalent to</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>Centimeters</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>Millimeters</td> + <td>1mm = 1/10th of 1cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>Quarter-millimeters</td> + <td>1Q = 1/40th of 1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>Inches</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>Picas</td> + <td>1pc = 1/6th of 1in</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>Points</td> + <td>1pt = 1/72th of 1in</td> + </tr> + <tr> + <td><code>px</code></td> + <td>Pixels</td> + <td>1px = 1/96th of 1in</td> + </tr> + </tbody> +</table> + +<p>Most of these values are more useful when used for print, rather than screen output. For example we don't typically use <code>cm</code> (centimeters) on screen. The only value that you will commonly use is <code>px</code> (pixels).</p> + +<h4 id="Relative_length_units">Relative length units</h4> + +<p>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.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Relative to</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>Font size of the element.</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>x-height of the element's font.</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>The advance measure (width) of the glyph "0" of the element's font.</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>Font size of the root element.</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>Line height of the element.</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>1% of the viewport's width.</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>1% of the viewport's height.</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>1% of the viewport's smaller dimension.</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>1% of the viewport's larger dimension.</td> + </tr> + </tbody> +</table> + +<h4 id="Exploring_an_example">Exploring an example</h4> + +<p>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.</p> + +<p>The second box has a width set in <code>vw</code> (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 <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>, so this won't work. To see this in action you'll have to <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">try the example after opening it in its own browser tab</a>.</p> + +<p>The third box uses <code>em</code> units. These are relative to the font size. I've set a font size of <code>1em</code> on the containing {{htmlelement("div")}}, which has a class of <code>.wrapper</code>. Change this value to <code>1.5em</code> 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.</p> + +<p>After following the instructions above, try playing with the values in other ways, to see what you get.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> + +<h4 id="ems_and_rems">ems and rems</h4> + +<p><code>Die relativen Maßeneinheiten, <strong>em</strong></code><strong> </strong>und <strong><code>rem</code></strong><code>,</code>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 <a href="/en-US/docs/Learn/CSS/Styling_text">styling text</a> or <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>. The below example provides a demonstration.</p> + +<p>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 <em>ems</em> and the second a class of <em>rems</em>.</p> + +<p>To start with, we set 16px as the font size on the <code><html></code> element.</p> + +<p><strong>To recap, the em unit means "my parent element's font-size"</strong>. The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>ems</code> take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to <code>1.3em</code> — 1.3 times its parent's font size.</p> + +<p><strong>To recap, the rem unit means "The root element's font-size"</strong>. (rem standards for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>rems</code> take their sizing from the root element (<code><html></code>). This means that each successive level of nesting does not keep getting larger.</p> + +<p>However, if you change the <code><html></code> <code>font-size</code> in the CSS you will see that everything else changes relative to it — both <code>rem</code>- and <code>em</code>-sized text.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> + +<h3 id="Percentages">Percentages</h3> + +<p>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 <code>font-size</code> as a percentage it will be a percentage of the <code>font-size</code> of the element's parent. If you use a percentage for a <code>width</code> value, it will be a percentage of the <code>width</code> of the parent.</p> + +<p>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.</p> + +<p>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!</p> + +<p><strong>Try changing the width of the wrapper or the percentage value to see how this works.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> + +<p>The next example has font sizes set in percentages. Each <code><li></code> has a <code>font-size</code> of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> + +<p>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 <code><a href="/en-US/docs/Web/CSS/length-percentage"><length-percentage></a></code> then you can use a length or a percentage. If the allowed value only includes <code><length></code>, it is not possible to use a percentage.</p> + +<h3 id="Numbers">Numbers</h3> + +<p>Some values accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the <code>opacity</code> property, which controls the opacity of an element (how transparent it is). This property accepts a number between <code>0</code> (fully transparent) and <code>1</code> (fully opaque).</p> + +<p><strong>In the below example, try changing the value of <code>opacity</code> to various decimal values between <code>0</code> and <code>1</code> and see how the box and its contents become more or less opaque.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: When you use a number in CSS as a value it should not be surrounded in quotes.</p> +</div> + +<h2 id="Color">Color</h2> + +<p>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.</p> + +<p>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.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<h3 id="Color_keywords">Color keywords</h3> + +<p>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 <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> value.</p> + +<p><strong>Try playing with different color values in the live examples below, to get more of an idea how they work.</strong></p> + +<h3 id="Hexadecimal_RGB_values">Hexadecimal RGB values</h3> + +<p>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 <code>0123456789abcdef</code>. 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.)</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> + +<p><strong>Again, try changing the values to see how the colors vary.</strong></p> + +<h3 id="RGB_and_RGBA_values">RGB and RGBA values</h3> + +<p>The third scheme we'll talk about here is RGB. An RGB value is a function — <code>rgb()</code> — 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.</p> + +<p>Let's rewrite our last example to use RGB colors:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> + +<p>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 <code>0</code> it will make the color fully transparent, whereas <code>1</code> will make it fully opaque. Values in between give you different levels of transparency.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> + +<p><strong>In this example, try changing the alpha channel values to see how it affects the color output. </strong></p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: At some point modern browsers were updated so that <code>rgba()</code> and <code>rgb()</code>, and <code>hsl()</code> and <code>hsla()</code> (see below), became pure aliases of each other and started to behave exactly the same. So for example both <code>rgba()</code> and <code>rgb()</code> accept colors with and without alpha channel values. Try changing the above example's <code>rgba()</code> functions to <code>rgb()</code> 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.</p> +</div> + +<h3 id="HSL_and_HSLA_values">HSL and HSLA values</h3> + +<p>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 <code>hsl()</code> function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:</p> + +<ul> + <li><strong>Hue</strong>: The base shade of the color. This takes a value between 0 and 360, representing the angles round a color wheel.</li> + <li><strong>Saturation</strong>: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation</li> + <li><strong>Lightness</strong>: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)</li> +</ul> + +<p>We can update the RGB example to use HSL colors like this:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> + +<p>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!</p> + +<h2 id="Images">Images</h2> + +<p>The <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a <code>url()</code> function, or a gradient.</p> + +<p>In the example below we have demonstrated an image and a gradient in use as a value for the CSS <code>background-image</code> property.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: there are some other possible values for <code><image></code>, however these are newer and currently have poor browser support. Check out the page on MDN for the <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> data type if you want to read about them.</p> +</div> + +<h2 id="Position">Position</h2> + +<p>The <code><a href="/en-US/docs/Web/CSS/position_value"><position></a></code> data type represents a set of 2D coordinates, used to position an item such as a background image (via <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). It can take keywords such as <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, and <code>center</code> 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.</p> + +<p>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 <code>center</code>.</p> + +<p>In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> + +<p><strong>Play around with these values to see how you can push the image around.</strong></p> + +<h2 id="Strings_and_identifiers">Strings and identifiers</h2> + +<p>Throughout the examples above, we've seen places where keywords are used as a value (for example <code><color></code> keywords like <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, and <code>goldenrod</code>). These keywords are more accurately described as <em>identifiers</em>, a special value that CSS understands. As such they are not quoted — they are not treated as strings.</p> + +<p>There are places where you use strings in CSS, for example <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">when specifying generated content</a>. 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> + +<h2 id="Functions">Functions</h2> + +<p>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 — <code>rgb()</code>, <code>hsl()</code>, etc. The value used to return an image from a file — <code>url()</code> — is also a function.</p> + +<p>A value that behaves more like something you might find in a traditional programming language is the <code>calc()</code> 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.</p> + +<p>For example, below we are using <code>calc()</code> to make the box <code>20% + 100px</code> wide. The 20% is calculated from the width of the parent container <code>.wrapper</code> 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 <code>calc()</code> to tell the browser to do it for us.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> + +<h2 id="Summary">Summary</h2> + +<p>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 <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Values and units</a> reference page; you will encounter many of these in use as you work through these lessons.</p> + +<p>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.</p> + +<p>For example, understanding that <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> diff --git a/files/de/learn/css/css_layout/flexbox/index.html b/files/de/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..499a21cc4f --- /dev/null +++ b/files/de/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,352 @@ +--- +title: Flexbox +slug: Learn/CSS/CSS_layout/Flexbox +tags: + - Anfänger + - Artikel + - CSS + - CSS layouts + - Flexible Boxen + - Layout + - Layouts + - Leitfaden + - Lernen + - flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary"><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> ist eine Layoutmethode zum Anordnen von Elementen in Zeilen oder Spalten. Elemente werden gestreckt, um zusätzlichen Platz zu füllen, und schrumpfen, um in kleinere Räume zu passen. Dieser Artikel erklärt alle Grundlagen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td>HTML Grundlagen (siehe <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), und eine Vorstellung davon, wie CSS funktioniert (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">Zielsetzung:</th> + <td>Erfahren Sie, wie Sie mit dem Flexbox-Layoutsystem Weblayouts erstellen.</td> + </tr> + </tbody> +</table> + +<h2 id="Warum_Flexbox">Warum Flexbox?</h2> + +<p>Lange Zeit waren die einzigen zuverlässigen browserübergreifenden Tools zum Erstellen von CSS-Layouts Dinge wie Floats und Positionierung. Diese sind in Ordnung und funktionieren, aber in gewisser Weise sind sie auch eher einschränkend und frustrierend.</p> + +<p>Die folgenden einfachen Layoutanforderungen sind mit solchen Werkzeugen auf bequeme und flexible Weise entweder schwierig oder unmöglich zu erreichen:</p> + +<ul> + <li>Vertikales Zentrieren eines Inhaltsblocks in seinem übergeordneten Element.</li> + <li>Alle untergeordneten Elemente eines Containers sollen die gleichen Anteil der Breite / Höhe einnehmen, unabhängig davon, wie viel Breite / Höhe verfügbar ist.</li> + <li>Alle Spalten in einem mehrspaltigen Layout mit einheitlicher Höhe gestalten, auch wenn sie eine andere Menge an Inhalt enthalten.</li> +</ul> + +<p>Wie Sie in den folgenden Abschnitten sehen werden, erleichtert Flexbox viele Layoutaufgaben erheblich. Lass uns eintauchen!</p> + +<h2 id="Ein_einfaches_Beispiel">Ein einfaches Beispiel</h2> + +<p>In diesem Artikel werden Sie eine Reihe von Übungen durcharbeiten, um zu verstehen, wie Flexbox funktioniert. Zuerst sollten Sie eine lokale Kopie der ersten Startdatei - <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html </a>aus unserem Github-Repo - erstellen, sie in einen modernen Browser (wie Firefox oder Chrome) laden und den Code in Ihrem Code-Editor anzeigen. Sie können es auch <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">hier live sehen</a>.</p> + +<p>Sie werden sehen, dass wir ein {{htmlelement ("header")}} Element mit einer Überschrift der obersten Ebene und ein {{htmlelement ("section")}} Element mit drei {{htmlelement ("article") }} haben. Wir werden damit ein standardmäßiges dreispaltiges Layout erstellen.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<h2 id="Festlegen_der_Elemente_für_flexible_Boxen">Festlegen der Elemente für flexible Boxen </h2> + +<p>Zunächst müssen wir auswählen, welche Elemente als flexible Boxen angeordnet werden sollen. Dazu setzen wir einen speziellen Wert von {{cssxref ("display")}} für das übergeordnete Element der Elemente, die Sie beeinflussen möchten. In diesem Fall möchten wir die {{htmlelement ("article")}} Elemente anordnen, also setzen wir dies auf das {{htmlelement ("section")}}:</p> + +<pre class="brush: css notranslate">section { + display: flex; +}</pre> + +<p>Dies führt dazu, dass das <section> -Element zu einem <strong>Flex-Container</strong> wird und seine untergeordneten Elemente zu <strong>Flex-Elementen</strong> werden. Das Ergebnis sollte ungefähr so sein:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> + +<p>Diese Deklaration erzeugt alles, was wir brauchen - unglaublich, oder? Wir haben unser mehrspaltiges Layout mit gleich großen Spalten, und die Spalten haben alle die gleiche Höhe. Dies liegt an de Standardwerte für Flex-Elemente (die untergeordneten Elemente des Flex-Containers), die so eingerichtet sind, um solche häufig auftretenden Probleme wie dieses zu lösen.</p> + +<p>Lassen Sie uns noch einmal wiederholen, was hier passiert. Das Element, dem wir einen {{cssxref ("display")}} -Wert <code>flex</code> zugewiesen haben, verhält sich in Bezug auf die Interaktion mit dem Rest der Seite wie ein Element auf Blockebene, aber seine untergeordneten Elemente werden als Flex-Elemente angeordnet - Im nächsten Abschnitt wird detaillierter erläutert, was das bedeutet. Beachten Sie auch, dass Sie den <code>display</code> Wert <code>inline-flex</code> verwenden können, wenn Sie die untergeordneten Elemente eines Elements als Flex-Elemente auslegen möchten, dieses Element sich jedoch wie ein Inline-Element verhält.</p> + +<h2 id="Das_flex_Modell">Das flex Modell</h2> + +<p>Wenn Elemente als flex-Elemente angeordnet sind, werden sie entlang zweier Achsen angeordnet:</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p> + +<ul> + <li>Die <strong>Hauptachse (main axis) </strong>ist die Achse, die in der Richtung verläuft, in der die Flex-Elemente angeordnet sind (z. B. als Zeilen auf der Seite oder Spalten auf der Seite). Anfang und Ende dieser Achse werden als main start und main end bezeichnet.</li> + <li>Die <strong>Querachse (cross axis) </strong>verläuft senkrecht dazu. Anfang und Ende dieser Achse werden als cross start und cross end bezeichnet.</li> + <li>Das übergeordnete Element, auf dem <code>display: flex</code> festgelegt ist (in unserem Beispiel das {{htmlelement ("section")}}), wird als <strong>Flex-Container</strong> bezeichnet.</li> + <li>Die als flexible Boxen im Flex-Container angeordnetrn Elemente werden als <strong>Flex-Elemente (flex-items) </strong>bezeichnet (in unserem Beispiel die Elemente {{htmlelement ("article")}}).</li> +</ul> + +<p>Beachten Sie diese Terminologie, wenn Sie die folgenden Abschnitte durchgehen. Sie können jederzeit darauf zurückgreifen, wenn Sie über einen der verwendeten Begriffe verwirrt sind.</p> + +<h2 id="Spalten_oder_Zeilen">Spalten oder Zeilen?</h2> + +<p>Flexbox bietet eine Eigenschaft namens {{cssxref ("flex-direction")}}, die angibt, in welche Richtung die Hauptachse verläuft (in welche Richtung die untergeordneten Flexbox-Elemente angeordnet sind). Standardmäßig ist dies auf row festgelegt, wodurch sie veranlasst werden in einer Reihe in der Richtung angeordnet sein, in der die Standardsprache Ihres Browsers funktioniert (von links nach rechts, im Fall eines englischen Browsers).</p> + +<p>Fügen Sie Ihrer {{htmlelement ("section")}} Regel die folgende Deklaration hinzu:</p> + +<pre class="brush: css notranslate">flex-direction: column;</pre> + +<p>Sie sehen, dass die Elemente dadurch wieder in ein Spaltenlayout versetzt werden, ähnlich wie vor dem Hinzufügen von CSS. Bevor Sie fortfahren, löschen Sie diese Deklaration aus Ihrem Beispiel.</p> + +<div class="note"> +<p><strong>Hinweis: </strong>Sie können Flex-Elemente auch in umgekehrter Richtung auslegen, indem Sie die Werte <code>row-reverse</code> für Zeilenumkehr und <code>column-reverse</code> für Spaltenumkehr verwenden. Experimentieren Sie auch mit diesen Werten!</p> +</div> + +<h2 id="Umbruch">Umbruch</h2> + +<p>Ein Problem, das auftritt, wenn Sie eine feste Breite oder Höhe in Ihrem Layout haben, ist, dass Ihre Flexbox-Kinder möglicherweise ihren Container überlaufen und das Layout beschädigen. Schauen Sie sich unser Beispiel <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> an und versuchen Sie, <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">es live anzuzeigen</a> (erstellen Sie jetzt eine lokale Kopie dieser Datei, wenn Sie diesem Beispiel folgen möchten):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> + +<p>Hier sehen wir die Kind-Elemente tatsächlich aus ihrem Container laufen. Eine Möglichkeit, dies zu beheben, besteht darin, Ihrer {{htmlelement ("section")}} -Regel die folgende Deklaration hinzuzufügen:</p> + +<pre class="brush: css notranslate">flex-wrap: wrap;</pre> + +<p>Fügen Sie Ihrer {{htmlelement ("article")}} Regel außerdem die folgende Deklaration hinzu:</p> + +<pre class="brush: css notranslate">flex: 200px;</pre> + +<p>Sie werden sehen, dass das Layout damit viel besser aussieht:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> + +<p>Wir haben jetzt mehrere Zeilen - so viele Flexbox-Kinder werden in jede Zeile eingefügt, wie sinnvoll ist, und jeder Überlauf wird in die nächste Zeile verschoben. Die auf den Artikeln festgelegte <code>flex: 200px</code>-Deklaration bedeutet, dass jede mindestens 200px breit ist. Wir werden diese Eigenschaft später genauer besprechen. Möglicherweise stellen Sie auch fest, dass die letzten untergeordneten Elemente in der letzten Zeile jeweils breiter sind, sodass die gesamte Zeile noch gefüllt ist.</p> + +<p>Aber wir können hier noch mehr tun. Versuchen Sie zunächst, den Eigenschaftswert {{cssxref ("flex-direction")}} in <code>row-reverse</code> zu ändern. Jetzt sehen Sie, dass Sie immer noch über ein Layout mit mehreren Zeilen verfügen, das jedoch in der gegenüberliegenden Seite des Browsers beginnt Fenster und in umgekehrter Richtung fließt.</p> + +<h2 id="flex-flow_shorthand">flex-flow shorthand</h2> + +<p>An dieser Stelle ist anzumerken, dass eine Abkürzung für {{cssxref ("Flex-Wrap")}} und {{cssxref ("Flex-Wrap")}} - {{cssxref ("Flex-Flow")}} existiert . So können Sie beispielsweise</p> + +<pre class="brush: css notranslate">flex-direction: row; +flex-wrap: wrap;</pre> + +<p>ersetzen mit</p> + +<pre class="brush: css notranslate">flex-flow: row wrap;</pre> + +<h2 id="Flexible_Dimensionierung_von_flex-Artikeln">Flexible Dimensionierung von flex-Artikeln</h2> + +<p>Kehren wir nun zu unserem ersten Beispiel zurück und schauen wir uns an, wie wir steuern können, welchen Anteil der Space-Flex-Elemente im Vergleich zu den anderen Flex-Elementen einnehmen. Starten Sie Ihre lokale Kopie von <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html </a>oder nehmen Sie eine Kopie von <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> als neuen Ausgangspunkt (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">hier auch live</a>).</p> + +<p>Fügen Sie zunächst die folgende Regel am Ende Ihres CSS hinzu:</p> + +<pre class="brush: css notranslate">article { + flex: 1; +}</pre> + +<p>Dies ist ein einheitloser Proportionswert, der bestimmt, wie viel des verfügbaren Platzes entlang der Hauptachse jedes Flex-Element im Vergleich zu anderen Flex-Elementen einnimmt. In diesem Fall geben wir jedem {{htmlelement ("article")}} Element den gleichen Wert (den Wert 1), was bedeutet, dass alle gleich viel Platz nach dem Auffüllen und dem Rand beanspruchen. Es ist relativ zu anderen Flex-Elementen, was bedeutet, dass ein Wert von 400000 für jedes Flex-Element genau den gleichen Effekt hätte.</p> + +<p>Fügen Sie nun die folgende Regel unter der vorherigen hinzu:</p> + +<pre class="brush: css notranslate">article:nth-of-type(3) { + flex: 2; +}</pre> + +<p>Wenn Sie jetzt aktualisieren, werden Sie feststellen, dass das dritte {{htmlelement ("article")}} doppelt so viel der verfügbaren Breite einnimmt wie die beiden anderen - es sind jetzt insgesamt vier Proportionseinheiten verfügbar (1 + 1) + 2 = 4). Die ersten beiden Flex-Elemente haben jeweils eine Einheit, sodass sie jeweils 1/4 des verfügbaren Platzes beanspruchen. Die dritte hat zwei Einheiten, nimmt also 2/4 des verfügbaren Platzes (oder die Hälfte) ein.</p> + +<p>Sie können auch einen Mindestgrößenwert innerhalb des Flex-Werts angeben. Versuchen Sie, Ihre vorhandenen Artikelregeln wie folgt zu aktualisieren:</p> + +<pre class="brush: css notranslate">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 2 200px; +}</pre> + +<p>Das heißt im Wesentlichen: "Jedes Flex-Element erhält zuerst 200 Pixel des verfügbaren Speicherplatzes. Danach wird der Rest des verfügbaren Speicherplatzes entsprechend den Proportionseinheiten aufgeteilt." Versuchen Sie es mit einer Aktualisierung, und Sie werden einen Unterschied in der Aufteilung des Speicherplatzes feststellen.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<p>Der wahre Wert von flexbox zeigt sich in seiner Flexibilität / Responsiveness. Wenn Sie die Größe des Browserfensters ändern oder ein weiteres {{htmlelement ("article")}} Element hinzufügen, funktioniert das Layout weiterhin einwandfrei.</p> + +<h2 id="flex_Kurzform_versus_Langform">flex: Kurzform versus Langform</h2> + +<p>{{cssxref ("flex")}} ist eine Kurzform-Eigenschaft, die bis zu drei verschiedene Werte angeben kann:</p> + +<ul> + <li>Der Anteil des Anteils ohne Einheit, den wir oben besprochen haben. Dies kann individuell mit der Langform {{cssxref ("flex-grow")}} angegeben werden.</li> + <li>Ein zweiter uneinheitlicher Proportionswert - {{cssxref ("flex-shrink")}} -, der ins Spiel kommt, wenn die flexiblen Elemente ihren Container überlaufen. Dies gibt an, wie viel der überlaufenden Menge von der Größe jedes Flex-Elements entfernt wird, um zu verhindern, dass sie ihren Behälter überlaufen. Dies ist eine erweiterte Flexbox-Funktion, auf die wir in diesem Artikel nicht weiter eingehen werden.</li> + <li>Der oben diskutierte Mindestgrößenwert. Dies kann individuell mit dem Lang-Wert {{cssxref ("flex-base")}} angegeben werden.</li> +</ul> + +<p>Wir raten davon ab, die lLangform Flex-Eigenschaften zu verwenden, es sei denn, Sie müssen dies wirklich tun (z. B. um etwas zuvor festgelegtes zu überschreiben). Sie führen dazu, dass viel zusätzlicher Code geschrieben wird, und sie können etwas verwirrend sein.</p> + +<h2 id="Horizontale_und_vertikale_Ausrichtung">Horizontale und vertikale Ausrichtung</h2> + +<p>Sie können auch Flexbox-Funktionen verwenden, um Flex-Elemente entlang der Haupt- oder Querachse auszurichten. Schauen wir uns dies anhand eines neuen Beispiels an - f<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">lex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">siehe auch live</a>) - das wir in eine übersichtliche, flexible Schaltfläche / Symbolleiste verwandeln werden. Im Moment sehen Sie eine horizontale Menüleiste mit einigen Schaltflächen in der oberen linken Ecke.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> + +<p>Nehmen Sie zunächst eine lokale Kopie dieses Beispiels.</p> + +<p>Fügen Sie nun am Ende des CSS des Beispiels Folgendes hinzu:</p> + +<pre class="brush: css notranslate">div { + display: flex; + align-items: center; + justify-content: space-around; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/17210/flexbox_center_space-around.png" style="height: 209px; width: 1217px;"></p> + +<p>Aktualisieren Sie die Seite und Sie werden sehen, dass die Schaltflächen jetzt horizontal und vertikal gut zentriert sind. Wir haben dies über zwei neue Eigenschaften getan.</p> + +<p>{{cssxref ("align-items")}} steuert, wo sich die Flex-Elemente auf der Querachse befinden.</p> + +<ul> + <li>Standardwert ist <code>stretch</code>, wodurch alle Flex-Elemente gestreckt werden, um das übergeordnete Element in Richtung der Querachse zu füllen. Wenn das übergeordnete Element in Querrichtung keine feste Breite hat, werden alle Flex-Elemente so lang wie die längsten Flex-Elemente. So hat unser erstes Beispiel standardmäßig Spalten gleicher Höhe erhalten.</li> + <li>Der <code>center</code>-wert, den wir in unserem obigen Code verwendet haben, bewirkt, dass die Elemente ihre intrinsischen Abmessungen beibehalten, jedoch entlang der Querachse zentriert werden. Aus diesem Grund sind die Schaltflächen unseres aktuellen Beispiels vertikal zentriert.</li> + <li>Sie können auch Werte wie <code>flex-start</code> und <code>flex-end</code> festlegen, mit denen alle Elemente am Anfang bzw. Ende der Querachse ausgerichtet werden. Ausführliche Informationen finden Sie unter {{cssxref ("align-items")}}.</li> +</ul> + +<p>Sie können das Verhalten {{cssxref ("align-items")}} für einzelne Flex-Elemente überschreiben, indem Sie die Eigenschaft {{cssxref ("align-self")}} auf diese anwenden. Versuchen Sie beispielsweise, Ihrem CSS Folgendes hinzuzufügen:</p> + +<pre class="brush: css notranslate">button:first-child { + align-self: flex-end; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/17211/flexbox_first-child_flex-end.png" style="height: 217px; width: 1219px;"></p> + +<p>Sehen Sie sich an, welchen Effekt dies hat, und entfernen Sie ihn erneut, wenn Sie fertig sind.</p> + +<p>{{cssxref ("Berechtigungsinhalt")}} steuert, wo sich die Flex-Elemente auf der Hauptachse befinden.</p> + +<ul> + <li>Der Standardwert ist <code>flex-start</code>, wodurch alle Elemente am Anfang der Hauptachse sitzen.</li> + <li>Sie können <code>flex-end</code> verwenden, damit sie am Ende sitzen.</li> + <li><code>center</code> ist auch ein Wert für j<code>ustify-content</code> und lässt die flexiblen Elemente in der Mitte der Hauptachse sitzen.</li> + <li>Der oben verwendete Wert <code>space-around</code> ist nützlich - er verteilt alle Elemente gleichmäßig entlang der Hauptachse, wobei an beiden Enden etwas Platz verbleibt.</li> + <li>Es gibt einen anderen Wert, <code>space-between</code>, der dem <code>space-around</code> sehr ähnlich ist, außer dass an beiden Enden kein Leerzeichen verbleibt.</li> +</ul> + +<p>Spielen Sie mit diesen Werten, um zu sehen, wie sie funktionieren, bevor Sie fortfahren.</p> + +<h2 id="Flex-Elemente_ordnen">Flex-Elemente ordnen</h2> + +<p>Flexbox bietet auch eine Funktion zum Ändern der Layoutreihenfolge von Flex-Elementen, ohne die Quellreihenfolge zu beeinflussen. Dies ist eine andere Sache, die mit herkömmlichen Layoutmethoden nicht möglich ist.</p> + +<p>Der Code hierfür ist einfach: Fügen Sie Ihrem Beispielcode für die Schaltflächenleiste das folgende CSS hinzu:</p> + +<pre class="brush: css notranslate">button:first-child { + order: 1; +}</pre> + +<p>Aktualisieren Sie, und Sie werden jetzt sehen, dass die Schaltfläche "Lächeln" an das Ende der Hauptachse verschoben wurde. Lassen Sie uns etwas detaillierter darüber sprechen, wie dies funktioniert:</p> + +<ul> + <li>Standardmäßig haben alle Flex-Elemente den Wert {{cssxref ("order")}} von 0.</li> + <li>Flex-Artikel mit höheren Ordnungswerten werden später in der Anzeigereihenfolge angezeigt als Artikel mit niedrigeren Ordnungswerten.</li> + <li>Flex-Artikel mit demselben Ordnungswert werden in ihrer Quellreihenfolge angezeigt. Wenn Sie also vier Elemente mit den Ordnungswerten 2, 1, 1 und 0 festgelegt haben, lautet die Anzeigereihenfolge 4., 2., 3. und dann 1 ..</li> + <li>Das 3. Element wird nach dem 2. angezeigt, da es denselben Wert hat und sich in der Quelloreihenfolge dahinter befindet.</li> +</ul> + +<p>Sie können negative Werte festlegen, damit Elemente vor Elementen mit 0 angezeigt werden. Sie können beispielsweise die Schaltfläche "Blush" am Anfang der Hauptachse mit der folgenden Regel anzeigen lassen:</p> + +<pre class="brush: css notranslate">button:last-child { + order: -1; +}</pre> + +<h2 id="Verschachtelte_Flexboxen">Verschachtelte Flexboxen</h2> + +<p>Mit der Flexbox können einige recht komplexe Layouts erstellt werden. Es ist vollkommen in Ordnung, ein Flex-Element auch als Flex-Container festzulegen, damit seine untergeordneten Elemente auch wie flexible Boxen angeordnet sind. Schauen Sie sich <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> an (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">Live-Ansicht</a>).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Das HTML dafür ist ziemlich einfach. Wir haben ein {{htmlelement ("section")}} Element, das drei {{htmlelement ("article")}} enthält. Das dritte {{htmlelement ("article")}} enthält drei {{htmlelement ("div")}}. ::</p> + +<pre class="notranslate">section - article + article + article - div - button + div button + div button + button + button</pre> + +<p>Schauen wir uns den Code an, den wir für das Layout verwendet haben.</p> + +<p>Zunächst legen wir fest, dass die untergeordneten Elemente des {{htmlelement ("section")}} als flexible Boxen angeordnet werden.</p> + +<pre class="brush: css notranslate">section { + display: flex; +}</pre> + +<p>Als nächstes setzen wir einige Flex-Werte für die {{htmlelement ("article")}} selbst. Beachten Sie hier besonders die 2. Regel - wir setzen das dritte {{htmlelement ("article")}} so, dass seine Kindelemente auch wie flexible Elemente angeordnet sind, aber diesmal legen wir sie wie eine Spalte an.</p> + +<pre class="brush: css notranslate">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 3 200px; + display: flex; + flex-flow: column; +} +</pre> + +<p>Als nächstes wählen wir das erste {{htmlelement ("div")}} aus. Wir verwenden zuerst <code>flex: 1 100px</code>; Um eine effektive Höhe von 100 Pixel zu erreichen, setzen wir die untergeordneten Elemente (die {{htmlelement ("button")}} Elemente) so, dass sie auch wie flexible Elemente angeordnet sind. Hier legen wir sie in einer Umbruchreihe an und richten sie in der Mitte des verfügbaren Platzes aus, wie wir es in dem Beispiel für einzelne Schaltflächen getan haben, das wir zuvor gesehen haben.</p> + +<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child { + flex:1 100px; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-around; +}</pre> + +<p>Schließlich haben wir einige Größen für die Schaltfläche festgelegt, aber interessanterweise geben wir ihr einen Flex-Wert von 1 Auto. Dies hat einen sehr interessanten Effekt, den Sie sehen, wenn Sie versuchen, die Breite Ihres Browserfensters zu ändern. Die Schaltflächen nehmen so viel Platz wie möglich ein und sitzen so viele auf derselben Linie wie möglich. Wenn sie jedoch nicht mehr bequem auf dieselbe Linie passen, werden sie nach unten fallen gelassen, um neue Linien zu erstellen.</p> + +<pre class="brush: css notranslate">button { + flex: 1 auto; + margin: 5px; + font-size: 18px; + line-height: 1.5; +}</pre> + +<h2 id="Cross-Browser-Kompatibilität">Cross-Browser-Kompatibilität</h2> + +<p>Die Flexbox-Unterstützung ist in den meisten neuen Browsern verfügbar - Firefox, Chrome, Opera, Microsoft Edge und IE 11, neuere Versionen von Android / iOS usw. Sie sollten sich jedoch bewusst sein, dass noch ältere Browser verwendet werden, die Flexbox nicht unterstützen (oder aber eine veraltete Version davon unterstützen.)</p> + +<p>Während Sie nur lernen und experimentieren, spielt dies keine große Rolle. Wenn Sie jedoch die Verwendung von Flexbox in einer echten Website in Betracht ziehen, müssen Sie Tests durchführen und sicherstellen, dass Ihre Benutzererfahrung in möglichst vielen Browsern noch akzeptabel ist.</p> + +<p>Flexbox ist etwas kniffliger als einige CSS-Funktionen. Wenn einem Browser beispielsweise ein CSS-Schlagschatten fehlt, kann die Site wahrscheinlich weiterhin verwendet werden. Wenn Flexbox-Funktionen nicht unterstützt werden, wird ein Layout wahrscheinlich vollständig beschädigt, wodurch es unbrauchbar wird.</p> + +<p>In unserem <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-Browser-Testmodul</a> diskutieren wir Strategien zur Überwindung von Problemen mit der Cross-Browser-Unterstützung.</p> + +<h2 id="Testen_Sie_Ihre_Fähigkeiten!">Testen Sie Ihre Fähigkeiten!</h2> + +<p>Wir haben in diesem Artikel viel behandelt, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen beibehalten haben, bevor Sie fortfahren - siehe Testen Sie Ihre Fähigkeiten: Flexbox.</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Damit ist unsere Tour durch die Grundlagen der Flexbox abgeschlossen. Wir hoffen, Sie hatten Spaß und werden ein gutes Stück damit herumspielen, wenn Sie Ihr Lernen vorantreiben. Als nächstes werfen wir einen Blick auf einen weiteren wichtigen Aspekt von CSS-Layouts - CSS-Raster.</p> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<div> +<h2 id="In_diesem_Modul">In diesem Modul</h2> + +<ul> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Introduction">Einführung in das CSS-Layout</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Positioning">Positionieren</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mehrspaltiges Layout</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Media_queries">Anfängerleitfaden für media queries</a></li> + <li><a href="/de-DEdocs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy-Layout-Methoden</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Unterstützung älterer Browser</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Grundlegende Bewertung des Layoutverständnisses</a></li> +</ul> +</div> diff --git a/files/de/learn/css/css_layout/index.html b/files/de/learn/css/css_layout/index.html new file mode 100644 index 0000000000..4351951f84 --- /dev/null +++ b/files/de/learn/css/css_layout/index.html @@ -0,0 +1,88 @@ +--- +title: CSS layout +slug: Learn/CSS/CSS_layout +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - NeedsTranslation + - Positioning + - TopicStub + - alignment + - flexbox + - float + - table +translation_of: Learn/CSS/CSS_layout +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</p> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should already:</p> + +<ol> + <li>Have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> + <li>Be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li> + <li>Understand how to <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt> + <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></dt> + <dd>Elements on webpages lay themselves out according to <em>normal flow</em> - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> + <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">test your flexbox skills</a> to check your understanding before moving on.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt> + <dd>CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">test your grid skills</a> before moving on.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt> + <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt> + <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></dt> + <dd>The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></dt> + <dd>As more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (RWD) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. It is an idea that changed the way we design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></dt> + <dd>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></dt> + <dd>Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></dt> + <dd> + <p>In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.</p> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Assessment: Fundamental layout comprehension</a></dt> + <dd>An assessment to test your knowledge of different layout methods by laying out a webpage.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt> + <dd>This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.</dd> +</dl> diff --git a/files/de/learn/css/first_steps/index.html b/files/de/learn/css/first_steps/index.html new file mode 100644 index 0000000000..a43d3b473b --- /dev/null +++ b/files/de/learn/css/first_steps/index.html @@ -0,0 +1,54 @@ +--- +title: Erste Schritte mit CSS +slug: Learn/CSS/First_steps +translation_of: Learn/CSS/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><font>CSS (Cascading Style Sheets) wird zum Stylen und Layouten von Webseiten verwendet. Sie können beispielsweise die Schriftart, Farbe, Größe und den Abstand von Seiteninhalten ändern, Inhalt in mehrere Spalten aufteilen oder Animationen und andere dekorative Funktionen hinzufügen. Dieses Modul bietet einen sanften Einstieg in CSS, beginnend mit einem Überblick über Funktionsweise, Syntax und wie Sie mit CSS Darstellungsstile zu </font>HTML-Seiten <font>hinzufügen können.</font></p> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Voraussetzungen">Voraussetzungen</h2> + +<p>Bevor Sie mit diesem Lernmodul beginnen, sollten Sie:</p> + +<ol> + <li>grundsätzlich mit Computern umgehen und das Internet passiv nutzen (d.h. im Internet surfen und Inhalte konsumieren) können.</li> + <li>sich bereits eine einfache Arbeitsumgebung eingerichtet haben (wie in <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Notwendige Software installieren</a> beschrieben) und wissen, wie Sie Dateien erstellen und ordnen (wie in <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a> erklärt).</li> + <li>über grundlegende HTML-Kenntnisse (entsprechend dem Lernmodul <a href="https://developer.mozilla.org/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML">Einführung in HTML</a>) verfügen.</li> +</ol> + +<div class="note"> +<p><strong>Hinweis</strong>: Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf dem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie <a href="http://jsbin.com/" rel="noopener">JSBin</a> oder <a href="https://thimble.mozilla.org/" rel="noopener">Thimble </a>ausprobieren.</p> +</div> + +<h2 id="Lerneinheiten">Lerneinheiten</h2> + +<p>Die Lerneinheiten dieses Moduls werden Ihnen alle grundlegenden Konzepte von CSS vermitteln. Dazu erhalten Sie auch immer wieder Gelegenheit, Ihr neu erworbenes Wissen gleich auszuprobieren.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Was ist CSS?</a></dt> + <dd>Mit <strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) können Sie toll aussehende Webseiten erstellen. Diese Lerneinheit gibt einen Vorgeschmack darauf anhand eines einfachen Code-Beispiels und erklärt einige Schlüsselelemente der Sprache.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS kennenlernen</a></dt> + <dd>In dieser Lerneinheit wenden Sie CSS auf ein einfaches HTML-Dokument an und lernen dabei einige nützliche Dinge über die Sprache.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Wie CSS aufgebaut ist</a></dt> + <dd>Nachdem Sie jetzt eine Vorstellung davon haben, was CSS ist und wie es benutzt wird, befassen wir uns etwas genauer mit dem Aufbau der Sprache. Diese Lerneinheit eignet sich auch gut zum Nachlesen, wenn Sie in späteren Abschnitten auf Verständnisschwierigkeiten stoßen.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Wie CSS funktioniert</a></dt> + <dd>Bis jetzt haben wir uns damit beschäftigt, wie sich CSS nutzen lässt, um einfache <em>stylesheets</em> zu schreiben. In dieser Lerneinheit schauen wir uns, wie ein Browser CSS and HTML verarbeitet und in eine Webseite verwandelt.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Nutzen Sie Ihr neues Wissen</a></dt> + <dd>Die Kenntnisse, die Sie sich in den vorherigen Lerneinheiten angeeignet haben, sollten es Ihnen erlauben, einfache Textseiten mit Hilfe von CSS zu formatieren. Hier erhalten Sie genau dazu Gelegenheit!</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt> + <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to CSS</em> module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.</dd> +</dl> diff --git a/files/de/learn/css/index.html b/files/de/learn/css/index.html new file mode 100644 index 0000000000..973569c85e --- /dev/null +++ b/files/de/learn/css/index.html @@ -0,0 +1,59 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - Anfänger + - CSS + - Debuggen + - Einsteiger +translation_of: Learn/CSS +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Cascading Stylesheets — oder {{glossary("CSS")}} — ist die zweite Technologie, die Sie nach {{glossary("HTML")}} lernen sollten. Während HTML genutzt wird, um die Struktur und Semantik Ihrer Inhalte zu definieren, dient CSS dazu, deren Erscheinung und Layout zu beeinflussen. So lässt sich CSS beispielsweise nutzen, um die Schriftarten, Farben, Größen und räumliche Abstände Ihrer Inhalte zu verändern, Inhalte in mehreren Spalten anzuordnen oder Animationen und andere dekorative Merkmale hinzuzufügen.</p> + +<h2 id="Lernprozess">Lernprozess</h2> + +<p>Sie sollten sich unbedingt mit den Grundlagen von HTML auseinandersetzen, bevor Sie sich an CSS versuchen. Wir empfehlen Ihnen, zunächst unser "<a href="/de-DE/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a>"-Modul durchzuarbeiten — anschließend können Sie folgende Themen angehen:</p> + +<ul> + <li>CSS, beginnend mit diesem Modul "Einführung in CSS"</li> + <li>Fortgeschrittene <a href="/de-DE/Learn/HTML#Modules">HTML Module</a></li> + <li><a href="/de-DE/docs/Learn/JavaScript">JavaScript</a>, und wie man es einsetzt, um Webseiten dynamische Funktionalität hinzuzufügen</li> +</ul> + +<p>Wir empfehlen, HTML und CSS gleichzeitig zu lernen und immer wieder zwischen beiden Themen hin- und her zu springen. Denn HTML ist sehr viel interessanter mit CSS, und CSS lässt sich schwerlich ohne HMTL erlernen.</p> + +<p>Bevor Sie in dieses Thema starten, sollten Sie zumindest ein grundlegendes Verständnis im Umgang mit Computern sowie dem passiven Gebrauch des Internets (also einfach nur Surfen und Inhalte konsumieren) haben. Sie sollten eine einfache Arbeitsumgebung eingerichtet haben, wie im Artikel "<a href="/de-DE/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Nötige Software installieren</a>" ausführlich beschrieben, und wissen, wie Sie Dateien erzeugen und verwalten, wie im Artikel "<a href="/de-DE/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dateien nutzen</a>" beschrieben — beides Teil unseres Anfängerkurses "<a href="/de-DE/docs/Learn/Getting_started_with_the_web">Das Web für Einsteiger</a>".</p> + +<p>Es ist empfehlenswert, im Vorfeld den Artikel "<a href="/de-DE/docs/Learn/Getting_started_with_the_web">Das Web für Einsteiger</a>" durchzuarbeiten, bevor Sie sich an diesem Thema versuchen, aber es ist keinesfalls zwingend erforderlich; das Meiste, was im CSS Grundlagenartikel angerissen wird, wird auch in unserem Modul "Einführung in CSS" behandelt, allerdings weit ausführlicher.</p> + +<h2 id="Module">Module</h2> + +<p>Dieses Thema unterteilt sich in die folgenden Module, die Sie in der vorgeschlagenen Reihenfolge abarbeiten sollten. Sie sollten definitiv mit dem Ersten beginnen.</p> + +<dl> + <dt><a href="/de-DE/docs/Learn/CSS/Introduction_to_CSS">Einführung in CSS</a></dt> + <dd>Dieses Modul vermittelt Ihnen, wie CSS grundlegend funktioniert, inklusive Selektoren und Eigenschaften, CSS-Schreibregeln, Anwendung von CSS auf HTML, wie man Maße, Farben und andere Einheiten in CSS spezifiziert, Kaskadierung und Vererbung, Box-Modell Grundlagen, und das Debuggen von CSS.</dd> + <dt><a href="/de-DE/docs/Learn/CSS/Styling_text">Textgestaltung</a></dt> + <dd>Hier lernen wir Grundlagen der Textgestaltung, wie das Setzen der Schriftart, Fett- und Kursivdruck, Zeilen- und Buchstabenabstand, und Schattierung sowie andere Textmerkmale. Abgerundet wird dieses Modul mit der Anwendung von eigenen Schriftarten auf Ihre Webseite und die Gestaltung von Listen und Links.</dd> + <dt><a href="/De-US/docs/Learn/CSS/Styling_boxes">Boxgestaltung</a></dt> + <dd>Als Nächstes befassen wir uns mit der Gestaltung von Boxen, einem der grundlegenden Schritte in Richtung Webseitenlayout. In diesem Modul rekapitulieren wir das Box-Modell, anschließend schauen wir uns an, wie man das Layout einer Box kontrolliert, indem man Polsterung, Rahmen und Randabstände festlegt, Hintergrundfarben, -bilder und andere Eigenschaften einsetzt, und ausgefallene Dinge wie Schattenwurf und Filter einstellt.</dd> + <dt><a href="/de-DE/docs/Learn/CSS/CSS_layout">CSS-Layout</a></dt> + <dd>Jetzt haben wir uns die Grundlagen von CSS angeeignet: Wir wissen wie man Texte formatiert und wie man Boxen gestaltet und manipuliert, die Ihre Inhalte umfassen. Nun wird es Zeit sich anzusehen, wie Sie Ihre Boxen an die richtige Stelle und in richtiger Relation zum Darstellungsfeld setzen, und umgekehrt. Wir haben alle nötigen Voraussetzungen, um tief in's Thema CSS-Layout einzutauchen, uns verschiedene Bildschirm-Einstellungen anzusehen, traditionelle Methoden wie Schweben und Positionierung, und neumodische Layoutwerkzeuge wie Flexboxen.</dd> + <dt>Responsives Design (ausstehend)</dt> + <dd>Mit einer Vielzahl verschiedener Endgeräte kann man heutzutage im Netz surfen, infolge dessen ist <a href="/de-DE/docs/Web/Guide/Responsive_design">Responsives Webdesign</a> (RWD) zu einer Kerndisziplin des Webdesigns geworden. Dieses Modul wird die grundlegenden Prinzipien und Werkzeuge des RWD behandeln, das Anwenden verschiedener CSS auf ein Dokument in Abhängigkeit von Geräteeigenschaften wie Bildschirmgröße, -format und -auflösung erklären, und die verfügbaren Technologien zum Darstellen von Videos und Bildern in Abhängigkeit von jenen Eigenschaften ausloten.</dd> +</dl> + +<h2 id="Lösen_typischer_CSS-Probleme">Lösen typischer CSS-Probleme</h2> + +<p><a href="/de-DE/docs/Learn/CSS/Howto">CSS nutzen, um typische Probleme zu lösen</a> verweist auf Artikelabschnitte, die erklären, wie man mit CSS die häufigsten Problems beim Erstellen einer Webseite behebt.</p> + +<p>Von Anfang an werden sie meist HTML-Elemente und deren Hintergründe einfärben, Größe, Form und Position von Elementen ändern sowie Rahmen definieren und hinzufügen. Aber es gibt nicht viel, was Sie nicht tun können, sobald Sie auch nur ein solides Verständnis der Grundlagen von CSS haben. Das Beste am CSS-Lernprozesses ist, dass man nur mit Grundlagenwissen bereits ein gutes Gefühl dafür entwickelt, was möglich und was nicht möglich ist, selbst wenn Sie noch nicht wirklich wissen, wie diese mögliche Lösung aussieht.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<dl> + <dt><a href="/de-DE/docs/Web/CSS">CSS auf MDN</a></dt> + <dd>Die Hauptübersicht für die CSS-Dokumentation auf MDN, wo Sie ausführliche Referenzdokumente für alle Merkmale der CSS-Sprache finden. Möchten Sie nachschlagen, welche verschieden Werte eine Eigenschaft annehmen kann? Dann ist dies der richtige Ort zum stöbern.</dd> +</dl> diff --git a/files/de/learn/css/styling_text/index.html b/files/de/learn/css/styling_text/index.html new file mode 100644 index 0000000000..0e5279bda2 --- /dev/null +++ b/files/de/learn/css/styling_text/index.html @@ -0,0 +1,65 @@ +--- +title: Styling text +slug: Learn/CSS/Styling_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - NeedsTranslation + - Text + - TopicStub + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</p> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should already have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, and be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="https://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt> + <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></dt> + <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></dt> + <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></dt> + <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt> + <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd> +</dl> |