oujood.com

réinitiaer les propriétés css d'un élément utilisation de la propriété css all

La propriété all de CSS réinitialise toutes les propriétés de l'élément sélectionné, sauf les propriétés direction et unicode-bidi qui contrôlent la direction du texte.

chercher |

Définition et utilisation de la propriété css all

La propriété all réinitialise toutes les propriétés, à l'exception de unicode-bidi et direction, à leur valeur initiale ou héritée.

L'objectif est de permettre la réinitialisation des styles au niveau des composants. Il est parfois bien plus facile de repartir de zéro en matière de style que de se battre contre tout ce qui existe déjà.

La Syntaxe CSS
all: initial|inherit|unset;
Valeurs par défaut none
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.all="initial"

Prise en charge de la propriété css all dans navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion3779279.124

Exemple       Copier le code

<!DOCTYPE html>
<html>
<head>
<style> 
html {
  font-size: small;
  color: blue;
}

#exemple1 {
  background-color: yellow;
  color: red;
}

#exemple2 {
  background-color: yellow;
  color: red;
  all: inherit;
}

#exemple3 {
  background-color: yellow;
  color: red;
  all: initial;
}

#exemple4 {
  background-color: yellow;
  color: red;
  all: unset;
}
</style>
</head>
<body>

<p>Sans la propriété  all :</p>
<div id="exemple1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

<p>avec all: inherit:</p>
<div id="exemple2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

<p>avec all: initial:</p>
<div id="exemple3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

<p>avec all: unset:</p>
<div id="exemple4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>


</body>
</html>

Valeurs de la propriété all

Valeur Description
initial Définit de touttes les valeurs des propriétés de élément à leur valeurs par défaut.
inherit Change toutes les propriétés appliquées à l'élément ou au parent de l'élément à leur valeur parentale
unset Change toutes les propriétés appliquées à l'élément ou au parent de l'élément à leur valeur parentale si elles sont héritables ou à leur valeur initiale si elles ne le sont pas.




Voir aussi nos tutoriel :

Bordures en CSS3

Créer des bords arrondis, ajouter une ombre aux boîtes et utiliser une image comme une bordure et sans l'aide d'un programme de conception, comme Photoshop.

Les Différents types de listes

Listes à puces et énumérations en HTML. Comment faire une liste à puce...

Introduction PHP

Tutorial pour vous enseigner les premières notions et principes du PHP afin que vous puissiez:
• Personnaliser les scripts PHP que vous téléchargerez, dans le but qu'ils puissent mieux répondre à vos aspirations et besoins.
• Commencer à comprendre le modèle de PHP, de sorte que vous commencez à créer vos propres projets PHP. • Apprendre comment faire un site web dynamique et interactif.