Bonjour, j'essaye le bootstrap, le css et le html pour la première fois et je veux changer la couleur du texte sur la barre de navigation. Je veux changer la couleur de la barre de navigation sans utiliser "! Important" voici mon code HTML:
.navbar-brand{
color: coral !important;
}
.navbar-nav li a{
color: coral !important;
}
voici mon code css:
<html>
<head>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="cpis.css">
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="#">Brand testing</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-fluid bg-secondary" style="font-size: 20px; font-family: tahoma; color: goldenrod;">
Test12 12 23
</div>
<div class="container-fluid border bg-secondary text-white">
<button type="button" class="btn btn-success">Exit</button>
<button type="button" class="btn btn-success">New</button>
<button type="button" class="btn btn-success">Search</button>
</div>
</body>
</html>
Sans utiliser "! important;", le texte ne change pas color, et j'ai besoin de savoir pourquoi cela se produit parce que j'ai peur que ce ne soit un problème dans le futur de ce code. Merci d'avance!
4 Réponses :
cela est principalement dû à la disposition du lien ou de la balise de style. si vous utilisez la balise de style avant la balise de lien qui se connecte à bootstrap, elle remplacera tout et votre balise de style n'aura aucun effet sur la page. Essayez d'écrire la balise de script, après la balise de lien
La réponse doit inclure un bloc de code corrigé.
Le problème vient généralement d'avoir votre feuille de style css avant la feuille de style bootstrap. Mettez votre feuille de style après la feuille de style bootstrap.
Un peu comme ça
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="style.css" rel="stylesheet">
* ceci est un exemple alors remplacez la version bootstrap que vous utilisez
p >
C'est la bonne réponse, supprimez également ! Important de votre navbar-brand
Veuillez également noter qu'en raison du bootstrap que vous avez importé, il s'agit de la valeur par défaut pour navbar-brand : .navbar-brand {color: rgba (0 , 0,0, .9)} ou {color: #fff} selon le contexte
j'ai essayé ça et ça n'a pas marché
Vous devez utiliser ceci:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Tout va bien.
Vous devez remplacer le style bootstrap en utilisant le même sélecteur dans votre feuille de style que dans la feuille de style bootstrap.
Veuillez essayer ci-dessous css.
.navbar-light .navbar-brand, .navbar-light .navbar-nav .nav-link{
color: coral;
}
bienvenue @Chrstiannathanael :)
Presque impossible à dire sans voir le reste de votre CSS. 99% du temps, c'est un problème de spécificité. Regardez dans votre CSS pour voir où ces classes sont stylées ailleurs. Ils le sont certainement. Consultez ce document si la spécificité CSS ne vous est pas familière: developer.mozilla. org / en-US / docs / Web / CSS / Spécificité
allez-vous s'il vous plaît afficher le code html
Je viens d'ajouter le code HTML
Apprenez à utiliser les outils à votre disposition. Dans ce cas, les outils de développement trouvés dans la plupart des navigateurs en appuyant sur F12. Vous pouvez inspecter les éléments de la page, voir quels styles sont appliqués et ce qui est remplacé. En utilisant ces informations, vous devriez être en mesure de trouver un sélecteur plus spécifique.