So löschen Sie Standardformate und legen allgemeine Formate in CSS fest

So löschen Sie Standardformate und legen allgemeine Formate in CSS fest

CSS Standard-Stile löschen

Die üblichen klaren Standardstile:

*{
    Rand: 0;
    Polsterung: 0
}
li{
    Listenstil: keiner
}
img{
    vertikale Ausrichtung: oben;
    Rand: keiner
}

Festlegen der Standardschriftart

Körper,
Schaltfläche, Eingabe, Auswahl, Textbereich /* für IE */ {
    Schriftart: 14px/1,5 Tahoma, \5b8b\4f53, serifenlos;
}
h1, h2, h3, h4, h5, h6 { Schriftgröße: 100 %; Schriftstärke: normal;}
Adresse, Zitat, dfn, em, var { font-style: normal; } /* Kursivschrift gerade machen*/
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* Einheitliche Monospace-Schriftart */
small { font-size: 12px; } /* Chinesische Schriftzeichen, die kleiner als 12px sind, sind schwer zu lesen, normalisieren Sie sie auf small*/
/** Listenelemente zurücksetzen **/
ul, ol { Listenstil: keine; }
/** Textformatierungselemente zurücksetzen **/
eine { Textdekoration: keine; }
a:hover { Textdekoration: Unterstreichung; }
sup { vertical-align: text-top; } /* Zurücksetzen, Auswirkungen auf die Zeilenhöhe reduzieren*/
sub { vertikale Ausrichtung: Text unten; }
/** Formularelemente zurücksetzen **/
legend { color: #000; } /* für ie6 */
fieldset, img { border: 0; } /* img hitchhiking: mache das img im Link randlos*/
button, input, select, textarea { font-size: 100%; } /* Formularelemente übernehmen die Schriftgröße im Internet Explorer*/
/* Hinweis: optgroup kann nicht korrigiert werden*/
/* HTML5-Element zurücksetzen */
Artikel, beiseite, Details, Figcaption, Abbildung, Fußzeile, Kopfzeile, Hgroup, Menü, Navigation, Abschnitt,
Zusammenfassung, Zeit, Markierung, Audio, Video {
    Anzeige: Block;
    Rand: 0;
    Polsterung: 0;
}
Markierung { Hintergrund: #ff0; }
/* Den Standardstil des Platzhalters festlegen */
:-moz-Platzhalter {
    Farbe: #ddd;
    Deckkraft: 1;
}
::-moz-Platzhalter {
    Farbe: #ddd;
    Deckkraft: 1;
}
Eingabe: -ms-Eingabe-Platzhalter {
    Farbe: #ddd;
    Deckkraft: 1;
}
Eingabe::-WebKit-Eingabe-Platzhalter {
    Farbe: #ddd;
    Deckkraft: 1;
}

Tag auswählen

wählen {
    Rand: keiner;
    Aussehen: keines;
    -moz-Auftritt:keines;
    -webkit-Erscheinungsbild: keines;
    /*Zeige ein kleines Pfeilbild in der Mitte des äußersten rechten Auswahlfelds*/
    Hintergrund: URL("upload/2022/web/arrow.png") kein wiederholtes Scrollen nach rechts in der Mitte transparent;
    Polsterung rechts: 14px;
}

Tabellenelemente zurücksetzen

Tisch {
Rahmen-Zusammenbruch: Zusammenbruch;
Rahmenabstand: 0;
}

Stunde zurücksetzen

hr {
    Rand: keiner;
    Höhe: 1px;
}

Löschen Sie die Standardstile von <ol> <ul>

ul, ol, { 
  Rand: 0;
  Polsterung: 0;
  Listenstil: n;
}

.Taste

.Taste{
    Rand: 0;
    Hintergrundfarbe: keine
    Umriss: keiner;
    -webkit-appearance: none; // Wird verwendet, um native Stile unter IOS zu entfernen}

.<a>-Tag

A{
    Textdekoration: keine;
    Farbe: Nr. 333;
}

Das <input>-Tag

Eingang{
    Rand: keiner;
    Aussehen: keines;
    -moz-Auftritt:keines;
    outline:none; //Der Standardrahmen wird nicht angezeigt, wenn das Eingabetag fokussiert ist:
    -webkit-appearance: none; // Wird verwendet, um native Stile unter IOS zu entfernen}
//oder:
input:focus{ outline:none; }//Der Standardrahmen wird nicht angezeigt, wenn das Eingabetag fokussiert ist:
Rahmen: keiner; Aussehen: keiner; -moz-Aussehen: keiner; Umriss: keiner; //Der Standardrahmen wird nicht angezeigt, wenn das Eingabetag fokussiert ist: -webkit-Aussehen: nein

Zusammenfassen

Oben ist die CSS-Methode zum Löschen von Standardstile und Festlegen allgemeiner Stile, die ich Ihnen vorgestellt habe. Ich hoffe, sie wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<:  Empfehlen Sie 60 Paging-Fälle und bewährte Vorgehensweisen

>>:  So verwenden Sie den Tencent-Schieberegler-Verifizierungscode im Vue3+Vue-cli4-Projekt

Artikel empfehlen

Lösung für BT Baota Panel php7.3 und php7.4 unterstützen ZipArchive nicht

Die Lösung für das Problem, dass die PHP7.3-Versi...

Eingabetyp begrenzen (mehrere Methoden)

1. Es können nur chinesische Schriftzeichen eingeg...

Installations- und Konfigurationstutorial von MongoDB unter Linux

MongoDB -Installation Wählen Sie die Installation...

So entwickeln Sie eine Progressive Web App (PWA)

Inhaltsverzeichnis Überblick Erfordern URL der An...

Einführung in die MySQL-Ansicht und Tutorial zur grundlegenden Bedienung

Vorwort Ansicht ist ein sehr nützliches Datenbank...

Nginx-Proxy-Axios-Anforderung und Vorsichtsmaßnahmen

Vorwort Ich habe vor kurzem eine kleine Demo gesc...

Zusammenfassung der Wissenspunkte zum CSS-Frontend (unbedingt lesen)

1. Das Konzept von CSS: (Cascading Style Sheet) V...

12 nützliche Array-Tricks in JavaScript

Inhaltsverzeichnis Array-Deduplizierung 1. from()...

Detailliertes Tutorial zur Installation von CUDA9.0 auf Ubuntu16.04

Vorwort: Dieser Artikel basiert auf den Erfahrung...

So verwenden Sie Navicat zum Exportieren und Importieren einer MySQL-Datenbank

MySql ist eine Datenquelle, die wir häufig verwen...

Lösung für das Problem des Sitzungsverlusts bei Nginx

Bei der Verwendung von Nginx als Reverse-Proxy fü...

So verhindern Sie mit Nginx die böswillige Auflösung von IP-Adressen

Zweck der Verwendung von Nginx Lassen Sie uns zun...