cClaude.rocks ☕ Le blog

[Nouvelles technologies, sciences et coups de gueule…]

Menu

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 - 2021 | 🏠 Retour à l'accueil du domaine | 🏡 Retour à l'accueil du blog