Heim > Artikel > Web-Frontend > So entfernen Sie den Standardstil in CSS

So entfernen Sie den Standardstil in CSS

PHPzOriginal: 2023-04-21 11:20:001319Durchsuche

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

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>

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verbergen Sie die Navigationsleiste mithilfe von CSSNächster Artikel：So verbergen Sie die Navigationsleiste mithilfe von CSS

In Verbindung stehende Artikel

Mehr sehen