Heim Web-Frontend HTML-Tutorial HTML CSS3 was ist

HTML CSS3 was ist

May 28, 2019 pm 03:34 PM
css3

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.

HTML CSS3 was ist

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. Allerdings unterstützen unterschiedliche Browser zu unterschiedlichen Zeiten unterschiedliche Funktionen, was auch die browserübergreifende Entwicklung erschwert.

Entwicklungsprozess

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 förderlicher für die zeitnahe Aktualisierung und Veröffentlichung von Spezifikationen sowie für die zeitnahe Anpassung der Modulinhalte. Diese Module können unabhängig voneinander implementiert und veröffentlicht werden, was auch den Grundstein für zukünftige Erweiterungen von CSS legt. Andererseits gibt es aufgrund der Einschränkungen unterstützter Geräte und Browserhersteller keine Geräte oder Hersteller können einige Module selektiv unterstützen und eine Teilmenge von CSS3 unterstützen, was der Förderung von CSS3 förderlich ist.

Programmierentwicklung

CSS3-Programmiertools können zum Schreiben verwendet werden, wie zum Beispiel: Wordpad, Notepad unter Windows oder andere Tools, die speziell zum Bearbeiten von Webseitentexten verwendet werden, wie zum Beispiel: IntelliJ IDEA, Eclipse, MyEclipse, Webstorm, Sublime Text. Darüber hinaus gibt es auch Plug-Ins speziell für die Front-End-Entwicklung, wie zum Beispiel: Emmet.

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 oder zu verwenden JavaScript. Die meisten CSS-Selektoren sind in CSS3 nicht neu, wurden aber in früheren Versionen nicht häufig verwendet. Wenn Sie versuchen möchten, ein sauberes, schlankes Tag und eine bessere Trennung von Struktur und Leistung zu erreichen, sind erweiterte Selektoren sehr nützlich. Sie können die Anzahl der Klassen und IDs im Tag reduzieren und die Pflege des Stylesheets erleichtern.

Vorteilsbewertung

1. Reduzieren Sie die Entwicklungskosten und Wartungskosten

Vor dem Aufkommen von CSS3 wollten Entwickler es implementieren a Der Effekt mit abgerundeten Ecken erfordert oft das Hinzufügen zusätzlicher HTML-Tags und die Verwendung eines oder mehrerer Bilder zur Vervollständigung, während die Verwendung von CSS3 nur ein Tag erfordert und mit dem Attribut border-radius in CSS3 vervollständigt werden kann. 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 Attributwert „border-radius“ ändern, um den Vorgang schnell abzuschließen die Änderung.

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.

2. Verbessern Sie die Seitenleistung

Viele CSS3-Technologien sind zu „Ersatz“ für Bilder geworden, indem sie die gleichen visuellen Effekte bereitstellen, mit anderen Worten, bei der Webentwicklung reduzieren Durch die redundante Tag-Verschachtelung und die Anzahl der verwendeten Bilder müssen Benutzer weniger Inhalte herunterladen und die Seite wird schneller geladen. Darüber hinaus können weniger Bilder, Skripte und Flash-Dateien die Anzahl der HTTP-Anfragen beim Besuch der Website reduzieren, was eine der besten Möglichkeiten zur Verbesserung der Seitenladegeschwindigkeit darstellt. 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. Der CSS3-Animationseffekt kann beispielsweise HTTP-Anfragen für JavaScript- und Flash-Dateien reduzieren, erfordert jedoch möglicherweise, dass der Browser viel Arbeit leistet, um das Rendern des Animationseffekts abzuschließen, was dazu führen kann, dass der Browser langsam reagiert und Benutzerverluste verursacht . 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 [44] .

CSS3 ist vollständig abwärtskompatibel, sodass das Design nicht geändert werden muss, damit sie weiterhin funktionieren. Webbrowser unterstützen auch weiterhin CSS2

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

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel) Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel) Jun 28, 2022 pm 01:39 PM

Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.

Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code). Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code). Jul 19, 2022 am 11:28 AM

Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!

So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen Jun 01, 2022 pm 07:15 PM

Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.

So implementieren Sie Spitzenränder in CSS3 So implementieren Sie Spitzenränder in CSS3 Sep 16, 2022 pm 07:11 PM

In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".

So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3 So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3 Apr 25, 2022 pm 04:52 PM

Implementierungsmethode: 1. Verwenden Sie den Selektor „:active“, um den Status des Mausklicks auf das Bild auszuwählen. 2. Verwenden Sie das Transformationsattribut und die Funktion „scale()“, um den Bildvergrößerungseffekt zu erzielen. Die Syntax „img:active {transform : Skala(x-Achsen-Vergrößerung, y-Achsen-Vergrößerung);}".

Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind! Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind! Jun 10, 2022 pm 01:00 PM

Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.

So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest Apr 28, 2022 pm 04:32 PM

In CSS3 können Sie das Attribut „animation-timing-function“ verwenden, um die Rotationsgeschwindigkeit der Animation festzulegen. Dieses Attribut wird verwendet, um anzugeben, wie die Animation einen Zyklus abschließt und die Geschwindigkeitskurve der Animation festlegt. Animation-Timing-Funktion: Geschwindigkeitsattributwert;}".

Hat der CSS3-Animationseffekt eine Verformung? Hat der CSS3-Animationseffekt eine Verformung? Apr 28, 2022 pm 02:20 PM

Der Animationseffekt in CSS3 verfügt über eine Verformung. Sie können „Animation: Animationsattribut @keyframes ..{..{transform: Transformationsattribut}}“ verwenden, um den Animationsstil festzulegen Das Transformationsattribut wird zum Festlegen des Verformungsstils verwendet.

See all articles