2-CSS

mercredi 24 avril 2019
par  Florent Girod

pourquoi ?

La page HTML n’a pas été conçu pour gérer la mise en page (c’est possible, mais c’est une mauvaise pratique). Le HTML s’occupe uniquement du contenu (texte, images, liens, etc.)

Pour tout ce qui concerne la mise en page et l’aspect « décoratif » (on parle du « style » de la page), on utilisera le CSS (Cascading Style Sheets).

PNG - 59.1 ko PNG - 81.7 ko

Saisir ce code (par copier/coller éventuellement) dans un document Notepaad++ :

<!doctype html>
<html lang="fr">
   <head>
        <meta charset="utf-8">
        <title>mon site</title>
   </head>
   <body>
        <h1>Ceci est un titre</h1>
        <p>ceci est un <strong>paragraphe</strong> Avez-vous tout compris ?</p>
   </body>
</html>

L’afficher dans un navigateur ... vous constatez que le contenu y est, mais on reste sur sa fin pour ce qui concerne la mise en page !

un peu de style !

Toujours à l’aide d’un éditeur de texte (Notepad++) en choisissant comme "Langage" "CSS", vous allez créer un fichier qui va contenir le CSS de la (nommez-le par exemple style ; il prend automatiquement l’extension .CSS si vous aviez bien choisi ce langage).

Saisissez le code suivant (copier/coller toujours possible !) :

h1
{
        text-align: center;
        background-color: red;
}
p
{
        font-family:Verdana;
        font-style: italic;
        color: green;
}

Pour l’instant le CSS n’est pas appliqué à la page html ; pour ce faire, il faut modifier le code HTML en ajoutant une ligne qui va permettre d’associer le code CSS à notre page de la manière suivante :

<link rel="stylesheet" href="style.css">

à saisir entre les balises <head>……</head>

Faites ce travail et observez la nouvelle page ... un peu plus stylée !

plus de styles !

Complétez le code CSS sur votre fichier style.css avec :

#para_1
{
        font-style:italic;
        color: blue;
}

Modifiez une ligne du code HTML de votre page de la manière suivante :

<p id="para_1">ceci est un <strong>paragraphe</strong> Avez-vous tout compris ?</p>

Testez votre code à l’aide d’un navigateur web. Que s’affiche-t-il dans la fenêtre ?

image

Insérez une image dans votre code html et ajoutez à votre fichier style.css le code suivant :

Img
{
        position: absolute;
        top:100px;
        left:30%;
        width:300px;
        padding:10px;
        margin:20px;
        border:2px solid blue;
}

Testez votre page html à l’aide d’un navigateur web :

  • que s’affiche-t-il dans la fenêtre ?
  • que remarquez-vous si vous agrandissez ou diminuez la taille de la fenêtre du navigateur ?

réponses

On obtient : PNG - 114.7 ko

Si on modifie la taille de la fenêtre du navigateur, l’image conserve sa taille (300 pixels) mais elle sa position s’adapte en largeur car elle a été réglée par un pourcentage (30 %)

PNG - 125.9 ko


Navigation

Articles de la rubrique