28172 sujets

CSS et mise en forme, CSS3

[Résolu] Une couleur CSS par page d'un site web

Bonjour,

je cherche à trouver la façon la plus simple et efficace pour dire à ma feuille de style CSS
d'utiliser telle ou telle couleur pour les éléments principaux d'une page web et que cette couleur change à chaque page du site.

je pensais utilise un ID sur le BODY du style 
<body id="color-bleu">

pour l'index par exemple
et 
<body id="color-orange">

pour la page contact

et faire en sorte que le CSS comprenne qu'il faille changer les différents éléments (H1, H2, background-color, boutons…) avec la bonne couleur

merci de votre aide
Salut

Si tu as différentes page HTML et que tu as donc plusieurs <body> différents, un pour chaque page, alors il suffit de faire ton css classiquement.

Ton body contient un ID

donc en partant de ce principe on peut facilement faire 

#body-bleu h1{
    color : bleu
}


#body-rouge h1{
    color : rouge
}


et d'intégrer la page css dans tes différentes pages html.

Ou faire même une page de css pour chaque page HTML (mais difficile à maintenir. ou pas.)
merci @JENCAL pour ton retour

il n'y a pas de solution avec les variables CSS ?

j'utilise déjà 
:root {
    --color-sanguine: #eb610a;
    --color-orange: #ed8c27;
    --color-bleu: #03969d;
    --color-vert: #afc910;
    --color-rose: #e40051;
    --color-mauve: #a84d96;
    --color-jaune: #f3b500;
    --color-marine: #0c3a5b;
    --color-beige: #f9f8f3;
    --color-gris: #f0ede1;
    --color-blanc: #ffffff;
    --color-noir: #000000;
}



header #header-top #header-main #header-info a:hover {
    color: var(--color-sanguine);
}
header #header-top #header-main #header-info a i {
    color: var(--color-sanguine);
    font-size: 2.5rem;
    transition: all 0.3s ease-in;
}
header #header-top #header-menu {
    background-color: var(--color-sanguine);
    color: var(--color-blanc);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-size: 1.2rem;
    font-weight: 700;
}


l'idée serait d'utiliser des conditions du genre :

if body#color-bleu
header #header-top #header-main #header-info a:hover, header #header-top #header-main #header-info a i,  {
    color: var(--color-bleu);
}
header #header-top #header-menu {
    background-color: var(--color-bleu);
}
en répondant je pense que je vais faire comme ceci en fait

faire tout mon CSS
et à la fin de ma feuille de style
ajouter :

body#color-bleu header #header-top #header-main #header-info a:hover, body#color-bleu header #header-top #header-main #header-info a i,  {
    color: var(--color-bleu);
}
body#color-bleu header #header-top #header-menu {
    background-color: var(--color-bleu);
}

body#color-orange header #header-top #header-main #header-info a:hover, body#color-orange header #header-top #header-main #header-info a i,  {
    color: var(--color-bleu);
}
body#color-orange header #header-top #header-menu {
    background-color: var(--color-bleu);
}
Modérateur
Ce que tu pouvais aussi faire c'est 
body#color-bleu {
    --color :#03969d; ;
}

body#color-orange  {
    --color: #ed8c27;
}
/* etc pour la MAJ des couleur ... */

En passant par body où ta class apparait, body reste le parent de tout ton contenu visible. Il n'y aura pas de ratés.

Puis dans la feuille de style, simplement : selecteur {color:var(--color);} sans avoir à multiplier les sélecteurs, comme cela, l'utilisation de var() devient bien plus efficace.
 header #header-top #header-main #header-info a:hover, header #header-top #header-main #header-info a i,  {
    color: var(--color);
}
 header #header-top #header-menu {
    background-color: var(--color);
}

Enfin , il me semble, à moins que tu souhaitais juste regrouper tes définitions de couleurs à un seul endroit.

Bon dev Smiley cligne
Modifié par gcyrillus (11 Apr 2022 - 17:33)
Meilleure solution
Nickel,

du coup j'ai utilisé :

body#color-sanguine {
    --color-primaire: #eb610a;
    --color-secondaire: #ed8c27;
}
body#color-bleu {
    --color-primaire: #03969d;
    --color-secondaire: #0fc6cf;
}


avec des appels :

a {
    color: var(--color-primaire);
    transition: all 0.3s ease-in;
}
h1 {
    color: var(--color-primaire);
}
h2 {
    color: var(--color-secondaire);
}


c'est parfait
merci
Smiley lol
Modifié par korom (12 Apr 2022 - 09:57)
Sujet clos
Aller à