Sites


CSS3

Appliquer à un élément spécifique grâce aux ID

L'utilisation de balise est donc très pratique pour répéter à l'identique des définitions de style sur une ou plusieurs balises. Maintenant, si nous souhaitons modifier très spécifiquement un seul élément de la page, comment ferions-nous ? Devrions-nous utiliser l'attribut style ?

Bien sûr que non, cette solution doit être utilisée en dernier ressort uniquement et surtout pas à la mise en place initiale des styles. Il existera plusieurs façons d'arriver au résultat : les sélecteurs CSS vont tous nous donner des moyens d'y arriver chacun à leur façon.

Une pratique courante consiste à appliquer un identifiant à une balise de la page et à tenter d'agir spécifiquement sur cette balise.

La syntaxe CSS dans ce cas sera de la forme :

#valeur_de_ID { propriété_css : valeur; }

Cette méthode implique un minimum d'intervention dans le HTML pour attribuer ce fameux identifiant. L'avantage par rapport à l'attribut style tient dans le fait que l'ID peut être court et qu'il est partageable sur chaque page web au moins une fois.

En reprenant notre exemple précédent en tentant de spécifier une mise en forme pour HTML4, nous modifierons sa balise abbr pour ceci :

<abbr id="html4">HTML4</abbr>

Nous obtenons donc du HTML :

<h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1>

<p>Le <abbr>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>HTML5</abbr> par rapport au <abbr id="html4">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 :

#html4 { color:green; }

pour un rendu :

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 l'identifiant 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 l'identifier, celle de l'identifier prime ;
  • le caractère # est rajouté dans la feuille de style devant le nom repris directement à la valeur de l'attribut HTML id, mais que ce dièse n'a pas à apparaître dans le HTML. Il s'agit ici d'une sorte de raccourcis mentionnant # = id.

Enfin, nous rappelons qu'un identifiant est normalement unique dans une page web et que ce système ne peut normalement être utilisé pour mettre en forme plusieurs parties de la page à moins de les cumuler sous la forme :

#html, #html5, #css3 { color:green; }

Pour les personnes qui souhaitent utiliser ce système, cela aboutit à une certaine lourdeur puisque à trop nommé on finit par se tromper et ne plus savoir exactement où on en est, en particulier lorsque les sites se complexifient.

Il faudra certainement passer aux classes.

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.