Quel est le nouvel attribut tout en CSS3 ? A quoi ça sert ?

Pour faciliter le développement web front-end, CSS3 a ajouté de nombreux nouveaux attributs (nouvelles fonctionnalités). Cet article vous présentera ce qu'est le nouvel attribut de tout CSS3, afin que tout le monde puisse comprendre le rôle et l'utilisation du. tous les attributs. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile. [Si vous voulez en savoir plus sur CSS3, nous vous recommandons l'apprentissage vidéo : Tutoriel CSS3]

Tout d'abord, comprenons ce qu'est l'attribut css3 all ? Que peut-on faire ? L'attribut

all est en fait l'abréviation de tous les attributs CSS, ce qui signifie : comment tous les attributs CSS devraient être ; cependant, les deux attributs CSS unicode-bidi et direction ne sont pas inclus. Par conséquent, nous devrions pouvoir connaître le rôle de l'attribut all :

attribut all : Vous pouvez réinitialiser tous les attributs des éléments sélectionnés, à l'exception des deux attributs qui contrôlent la direction du texte : l'attribut direction et l'attribut unicode-bidi. attribut.

.demo{
  all: unset;
}

Son objectif est de permettre la réinitialisation du style au niveau des composants. Parfois, définir le style souhaité à partir de zéro est beaucoup plus facile que d'apporter des modifications au style d'origine.

Jetons un coup d'œil aux valeurs d'attribut qui peuvent être définies par l'attribut all :

initiale : réinitialiser les attributs de tous les éléments sélectionnés à ceux-là. défini dans la valeur initiale de la spécification CSS.

2. hériter : l'élément sélectionné hérite des styles de tous ses éléments parents, y compris les styles qui ne sont généralement pas héritables.

3. unset : l'élément sélectionné hérite de toute valeur héritable transmise par l'élément parent. Si aucune valeur héritable n'est disponible, la valeur initiale de la spécification CSS sera utilisée pour chaque propriété.

Remarque :

En CSS, certaines propriétés ne définissent pas clairement les valeurs initiales dans la spécification, mais permettent aux utilisateurs de définir eux-mêmes les valeurs initiales, telles que les couleurs et les familles de polices.

all est une propriété abrégée car elle nous permet de contrôler la valeur de chaque propriété CSS à la fois à l'aide d'une seule déclaration. Cependant, contrairement à la plupart des propriétés abrégées, il n'existe pas de version pratique « longue » ni de sous-propriétés.

Jetons un coup d'oeil à l'effet de démonstration de tout :

Code html :

<div class="container">
	<div class="parent">
		<div class="alltest">
			<p>Change this div&#39;s <code>all</code> value.</p>
		</div>
	</div>
</div>

Code css :

.container {/* 继承 */
  font-family: sans-serif;
  font-size: 1.5em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px black;
}

.parent {
  color: green;/* 继承*/
  
  /* 不继承 */
  background-color: gainsboro;
  width: 80%;
  padding: 1em;
  border: 5px solid #E18728;
}

Rendu (non Utilisez l'attribut all) :

Ensuite, définissez l'attribut all dans le sélecteur .alltest :

all:initial;

all:inherit;

all:unset;

Notez que lorsque des valeurs héritées sont utilisées, le div hérite de chaque propriété de son parent, y compris sa largeur, padding et border, ceux-ci ne sont généralement pas hérités.

Prise en charge du navigateur

Le numéro indique que le navigateur prend en charge les fonctions de cette version et des versions supérieures.

Version PC

Version mobile/tablette

Résumé : Ça y est. Nous espérons que l’ensemble du contenu de cet article sera utile à l’étude de chacun.

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!