Maison > Article > interface Web > Comment supprimer le style par défaut en CSS

Comment supprimer le style par défaut en CSS

PHPzoriginal: 2023-04-21 11:20:001321parcourir

CSS Supprimer le style par défaut

Dans le processus de conception et de développement de sites Web, la réinitialisation ou la suppression du style par défaut fourni avec le navigateur est une étape basique mais nécessaire. Certains styles par défaut du navigateur, tels que les marges, le remplissage, les polices, les couleurs, etc., peuvent entrer en conflit avec nos styles, nous devons donc personnaliser les styles.

Voici quelques façons de supprimer les styles par défaut fournis avec le navigateur.

CSS Reset

CSS Reset est un fichier CSS, sa fonction est de réinitialiser le style par défaut afin que tous les navigateurs utilisent le même style. Ils incluent généralement la réinitialisation des marges, du remplissage, des polices, des couleurs, etc.

reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* inputs, textarea */
input[type="text"],input[type="password"], textarea {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 100%;
    vertical-align: bottom;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

input[type="checkbox"], input[type="radio"] {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 1px solid #999;
    width: 13px;
    height: 13px;
    outline: none;
}

/* buttons */
button {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 100%;
    vertical-align: middle;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* images */
img {
    border: none;
    outline: none;
    vertical-align: middle;
}

Réinitialisez comme ci-dessus pour effacer tous les styles par défaut.

Normalize.css

Normalize.css est une bibliothèque de styles plus conviviale que CSS Reset. Elle n'efface pas les styles par défaut, mais standardise les styles par défaut des différents navigateurs afin que tous les navigateurs affichent le même effet. Dans le même temps, certains éléments doivent être modifiés par défaut, et Normalize vous aidera à le compléter.

Ce qui suit est un exemple de citation de Normalize :

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>
<body>
  <p class="text-muted">This is paragraph text.</p>
</body>
</html>

Personnalisé

Style par défaut personnalisé Pour nos propres besoins professionnels, il nous suffit de remplacer le style par défaut du navigateur. Par exemple, notre couleur pour le lien par défaut :

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: red;
    text-decoration: underline;
}

De cette façon, nous pouvons personnaliser le style du lien par défaut.

Ci-dessus sont trois méthodes de personnalisation des styles pour supprimer les styles par défaut. Il est recommandé d'utiliser Normalize.css, car il gérera la plupart des problèmes par défaut du navigateur que vous rencontrerez et n'effacera pas violemment tous les styles par défaut. Utiliser la bonne méthode pour supprimer les styles par défaut permettra à votre site Web d’avoir une meilleure expérience de navigation.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment masquer la barre de navigation en utilisant CSSArticle suivant：Comment masquer la barre de navigation en utilisant CSS

Articles Liés

Voir plus