18041 sujets

Questions générales et questions de débutants

Choisir entre 1 fichier CSS pour l'ensemble ou 1 fichier par page HTML

Bonjour,

Je me pose la question car pour m'exercer je suis en train de créer un "CV en ligne". J'aurais voulu qu'il ai plusieurs pages, mais ces pages ont jusque là des couleurs de fond différents.

Alors dans ce cas, vaut-il mieux avoir une page CSS par page HTML, au risque que ça devienne un peu brouillon dans le dossier ? Ou alors existe-t-il une solution pour n'avoir quand même qu'une page CSS ? Ou encore, peut-on dans ce cas mettre le fond d'écran directement dans une <div> qui délimiterais la page dans le fichier HTML ?

Qu'en disent ceux avec plus d'expérience que moi en la matière ?
S’il y a plusieurs pages qui forment un tout, il est de loin préférable d’avoir une seule page css, ça permet d’assurer la compatibilité de présentation entre les pages
Administrateur
Bonjour,

même avis, surtout s'il n'y a UNE différence entre les pages.

Reste ensuite à choisir une méthode pour distinguer les pages les unes des autres.
La plus simple me semble être d'ajouter dans le code HTML une classe différente sur l'élément body.


<!-- page accueil.html -->
<body class="home accueil">

<!-- page mentions.html -->
<body class="mentions">

<!-- page portfolio.html -->
<body class="portfolio">

<!-- Toutes les pages utilisant le gabarit article.html -->
<body class="article">


Et ensuite d'avoir autant de règles CSS qu'il y a de fonds différents (ici 3 car 2 pages ont le même) :

.accueil .element-avec-un-fond { background-image: url(/blah.svg); }
.mentions .element-avec-un-fond { background-image: url(/plop.png); }
.portfolio .element-avec-un-fond,
.article .element-avec-un-fond { background-image: url(/yop.jpg); }


Les variantes c'est d'utiliser une Custom Property ("variable CSS" du genre --bg-img: uneImage.jpg et background-image: url(var(--bg-img)); ) différente alors soit pareil définie en CSS soit écrite dans la page HTML (style en ligne sur l'élément HTML ou dans un élément style)
ou
d'avoir dans chaque page un élément style
<style>.element-avec-un-fond { background-image: url(vendredi.jpg);</style>

Je ne connais pas tes connaissances en CSS "moderne" (variables CSS) mais bon dans les 2 cas, la maintenance est bien pire qu'avec la toute 1ère méthode. À réserver aux cas où tu sais pourquoi tu ne veux pas de la 1ère méthode Smiley ravi
Modifié par Felipe (31 Jan 2020 - 12:34)
Felipe a écrit :


Merci beaucoup pour ta réponse. Je vais essayer de faire comme ça. Mes connaissances se limite pour le moment au premier cour que j'ai terminé sur OpenClassRoom Smiley cligne , alors bon, je débute carrément...
La solution qui me parait très simple est de lier d'abord la feuille de styles générale, et ensuite la feuille de style spécifique à la page.
<link rel="stylesheet" href="http://chemin/general.css type="text/css"/>
<link rel="stylesheet" href="http://chemin/special.css type="text/css"/>


Pour qu'il n'y ait pas de problème de priorité, utilise les mêmes sélecteurs dans toutes les feuilles. Par exemple, avec la balise ci-dessous, ne pas utiliser des fois body, des fois .page et d'autres fois #page1. Les règles de priorité ne sont pas simples en CSS.
<body id="page1" class="page">

Modifié par Alainpre (02 Feb 2020 - 20:04)
Sujet clos
Aller à