Comment effacer le style par défaut en CSS

CSS est une technologie de développement front-end qui peut rendre les pages Web plus belles et plus faciles à utiliser. Cependant, afin de rendre la page Web plus belle, nous pouvons utiliser de nombreux styles CSS, ce qui fera perdre à la page Web son style d'origine, voire sera incompatible avec l'effet souhaité. Cet article présentera quelques techniques pour effacer les styles CSS par défaut afin de mieux comprendre les principes de base du CSS.

1. CSS Reset

CSS Reset est une technique pour effacer le style par défaut. Il peut supprimer tous les styles par défaut du navigateur, effaçant ainsi toutes les apparences et effets par défaut de la page Web. CSS Reset peut être implémenté manuellement ou en utilisant des outils prêts à l'emploi. Voici un exemple de réinitialisation CSS manuscrit :

*{

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
line-height: 1;
vertical-align: baseline;
list-style: none;

}

Ce code définit les marges, le remplissage, les bordures, la taille de la police, l'épaisseur de la police, le style de police, la hauteur de ligne, l'alignement vertical et les styles de liste de tous les éléments. aux valeurs par défaut. De cette façon, nous garantissons que chaque élément fonctionne uniquement au-dessus du CSS de base et n'est pas affecté par le CSS d'origine et le style par défaut du navigateur.

2. Normalize.css

Bien que CSS Reset puisse effacer complètement les styles par défaut, nous souhaitons parfois conserver certains styles par défaut et voulons simplement avoir un meilleur contrôle sur eux. À ce stade, vous devez utiliser Normalize.css. Normalize.css est un fichier CSS utilisé pour standardiser les styles, qui peut conserver le style par défaut du navigateur lui-même tout en unifiant les différences de style entre les navigateurs. Voici l'exemple de code :

/ ! normalize.css v8.0.1 | Licence MIT | github.com/necolas/normalize.css /

/* Document
=========== == ================================================= == =========== */

/**

• 1. Corrigez la hauteur de ligne dans tous les navigateurs.
• 2. Empêchez les ajustements de la taille de la police après les changements d'orientation dans iOS.
     */

html {
hauteur de ligne : 1,15 / 1 /
-webkit-text- taille- ajuster : 100 % ; / 2 /
-ms-text-size-adjust : 100 % / 2 /
-moz-osx-font-smoothing : niveaux de gris ;
-webkit-font-smoothing : antialiased;
box-sizing: border-box;
}

/* Sections
=============================== == ========================================= */

/**

• Supprimez la marge dans tous les navigateurs.
  */

body {
margin: 0;
padding: 0;
}
...

Le code ci-dessus n'est qu'une petite partie de Normalize.css, qui réinitialise les parties HTML communes du navigateur au besoin. En utilisant Normalize.css, nous pouvons garantir que les différents navigateurs peuvent afficher les pages Web normalement sans aucune interférence des styles par défaut.

3. Utiliser des sélecteurs

En plus d'utiliser CSS Reset et Normalize.css, nous pouvons également utiliser des sélecteurs pour effacer le style par défaut. En ajoutant un style de sélecteur, nous pouvons facilement éliminer le style par défaut dans le navigateur. Voici l'exemple de code :

html,body,h1,h2,h3,h4,p,ol,ul,li,blockquote {

margin:0;
padding:0;

}

Ici, nous avons utilisé une liste d'éléments séparés par des virgules pour combiner certains des styles d'éléments HTML les plus couramment utilisés sont réinitialisés à 0. De cette façon, nous pouvons ajouter des éléments qui doivent être réinitialisés à tout moment et effacer le style par défaut du navigateur.

4. Utiliser la bibliothèque CSS

Afin d'éviter d'écrire manuellement CSS Reset ou Normalize.css, nous pouvons utiliser des bibliothèques CSS pré-écrites. Voici une liste de quelques bibliothèques CSS courantes :

1. Bootstrap ;
2. Bulma ;
3. Foundation ;
4. Semantic UI.

Ces bibliothèques fournissent toutes un ensemble de styles CSS avancés, qui sont très pratiques et pratiques. conception de sites Web. Avec l'aide de ces bibliothèques, nous pouvons utiliser de nombreux styles prédéfinis, effacer les styles par défaut et utiliser des styles et des mises en page de base stables, accélérant ainsi le développement de sites Web.

Lors de l'utilisation de ces bibliothèques, nous devons prêter attention à prévisualiser leurs catalogues et leur documentation pour comprendre comment ils sont codés et la signification de chaque style afin de les utiliser efficacement.

Résumé

La technologie de style CSS clair par défaut est une opération de base dans le développement front-end. Avec l'aide de CSS Reset, Normalize.css et des styles de sélection, nous pouvons effacer les styles par défaut du navigateur, ce qui nous permet de concevoir facilement des pages Web plus belles et plus élégantes. Bien entendu, dans le processus de développement actuel, choisir d'utiliser une bibliothèque CSS est également un bon choix, qui peut nous fournir des styles de base efficaces, stables et compatibles.

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!