Que signifie CSS3 ?

css3 est une version améliorée de la technologie de feuille de style en cascade CSS, ce qui signifie « feuille de style en cascade à trois niveaux » ; CSS3 ajoute de nombreuses fonctions sur la base de CSS2.1 pour aider les développeurs à résoudre certains problèmes pratiques, notamment le modèle de boîtes et le module de liste. , mode lien hypertexte, module de langue, arrière-plan et bordure, effets de texte, mise en page multi-colonnes et autres modules.

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

Que signifie CSS3 ?

CSS3 est une version améliorée de la technologie CSS (Cascading Style Sheet), qui fait référence à « Cascading Style Sheet Level 3 ». Elle ajoute de nombreuses nouvelles fonctionnalités puissantes basées sur CSS2.1 pour aider les développeurs à résoudre certains problèmes. problèmes pratiques sans avoir besoin de balises non sémantiques, de scripts JavaScript complexes et d'images.

CSS3 est une version améliorée de la technologie CSS (Cascading Style Sheets), qui fait référence aux "Cascading Style Sheets Level 3". Elle a été formulée en 1999. Le 23 mai 2001, le W3C a terminé la version de travail de CSS3. Une feuille de route de développement CSS3 a été formulée. La feuille de route répertorie tous les modules en détail et prévoit de les standardiser progressivement à l'avenir.

CSS3 est la dernière version de la spécification CSS. Elle ajoute de nombreuses nouvelles fonctionnalités puissantes basées sur CSS2.1 pour aider les développeurs à résoudre certains problèmes pratiques et ne nécessite plus de balises non sémantiques, de scripts JavaScript complexes et d'images. Par exemple, CSS3 prend en charge les coins arrondis, les arrière-plans multiples, la transparence, les ombres, les animations, les graphiques, etc.

La spécification CSS3 est divisée en modules

CSS1 et CSS2.1 sont tous deux des spécifications uniques. CSS1 définit principalement les styles de base des objets de page Web, tels que les polices, les couleurs, les arrière-plans, les bordures, etc. CSS2 ajoute des concepts avancés tels que le flottement. , positionnement, sélecteurs avancés (tels que sous-sélecteurs, sélecteurs adjacents, sélecteurs universels, etc.).

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.

CSS3 est divisé en plusieurs modules, chaque module a sa propre spécification. L'avantage est :

La publication de l'intégralité de la spécification CSS3 n'affectera pas l'avancement des autres modules en raison de litiges dans certaines parties.

Pour le navigateur, vous pouvez décider quelles fonctions CSS sont prises en charge selon vos besoins.

Pour les développeurs du W3C, des mises à jour ciblées peuvent être effectuées selon les besoins, rendant la spécification globale plus flexible et pouvant être révisée en temps opportun, facilitant ainsi l'extension de nouvelles spécifications spécifiques à la technologie.

Nouvelles fonctionnalités de CSS3

La spécification CSS3 n'est pas complètement nouvelle. Elle intègre une partie du contenu de CSS2.1, mais a apporté de nombreux ajouts et révisions sur cette base.

Par rapport à CSS1 et CSS2, CSS3 a subi des mises à niveau révolutionnaires, pas seulement la révision et l'amélioration des fonctions locales. Bien que la prise en charge par le navigateur de nombreuses nouvelles fonctionnalités de CSS3 ne soit pas parfaite, elle permet toujours aux utilisateurs de voir l'orientation du développement. et la mission du style de page Web.

CSS3 présente de nombreuses nouvelles fonctionnalités. Voici une brève liste de fonctionnalités pratiques largement prises en charge par les navigateurs.

Sélecteurs améliorés

Les sélecteurs CSS3 sont améliorés sur la base de CSS2.1, ce qui permet aux concepteurs de spécifier des éléments HTML spécifiques dans les balises sans utiliser de classes, d'ID ou de scripts JavaScript redondants.

