Wie "dagfr" sagte, überschreiben spezifischere CSS-Selektoren weniger spezifische. Nehmen wir zum Beispiel an, ich habe ein Design namens "my-theme". Ich würde das zur Body-ID hinzufügen:
Dann sollte alles, was Sie der hinzufügen, diesen Selektor davor haben. Wenn ich zum Beispiel die Klasse "Wrapper" überschreiben wollte, würde das so aussehen: #my-theme. wrapper { styles here}
Bearbeiten: Dies ist auch eine großartige Möglichkeit, Split-a/b-Tests zu implementieren. Ändern Sie einfach die themenspezifische ID nach dem Zufallsprinzip zwischen 2 oder mehr, die unterschiedlich sind, und Sie können alles, was Sie wollen, aufteilen. Css - Wie kann ich das überschreiben Bootstrap-CSS-Stile?. Probieren Sie dieses Hinzufügen aus, das für Ihr benutzerdefiniertes CSS wichtig ist {
margin-left: 40px! important;} #()
Css Style Überschreiben
Sie können die bereits vordefinierten Werte wie small, medium und large verwenden. Sie können aber auch relative Werte zur Schriftgröße des Elternelements wie smaller, larger, 150% oder 1. 5em verwenden. Ein "em" ist äquivalent zu der Breite des Buchstabens "m" (für die Schriftgröße des Elternelements). Damit sind 1. 5em eineinhalb Mal so groß als die Schrift im Elternelement. Wenn nötig können Sie eine genaue Größe wie 14px (14 Pixel) für einen Bildschirm oder 14pt (14 Punkt) für einen Drucker angeben. Das ist aber für Benutzer mit einer Sehbehinderung nicht zugänglich, da sie damit die Schriftgröße nicht mehr ändern können. Eine zugänglichere Strategie wäre, eine bereits vordefinierten Wert wie medium auf dem höchsten Element im Dokument zu setzen und dann relative Größen auf allen Kindelementen zu verwenden. Um nur die Schriftgröße anzugeben, können Sie die font-size Eigenschaft verwenden. Zeilenhöhe Die Zeilenhöhe gibt den Abstand zwischen Zeilen an. CSS !important – So deklarierst du Befehle als wichtig - KA Mediendesign Blog. Wenn Ihr Dokument lange Absätze über viele Zeilen hat, kann ein größerer Zeilenabstand als normal besonders bei einer kleinen Schriftgröße einfacher zum Lesen zu sein.
important;
margin-top: 4rem! important;
font-size: 12px! important;
border-bottom: 1px solid #000! important;}
Advertisements 4. Leere Selektoren
Von allen CSS Tipps & Tricks ist dieser wohl der unwichtigste, aber gleichzeitig auch der Tipp, der sich am einfachsten umsetzen lässt. Die Rede ist von leeren Selektoren. Also Selektoren, die keine Attribute beinhalten. Durch diese Selektoren gehen immer ein paar Bytes Speicher verloren. Wenn das oft im Code vorkommt und wir sehr viele und große CSS Dateien haben, kann sich das auf die Ladezeit Deiner Seite auswirken – wenn auch nur minimal. Deshalb hat sowas nichts im CSS verloren:
p {}
span {}
{}
footer {}
footer > a {}
5. Überschreiben von Styles
Wir haben schon über das Schlüsselwort "! important" geredet. Damit können wir Styles überschreiben, so dass diese CSS Regel immer greift. Überschreiben Sie element.style mit CSS. Wenn wir das zu häufig einsetzen haben wir bei späteren Änderungen große Probleme. Aber auch ohne das Schlüsselwort sollten wir Überschreiben größtenteils vermeiden.