👤

Bonjour, j’aurai besoins d’aide en HTML svp
Ma prof de NSI me demande de faire un site en 3 page mais que leurs mises en page devra être réalisée à l’aide d’un unique fichier CSS

Je ne comprend pas comment je pourrait procéder ? Merci d’avance

Sagot :

Bonsoir

Rôles du HTML et du CSS

Le HTML constitue le contenu de la page, ce qui sera visible par l'utilisateur.
Mais pas que, le HTML apporte aussi tout un tas d'informations du genre la langue du site, les scripts javascript qu'il faudra exécuter, certains éléments de mise en page basique, et bien d'autres.

Le CSS ca va être l'habillage du site, la manière dont la contenu sera disposé. Il fonctionne en deux membres:

  • Le sélecteur CSS, il peut être générique du genre p, h1, body, etc. ou plus précis comme #id_ma_balise, .ma_class, p.class_2
  • Les attributs CSS, ce sont les propriétés qu'on va imposer à l'élément sélectionné. Par exemple sa couleur (color:), ses marges (margins:),...

Lier le HTML & le CSS

Comme on l'a rappelé au dessus, le fichier HTML contient des informations que le visiteurs ne voit pas forcément mais qui permettent le bon fonctionnement du site, c'est le cas de la balise <link>.

Cette balise est utilisé 99% du temps pour lier une feuille de style (fichier .css) ou pour définir un favicon (le petit icon qu'on voit dans l'onglet des navigateur, à gauche du nom du site).

Pour lier un fichier CSS

On doit simplement écrire

▌ <link rel="stylesheet" href="<emplacement du fichier.css>">

Cette liaison n'est pas exclusive, donc on peut totalement lier plusieurs pages HTML au même fichier CSS.

Une feuille CSS, plusieurs pages ?

Je ne sais pas précisément ce qui te posait problème mais un fichier CSS peut totalement assumer plusieurs pages sans soucis.
À savoir qu'un fichier CSS fonctionnera toujours aussi bien même si certains sélecteurs CSS sont obsolètes

Par exemple

Imaginons qu'un fichier CSS ait une part des sélecteurs communs aux 3 pages HTML (par exemple: body, h1, p, header), cela va très bien fonctionner sur les pages.

Si la première page contient une <div class="page-1"> et qu'en CSS on fait par exemple:

div.page-1 { background-color: lightgreen; }

Ca ne posera aucun problème que la div avec la class "page-1" n'existe pas sur les pages 2 et 3.

Voilà

J'espère avoir dissipé ce qui te semblait flou, sinon tu peux me demander dans les commentaires,

Bonne soirée

© 2024 IDNLearn. All rights reserved.