Résolvez le problème de la couverture du style de texte de marque de la barre de navigation bootstrap: l'ordre de chargement CSS et l'analyse prioritaire

Ce tutoriel vise à résoudre le problème que la modification de style de la marque Bootstrap Navigation Bar (NAVBAR-Brand) ne prend pas effet. La raison principale est que l'ordre de chargement de fichiers CSS personnalisé est inapproprié, ce qui fait écraser le style par défaut de bootstrap pour écraser les styles définis par l'utilisateur. En ajustant l'ordre d'introduction des fichiers CSS et en garantissant que les styles personnalisés sont chargés, vous pouvez modifier avec succès la couleur de la police et la taille du texte de la marque, et explorer les principes du boîtier CSS et de la priorité en profondeur.

Contexte du problème: le style de marque Bootstrap Navigation Bar n'est pas valide

Lors de la création de pages Web à l'aide de bootstrap, les développeurs rencontrent souvent des situations où les styles personnalisés ne prennent pas effet. Un exemple typique est d'essayer de modifier la couleur ou la taille de la police de l'élément Navbar-Brand dans la barre de navigation, mais le style ne peut pas être appliqué, peu importe comment il est défini dans un fichier CSS personnalisé. Par exemple, le code CSS suivant est conçu pour définir la couleur du texte de la marque Navbar sur le rouge et la taille de la police à 150px:

 .Navbar-Brand {
  Couleur: rouge;
  Font-Family: «Domine-Bold», Serif;
  taille de police: 150px;
  Police-poids: 700;
}

Cependant, dans les pages réelles, le texte de marque comme HoMetitle peut toujours maintenir le style par défaut de bootstrap, avec la couleur de police et la taille qui ne changent pas. Cela confond souvent les développeurs car ils confirment que le sélecteur CSS est correct et que les propriétés de style sont définies.

Analyse des racines: Principe de chargement de chargement CSS et d'empilement

La raison la plus courante et la plus principale des problèmes ci-dessus est que les fichiers CSS se chargent de manière incorrecte . Dans le développement Web, le navigateur chargera et analysera les fichiers CSS en séquence dans l'ordre des balises dans les documents HTML. Le principe "Cascade" de CSS signifie que si les règles de style multiple agissent sur le même élément et que ces règles ont la même priorité, les règles de chargement suivantes remplaceront les premières règles de chargement .

Dans la structure HTML fournie par l'utilisateur, l'ordre d'introduction des fichiers CSS est le suivant:

 <adal>
    

    
    <link rel="Stylesheet" href="css%20/%20styles.css">

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="Stylesheet" int crossorigin="anonymous">

    
 head></adal>

Comme vous pouvez le voir, le fichier de style personnalisé CSS / Styles.css est chargé avant bootstrap de bootstrap.min.css. Cela signifie que lorsque le navigateur analyse Bootstrap.min.css, les règles de style par défaut définies pour .navbar-Brand remplaceront les mêmes règles précédemment définies dans Styles.css (car elles ont généralement la même priorité sélecteur). Par conséquent, les paramètres de couleur de police personnalisés ne peuvent pas prendre effet.

Solution: ajustez l'ordre d'introduction des fichiers CSS

La clé pour résoudre ce problème est d'ajuster l'ordre dans lequel les fichiers CSS sont introduits, garantissant que vos fichiers de style personnalisés sont chargés après tous les cadres (tels que bootstrap) ou les fichiers CSS à partir de bibliothèques tierces. De cette façon, vos règles personnalisées peuvent obtenir un avantage dans l'ordre Cascade, en écrasant le style par défaut du cadre.

Modifiez l'ordre de l'introduction de CSS dans la partie HTML comme suit:

 <adal>
    

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="Stylesheet" int crossorigin="anonymous">

    
    <link rel="Stylesheet" href="css%20/%20styles.css">

    
 head></adal>

Après avoir déplacé à bootstrap.min.css, votre style personnalisé sera désormais analysé après le style bootstrap. Selon le principe de cascade CSS, vos règles de style de marque .Navbar remplaceront avec succès les règles par défaut de Bootstrap.

