cClaude.rocks ☕ Le blog

[Nouvelles technologies du libre, sciences et coups de gueule…]

Menu
mai
13
2021

Ce billet fait partie d’une sĂ©rie d’une dizaine billets : #atelier-web.

Cet atelier n’est pas prĂ©vu pour fonctionner sur les smartphones, certain exemples peuvent s’afficher de maniĂšre inattendue sur ces appareils.

Merci de laisser un commentaire si vous avez essayé ou fini cet atelier. Le commentaire ne sera pas publié si vous en faite la demande.

Poursuivons l'atelier Web avec l’introduction du langage CSS, nĂ©cessaire Ă  la comprĂ©hension du fonctionnement des balises span et div que nous venons de voir.

Introduction Ă  CSS

Les CSS, de l’anglais Cascading Style Sheets (feuilles de styles en cascade), servent à mettre en forme les pages *HTML.

Ce langage permet de dĂ©finir les propriĂ©tĂ©s d’apparence (couleurs, bordures, polices de caractĂšres, invisible, etc.) et de placement (largeur, hauteur, cĂŽte Ă  cĂŽte, dessus-dessous, etc.).

Les propriĂ©tĂ©s sont associĂ©es Ă  un Ă©lĂ©ment HTML et elles s’appliquent, gĂ©nĂ©ralement, Ă  l’ensemble des Ă©lĂ©ments contenu dans l’élĂ©ment donnĂ©, en informatique, on appelle ce principe un hĂ©ritage.

La notion d’hĂ©ritage des propriĂ©tĂ©s est fait Ă©galement partie de ce qui est modifiable Ă  l’aide du *CSS.

Ce document ne prĂ©tend pas ĂȘtre exhaustif quant au langage CSS.

Voici quelques propriétés CSS communément utilisées qui nous seront utiles dans la suite de notre projet.

▶ La couleur de fond – background-color

  • background-color

    Pour changer la couleur de fond d’un Ă©lĂ©ment, on utilisera la syntaxe suivante :

    background-color: COULEUR;

    Par exemple :

    background-color: yellow;

    Le nom des couleurs est en anglais, la liste des couleurs sur W3Schools. Mais, il est aussi possible d’utiliser d’autre formes comme l’hexadĂ©cimal #F0F0F0 ou le format rgb(255, 0, 0). Mais il existe de nombreuses variations possibles.

▶ Les marges – margin-left, margin-right
 ou padding-left, padding-right


  • margin et padding

    Il est possible de contrĂŽle la taille des marges Ă  l’aide des propriĂ©tĂ©s margin et padding.

    margin-right: 10px; /* marge Ă  gauche de 10 pixels */

    Notez l’unitĂ© px qui indique qu’il s’agit de pixels, mais il existe d’autres unitĂ©s possibles, en particulier les pourcentages (%).

ඏ

Utilisation du langage CSS dans un document HTML

CSS étant par nature graphique, une démonstration est plus explicite, pour cela il faut mettre lier le code CSS et le code HTML.

▶ L’attribut HTML style

Le plus simple pour appliquer un style CSS Ă  un Ă©lĂ©ment HTML est l’attribut style, mais ce n’est ni le plus Ă©lĂ©gant et ni le plus pratique Ă  long terme.

Le code :

<span style="margin-left: 10px; margin-right: 10px; background-color: yellow;">test</span>

Donnera :

test
đŸ„‡ Exemple 🧠⇝🎓

Écrire le code permettant d’afficher :

Case 1 Ligne 1Case 2 Ligne 1
Case 1 Ligne 2Case 2 Ligne 2

  • Solution 
    <div>
  <div>
    <span style="margin-left: 10px; margin-right: 10px; background-color: yellow;">Case 1 Ligne 1</span>
    <span>Case 2 Ligne 1</span>
  </div>
  <div>
    <span style="padding-left: 10px; padding-right: 10px; background-color: yellow;">Case 1 Ligne 2</span>
    <span>Case 2 Ligne 2</span>
  </div>
</div>
ඏ

▶ L’élĂ©ment (ou balise) style

On se rend compte que l’utilisation de l’attribut style produit une Ă©criture trĂšs lourde du code. De plus, de la mise au point il n’est pas rare que l’on souhaite faire Ă©voluer les valeurs des propriĂ©tĂ©s CSS, cela aura comme consĂ©quence la modification de beaucoup de code HTML.

La solution est donc d’utiliser la balise â‰șstyle≻.

Avec cette solution, il sera possible de redĂ©finir comment s’affiche un Ă©lĂ©ment HTML (donc il s’affichera avec ces caractĂ©ristiques dans toute la page).

Une autre solution est d’utiliser la notion de classe (à l’aide de l’attribut HTML : class) qui permet de regrouper une configuration et de l’appliquer plusieurs fois dans le document.

Essayons de reprendre l’exercice ci-dessus, en utilisant la balise â‰șstyle≻, et cette notion de classe CSS.

Voici ce que l’on cherche à obtenir :

Voir l’exemple dans une nouvelle fenĂȘtre.

Des explications complémentaires sont dans la solution.

Et voici, une solution possible :

  • Solution 
    <!DOCTYPE html>
<html lang="fr">
  <head>
    <title>« Poké Ball » en pixel</title>
    <!-- La balise style doit ĂȘtre dĂ©finie dans « head » -->
    <style>

/* Pour la dĂ©finition d’une classe on commence par un point */
.case-jaune {
  background-color: yellow; /* la classe jaune définie la couleur de fond */
}

/* Classe « case-marging » */
.case-marging {
  margin-left: 10px; /* indique que l’on souhaite une marge à gauche de 10 pixels */
  margin-right: 10px; /* indique que l’on souhaite une marge à droite de 10 pixels */
}

/* Classe « case-padding » */
.case-padding {
  padding-left: 10px; /* indique que l’on souhaite un dĂ©calage Ă  gauche de 10 pixels */
  padding-right: 10px; /* indique que l’on souhaite un dĂ©calage Ă  droite de 10 pixels */
}

/*
** Les classes « mon-test », « ligne » et « case » n’existent pas
** bien qu’elles soient utilisĂ©es dans le code HTML.
**
** On a associĂ© les balises de mĂȘme nature, avec un nom de classe
** pour un Ă©ventuel changement de style du document qui l’on souhaiterait
** faire plus tard. Seul le code CSS sera Ă  modifier.
*/
    </style>
  </head>
  <body>
    <div class="mon-test"><!-- On peut utiliser une classe qui n’existe pas (ou pas encore) -->
      <div class="ligne">
        <span class="case-jaune case-marging">Case 1 Ligne 1</span>
        <span class="case">Case 2 Ligne 1</span>
      </div>
      <div class="ligne">
        <span class="case-jaune case-padding">Case 1 Ligne 2</span>
        <span class="case">Case 2 Ligne 2</span>
      </div>
    </div>
  </body>
</html>
ඏ

Références

L’atelier complet

኿

â„č 2006 - 2024 | 🏠 Accueil du domaine | 🏡 Accueil du blog