Les sélecteurs avancés sont très utiles si vous souhaitez concevoir des balises Web claires et légères ainsi qu'une structure et des performances mieux séparées. Cela peut réduire le nombre d'ajouts d'un grand nombre d'attributs de classe et d'identifiant dans les balises et permettre aux concepteurs de gérer plus facilement les feuilles de style.

Améliorer les effets visuels

Les effets les plus courants dans les pages Web incluent les coins arrondis, les ombres, les arrière-plans dégradés, la translucidité, les bordures d'images, etc. De tels effets visuels sont obtenus en CSS en s'appuyant sur des concepteurs pour créer des images ou des scripts JavaScript.

Certaines nouvelles fonctionnalités de CSS3 peuvent être utilisées pour créer des effets visuels spéciaux. Les chapitres suivants vous montreront comment ces nouvelles fonctionnalités permettent d'obtenir ces effets visuels.

Améliorez les effets d'arrière-plan

Si l'arrière-plan en CSS vous apporte trop de restrictions, alors CSS3 apportera des changements révolutionnaires.

CSS3 n'est plus limité à l'utilisation de couleurs d'arrière-plan et d'images d'arrière-plan. Les nouvelles fonctionnalités ajoutent plusieurs nouvelles valeurs d'attribut, telles que background-origin, background-clip et background-size. sur un élément.

De cette façon, si vous souhaitez concevoir un effet de page plus complexe, vous n'avez plus besoin d'utiliser des balises redondantes pour faciliter la mise en œuvre. Par exemple, pour obtenir l'effet de porte coulissante en CSS, vous devez essentiellement ajouter 2 ou 3 balises supplémentaires en CSS pour faciliter la mise en œuvre, mais ces nouvelles fonctionnalités en CSS3 peuvent obtenir le même effet dans une seule balise.

Améliorer le modèle de boîte

Le modèle de boîte est une priorité absolue en CSS Le modèle de boîte en CSS2 ne peut implémenter que certaines fonctions de base, et certaines fonctions spéciales doivent être implémentées sur la base de JavaScript. En CSS3, cela a été grandement amélioré et les concepteurs peuvent y parvenir directement via CSS3.

Par exemple, la boîte flexible en CSS3, cet attribut introduira à chacun un nouveau concept de mise en page, qui pourra facilement réaliser diverses mises en page, notamment la mise en page sur le terminal mobile, sa fonction est encore plus puissante.

Fonction d'arrière-plan améliorée

CSS3 permet à l'attribut background de définir plusieurs valeurs d'attribut, telles que background-image, background-repeat, background-size, background-position, background-origin, background-clip, etc., afin que vous peut définir plusieurs valeurs d'attribut sur un élément. Ajouter plusieurs couches d'images d'arrière-plan. Si vous souhaitez concevoir des effets de page Web complexes (tels que des coins arrondis, un chevauchement d'arrière-plan, etc.), vous n'avez pas besoin d'ajouter plusieurs balises inutiles au document HTML pour optimiser la structure du document de la page Web.

Ajouter un effet d'ombre

Les ombres sont principalement divisées en deux types : l'ombre du texte et l'ombre de la boîte.

Les ombres de texte existent déjà en CSS, mais ne sont pas largement utilisées. CSS3 poursuit cette fonctionnalité avec une nouvelle définition qui fournit une nouvelle solution multi-navigateurs pour rendre le texte plus accrocheur.

L'implémentation de box shadow est un peu misérable en CSS2. Afin d'obtenir un tel effet, de nouvelles balises et images doivent être ajoutées, et l'effet n'est pas nécessairement parfait. L'ombre de boîte de CSS3 brisera cette situation et facilitera l'ajout d'une ombre de boîte à n'importe quel élément.

Ajouter une disposition multi-colonnes et une disposition flexible du modèle de boîte

CSS3 introduit plusieurs nouveaux modules pour créer plus facilement une disposition multi-colonnes.

Le module Mise en page multi-colonnes décrit comment diviser un bloc simple en plusieurs colonnes, comme un journal ou un magazine.

