Sites


CSS3

Appliquer à plusieurs éléments grâce aux classes

L'utilisation de classe est très pratique pour agir à un endroit particulier de la page web, mais finalement assez peu si l'on envisage la page dans son intégralité. Il est en effet assez rare de vouloir changer très spécifiquement un texte en propre. En général, il y a une uniformité entre les titres, les paragraphes, les liens…

Mais il est aussi parfois nécessaire de les différencier par catégorie. Certaines abréviations de notre page ont trait au CSS et d'autres au HTML et on pourrait avoir envie de donner une couleur différente à chaque. 

L'ajout de classe à une balise de la page permet d'agir sur toutes les balises qui contiendront cette classe-là où définir l'élément change indifféremment tous ou la classe un seul.

La syntaxe CSS dans ce cas sera de la forme : 

.valeur_de_class { propriété_css : valeur; }

Cette méthode implique aussi un minimum d'intervention dans le HTML pour attribuer cette classe. En reprenant notre exemple précédent en tentant de spécifier spécifiquement une mise en forme pour HTML4, nous modifierons sa balise abbr pour ceci : 

<abbr class="html">HTML4</abbr>

Répété, nous obtenons donc du HTML : 

<h1>Utiliser du <abbr class="css">CSS3</abbr> avec du <abbr class="html">HTML5</abbr></h1>

<p>Le <abbr class="css">CSS3</abbr> est la variante en cours de recommandation par le <a
href="http://w3.org"> W3C </a>. Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le <abbr class="html">HTML5</abbr> par rapport au <abbr class="html">HTML4</abbr>.</p>

<p>Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisables dans de nombreux contextes.</p>

du CSS : 

.html { color:green; }
.css { color:yellow; }

pour un rendu :

Utiliser du CSS3 avec du HTML5

Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.

Remarquez donc au passage que :

  • la mise en forme de la classe se surajoute et complète la mise en forme générale par l'élément ;
  • s'il y a conflit de propriété et de valeur entre la définition de l'élément et de celle de la classe, celle de la classe prime ; mais en revanche part sur une définition spécifique à un identifiant ;
  • le caractère . est rajouté dans la feuille de style devant le nom repris directement à la valeur de l'attribut HTML class, mais que ce dièse n'a pas à apparaître dans le HTML. Il s'agit ici d'une sorte de raccourcis mentionnant . = classe.

Enfin, rappelons qu'il est possible de définir plusieurs classes en même temps sous la forme : 

.html, .css { color:green; }

Nous pouvons dons à l'heure actuelle agir à tous les niveaux, du plus général au plus particulier. Mais le fait de devoir écrire dans le HTML pour ajouter classe ou identifiant peut être un frein pour certains projets dans lesquels cela ne serait pas possible. Il est donc important d'envisager d'autres méthodes de sélection. 

Limiter l'action de la classe à un type d'élément

Appliquer plusieurs classes CSS

On peut, si besoin, appliquer plusieurs classes à des éléments de la page. Cette méthode permet de rendre plus modulaire la conception visuelle, mais peut parfois rendre aussi plus difficile l'organisation du CSS.

.lorem {
  background-color:orange
} 
.ipsum{
  font-family:sans
}

on appliquera ces classes simplement en les listant dans l'attribut class en les séparant par un espace.  

 <p lang="la" class="lorem ipsum">Lorem ipsum dolor sit amet, consectetur adipis&shy;cing elit. Phasellus sit amet dolor ultricies felis ornare tempus in vel erat. Suspendisse potenti. Suspendisse potenti. Integer convallis auctor dolor, quis sodales nisl tristique et. Nam accumsan in dui a gravida. Nam varius turpis et tempor sodales. Etiam ullamcorper massa non nunc rhoncus rhoncus. Cras consectetur, neque ut ultrices lobortis, nibh enim sodales quam, tempus mattis ligula lacus ut velit. Maecenas ante arcu, rhoncus id est id, posuere pulvinar nunc. Vestibulum at dui consequat, faucibus enim sit amet, molestie lorem. Nunc nunc sem, aliquam quis blandit sed, dictum id magna. Etiam quis bibendum mi, sit amet pretium nunc. Curabitur ac ultricies ante. Etiam posuere purus dolor, id dapibus felis laoreet a. Maecenas lorem nunc, convallis in felis id, imperdiet vestibulum arcu. Proin et iaculis est, at suscipit ligula.</p>

Il est ainsi possible d'en mettre autant que souhaité. Un problème se pose cependant lorsque des propriétés identiques sont définies dans chaque règle, comme par exemple ici background :  

.lorem {
  background-color:orange
} 
.ipsum{
  background-color:cyan;
  font-family:sans
}

Dans ce cas, c'est le dernier défini dans le CSS qui s'appliquera, quelque soit l'ordre dans lequel les classes sont appliquées : 

<p lang="la" class="lorem ipsum">Lorem ipsum dolor sit amet,(...)</p>

<p lang="la" class="ipsum lorem">Lorem ipsum dolor sit amet,(...)</p>

alors qu'en modifiant le CSS, le résultat est bien affecté.

.ipsum{
  background-color:cyan;
  font-family:sans
} 
 .lorem {
  background-color:orange
} 

gfd 

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.