Gibt es einen Unterschied zwischen CSS3-Code und CSS?

Anders: CSS3 ist eine aktualisierte Version der CSS-Technologie. Zu CSS3 wurden einige neue Attribute und Selektoren hinzugefügt, die die Website-Entwicklung besser und komfortabler machen können, wie z. B. abgerundete Ecken, Schatten, Farbverläufe, Medienabfragen und „:root“. Auswahl. Geräte usw. CSS3 weist Kompatibilitätsprobleme auf und einige Attribute müssen zur Unterstützung mit browserspezifischen Präfixen hinzugefügt werden, z. B. „-ms-“.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

(Lernvideo-Sharing: CSS-Video-Tutorial)

CSS3 ist eine aktualisierte Version der CSS-Technologie (Cascading Style Sheet). Sie wurde 1999 formuliert. Am 23. Mai 2001 stellte W3C den Arbeitsentwurf von CSS3 fertig Enthält hauptsächlich Box-Modell, Listenmodul, Hyperlink-Modus, Sprachmodul, Hintergrund und Rahmen, Texteffekte, mehrspaltiges Layout und andere Module.

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-Syntax

Die CSS3-Syntax basiert auf der Originalversion von CSS, die es Benutzern ermöglicht, bestimmte HTML-Elemente in Tags anzugeben, ohne redundante Klassen, IDs oder JavaScript zu verwenden. 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 den Designern die Pflege erleichtern.

Die neuen Selektoren werden in der folgenden Tabelle angezeigt:

strukturelle PseudoklasseE:nth-last-child(n)E:nth-of-type(n)E:first-of-type entspricht allen E-Elementen im verfügbaren Status in der Benutzeroberfläche (Formularformular)E::selectionNegative Pseudoklasse passt das F-Element nach dem E-Element anKompatibilitätsproblemeFirefox (Firefox): -moz-

Selektortyp	Ausdruck	Beschreibung
Teilstring-Übereinstimmungsattribut. Selektor	E [att^=" val"]	stimmt mit dem E-Element überein, das das att-Attribut hat und dessen Wert mit val beginnt und deren Wert mit val beginnt. E-Elemente, deren Werte mit val enden
	E:root	stimmt mit dem Stammelement des Dokuments überein. In HTML (einer Anwendung unter Standard Universal Markup Language) ist das Stammelement immer HTML
	Entspricht dem n-ten strukturellen untergeordneten Element E vom letzten im übergeordneten Element
Passen Sie das n-te Geschwisterelement E desselben Typs an :last-child	entspricht dem letzten E-Element im übergeordneten Element
	entspricht dem ersten E in den Geschwisterelementen derselben Ebene Element
	E:only-child	stimmt mit E überein, das das einzige untergeordnete Element im übergeordneten Element ist Element des gleichen Typs E
	E: leer	stimmt mit Elementen ohne untergeordnete Elemente (einschließlich Textknoten) überein. URL Das spitze E-Element
	UI-Elementstatus-Pseudoklasse	E:aktiviert
		E:deaktiviert	Übereinstimmung mit allen E-Elementen, die sich im Benutzer im nicht verfügbaren Status befinden Schnittstelle (Formularformular)
	E: geprüft	Entspricht allen Elementen E, die sich in einem ausgewählten Zustand in der Benutzeroberfläche (Formularformular) befinden
		Entspricht dem Teil des E-Elements, der vom Benutzer ausgewählt oder hervorgehoben wurde
		E:not(s)	match Alle Elemente E, die nicht mit dem einfachen Selektor übereinstimmen s
		Universelle Geschwisterelementauswahl	E ~ F
	Neue Funktionen in CSS3	css3 hat viele neue Funktionen hinzugefügt B. abgerundete Ecken, grafische Ränder, Blockschatten und Textschatten, Verwendung von RGBA zum Erzielen von Transparenzeffekten, Verlaufseffekten, Verwendung von @Font-Face zum Erzielen benutzerdefinierter Schriftarten, mehrerer Hintergründe, Texte oder Bilder Transformationsverarbeitung (Rotation, Skalierung, Neigung, Verschieben), mehrspaltiges Layout, Medienabfragen usw.
Browserhersteller haben CSS3 bereits implementiert. Obwohl es sich nicht zu einem echten Standard entwickelt hat, bietet es browserspezifische Präfixe:	Chrome (Google Chrome): -webkit -	Safari (Safari): -webkit-

lE (IE): -ms-

Opera (Europa) Peng-Browser):-0-

Beispielsweise unterscheiden sich die CSS3-Verlaufsstile in Firefox und Safari. Firefox verwendet -moz-linear-gradient, während Safari -webkit-gradient verwendet. Beide Syntaxen verwenden das Herstellertyppräfix.

Es ist zu beachten, dass Sie bei der Verwendung von Stilen mit Herstellerpräfixen auch Stile ohne Präfixe verwenden sollten. Dadurch wird sichergestellt, dass der Stil weiterhin gültig ist, wenn der Browser das Präfix entfernt und die Standard-CSS3-Spezifikation verwendet. Zum Beispiel:

• #example{
    -webkit-box-shadow：0 3px 5px#FFF;
    -moz-box-shadow：0 3px 5px#FFF;
    -o-box-shadow：0 3px 5px#FFF;
    box-shadow：0 3px 5px#FFF;/*无前缀的样式*/
  }

  CSS3-Browserkompatibilität:

• Weitere Programmierkenntnisse finden Sie unter:

  Programmiervideo
! !

Das obige ist der detaillierte Inhalt vonGibt es einen Unterschied zwischen CSS3-Code und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!