Was bedeutet CSS3?

css3 ist eine aktualisierte Version der CSS-Cascading-Style-Sheet-Technologie, was bedeutet, dass „Cascading Style Sheet auf drei Ebenen“ viele Funktionen auf der Basis von CSS2.1 hinzufügt, um Entwicklern bei der Lösung einiger praktischer Probleme zu helfen, hauptsächlich einschließlich Boxenmodell und Listenmodul , Hyperlink-Modus, Sprachmodul, Hintergrund und Rahmen, Texteffekte, mehrspaltiges Layout und andere Module.

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

Was bedeutet CSS3?

CSS3 ist eine aktualisierte Version der CSS-Technologie (Cascading Style Sheet), die sich auf „Cascading Style Sheet Level 3“ bezieht. Sie fügt viele leistungsstarke neue Funktionen hinzu, die auf CSS2.1 basieren und Entwicklern bei der Lösung einiger Probleme helfen praktische Probleme ohne die Notwendigkeit nichtsemantischer Tags, komplexer JavaScript-Skripte und Bilder.

CSS3 ist eine aktualisierte Version der CSS-Technologie (Cascading Style Sheets), die sich auf „Cascading Style Sheets Level 3“ bezieht. Sie wurde 1999 formuliert. Am 23. Mai 2001 hat W3C den Arbeitsentwurf von CSS3 fertiggestellt Eine CSS3-Entwicklungs-Roadmap wurde formuliert. Die Roadmap listet alle Module im Detail auf und sieht vor, diese in Zukunft schrittweise zu standardisieren.

CSS3 ist die neueste Version der CSS-Spezifikation. Sie fügt viele leistungsstarke neue Funktionen hinzu, die auf CSS2.1 basieren, um Entwicklern bei der Lösung einiger praktischer Probleme zu helfen, und erfordert keine nicht-semantischen Tags, komplexen JavaScript-Skripte und Bilder. CSS3 unterstützt beispielsweise abgerundete Ecken, mehrere Hintergründe, Transparenz, Schatten, Animationen, Diagramme und mehr.

CSS3-Spezifikation ist in Module unterteilt

CSS1 und CSS2.1 sind beide Einzelspezifikationen. CSS1 definiert hauptsächlich die grundlegenden Stile von Webseitenobjekten, wie Schriftarten, Farben, Hintergründe, Rahmen usw. CSS2 fügt erweiterte Konzepte wie Floating hinzu , Positionierung, erweiterte Selektoren (z. B. Unterselektoren, benachbarte Selektoren, universelle Selektoren usw.).

Eine große Veränderung in der Entwicklung von CSS ist die Entscheidung des W3C, CSS3 in eine Reihe von Modulen aufzuteilen. Browser-Anbieter entwickeln Innovationen schnell im Tempo von CSS. Durch die Einführung eines Modulansatzes können sich Elemente in der CSS3-Spezifikation also unterschiedlich schnell weiterentwickeln, da verschiedene Browser-Anbieter nur bestimmte Funktionen unterstützen. Allerdings unterstützen unterschiedliche Browser zu unterschiedlichen Zeiten unterschiedliche Funktionen, was auch die browserübergreifende Entwicklung erschwert.

CSS3 ist in mehrere Module unterteilt, jedes Modul hat seine eigene Spezifikation. Der Vorteil davon ist:

Die Veröffentlichung der gesamten CSS3-Spezifikation hat aufgrund von Streitigkeiten in einigen Teilen keinen Einfluss auf die Weiterentwicklung anderer Module.

Für den Browser können Sie je nach Bedarf entscheiden, welche CSS-Funktionen unterstützt werden.

Für W3C-Entwickler können bei Bedarf gezielte Aktualisierungen vorgenommen werden, wodurch die Gesamtspezifikation flexibler wird und zeitnah überarbeitet werden kann, was die Erweiterung neuer technologiespezifischer Spezifikationen erleichtert.

Neue Funktionen von CSS3

Die CSS3-Spezifikation ist nicht völlig neu. Sie integriert einen Teil des Inhalts von CSS2.1, hat jedoch viele darauf basierende Ergänzungen und Überarbeitungen vorgenommen.

Im Vergleich zu CSS1 und CSS2 hat CSS3 revolutionäre Verbesserungen erfahren, nicht nur die Überarbeitung und Verbesserung lokaler Funktionen. Obwohl die Unterstützung des Browsers für viele neue Funktionen von CSS3 nicht perfekt ist, können Benutzer dennoch die Entwicklungsrichtung erkennen und Mission des Webseitenstils.

CSS3 verfügt über viele neue Funktionen. Hier finden Sie eine kurze Liste praktischer Funktionen, die von Browsern weitgehend unterstützt werden.

