Die besten CSS- und CSS3-Tutorials

Cascading Style Sheets (CSS)

CSS ist eine Abkürzung für Cascading Style Sheets. Es wurde erstmals 1996 erfunden und ist heute eine Standardfunktion aller gängigen Webbrowser.

Mit CSS können Entwickler steuern, wie Webseiten aussehen, indem sie die HTML-Struktur dieser Seite „stylen“.

CSS-Spezifikationen werden vom World Wide Web Consortium (W3C) verwaltet.

Sie können einige ziemlich erstaunliche Dinge allein in CSS erstellen, wie zum Beispiel dieses reine CSS-Minesweeper-Spiel (das kein JavaScript verwendet).

Ein guter Anfang ist das freeCodeCamp-Curriculum Einführung in Basic CSS.

Ein weiterer Vorschlag für Anfänger ist W3Cs Starting with HTML + CSS, in dem das Erstellen eines Stylesheets erläutert wird.

Die Website CSS Zen Garden ist ein großartiges Beispiel dafür, wie dasselbe HTML so gestaltet werden kann, dass es absolut einzigartig aussieht.

Eine Demonstration der Leistungsfähigkeit von CSS finden Sie unter Species In Pieces.

Tutorials zum Starten mit CSS und CSS3

Der beste Ort, um CSS zu lernen, ist das 2-stündige Intro-to-CSS-Tutorial von freeCodeCamp.

Wenn Sie sich abenteuerlustiger fühlen, bieten wir Ihnen einen 12-stündigen Kurs an, in dem HTML, HTML5 und CSS ausführlich behandelt werden.

Flexbox

Flexbox ist eine neue Methode zum Strukturieren von Inhalten in CSS3. Es bietet eine wunderbare Möglichkeit, reaktionsschnelle Websites zu erstellen, die über verschiedene Bildschirmgrößen und Bestellinhalte hinweg gut funktionieren.

Es gibt 3 einfache Schritte, um Flexbox zu verwenden:

  1. Konvertieren Sie den übergeordneten Container mithilfe von in einen Flex-Container display: flex;
  2. Passen Sie das Layout verschiedener Container mithilfe von an flex-direction
  3. Passen Sie die Anordnung der Elemente in einem Container unter Verwendung von Eigenschaften wie justify-content, align-itemsund so weiter

Mit Flexbox können Sie den Abstand zwischen verschiedenen Seitenelementen effizient gestalten, ausrichten und anpassen, auch wenn Sie deren genaue Größe nicht kennen. Stattdessen sind Elemente und Container dynamisch und werden "gebogen", um den verfügbaren Platz optimal auszufüllen.

  • Hauptachse : Die Hauptachse eines Flex-Containers, entlang der Flex-Elemente angeordnet sind. Beachten Sie, dass dies je nachflex-directionEigenschafthorizontal oder vertikal sein kann.
  • Hauptstart | Haupt-Ende :Flex-Artikel werden von main-startbis in einen Container gelegt main-end.
  • Hauptgröße : Die Hauptabmessung eines flexiblen Elements, die seine Breite oder Höhe sein kann, fungiert als Hauptgröße des Elements.
  • Querachse : Die Achse, die senkrecht zur Hauptachse steht. Die Richtung der Querachse hängt von der Richtung der Hauptachse ab.
  • Cross-Start | Cross-End : Flex-Linien und -Elemente werden voncross-startdercross-endSeitezurSeitein einen Flex-Container gelegt.
  • Kreuzgröße : Die Kreuzgröße des Elements (Breite oder Höhe) dient als Kreuzgröße des Elements.

Gitterstruktur

CSS-Rasterlayout, einfach als Raster bezeichnet, ist ein Layoutschema, das das neueste und leistungsstärkste in CSS ist. Es wird von allen gängigen Browsern unterstützt und bietet eine Möglichkeit, Elemente auf der Seite zu positionieren und zu verschieben.

Es kann Bereiche automatisch Elemente zuweisen , ihre Größe ändern und ihre Größe ändern, Spalten und Zeilen basierend auf einem von Ihnen definierten Muster erstellen und alle Berechnungen mit der neu eingeführten frEinheit durchführen.