Exemple de code et vérification de l'effet

Voici la structure HTML complète modifiée, ainsi que votre CSS personnalisé, qui pourra s'appliquer correctement:

Html (index.html)

 

  <adal>
    <meta charset="utf-8">
    <title> Exemple 
    <meta name="Viewport" contenu="width = device-width, initial-scale = 1, Viewport-Fit = cover">
    <meta name="format-détection" contenu="téléphone = no">

    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Domine:wght@700&display=swap" rel="Stylesheet">

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="Stylesheet" int crossorigin="anonymous">

    
    <link rel="Stylesheet" href="css%20/%20styles.css">

   head>
  </title>
    <section class="colorise" id="title">
      
        <nav class="navbar navbar-expand-lg navbar-light" style="background-Color: # f9ffa4">
        <div class="contener-fluid">
          <a class="navbar-brand" href="#"> hoMetitle </a>
          <button class="navbar-toggler" type="bouton" data-bs-toggle="effondrement" data-bs-target="# navbarhome" aria-controls="navbarhome" aria-expanded="false" aria-label="toggle navigation">
            <span class="navbar-toggler-icon"> </span>
           bouton>
          <div class="effondrement navbar-clollapse" id="navbarhome">
            <ul class="Navbar-Nav MS-Auto MB-2 MB-LG-0">
              <li class="Nav-item Dropdown">
                <a class="nav link dropdown-toggle" href="#" id="navbardropdownnewin" role="bouton" data-bs-toggle="dropdown" aria-expanded="false">
                  Nouveau
                </a>
                <ul class="dropdown-menu" aria-labelledby="NavbardropdownNewin">
                  <li> <a class="dropdown-item" href="#"> Charger de téléphone solaire </a> </li>
                  <li> <a class="dropdown-item" href="#"> pingouin aroma diffuseur </a> </li>
                  <li> <hr class="dropdown-divider"> </li>
                  <li> <a class="dropdown-item" href="#"> humidificateur </a> </li>
                </ul>
              </li>
              <li class="Nav-item Dropdown">
                <a class="nav link dropdown-toggle" href="#" id="navbardropdownbath" role="bouton" data-bs-toggle="dropdown" aria-expanded="false">
                  Accessoires de bain
                </a>
                <ul class="dropdown-menu" aria-labelledby="Navbardropdownbath">
                  <li> <a class="dropdown-item" href="#"> Bath Matt </a> </li>
                  <li> <a class="dropdown-item" href="#"> Bath Tower </a> </li>
                </ul>
              </li>
              <li class="Nav-item Dropdown">
                <a class="nav link dropdown-toggle" href="#" id="navbardropdownkitchen" role="bouton" data-bs-toggle="dropdown" aria-expanded="false">
                  Accessoires de cuisine
                </a>
                <ul class="dropdown-menu" aria-labelledby="NavbardropDownKitchen">
                  <li> <a class="dropdown-item" href="#"> ouvreur de vin </a> </li>
                  <li> <a class="dropdown-item" href="#"> pingouin aroma diffuseur </a> </li>
                </ul>
              </li>
            </ul>
            <form class="d-flex">
              <entr class="form-control me-2" type="search" placeholder="search" aria-label="search">
              <button class="btn btn-outline-sucess" type="soume"> search 
             form>
          </button></entr>
</form>
</div>
        </button>
</div>
       nav>
     section>

    
    <script src="https://unpkg.com/@popperjs/core@2"> </ script>
    <! - script bootstrap ->
    <script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" Integrity = "Sha384-Ka7Sk0Gln4gmtz2Mlqnikt1wxGysog OmHup Ilrh9Senbo0lRnRnRn 8NBTOV4 1P "CROSSORIGIN =" Anonymous "> </ Script>
  
</script></nav></section></adal>

CSS (CSS / Styles.css)

 corps {
  Font-Family: «Domine», Sans-Serif;
  Texte-aligne: Centre;
}

H1, H2, H3, H4, H5, H6 {
  Font-Family: «Domine-Bold», Sans-Serif;
}

.navbar-nav> li> .dropdown-menu {
  Color d'arrière-plan: # f9ffa4;
}

