Y a-t-il une différence entre le code CSS3 et CSS ?

Différent : css3 est une version améliorée de la technologie css. Certains nouveaux attributs et sélecteurs sont ajoutés à css3, ce qui peut rendre le développement de sites Web meilleur et plus pratique, comme les coins arrondis, les ombres, les dégradés, les requêtes multimédias, " :sélecteur "root", etc. CSS3 présente des problèmes de compatibilité. Certains attributs doivent être ajoutés avec des préfixes spécifiques au navigateur pour la prise en charge, tels que "-ms-".

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

CSS3 est une version améliorée de la technologie CSS (feuilles de style en cascade). Il a été formulé en 1999 et en mai 2001. Le 23, le W3C a achevé la version de travail de CSS3, qui comprend principalement des modules tels que le modèle de boîte, le module de liste, la méthode de lien hypertexte, le module de langage, l'arrière-plan et la bordure, les effets de texte et la mise en page multi-colonnes.

Un changement majeur dans l’évolution du CSS est la décision du W3C de diviser CSS3 en une série de modules. Les fournisseurs de navigateurs innovent rapidement au rythme du CSS. Ainsi, en adoptant une approche modulaire, les éléments de la spécification CSS3 peuvent avancer à des vitesses différentes, car les différents fournisseurs de navigateurs ne prennent en charge que des fonctionnalités données. Mais différents navigateurs prennent en charge différentes fonctionnalités à différents moments, ce qui complique également le développement entre navigateurs.

Syntaxe CSS3

La syntaxe CSS3 est basée sur la version originale de CSS, qui permet aux utilisateurs de spécifier des éléments HTML spécifiques dans les balises sans utiliser de classe, d'ID ou de JavaScript redondants. La plupart des sélecteurs CSS ne sont pas nouveaux dans CSS3, mais n'étaient pas largement utilisés dans les versions précédentes. Si vous souhaitez essayer d'obtenir une balise propre et légère et une meilleure séparation de la structure et des performances, les sélecteurs avancés sont très utiles. Ils peuvent réduire le nombre de classes et d'identifiants dans la balise et faciliter la maintenance de la feuille de style par les concepteurs.

Les sélecteurs nouvellement ajoutés sont présentés dans le tableau suivant :

E[att^="val"] Fait correspondre l'élément E avec l'attribut att et la valeur commençant par val Correspond aux éléments E avec l'attribut att et la valeur se terminant par val Correspond à l'élément E avec l'attribut att et la valeur contenant valE :root Correspond à l'élément racine du document. En HTML (une application sous Standard Universal Markup Language), l'élément racine est toujours HTML Correspond au nième élément enfant E Correspond au n-ème élément enfant structurel à partir du bas de l'élément parent E Correspond au nième élément frère E du même type Correspond à l'avant-dernier nième élément frère du même type E correspond au dernier élément E de l'élément parent Correspond au premier élément E parmi les éléments frères qui n'a aucun élément enfant (y compris les nœuds de texte) Faire correspondre l'élément F après l'élément EProblèmes de compatibilité

Type de sélecteur	Expression La formule	décrit le sélecteur d'attribut
		E[att$="val"]
		E[att*="val"]
		Pseudo-classe structurelle
		E:nth-child(n)
		E:ntième-dernier-enfant(n)
		E:nth-of-type(n)
		E:ntième-dernier-de-type (n)
		E:last -child
		E : premier du type
	E:only-child	correspond à E
	E:only-of-type	correspond à E
	E:empty	correspond à l'élément E
Pseudo-classe cible	E:target	Correspond à l'élément E pointé par l'URL pertinente
Pseudo-classe de statut d'élément d'interface utilisateur	E:enabled	correspond à toutes les interfaces utilisateur (formulaires de formulaire) dans L'élément E à l'état disponible
	E : désactivé	correspond à toutes les interfaces utilisateur (formulaires de formulaire) qui sont désactivés L'élément status E
	E:checked	correspond à l'état sélectionné dans toutes les interfaces utilisateur (formulaires de formulaire ) L'élément E
	E::selection	correspond à la partie de l'élément E qui est sélectionnée ou mise en évidence par l'utilisateur
Pseudo-classe négative	E:not(s)	Correspond à tous les éléments E qui ne correspondent pas au sélecteur simple s
	Nouvelles fonctionnalités en CSS3	CSS3 ajoute de nombreuses nouvelles fonctionnalités, telles que des coins arrondis, des bordures graphiques, des ombres de bloc et des ombres de texte, en utilisant RGBA pour obtenir des effets de transparence, des effets de dégradé, utiliser @Font-Face pour obtenir des polices personnalisées, des arrière-plans multiples, du texte ou des images Traitement de transformation (rotation, mise à l'échelle, inclinaison, déplacement), mise en page multi-colonnes, requêtes multimédias, etc.

Les fabricants de navigateurs ont déjà implémenté CSS3. Bien qu'il ne soit pas devenu un véritable standard, il fournit des préfixes spécifiques au navigateur :

Chrome (Google Chrome) : -webkit-

Safari (Safari) : -webkit-

Firefox (Firefox navigateur): -moz-

• lE (navigateur IE): -ms-

• Opera (navigateur Opin): -0-

• Par exemple, les styles de dégradé CSS3 sont différents dans Firefox et Safari. Firefox utilise -moz-linear-gradient, tandis que Safari utilise -webkit-gradient. Les deux syntaxes utilisent le préfixe de type de fournisseur.
• Il convient de noter que lorsque vous utilisez des styles avec des préfixes de fabricant, vous devez également utiliser des styles sans préfixes. Cela garantit que lorsque le navigateur supprime le préfixe et utilise la spécification CSS3 standard, le style sera toujours valide. Par exemple :

  #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;/*无前缀的样式*/
  }

  Compatibilité du navigateur CSS3 :

Pour plus de connaissances liées à la programmation, veuillez visiter :

Vidéo de programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!