Le module Flexible Box Layout permet d'aligner les blocs horizontalement et verticalement, et permet aux blocs de s'adapter à la taille de l'écran. Comparé à la disposition flottante CSS, à la disposition en blocs en ligne et à la disposition à positionnement absolu, il semble plus pratique et flexible.

L'inconvénient est que ces deux modules ne sont pas encore pris en charge dans certains navigateurs, mais avec le développement de la technologie, les navigateurs grand public les prendront activement en charge.

Polices Web parfaites et icônes de polices Web

Les navigateurs ont de nombreuses restrictions sur les polices Web, et les icônes de polices Web sont plus luxueuses pour les concepteurs. CSS3 réintroduit @font-face, ce qui est sans aucun doute une bonne chose pour les designers.

@font-face est un moyen de lier des polices sur le serveur. Ces polices intégrées peuvent devenir des polices sûres pour le navigateur. Vous n'avez plus à vous soucier du problème que les utilisateurs ne peuvent pas afficher correctement sans ces polices. au lieu de polices spéciales.

Fonctions de couleur et de transparence améliorées

L'introduction du module de couleur CSS3 permet de ne plus se limiter aux modes RVB et hexadécimal lors de la création d'effets de page. CSS3 ajoute plusieurs nouveaux modes de couleur : HSL, HSLA et RGBA. Dans la conception Web, il est facile de rendre une couleur plus claire ou plus foncée. Parmi eux, HSLA et RGBA ajoutent également des canaux de transparence, qui peuvent facilement modifier la transparence de n'importe quel élément.

De plus, vous pouvez également utiliser l'attribut opacity pour rendre la transparence de l'élément. Désormais, la création de transparence ne repose plus sur des images ou des scripts JavaScript.

Nouveaux coins arrondis et fonctions de bordure

Les coins arrondis sont la propriété la plus utilisée en CSS3, et la raison est simple : les coins arrondis sont plus beaux que les lignes droites et n'entreront pas en conflit avec le design. La différence avec la création de coins arrondis avec CSS est que CSS3 n'a pas besoin d'ajouter d'éléments de balise ni d'images, ni d'emprunter de scripts JavaScript. Cela peut être fait avec un seul attribut.

Pour les bordures, CSS se limite à définir le type de ligne, l'épaisseur et la couleur de la bordure. Si vous avez besoin d'un effet de bordure spécial, vous ne pouvez utiliser qu'une image d'arrière-plan pour l'imiter. La propriété border-image de CSS3 enrichit les styles des bordures d'éléments. Vous pouvez également utiliser cette propriété pour obtenir des effets de type arrière-plan, des torsions, des étirements et des bordures en mosaïque, etc.

Ajouter une opération de déformation

À l'ère CSS2, déformer un élément était une idée inaccessible. Afin d'obtenir un tel effet, il fallait écrire beaucoup de code JavaScript. CSS3 introduit une propriété de transformation qui peut manipuler la position et la forme des objets Web dans un espace 2D ou 3D, comme la rotation, la distorsion, la mise à l'échelle ou le déplacement.

Ajouter une animation et des effets interactifs

La fonctionnalité de transition (transition) CSS3 peut réaliser des effets d'animation simples dans la production de pages Web, rendant certains effets plus rationalisés et plus fluides.

La fonctionnalité d'animation CSS3 peut réaliser des changements de style plus complexes et certains effets interactifs sans utiliser de code de script Flash ou JavaScript.

Amélioration des fonctionnalités multimédias et de la mise en page réactive

Les fonctionnalités multimédias CSS3 peuvent implémenter une mise en page réactive (Responsive), de sorte que la mise en page puisse sélectionner le fichier de style correspondant en fonction des caractéristiques du terminal d'affichage ou de l'appareil de l'utilisateur, afin qu'il puisse être affiché sur différents résolutions d'affichage ou appareils Il a différents effets de mise en page, en particulier sur le terminal mobile, ce qui est une approche idéale.

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

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!