Warum Gitter?

  • Sie können problemlos ein 12-Spalten-Raster mit einer Zeile CSS erstellen. grid-template-columns: repeat(12, 1fr)
  • Mit Grid können Sie Dinge in jede Richtung bewegen. Im Gegensatz zu Flex, bei dem Sie Elemente entweder horizontal ( flex-direction: row) oder vertikal ( flex-direction: column) verschieben können - und nicht beide gleichzeitig - können Sie mit Raster jedes Rasterelement in einen vordefinierten Rasterbereich auf der Seite verschieben. Die Gegenstände, die Sie bewegen, müssen nicht benachbart sein.
  • Mit CSS Grid können Sie die Reihenfolge von HTML-Elementen nur mit CSS ändern . Verschieben Sie etwas von oben nach rechts, verschieben Sie Elemente, die sich in der Fußzeile befanden, in die Seitenleiste usw. Anstatt das von in im HTML zu verschieben, können Sie einfach die Platzierung grid-areaim CSS-Stylesheet ändern .

Grid vs. Flex

  • Flex ist eindimensional - entweder horizontal oder vertikal, während Grid zweidimensional ist. Dies bedeutet, dass Sie Elemente sowohl in horizontaler als auch in vertikaler Ebene verschieben können
  • In Grid wenden wir Layoutstile auf den übergeordneten Container und nicht auf die Elemente an. Flex, auf der anderen Seite zielt auf das Flex - Element an den festgelegten Eigenschaften wie flex-basis, flex-growundflex-shrink
  • Grid und Flex schließen sich nicht gegenseitig aus. Sie können beide für dasselbe Projekt verwenden.

Überprüfen der Browserkompatibilität mit @supports

Wenn Sie eine Site erstellen, entwerfen Sie sie idealerweise mit Grid und verwenden Flex als Fallback. Sie können herausfinden, ob Ihr Browser Grid mit der @supportCSS-Regel (auch als Feature-Abfrage bezeichnet) unterstützt. Hier ist ein Beispiel:

.container { display: grid; /* display grid by default */ } @supports not (display: grid) { /* if grid is not supported by the browser */ .container { display: flex; /* display flex instead of grid */ } }

Loslegen

Um ein Element zu einem Raster zu machen, müssen Sie seine displayEigenschaft gridwie folgt zuweisen :

.conatiner { display: grid; }

Und das ist es. Du hast gerade .containerein Gitter gemacht. Jedes Element innerhalb des wird .containerautomatisch zu einem Rasterelement.

Vorlagen definieren

Reihen und Spalten

grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 300px;

Bereiche

grid-template-areas: "a a a a" "b c d e" "b c d e" "f f f f";

oder

grid-template-areas: "header header header header" "nav main main sidebar";

Rasterbereiche

Hier ist ein Beispielcode zum Definieren und Zuweisen von Rasterbereichen:

.site { display: grid; grid-template-areas: /* applied to grid container */ "head head" /* you're assigning cells to areas by giving the cells an area name */ "nav main" /* how many values kind of depends on how many cells you have in the grid */ "nav foot"; } .site > header { grid-area: head; } .site > nav { grid-area: nav; } .site > main { grid-area: main; } .site > footer { grid-area: foot; }

Das frGerät

Grid introduces a new fr unit, which stands for fraction. The good thing about using the fr unit is that it takes care of calculations for you. Using fr avoids margin and padding issues. With % and em etc. it becomes a math equation when calculating grid-gap. If you used fr unit, it’ll automatically calculate both column and gutter sizes and adjust the size of the columns accordingly. Plus there will be no bleeding gaps at the end either.

Examples

Changing the order of elements based on screen size

Let’s say you want to move the footer to the bottom on small screens and to the right on bigger screens, and there’s a bunch of other HTML elements in between the two.

The simple solution is to change the grid-template-areas based on the screen size. You can also change the number of columns and rows based on the screen size, too. This is a much cleaner and simpler alternative to Bootstrap’s Grid system (col-xs-8 col-sm-6 col-md-4 col-lg-3).

