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 auf Basis von CSS2.1 hinzu, um Entwicklern bei der Lösung einiger praktischer Probleme zu helfen Machen Sie nicht-semantische Tags, komplexe JavaScript-Skripte und Bilder überflüssig.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.
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 einzelne Spezifikationen. CSS1 definiert hauptsächlich die grundlegenden Stile von Webobjekten, wie Schriftarten, Farben, Hintergründe, Rahmen usw., und CSS2 fügt hinzu Fortgeschrittene Konzepte wie Floating, Positionierung, erweiterte Selektoren (wie 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 einen modularen Ansatz 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:
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 aber 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.
1. 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.
2. 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.
3. Verbessern Sie den Hintergrundeffekt
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 einen komplexeren Seiteneffekt entwerfen möchten, müssen Sie auf diese Weise 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 in CSS hinzufügen, um die Implementierung zu unterstützen, aber diese neuen Funktionen in CSS3 können den gleichen Effekt in einem Tag erzielen.
4. Verbessern Sie das Box-Modell
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 wird die flexible Box in CSS3 jedem ein neues Layoutkonzept vorstellen, mit dem verschiedene Layouts problemlos realisiert werden können, insbesondere auf der mobilen Seite, und seine Funktion ist noch leistungsfähiger.
5. Erweiterte Hintergrundfunktion
Mit CSS3 kann das Hintergrundattribut mehrere Attributwerte festlegen, z. B. Hintergrundbild, Hintergrundwiederholung, Hintergrundgröße, Hintergrundposition, Hintergrundursprung, Hintergrundclip usw. , sodass Sie einem Element mehrere Ebenen mit Hintergrundbildern hinzufügen können. 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.
6. 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.
7. Mehrspaltiges Layout und flexibles Boxmodell-Layout hinzugefügt
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.
8. Web-Schriftarten und Web-Schriftart-Symbole verbessern
Browser haben viele Einschränkungen für Web-Schriftarten und Web-Schriftarten-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.
9. Erweiterte Farb- und Transparenzfunktionen
Die Einführung des CSS3-Farbmoduls ermöglicht es, beim Erstellen 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. Darunter 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.
10. Funktion für abgerundete Ecken und Ränder hinzugefügt
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 diesen 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.
11. Verformungsoperation hinzufügen
In der CSS2-Ära war die Verformung eines Elements eine unerreichbare Idee, um einen solchen Effekt zu erzielen. CSS3 führt eine Transformationseigenschaft ein, die die Position und Form von Webobjekten im 2D- oder 3D-Raum manipulieren kann, beispielsweise durch Drehung, Verzerrung, Skalierung oder Verschiebung.
12. Animationen und interaktive Effekte hinzufügen
Mit der CSS3-Übergangsfunktion 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.
13. Medienfunktionen und reaktionsfähiges Layout verbessern
CSS3-Medienfunktionen können ein reaktionsfähiges (Responsive) Layout implementieren, sodass das Layout die entsprechende Stildatei entsprechend den Anzeigeterminal- oder Geräteeigenschaften des Benutzers auswählen kann, sodass dies möglich ist in verschiedenen Displays einsetzbar Ideal ist es, je nach Auflösung oder Gerät unterschiedliche Layout-Effekte zu erzielen, insbesondere auf dem mobilen Endgerät.
(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!
