Techniques CSS Avancées

Contenu du cours

Techniques CSS Avancées

Techniques CSS Avancées

1. Introduction

Aperçu du Cours Objectif du Cours Sujets du Cours Comment Réussir

2. Positionnement des Éléments

Qu'est-ce Que le Positionnement?Positionnement Relatif Défi : Positionnement Relatif Positionnement Absolu Défi : Positionnement Absolu Positionnement Fixe Défi : Positionnement Fixe Positionnement Sticky Défi : Positionnement Sticky Ordre d'Empilement Défi : Ordre d'Empilement Débordement de Contenu

3. Transitions

Qu'est-ce Qu'une Transition ?Sélection de la Propriété de Transition Durée de Transition Fonction de Temps de Transition Délai de Temps de Transition Combinaison de Transition Défi : Ajout de Transition

4. Animations

Qu'est-ce Que l'Animation ?Spécifier le Temps de l'Animation Contrôler la Quantité et la Direction de Lecture de l'Animation Gestion de l'État de l'Animation Composition d'Animation Défi : Ajouter une Animation

5. Transformations

Qu'est-ce Que la Transformation?Mise à l'Échelle Rotation Défi : Ajout de Mise à l'Échelle et de Rotation Traduire Inclinaison Perspective Défi : Ajouter la Translation et l'Inclinaison

6. Sites Web et Applications Adaptatifs/Réactifs

Qu'est-ce Que le Design Adaptatif/Réactif ?@media Requête Dispositions Adaptatives - Réactives Inspection de la Page Web Défi : Inspection de la Mise en Page Adaptative/Réactive

7. Préprocesseurs

Qu'est-ce Qu'un Préprocesseur ?Syntaxe Sass Variables Sass Opérateurs Numériques Sass Imbrication Sass Directive @extend Structure des Dossiers-Fichiers

Directive @extend

La quatrième fonctionnalité utile nous permet d'appliquer des propriétés CSS prédéfinies d'un élément à un autre, créant ainsi une relation entre les sélecteurs. Cela signifie qu'un sélecteur peut hériter des propriétés d'un autre sélecteur.

Maintenant, regardons l'image ci-dessous, qui montre deux éléments de bouton :

Nous avons deux boutons : "envoyer" et "soumettre". La seule distinction entre ces éléments est la valeur de la propriété background-color. Par conséquent, nous pouvons définir les styles pour le bouton "envoyer" et faire en sorte que le bouton "soumettre" hérite de ces styles.

Le code html est :

Voyons comment nous pouvons hériter des styles avec l'aide de sass.

Le sélecteur .submit-button hérite de tous les styles du sélecteur .send-button en utilisant la directive @extend.

Tout était clair ?

Merci pour vos commentaires !

Section 7. Chapitre 6

some-alt