28172 sujets

CSS et mise en forme, CSS3

Priorité entre

Bonsoir,

Voilà j'ai un petit soucis, je suis étudiant sur paris est pour l'un de mets cours je dois réaliser un site sur un thème qui soit accessible.

Niveau accessibilité rien de compliqué pour moi, sauf que notre prof nous impose de créer un bouton qui permet de changer de Css pour que le fond soit blanc et le texte noir.

Voilà mon problème j'ai crée mon premier css qui ne comporte pas d'erreur d'après w3c mais du coup j'ai qui répond aux demande de mon prof mais du coup mon site prend directement la mise en page du nouveau css. J'aimerais savoir si il est possible de créer un ordre hiérarchique au deux css d'une même page.

J'ai essayé de mettre !important derrière les donnée qui m'intéresser de mon 1er css mais du coup le changement ne se fait pu 
body { 
    margin: 0%;
	padding:0%;
	font-family: Verdana, sans-serif;
	line-height: 1.5;
    background: #DCDCDC !important;
	
 }

Merci de pour votre aide j'espère avoir été clair si il vous faut plus de code dite moi car je sais pas quoi mettre
Salut,

perso je ferais ainsi :


<body id="test">
    <button type="button" id="change_color"> Click Me</button>
</body>




body { 
    margin: 0%;
    padding:0%;
    font-family: Verdana, sans-serif;
    line-height: 1.5;
 } 
 
.black{ 
        background: #DDD !important;
 }





var button = document.getElementById("change_color");
var element = document.getElementById("test");

button.addEventListener("click",function(e){
    element.classList.toggle('black');
},false);

Modifié par biduletruck (16 Feb 2018 - 11:41)
Modérateur
Tu peux simplifier pour ne pas à réécrire la même chose (plus facile à maintenir et c'est du réutilisable) :

body { 
   margin: 0%;
   padding:0%;
   font-family: Verdana, sans-serif;
   line-height: 1.5;
 }

.bg-white{background-color: white !important;}
.bg-black{background-color: black !important;}


Le !important n'est pas nécessaire dans ce cas-ci mais il pourrait le devenir si tu veux surclasser un autre élément qui possède déjà un background. En ajoutant simplement la class, tu seras certain que le background-color sera appliqué.


edit: biduletruck à simplifié en même temps que moi, sorry pour le double post du coup Smiley smile
Modifié par Yordi (16 Feb 2018 - 11:43)
Sujet clos
Aller à