Die in CSS3 enthaltenen Module sind: 1. Listenmodul, das zum Hinzufügen von Stilen zu HTML-Listen verwendet wird; 2. Mehrspaltiges Layout, das den Blocklayoutmodus erweitert, um die Definition von mehrspaltigem Text zu erleichtern; , das eine Vielzahl von M?glichkeiten zum Definieren von Farben bietet, z. B. Farbnamen, rgb(), hsl() usw. 4. Medienabfragen, damit CSS auf verschiedenen Ger?ten agieren kann.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS3 ist eine aktualisierte Version der CSS-Technologie (Cascading Style Sheets). Sie wurde 1999 formuliert. Am 23. Mai 2001 stellte W3C den Arbeitsentwurf von CSS3 fertig, der haupts?chlich Boxmodell, Listenmodul, Hyperlink-Methode und Sprachmodul umfasst , Module wie Hintergrund und Rahmen, Texteffekte, mehrspaltiges Layout usw.

Eine wesentliche ?nderung in der Entwicklung von CSS ist die Entscheidung des W3C, CSS3 in eine Reihe von Modulen zu unterteilen.

Bereits im Jahr 2001 hat W3C den Entwurf der CSS3-Spezifikation fertiggestellt. Neu an der CSS3-Spezifikation ist die Aufteilung in mehrere unabh?ngige Module.

• Einerseits ist die Aufteilung in mehrere kleinere Module bequemer für die zeitnahe Aktualisierung und Ver?ffentlichung von Spezifikationen sowie für die rechtzeitige Anpassung des Inhalts der Module. Diese Module werden unabh?ngig voneinander implementiert und ver?ffentlicht, was auch den Grundstein dafür legt zukünftige Erweiterung von CSS.

• Auf der anderen Seite k?nnen Ger?te oder Hersteller aufgrund von Einschr?nkungen unterstützter Ger?te und Browserhersteller selektiv einige Module und eine Teilmenge von CSS3 unterstützen, was der F?rderung von CSS3 f?rderlich ist.

Das Folgende ist die Spezifikation jedes Moduls von CSS3 ab Januar 2021:

Zum Beispiel:

css3-Farbmodul

CSS3 unterstützt die Farbdarstellungsmethode

• ausgedrückt durch den englischen Namen der Farbe. Der englische Name stellt eine Farbe dar, aber die Darstellung ist sehr begrenzt und schwer zu merken und abzufragen.

• wird durch hexadezimale Farbe dargestellt. Das Prinzip der drei Grundfarben Farbe und Licht kann der Tabelle entnommen werden.

• wird durch RGB (r, g, b) dargestellt. Das Prinzip der drei Grundfarben des Lichts, Rot + Grün + Blau.

• wird durch hsl (Hue, Saturation, Lightness) dargestellt. Farbton + S?ttigung + Helligkeit.

• wird durch rgba (r, g, b, a) dargestellt. Das Prinzip der drei Grundfarben Licht, Rot, Grün, Blau + Transparenz. a ∈ [0, 1], 0 steht für vollst?ndige Transparenz.

• wird durch hsla (Farbton, S?ttigung, Helligkeit, Alpha) dargestellt. Farbton, S?ttigung, Helligkeit + Transparenz. Alpha ∈ [0, 1], 0 steht für vollst?ndige Transparenz.

CSS3-Layout mit mehreren Spalten

CSS-Layout mit mehreren Spalten Erweitert den Blocklayoutmodus, um die Definition von mehrspaltigem Text zu vereinfachen. Wenn eine Zeile zu lang ist, f?llt es den Leuten schwer, den Text zu lesen. Wenn die Augen zu lange brauchen, um vom Ende einer Zeile zum Anfang der n?chsten zu gelangen, verlieren sie die Zeile, in der sie sich befinden. Um einen gro?en Bildschirm optimal nutzen zu k?nnen, sollten Autoren daher Textspalten unterschiedlicher Breite nebeneinander platzieren, wie bei einer Zeitung.

css3 Media Query

Mit der rasanten Beliebtheit mobiler Ger?te durchsuchen Benutzer Webinhalte nicht mehr nur über herk?mmliche Computersysteme. Immer mehr Benutzer verwenden zum Durchsuchen Smartphones, Tablets oder andere Ger?te Um sicherzustellen, dass Benutzer, die verschiedene Ger?te verwenden, ein gutes Erlebnis haben, sind Medienabfragen erforderlich.

Medienabfrage ist eine der wichtigsten Funktionen von CSS-Stylesheets. Die sogenannte Medienabfrage bezieht sich auf die Unterscheidung verschiedener Ger?te (z. B. Computer, Mobiltelefone, Tablets, Braille-Ger?te usw.) anhand verschiedener Medientypen (Ger?te). (Typen) und Bedingungen) und definieren jeweils unterschiedliche CSS-Stile für sie. Durch Medienabfragen kann CSS genauer auf verschiedene Ger?te oder unterschiedliche Bedingungen auf demselben Ger?t reagieren, sodass alle Benutzer eine gute Benutzererfahrung erhalten.

/* 在小于或等于 992 像素的屏幕上，將背景色設(shè)置為藍(lán)色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 在 600 像素或更小的屏幕上，將背景色設(shè)置為橄欖色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

(Lernvideo-Sharing: CSS-Video-Tutorial, Web-Frontend)

Das obige ist der detaillierte Inhalt vonWelche Module enth?lt CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!