Welche Module enthält CSS3?

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:

1999.06.25 - 2014.03.201999.08.03 - 2018.11.0604.04.2001 - 19.06.2012css-values-3css-box -3 css-fonts-3css-backgrounds-3 CSS- Listen-3css-inline-3 css-ui-3css-content-3.

Zeit	Name	Letzter Status	Modul
1999.01. 27. - 13.08.2019 .1 8	Paginierungsmedienmodul	Arbeitsentwurf	css-page-3
1999.06.23 - 2019.10.15	Mehrspaltiges Layout	Arbeitsentwurf	css-multicol- 1
Naming Space-Modul	empfohlen	css-namespaces-3
selector	Empfohlen	selectors-3
Medienanfrage	Empfohlen	css3-mediaqueries
17.05.2001 - 22.12.2020	Textmodul	Kann didate Empfehlung	css-text-3
2001.07.13 - 2021.02.11	Kaskadierung und 1.07.13 - 06.06.2019	Wertsummen-Einheitenmodul	Kandidatenempfehlung
	26.07.2001 - 22.12.2020	Basis-Boxmodell	Kandidatenempfehlungen
	2001.07.31 - 2018.09.20	Font-Modul	Empfohlen
	24.09.2001 - 22.12.2020	Hintergrund- und Rahmenmodul	Kandidatenempfehlung
	20.02.2002 - 17.11.2020	Listenmodul	Arbeitsentwurf
	2002.05.15 - 2020.08.27	Inline-Layout-Modul	Arbeitsentwurf
	2002.08.02 - 2018.06. 21	Grundlegendes Benutzeroberflächenmodul	Empfohlen
	2003.05.14 - 2019.08.02	Inhaltsmodul generieren	funktioniert Entwurf
13.08.2003 - 16.07.2019	Syntaxmodul	Kandidatenempfehlung	css-syntax-3
24.02.2004 - 14.10.2014	Hyperlink-Anzeigemodul	Arbeitsgruppennotizen	css3-hyperlinks
15.12.2005 - 26.03.2015	Vorlagenlayoutmodul	Arbeitsgruppennotizen	CSS-Vorlage -3
2008.08.01 - 2014.10 .14	Marquee-Modul	Arbeitsgruppennotizen	css3-marquee
23.07.2009 - 17.12.2020	Bildmodul	Kandidatenempfehlung	css-images-3
2010.12.02 - 2019.12.10	Schreibmodus	empfohlen	css-writing -modes- 3
2011.09 .01 - 08.12.2020 19	Positionierungslayoutmodul	Arbeitsentwurf	css-position-3
28.02.2012 - 04.12.2018	Fragmentmodul	Kandidatenempfehlung	css-break-3
2012.06 .12 - 21.04.2020	Box-Arrangement-Modul	Arbeitsentwurf	css-align-3
27.09.2012 - 18.12.2020	Breiten- und Höhengrößenmodul	Arbeitsentwurf	css -sizing-3
09.10.2012 - 14.12.2017	Counter Style	Kandidat. Empfehlung	css-counter-styles-3
2013 .04.18 - 2 020.06.03	Überlauf Modul	Arbeitsentwurf	css-overflow-3
20.02.2014 - 18.12.2020	Anzeigetyp. Modul	Kandidatenempfehlungen	css-display- 3

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 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@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!