Verbesserte Selektoren

CSS3-Selektoren werden basierend auf CSS2.1 verbessert, wodurch Designer bestimmte HTML-Elemente in Tags angeben können, ohne redundante Klassen, IDs oder JavaScript-Skripte zu verwenden.

Erweiterte Selektoren sind sehr nützlich, wenn Sie saubere, schlanke Web-Tags entwerfen und Struktur und Leistung besser trennen möchten. Es kann die Anzahl der Hinzufügungen einer großen Anzahl von Klassen- und ID-Attributen in Tags reduzieren und Designern die Pflege von Stylesheets erleichtern.

Visuelle Effekte verbessern

Zu den häufigsten Effekten auf Webseiten gehören abgerundete Ecken, Schatten, Hintergrundverläufe, Durchsichtigkeit, Bildränder usw. Solche visuellen Effekte werden in CSS dadurch erreicht, dass Designer Bilder oder JavaScript-Skripte erstellen.

Einige neue Funktionen von CSS3 können verwendet werden, um einige spezielle visuelle Effekte zu erstellen. Die folgenden Kapitel zeigen Ihnen, wie diese neuen Funktionen diese visuellen Effekte erzielen.

Hintergrundeffekte verbessern

Wenn der Hintergrund in CSS zu viele Einschränkungen mit sich bringt, dann bringt CSS3 revolutionäre Änderungen mit sich.

CSS3 ist nicht mehr auf die Verwendung von Hintergrundfarben und Hintergrundbildern beschränkt. Die neuen Funktionen fügen mehrere neue Attributwerte hinzu, z. B. „Hintergrundursprung“, „Hintergrundclip“ und „Hintergrundgröße“. auf einem Element Hintergrundbild.

Wenn Sie auf diese Weise einen komplexeren Seiteneffekt entwerfen möchten, müssen Sie nicht mehr einige redundante Tags verwenden, um die Implementierung zu unterstützen. Um beispielsweise den Schiebetüreffekt in CSS zu erzielen, müssen Sie grundsätzlich zwei oder drei zusätzliche Tags hinzufügen, um die Implementierung zu unterstützen, aber diese neuen Funktionen in CSS3 können den gleichen Effekt in einem Tag erzielen.

Verbessern Sie das Box-Modell

Das Box-Modell hat in CSS höchste Priorität. Das Box-Modell in CSS2 kann nur einige Grundfunktionen implementieren, und einige spezielle Funktionen müssen basierend auf JavaScript implementiert werden. In CSS3 wurde dies erheblich verbessert und Designer können es direkt über CSS3 erreichen.

Zum Beispiel die flexible Box in CSS3, dieses Attribut führt ein neues Layoutkonzept für jedermann ein, mit dem verschiedene Layouts, insbesondere das Layout auf dem mobilen Endgerät, problemlos realisiert werden können, und seine Funktion ist noch leistungsfähiger.

Erweiterte Hintergrundfunktion

Mit CSS3 kann das Hintergrundattribut mehrere Attributwerte festlegen, z. B. Hintergrundbild, Hintergrundwiederholung, Hintergrundgröße, Hintergrundposition, Hintergrundursprung, Hintergrundclip usw., damit Sie kann mehrere Attributwerte für ein Element festlegen Fügen Sie mehrere Ebenen mit Hintergrundbildern hinzu. Wenn Sie komplexe Webseiteneffekte entwerfen möchten (z. B. abgerundete Ecken, Hintergrundüberlappung usw.), müssen Sie dem HTML-Dokument nicht mehrere nutzlose Tags hinzufügen, um die Struktur des Webseitendokuments zu optimieren.

Schatteneffekt hinzufügen

Schatten werden hauptsächlich in zwei Typen unterteilt: Textschatten und Kastenschatten.

Textschatten gibt es bereits in CSS, werden aber nicht häufig verwendet. CSS3 führt diese Funktion fort und bietet eine neue Definition, die eine neue browserübergreifende Lösung bietet, um Text auffälliger aussehen zu lassen.

Die Implementierung von Box Shadow in CSS2 ist etwas miserabel. Um einen solchen Effekt zu erzielen, müssen neue Tags und Bilder hinzugefügt werden, und der Effekt ist nicht unbedingt perfekt. Der Box-Shadow von CSS3 löst diese Situation und macht es einfach, jedem Element einen Box-Schatten hinzuzufügen.

Mehrspaltiges Layout und flexibles Boxmodell-Layout hinzufügen

CSS3 führt mehrere neue Module ein, um mehrspaltiges Layout bequemer zu erstellen.

