Affiche une chaîne de caractères
Utilisation des class et id dans code css de page web pour donner 1 style particulier à certains balises quelles différence entre class et id
Il peut s'avérer intéressant d'affecter des styles différents à de mêmes balises. Pour cela les spécifications CSS ont introduit le concept des attributs: class et id.
Contrairement aux langages de balisage tels que HTML et XML qui doivent ajouter du contenu à une page html. Le CSS est plutôt utilisé pour sélectionner des éléments qui existent déjà dans une page Web pour définir la façon dont chaque élément doit apparaître.
Afin de faciliter au maximum la sélection des éléments d'une page Web, des identificateurs (id) et/ou des class doivent être ajoutés aux éléments de la page Web. Ces identificateurs, souvent appelés crochets dans le contexte de CSS, ils facilitent l'identification des éléments qui doivent être affectés par les règles CSS.
Les classes et les id sont utilisés comme crochets pour les styles CSS. Ils permettent aux développeurs d'identifier les éléments HTML auxquels ils souhaitent appliquer un style.
Les classes et les ID ne sont pas interchangeables. Il est important de savoir quand les utiliser.
Nous voulons que certains paragraphes (ou certains titres, ou certaines citations) soient écrits d'une manière différente des autres ?
Pour faire cela on utilise des attributs spéciaux qui fonctionnent sur toutes les balises :
• L'attribut class
• L'attribut id
les attributs class et id sont presque identiques. Une petite différence que vous trouverez par la suite.
C'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image etc...
<h1 class="nom-de-la-class"> </h1>
<p class="nom-de-la-class "></p>
<img class="nom-de-la-class" />
Les class permettent de définir un style personnalisé.
Si on veut définir un style qui écrive le texte en rouge / 14 pixels.
Nous l'appellerons par exemple " rouge14" et l'attribut class=" rouge14" doit être ajouté
à chacune des balises que vous voulez dans ce style.
Le code ci après et le code du fichier essai.html que nous avons créé et modifier tout au long de notre cours.
J'ai y ajouté un contenu texte .
Je vais y ajouter les modifications de class suivante:
A un paragraphe je vais demander qu'il soit écrit en rouge et 24 pixels, j'ajoute donc ma classe rouge14 dans la balise <p> que je désire comme suit:
<p class="rouge24">
Code : HTML
Exemple : Copier le code
<!DOCTYPE html> <html> <head> <title> Mon site !</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" /> </head> <body> <h1><em>Toto</em> à l'église </h1> <p> Toto est à l'église et il se balance sur sa chaise, sa maman lui dit alors : <br> - Arrête le petit Jésus va te voir ! <br> Toto: <br> - Mais ou est-il ? <br> - Il est au ciel ! <br> - T'inquiète pas maman, <em> il ne me verra pas grâce au plafond </em> !!. <br> </p> <p class="rouge24"> François René, vicomte de Chateaubriand a dit : <q>L'amitié ? Elle disparaît <br> quand celui qui est aimé tombe dans le malheur, ou quand celui qui aime devient puissant. </q> </p> <p>Voici une citation de Graham Greene :</p> </body> </html>
Ne vous préoccupez pas du texte écrit dans les paragraphes du code précédent c'est juste pour remplir mais regardez surtout les balises et attributs c'est ce qui nous intéresse. à partir de là pour dire dans le CSS : "Je veux que toutes mes balises qui ont la class=" rouge14" soient écrits en rouge / 24 pixels" ?
C'est simple : au lieu de mettre le nom de la balise avant les accolades (comme p ou encore h1), je doit écrire un point suivi du nom de la class, comme par exemple :
.rouge14
Ce qui nous donnerait le CSS suivant que nous devons ajouter à notre feuille de style essai.css:
Code : CSS
Exemple : Copier le code
.rouge14
{
color: red;
font-size: 24px;
}
Ajoutez ce code au fichier essai.css enregistrez et Testez la page HTML, et voyez comment la class "rouge24" que nous avons créée modifie le texte.
Lui, il fonctionne exactement de la même manière que class, mais chaque id ne peut être utilisé qu'une fois dans une page web et c'est là la différence avec l'attribut class.
Cela vous sera utile si vous faites du Java script plus tard pour reconnaître certaines balises. D'ailleurs, nous avons déjà vu l'attribut id dans le chapitre sur les liens (pour les ancres).
En pratique, nous ne mettrons des "id" que sur des éléments qui sont uniques sur votre page.
" id="nom-de-l'id"
Dans le CSS, ce n'est pas un point que vous mettez avant le nom de l'id, mais un dièse (#) :
Code CSS
Exemple : Copier le code
# nom-de-l'id
{
/* Mettez les propriétés CSS ici comme pour class*/
}
Remarque: Si nous voulons utiliser un style sur plusieurs éléments dans une page Web, alors nous utiliserons l’attribut class sur ces éléments.
Mais si nous voulons que ce style soit appliqué spécialement sur un seul élément dans notre page Web nous utiliserons l’attribut id .
Autre chose, l’attribut id sert aussi à d’autres taches, comme pour définir une ancre dans une page Web.
Parfois vous avez besoin d'appliquer un style (une class ou un id ) à certains mots qui ne sont pas entourés par des balises.
Le problème des class c'est qu'il s'agit d'un attribut, vous ne pouvez en mettre que dans une balise.
Par exemple, si je ne veux modifier que " François René " dans le paragraphe suivant :
Code : HTML
Exemple : Copier le code
<p class="rouge14"> François René, vicomte de Chateaubriand a dit : <q>L'amitié ? Elle disparaît <br> quand celui qui est aimé tombe dans le malheur, ou quand celui qui aime devient puissant. </q> </p>
C'est facile à faire s'il y avait une balise autour de " François René ", mai il n'y en a pas. Alors on a
inventé 2 balises qui ne servent à rien, avec une petite différence entre les deux :
• <span> </span> : c'est une balise de type inline. Cette balise s'utilise donc au milieu d'un paragraphe,
et c'est celle dont nous allons nous servir pour mettre en forme François René
• <div> </div> : c'est une balise de type block au même titre que <p>, <h1> etc...
Elle crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à la ligne avant et aprés.
C'est une balise très utilisée pour faire un design. Nous lui dédierons d'ailleurs une
partie entière dans notre cours pour apprendre à construire le design de votre site Web.
Ces deux balises sont dites balises universelles.
Et dans notre cas c'est la balise <span> </span> qui nous intéresse cette balise sert pour appliquer un style à une partie d'un texte.
pour en savoir plus sur cette balise voir notre référence.
Exemple : Copier le code
<p class="rouge14"> <span class="nom">François René</span>, vicomte de Chateaubriand a dit : <q>L'amitié ? Elle disparaît <br> quand celui qui est aimé tombe dans le malheur, ou quand celui qui aime devient puissant. </q> </p>
Code : CSS
Exemple : Copier le code
.nom{
color: green;
}
Dans le fichier CSS. Nous souhaiterions définir un style uniquement pour les balises qui se trouvent
à l'intérieur d'une autre.par exemple les balises
<em>
qui se trouvent à l'intérieur d'un titre <h1>.On écrit ceci :
Code : CSS
Exemple : Copier le code
h1 em
{
font-size: 24px;
color: brown;
}
Comme vous le voyez, on a juste séparé les 2 noms de balises par un espace.
Cela signifie "Je veux modifier le style de toutes les balises
<em>
situées à l'intérieur d'une balise titre <h1>".
On a indiqué dans le CSS dans quel ordre
devaient imbriquées les balises.
L'ordre est très important ! Si vous aviez mis "em h1" cela aurait voulu dire "Tous les <h1> situés à
l'intérieur de balises <em>"
Vous pouvez aussi imbriquer des balises et des class :
p rouge24
Ce qui signifie : "Toutes les éléments avec la class "rouge24" contenues dans une balise <p>"
chapitre précédent chapitre suivant