So entfernen Sie den Standardstil in CSS-Front-End-Fragen und Antworten-php.cn

So entfernen Sie den Standardstil in CSS

PHPz

Freigeben： 2023-04-21 13:46:37

Original

1374 Leute haben es durchsucht

CSS-Standardstil entfernen

Im Prozess des Website-Designs und der Website-Entwicklung ist das Zurücksetzen oder Entfernen des Standardstils, der mit dem Browser geliefert wird, ein grundlegender, aber notwendiger Schritt. Einige Browser-Standardstile, wie Ränder, Abstände, Schriftarten, Farben usw., können mit unseren Stilen in Konflikt stehen, daher müssen wir die Stile anpassen.

Hier sind einige Methoden zum Entfernen der Standardstile, die mit dem Browser geliefert werden.

CSS Reset

CSS Reset ist eine CSS-Datei, deren Funktion darin besteht, den Standardstil zurückzusetzen, sodass alle Browser denselben Stil verwenden. Dazu gehört normalerweise das Zurücksetzen von Rändern, Abständen, Schriftarten, Farben usw.

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

Nach dem Login kopieren

Zurücksetzen wie oben, um alle Standardstile zu löschen.

Normalize.css

Normalize.css ist eine benutzerfreundlichere Stilbibliothek als CSS Reset. Sie löscht nicht die Standardstile, sondern standardisiert die Standardstile verschiedener Browser, sodass alle Browser den gleichen Effekt zeigen. Gleichzeitig müssen einige Elemente standardmäßig geändert werden, und Normalize hilft Ihnen dabei, dies zu vervollständigen.

Das Folgende ist ein Beispiel für das Zitieren von 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>

Nach dem Login kopieren

Customized

Customized Standardstil Für unsere eigenen Geschäftsanforderungen müssen wir nur den Browser-Standardstil überschreiben. Zum Beispiel unsere Farbe für den Standard-Link:

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

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

Nach dem Login kopieren

Auf diese Weise können wir den Standard-Link-Stil anpassen.

Die oben genannten Methoden zum Anpassen von Stilen zum Entfernen von Standardstilen werden empfohlen, Normalize.css zu verwenden, da es die meisten Standardprobleme des Browsers behebt und nicht alle Standardstile gewaltsam löscht. Durch die Verwendung der richtigen Methode zum Entfernen von Standardstilen wird das Surferlebnis auf Ihrer Website verbessert.

Das obige ist der detaillierte Inhalt vonSo entfernen Sie den Standardstil in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!