„CSS3 Latest Version Reference Manual“ ist das offizielle CSS3-Online-Referenz-Lernhandbuch. Dieses CSS3-Online-Entwicklungshandbuch enthält verschiedene CSS3-Eigenschaften, Syntax, Definitionen, Verwendungsmethoden, Beispieloperationen usw. Es ist für Web-Front-End-Lernende und Entwickler unverzichtbar. Überprüfen Sie die Bedienungsanleitungen online! Hinweis: CSS3 ist eine aktualisierte Version der CSS-Technologie. Die CSS3-Sprachentwicklung entwickelt sich in Richtung Modularisierung. Zu diesen Modulen gehören: Boxmodell, Listenmodul, Hyperlink-Methode, Sprachmodul, Hintergrund und Rahmen, Texteffekte, mehrspaltiges Layout usw.
CSS3 ist eine aktualisierte Version der CSS-Technologie (Cascading Style Sheets). Sie wurde 1999 formuliert. Am 23. Mai 2001 hat W3C den Arbeitsentwurf von CSS3 fertiggestellt, der hauptsächlich Boxmodell, Listenmodul, Hyperlink-Methode usw. umfasst Sprachmodul, Hintergrund und Rahmen, Texteffekte, mehrspaltiges Layout und andere Module.
Eine wesentliche 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.
Aber verschiedene Browser unterstützen unterschiedliche Funktionen zu unterschiedlichen Zeiten, was auch die browserübergreifende Entwicklung kompliziert macht.
Tipps: Bevor Sie mit dem Erlernen von CSS3 fortfahren, müssen Sie über grundlegende Kenntnisse von CSS und HTML verfügen.
CSS wird verwendet, um den Stil und das Layout von Webseiten zu steuern. CSS3 ist der neueste CSS-Standard.
CSS3-Sprachgrundlagen
Die Syntax von CSS3 basiert auf der Originalversion von CSS, die es Benutzern ermöglicht, bestimmte HTML-Elemente in Tags anzugeben, ohne redundante Klassen-IDs zu verwenden oder JavaScript.
Die meisten CSS-Selektoren wurden in CSS3 nicht neu hinzugefügt, wurden aber in früheren Versionen nicht häufig verwendet.
Wenn Sie versuchen möchten, ein sauberes, leichtes Tag und eine bessere Trennung von Struktur und Leistung zu erreichen, sind erweiterte Selektoren sehr nützlich. Sie können die Anzahl der Klassen im Tag und die Anzahl reduzieren von IDs und erleichtert Designern die Pflege von Stylesheets.
Erstellen und führen Sie Ihre erste CSS3-Instanz aus
Instanz
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>Instanz ausführen »
Klicken Sie auf „Instanz ausführen“ Schaltfläche zum Anzeigen von Online-Beispielen
Ist es nicht sehr einfach und macht Spaß! Das Prinzip von CSS3 ist das gleiche wie das von CSS. Es besteht darin, die Selektoren des Stylesheets auf der Webseite anzupassen und dann in großer Zahl auf diese Selektoren auf der Webseite zu verweisen.
Tipp: Unser CSS3-Tutorial hilft Ihnen, Schritt für Schritt die neuen Funktionen in CSS3 zu erlernen und den Stil und das Layout mehrerer Webseiten gleichzeitig zu steuern. Wenn Sie Fragen haben, besuchen Sie bitte die chinesische PHP-Website CSS3 Community, um Ihre Fragen zu stellen, und begeisterte Internetnutzer werden sie für Sie beantworten.
Vorteile von CSS3
Entwicklungskosten und Wartungskosten reduzieren
Vor dem Aufkommen von CSS3 hatten Entwickler dies getan zu einem abgerundeten Eckeneffekt Daher ist es häufig erforderlich, zusätzliche HTML-Tags hinzuzufügen und ein oder mehrere Bilder zur Vervollständigung zu verwenden. Für die Verwendung von CSS3 ist jedoch nur ein Tag erforderlich und die Vervollständigung kann mithilfe des Attributs „border-radius“ in CSS3 erfolgen.
Auf diese Weise kann die CSS3-Technologie Menschen von der Arbeit des Zeichnens, Schneidens und Optimierens von Bildern befreien.
Wenn Sie die Krümmung oder Farbe der Verrundung später mit CSS2.1 anpassen müssen, müssen Sie das Bild von Grund auf zeichnen und ausschneiden, um dies zu erreichen. Mit CSS3 müssen Sie nur den Rand ändern. Radius-Attributwert, um die Änderung schnell abzuschließen.
Die von CSS3 bereitgestellten Animationsfunktionen ermöglichen es Entwicklern, bei der Implementierung einiger dynamischer Schaltflächen oder dynamischer Navigation auf JavaScript zu verzichten, sodass Entwickler nicht viel Zeit mit dem Schreiben von Skripten oder der Suche nach geeigneten Skript-Plug-Ins verbringen müssen anzupassen. Einige dynamische Website-Effekte.
Verbessern Sie die Seitenleistung
Viele CSS3-Techniken werden zu „Ersatz“ für Bilder, indem sie dieselben visuellen Effekte bereitstellen, mit anderen Worten, bei der Entwicklung für Durch die Reduzierung redundanter Tag-Verschachtelungen und der Anzahl der verwendeten Bilder müssen Benutzer weniger Inhalte herunterladen und Seiten werden schneller geladen.
Darüber hinaus kann durch weniger Bilder, Skripte und Flash-Dateien die Anzahl der HTTP-Anfragen beim Besuch der Website durch Benutzer reduziert werden, was eine der besten Möglichkeiten ist, die Seitenladegeschwindigkeit zu verbessern. Für die Verwendung von CSS3 zum Erstellen einer grafischen Website sind keine Bilder erforderlich, was die Anzahl der HTTP-Anfragen erheblich reduziert und die Seitenladegeschwindigkeit verbessert.
CSS3-Animationseffekte können beispielsweise HTTP-Anfragen für JavaScript- und Flash-Dateien reduzieren, erfordern jedoch möglicherweise, dass der Browser viel Arbeit leistet, um das Rendern dieses Animationseffekts abzuschließen, was dazu führen kann, dass der Browser langsam reagiert . Benutzerabwanderung.
Daher müssen Sie bei der Verwendung einiger komplexer Spezialeffekte sorgfältig überlegen. Tatsächlich können viele CSS3-Technologien die Seitenleistung unter allen Umständen erheblich verbessern.
CSS3 ist vollständig abwärtskompatibel, sodass das Design nicht geändert werden muss, damit sie weiterhin funktionieren. Auch Webbrowser unterstützen weiterhin CSS2.
Was dieses CSS3-Tutorial-Handbuch behandelt
Dieses CSS3-Tutorial-Handbuch behandelt alle neuen CSS3-Funktionen, einschließlich abgerundeter Eckeneffekte, grafischer Ränder, Blockschatten und Textschatten sowie die Implementierung mithilfe von RGBA Einführung und laufende Beispiele neuer Funktionen wie Transparenzeffekte, Verlaufseffekte, benutzerdefinierte Schriftarten mit @Font-Face, mehrere Hintergrundbilder, Text- oder Bildverformungsverarbeitung (Rotation, Skalierung, Neigung, Bewegung), mehrspaltiges Layout, Medienabfragen, usw.
Tipps: Jedes Kapitel dieses Tutorials enthält viele CSS3-Beispiele. Sie können direkt auf die Schaltfläche „Beispiel ausführen“ klicken, um die laufenden Ergebnisse online anzuzeigen. Diese Beispiele helfen Ihnen, die neuen CSS3-Funktionen besser zu verstehen und zu nutzen.
Andere CSS3-bezogene Lernreferenzressourcen
Zusätzlich zur Wissenserweiterung auf der rechten Seite dieser Seite sind auch die folgenden Ressourcen für alle ausgewählt
Neuestes Kapitel
- CSS3 多媒体查询实例 2016-10-18
- CSS3 多媒体查询 2016-10-18
- CSS3 弹性盒子 2016-10-18
- CSS3 框大小 2016-10-18
- CSS 分页 2016-10-18
- CSS 按钮 2016-10-18
- CSS 图片 2016-10-18
- CSS3 用户界面 2016-10-18
Ähnliche Kurse
- Kurze Einführung in die Web-Frontend-Entwicklung 2021-12-10
- Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original] 2022-09-30
- Gulp Erste Schritte-Video-Tutorial 2022-04-18
- Brothers in Arms Gao Luofeng CSS3-Video-Tutorial 2022-04-20
- Grundlegendes Beispiel-Video-Tutorial für die AngularJS-Entwicklungswebanwendung 2022-04-18
- Ajax-Vollkontakt 2022-04-13
- Grundlegendes Video-Tutorial zum MUI-Framework 2022-04-13
- Online-Schulung, Probestunde 2019-01-10