Les cours css : Assignation d'une propriété css

Page d'introduction

Introduction

Dans ce chapitre, nous allons voir comment assigner un ensemble de propriétés de feuille de style css à une balise HTML ou XHTML.
On peut assigner une propriété de feuille de style css à une balise HTML ou XHTML de trois façons :
- par le Nom de la balise HTML ou XHTML.
- grâce à l'attribut HTML ou XHTML ID.
- grâce à l'attribut HTML ou XHTML CLASS.

Par la balise

Définition

Par exemple, nous voulons que le texte qui se trouve dans les balises HTML <ADDRESS> soit souligné.

Nous mettrons pour la feuille de style :
Exemple de code :
<STYLE type="text/css">
  ADDRESS { text-decoration:underline; }
</STYLE>

Le code HTML ou XHTML sera :
Exemple de code :
<ADDRESS> </ADDRESS>

Cette technique permet de donner une ou des propriétés de feuilles de style css à toutes les balises <ADDRESS>.

Si vous avez plusieurs balises ayant les mêmes propriétés de feuilles de style css, vous pouvez les déclarer en les séparant par une virgule.
Vous pouvez écrire le nom des balises en majuscule ou minuscule.
Exemple de code :
<STYLE type="text/css">
  P.nom,TD,ADDRESS { text-decoration:underline; }
</STYLE>

Vous pouvez aussi assigner une propriété de feuille de style css à une balise en fonction des balises contenues dans cette dernière. Il vous suffit de ne pas mettre des ",".
Par exemple, vous avez une balise SPAN qui contient une balise P qui contient une balise B :
Exemple de code :
<span>
  <p>
    <b>Mon texte</b>
  </p>
</span>

Si vous mettez :
Exemple de code :
<STYLE type="text/css">
  SPAN P B{ text-decoration:underline; }
</STYLE>
Alors votre texte sera souligné, car pour décoder, vous avez dit :
- souligne moi la balise B qui a comme parent la balise P et qui a comme parent la balise SPAN.

Si vous inversez le B et le P alors la balise B ne sera pas soulignée :
Exemple de code :
<STYLE type="text/css">
  SPAN B P { text-decoration:underline; }
</STYLE>

Par l'attribut CLASS

Définition

L'utilisation du selecteur .nomclass permet d'assigner une ou des propriétés de feuille de style css à la balise HTML ou XHTML dont l'attribut CLASS à comme valeur est "nomclass".
On utilise la class quand les propriétés s'appliquent à plusieurs éléments.

Nous mettrons pour la feuille de style :
Exemple de code :
<STYLE type="text/css">
  ADDRESS { /* Propriété */ }
  .nom { text-decoration:underline; }
</STYLE>

Le code HTML ou XHTML sera :
Exemple de code :
<ADDRESS class="nom"> </ADDRESS>

Cette technique permet d'assigner un soulignement à toutes les balises HTML ou XHTML dont l'attribut class a comme valeur "nom".
Attention, les balises HTML ou XHTML ADDRESS dont la valeur de l'attribut CLASS est "nom" héritent aussi des propriétés définîes avec ADDRESS{}, mais pas les autres balises.
Si vous avez spécifié une même propriété, il semblerait qu'en règle général que ce soit la dernière la propriété css qui prend le dessus et les autres se cumulent.(voir Chap : Poids des sélecteurs)
Exemple de code :
<STYLE type="text/css">
  ADDRESS { font-size:12px; }
  .nom { font-size:15px;
              text-decoration:underline; }
</STYLE>

Si vous ne voulez pas que la propriété de la CLASS prenne le dessus, utilisez !important.
Exemple de code :
<STYLE type="text/css">
  ADDRESS { font-size:12px !important; }
  .nom { font-size:15px;
              text-decoration:underline; }
</STYLE>

Attention: !important n'est pas reconnu par les anciens navigateurs et est à utiliser dans les cas exceptionnels.

Nous pouvons l'utiliser différemment, pour que seules les balises ADDRESS de class "nom" en hérite.
Nous mettrons dans la feuille de style :
Exemple de code :
<STYLE type="text/css">
  ADDRESS { font-size:12px !important; }
  ADDRESS.nom { text-decoration:underline; }
</STYLE>

Le code HTML sera :
Exemple de code :
<ADDRESS class="nom"> </ADDRESS>

Les autres balises HTML ou XHTML ayant un attribut CLASS de valeur "nom" n'héritent pas de cette propriété.
Attention, la balise ADDRESS de class "nom" hérite aussi des propriétés définîes avec ADDRESS{}.

Valeur de l'attribut class

Attention, les caractères spéciaux sont à bannir dans la valeur de l'attribut HTML ouy XHTML CLASS.
La valeur de l'attribut class peut contenir toutes les lettres sans accent minuscules ou majuscules de l'alphabet, les chiffres de 0 à 9, le "_" et le "-".
Elle ne doit pas commencer par - ou par un chiffre.

Avec l'attribut html ID

Définition

L'utilisation du selecteur #nomid permet d'assigner une ou des propriétés de feuille de style css à la balise HTML ou XHTML dont l'attribut ID a comme valeur "nomid".
On utilise l'id les propriétés s'appliquent à un élément unique.

Nous mettrons pour la feuille de style :
Exemple de code :
<STYLE type="text/css">
  ADDRESS { /* Propriété */ }
  #nom { text-decoration:underline; }
</STYLE>

Le code HTML ou XHTML sera :
Exemple de code :
<ADDRESS ID="nom"> </ADDRESS>

Attention, elle hérite aussi des propriétés définîes avec ADDRESS{}.

Un autre cas peut se poser, vous avez une balise qui a un attribut ID et un attribut CLASS.
Le code HTML sera :
Exemple de code :
<ADDRESS ID="nom" CLASS="nom1"> </ADDRESS>

Si vous avez spécifié des propriétés différentes alors elles se cumulent.
Exemple de code :
<STYLE type="text/css">
  .nom1 { font-size:12px; }
  #nom { text-decoration:underline; }
</STYLE>

Si vous avez spécifié une même propriété, il semblerait que ce soit la propriété de l'ID qui prend le dessus et les autres se cumulent.
Exemple de code :
<STYLE type="text/css">
  .nom1 { font-size:12px; }
  #nom { font-size:15px; }
</STYLE>
Si vous ne voulez pas que la propriété de l'ID prenne le dessus, utilisez !important.
Exemple de code :
<STYLE type="text/css">
  .nom1 { font-size:12px !important; }
  #nom { font-size:15px; }
</STYLE>

Valeur de l'attribut id

La valeur de l'attribut ID peut contenir toutes les lettres sans accent minuscules ou majuscules de l'alphabet, les chiffres de 0 à 9, le "_" et le "-".
Elle ne doit pas commencer par - ou par un chiffre.
Attention, les caractères spéciaux sont à bannir dans la valeur de l'attribut HTML ou XHTML ID.
Attention, la valeur de ID doit être unique dans le document (norme HTML).



La balise HTML et XHTML ADDRESS est destinée à recevoir les éléments concernant l'auteur du document. <ADDRESS> </ADDRESS> La balise HTML ADDRESS est...[Voir]La balise HTML et XHTML SPAN est utilisée pour créer des propriétes css à un endroit précis. Dans ce cas, la balise HTML et XHTML <SPAN> n'introduit p...[Voir]La balise HTML et XHTML P crée un paragraphe. Après chaque balise de fin </P>, il se génère un saut de ligne.<P> </P> Le saut de ligne correspond à ...[Voir]La balise HTML et XHTML B met un texte en gras.<B> </B> Exemple: Texte Cours Html : ...[Voir]