/ * Ce style s'appliquera désormais correctement * /
.Navbar-Brand {
  Couleur: rouge;
  Font-Family: «Domine-Bold», Serif;
  taille de police: 150px;
  Police-poids: 700;
}

/ * Remarque: .Navbar-Default est pour Bootstrap 3/4. Pour bootstrap 5,
   Vous devrez peut-être cibler des classes spécifiques si la modification des états ouverts déroulants.
   Pour cet exemple, nous nous concentrons sur la marque .Navbar. * /
.navbar-default .navbar-nav> .open> a,
.Navbar-default .navbar-nav> .open> a: focus,
.navbar-default .navbar-nav> .open> a: hover {
  Color d'arrière-plan: # f9ffa4;
}

Après le rechargement de la page, vous constaterez que le texte "HoMetitle" de la marque Navbar sera affiché avec succès en rouge et que la taille de la police devient 150px.

Considérations avancées: priorité CSS et!

Bien que l'ajustement de l'ordre de charge résout généralement la plupart des problèmes de couverture de style, dans certains cas, les styles peuvent ne pas prendre effet même si l'ordre de charge est correct. Ceci est généralement lié à la priorité du sélecteur de CSS.

La priorité du sélecteur CSS détermine quel style de règle est appliqué lorsque plusieurs règles agissent sur le même élément. Les règles de calcul de priorité sont grossièrement:

1. Le style en ligne (style = "...") a la priorité la plus élevée.
2. Le sélecteur d'ID (#ID) est la priorité.
3. Sélecteur de classe (.class), sélecteur d'attribut ([att]), pseudo-classe (: hover) priorité à nouveau.
4. Le sélecteur d'éléments (div), pseudo-élément (:: avant) a la priorité la plus faible.

Si une règle de style de bootstrap utilise un sélecteur de priorité plus élevé (par exemple, une combinaison de sélecteur de classe plus spécifique), il peut ne pas être écrasé même si votre CSS personnalisé est chargé après son chargement. Dans ce cas, vous avez besoin:

1. Augmentez la priorité des sélecteurs personnalisés : Faites correspondre la priorité de Bootstrap en utilisant des sélecteurs plus spécifiques. Par exemple, si Bootstrap utilise .Navbar .navbar-Brand, vous pouvez essayer d'utiliser le corps .navbar .navbar-brand ou nav.navbar .navbar-marque.
2. Utiliser! IMPORTANT (Utiliser avec prudence) : En dernier recours, vous pouvez ajouter le! Mot-clé important après votre valeur d'attribut de style pour forcer le style à appliquer. Par exemple: couleur: rouge! IMPORTANT;. Cependant, la surutilisation de! Importante détruira la nature en cascade du CSS, ce qui rend les styles difficiles à maintenir et à déboguer, ils devraient donc être évités autant que possible.

Conseils de débogage: utilisez toujours les outils de développeur de navigateur (F12) pour vérifier le style de calcul des éléments. Cela peut clairement montrer quelles règles CSS sont appliquées et lesquelles sont écrasées et indiquent leurs fichiers et priorités source.

Résumé et meilleures pratiques

Comprendre l'ordre de chargement du CSS, le principe du boîtier et la priorité du sélecteur est une compétence cruciale dans le développement frontal. Pour éviter les problèmes d'écrasement du style, suivez ces meilleures pratiques:

• Chargement des fichiers CSS personnalisés après les fichiers CSS Framework / Library : c'est la première façon de résoudre la plupart des conflits de style.
• Comprendre la priorité du sélecteur CSS : lorsque l'ordre de chargement ne résout pas le problème, vérifiez et augmente la priorité de votre sélecteur personnalisé.
• Utilisez avec prudence! Important : Considérez-le comme un dernier recours et une solution non conventionnelle.
• Faites bon usage des outils de développeur de navigateur : c'est le meilleur partenaire pour déboguer les problèmes CSS et peut vous aider à localiser rapidement la cause profonde du problème.

En suivant ces principes, vous pourrez gérer et personnaliser plus efficacement les styles Web, en vous garantissant que vos intentions de conception sont implémentées avec précision.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!