Comment supprimer le style par défaut en CSS-Questions et réponses frontales-php.cn

Comment supprimer le style par défaut en CSS

PHPz

Libérer： 2023-04-21 13:46:37

original

1387 Les gens l'ont consulté

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;
}

Copier après la connexion

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>

Copier après la connexion

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;
}

Copier après la connexion

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!