Das Modul „Mehrspaltiges Layout“ beschreibt, wie man einen einfachen Block wie eine Zeitung oder Zeitschrift in mehrere Spalten aufteilt.

Das Modul „Flexibles Box-Layout“ ermöglicht die horizontale und vertikale Ausrichtung von Blöcken und ermöglicht die Anpassung von Blöcken an die Bildschirmgröße. Im Vergleich zum CSS-Floating-Layout, zum Inline-Block-Layout und zum absoluten Positionierungslayout erscheint es bequemer und flexibler.

Der Nachteil ist: Diese beiden Module werden in einigen Browsern noch nicht unterstützt, aber mit der Entwicklung der Technologie werden Mainstream-Browser sie aktiv unterstützen.

Perfekte Web-Fonts und Web-Font-Symbole

Browser haben viele Einschränkungen für Web-Fonts und Web-Font-Symbole sind für Designer luxuriöser. CSS3 führt @font-face wieder ein, was zweifellos eine gute Sache für Designer ist.

@font-face ist eine Möglichkeit, Schriftarten auf dem Server zu verknüpfen. Sie müssen sich keine Sorgen mehr über das Problem machen, dass Benutzer ohne diese Schriftarten nicht richtig angezeigt werden statt spezieller Schriftarten.

Erweiterte Farb- und Transparenzfunktionen

Die Einführung des CSS3-Farbmoduls ermöglicht es, bei der Erstellung von Seiteneffekten nicht mehr auf RGB- und Hexadezimalmodi beschränkt zu sein. CSS3 fügt mehrere neue Farbmodi hinzu: HSL, HSLA und RGBA. Im Webdesign ist es einfach, eine Farbe heller oder dunkler zu machen. Unter anderem fügen HSLA und RGBA auch Transparenzkanäle hinzu, mit denen sich die Transparenz jedes Elements leicht ändern lässt.

Darüber hinaus können Sie auch das Opazitätsattribut verwenden, um die Transparenz des Elements festzulegen. Von nun an ist die Schaffung von Transparenz nicht mehr auf Bilder oder JavaScript-Skripte angewiesen.

Neue abgerundete Ecken und Rahmenfunktionen

Abgerundete Ecken sind die am häufigsten verwendete Eigenschaft in CSS3, und der Grund ist einfach: Abgerundete Ecken sind schöner als gerade Linien und stehen nicht im Widerspruch zum Design. Der Unterschied zur Erstellung abgerundeter Ecken mit CSS besteht darin, dass CSS3 weder Tag-Elemente und Bilder hinzufügen noch JavaScript-Skripte ausleihen muss. Dies kann mit nur einem Attribut erfolgen.

Bei Rändern beschränkt sich CSS auf die Festlegung des Linientyps, der Stärke und der Farbe des Rahmens. Wenn Sie einen speziellen Randeffekt benötigen, können Sie ihn nur mit einem Hintergrundbild imitieren. Die Eigenschaft „border-image“ von CSS3 bereichert die Stile von Elementrändern. Sie können diese Eigenschaft auch verwenden, um hintergrundähnliche Effekte, Verdrehungen, Streckungen und gekachelte Ränder usw. zu erzielen.

Verformungsoperation hinzufügen

In der CSS2-Ära war das Verformen eines Elements eine unerreichbare Idee. Um einen solchen Effekt zu erzielen, musste viel JavaScript-Code geschrieben werden. CSS3 führt eine Transformationseigenschaft ein, die die Position und Form von Webobjekten im 2D- oder 3D-Raum manipulieren kann, beispielsweise durch Drehen, Verdrehen, Skalieren oder Verschieben.

Animationen und interaktive Effekte hinzufügen

Mit der CSS3-Übergangsfunktion (Übergang) können einige einfache Animationseffekte bei der Webseitenproduktion realisiert werden, wodurch einige Effekte schlanker und flüssiger werden.

Mit der CSS3-Animationsfunktion können komplexere Stiländerungen und einige interaktive Effekte erzielt werden, ohne dass Flash- oder JavaScript-Skriptcode verwendet werden muss.

Medieneigenschaften und reaktionsfähiges Layout verbessern

CSS3-Medieneigenschaften können ein reaktionsfähiges Layout implementieren, sodass das Layout die entsprechende Stildatei entsprechend den Anzeigeterminal- oder Geräteeigenschaften des Benutzers auswählen kann, sodass sie in verschiedenen Anzeigeauflösungen angezeigt werden kann Geräte Es hat unterschiedliche Layouteffekte, insbesondere auf dem mobilen Endgerät, was ein idealer Ansatz ist.

(Teilen von Lernvideos: CSS-Video-Tutorial)

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