.site { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "title title" "main header" "main sidebar" } @media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */ .site { grid-template-columns: 2fr 1fr 1fr; grid-template-areas: "title title title" "main header header" "main sidebar footer" } }

More Information:

  • CSS Grid Palyground by Mozilla: Great starting point if you’re new to CSS Grids. It has visuals to help you understand the terminology easily
  • YouTube: Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts): This presentation will convince you in less than an hour why CSS Grids are cool and why/how you should use them.
  • Videos: Learn Grid Layout Video Series by Rachel Andrew: Rachel Andrew is an expert on the subject. The video titles may look strange and overwhelming, but the content is short and to the point
  • Book: Get Ready for CSS Grid Layout by Rachel Andrew

Selectors

Selectors are CSS rules to target HTML elements to apply styles. Tag names, class names, ids, and attributes are some of the hooks used as selectors.

Selector Syntax

Selectors arranged in a specific sequence build up to a rule to target elements. An example:

/* selects anchor tags */ a { color: orange; } /* selects elements with hero class */ .hero { text-align: center; }

Type of Selectors

  • TypeDescription are Type selectors and Tag names are used to select elements such as h1 or a.
  • Universal Selectors apply to all elements.
  • div * matches all elements within div elements.
  • Attribute Selectors are Selectors that target elements based on their attributes [and optionally, their values].
  • h1[title] selects h1 elements with title attribute.
  • Class Selectors are Selectors that target elements using their class names.
  • ID Selectors are Selectors that use ID to target elements. #logo selects the element with logo as ID.
  • Pseudo-class Selectors are Special selectors that target elements based on their state. a:hover selector applies style when pointer hovers over links.

Selector Combinators

Combinator: Purpose white spaceDescendant combinator. .nav li selects all li children within the class .nav, including nested li elements.>Child combinator. .menu > li selects all li that are direct children of elements with .menu class.+Adjacent sibling combinator. .logo + h1 targets h1 that is an immediate sibling to .logo class.~General sibling combinator. header ~ div targets div elements that are siblings to header elements.

This section details all of these electors.

More Information:

You can learn more about selectors on these resources:

  • Official CSS3 Selectors specification
  • Selectors page on Mozilla Developer Network
  • CSS Selectors Cheat Sheet on FreeCodeCamp Guides

Selectors in CSS (cascading style sheets) are determined based on specificity. With this we are able to be more specific on our style rules and override other rules that may be targeting the same element but are not as specific.

The way this specificity hierarchy works is based on weight. This means that an element Selector has a weight of 1 (one), a class selector has a weight of 10 (ten) and a id selector has a weight of 100 (one hundred). We are able to combine different selectors together be more specific on the element we want to change.

As an example:

 p { color: blue; } p .red { color: red; }

Our type selector p will select all p elements in our html document, but it only has a weight of one. In contrast, the class selector has a weight of 11, because we are combining a type selector with a class selector (this selector is matching all p elements with a class of red).

Note:

  • Directly targeted rules will always have precedence over rules which inherit elements from their ancestor.
  • Specificity is only applied when multiple declarations are targeting the same element, and only then this rule is applied.
  • Specificity is usually why some of the style rules do not apply to elements when you would expect them to.

CSS Display

The display property specifies the type of box used for an HTML element. It has 20 possible keyword values. The commonly used ones are:

 .none {display: none} .block {display: block} .inline-block {display: inline-block} .inline {display: inline} .flex {display: flex} .inline-flex {display: inline-flex} .inline-table {display: inline-table} .table {display: table} .inherit {display: inherit} .initial {display: initial}

The display:none property can often be helpful when making a website responsive. For example, you may want to hide an element on a page as the screen size shrinks in order to compensate for the lack of space. display: none will not only hide the element, but all other elements on the page will behave as if that element does not exist.

This is the biggest difference between this property and the visibility: hidden property, which hides the element but keeps all other page elements in the same place as they would appear if the hidden element was visible.

These keyword values are grouped into six categories: