Einige CSS-Fragen, die Ihnen während eines Vorstellungsgesprächs gestellt werden könnten

Einige CSS-Fragen, die Ihnen während eines Vorstellungsgesprächs gestellt werden könnten

Dieser Artikel dient lediglich der Erinnerung an die CSS-Fragen, die hundertmal geschrieben und gestellt wurden.

fragen:

Was sind CSS-Selektoren? Welche Eigenschaften werden vererbt? Priorität? Was hat eine höhere Priorität, inline oder wichtig?

Wähler

1 Platzhalter-Selektor (*) Stellt den Stil aller Elemente auf der Seite dar *{Schriftgröße:12px;Rand:0;Padding:0;}
2 Typselektoren (Body, Div, P, Span usw.) Die vorhandenen Tag-Typen auf der Webseite werden als Namensselektoren verwendet div{Breite:10px;Höhe:10px;}
3 Gruppenauswahl (,) Weisen Sie einer Gruppe von Objekten gleichzeitig den gleichen Stil zu a:Link,a:besucht{color:#fff;}
4 Ebenenauswahl (Leertaste) Enthält Selektoren zum Zuweisen von Stilen zu Unterobjekten innerhalb eines Objekts #Header oben{width:100px;}
5 ID-Selektor (#) Der ID-Selektor ist eindeutig und kann auf einer Seite nicht wiederverwendet werden. #header{width:300px;}
6 Klassenselektor (.) Kann in Seiten wiederverwendet werden .Titel{width:300px;}
7 IEhack-Selektoren (_, *, \0, \9\0;) Kompatibel mit verschiedenen Browsern .Titel{_Breite:50px;*Höhe:30px;}

Vererbbare Eigenschaften


Code kopieren
Der Code lautet wie folgt:

Azimut, Randkollaps, Randabstand,
Beschriftungsseite, Farbe, Cursor, Richtung, Höhe,
leere Zellen, Schriftfamilie, Schriftgröße, Schriftstil,
Schriftvariante, Schriftstärke, Schriftart, Buchstabenabstand,
Zeilenhöhe, Listenstil-Bild, Listenstil-Position,
Listenstiltyp, Listenstil, Waisen, Tonhöhenbereich,
Tonhöhe, Anführungszeichen, Fülle, Sprechüberschrift, Sprechziffer,
Sprechzeichensetzung, sprechen, Sprechgeschwindigkeit,
Betonung, Textausrichtung, Texteinzug, Textumwandlung,
Sichtbarkeit, Stimmfamilie, Lautstärke, Leerzeichen,
Hurenkinder, Wortabstand

Vier Prioritätsprinzipien

Prinzip 1 : Vererbung nicht näher bezeichneter Talente

Demo1:


Code kopieren
Der Code lautet wie folgt:

<style type="text/css">
*{Schriftgröße:20px}
.class3{ Schriftgröße: 12px; }
</style> </p> <p><span class="class3">Wie groß ist meine Schrift? </span> <!-- Ausführen des Ergebnisses: .class3{ font-size: 12px; }-->

Demo 2:


Code kopieren
Der Code lautet wie folgt:

<style type="text/css">
#id1 #id2{Schriftgröße:20px}
.class3{Schriftgröße:12px}
</style> </p> <p><div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">Wie groß ist meine Schrift? </span> </p>
</div> <!--Ausführendes Ergebnis: .class3{ font-size: 12px; }-->

Prinzip 2: #ID > .class > Tag

Demo1:


Code kopieren
Der Code lautet wie folgt:

<style type="text/css">
#id3 { Schriftgröße: 25px; }
.class3{ Schriftgröße: 18px; }
span{Schriftgröße:12px}
</style> </p> <p><span id="id3" class="class3">Wie groß ist meine Schrift? </span> <!--Laufendes Ergebnis: #id3 { font-size: 25px; }-->

Prinzip 3: Je spezifischer, desto besser

Demo1:


Code kopieren
Der Code lautet wie folgt:

<style type="text/css">
.Klasse1 .Klasse2 .Klasse3{Schriftgröße: 25px;}
.Klasse2 .Klasse3{Schriftgröße:18px}
.klasse3 { Schriftgröße: 12px; }
</style> </p> <p><div Klasse="Klasse1">
<p class="class2"> <span class="class3">Wie ist meine Schriftgröße? </span> </p>
</div> <!--Ausführendes Ergebnis: .class1 .class2 .class3{font-size: 25px;}-->

Prinzip 4: Tag#ID > Tag.class

Demo1:


Code kopieren
Der Code lautet wie folgt:

<style type="text/css">
span#id3{Schriftgröße:18px}
#id3{Schriftgröße:12px}
span.class3{Schriftgröße:18px}
.class3{Schriftgröße:12px}
</style></p> <p><span id="id3">Wie groß ist meine Schrift? </span>
<span class="class3">Wie ist meine Schriftgröße? </span> <!--Ausführendes Ergebnis: span#id3{font-size:18px} | span.class3{font-size:18px}-->

Abschließend: Wenn Prinzipien in Konflikt geraten, gilt: Prinzip 1 > Prinzip 2 > Prinzip 3 > Prinzip 4

! wichtig

Erkennt IE6 !important? ? ?

Antwort: Ja, aber es gibt einen kleinen Fehler.

Zum Beispiel:


Code kopieren
Der Code lautet wie folgt:

<Stil>
#ida {size:18px}
.classb { Schriftgröße: 12px; }
</style></p> <p><div id="ida" class="classb">!wichtiger Test: 18px</div>

Mitmachen!wichtig


Code kopieren
Der Code lautet wie folgt:

<Stil>
#ida{Schriftgröße:18px}
.classb{ Schriftgröße: 12px !wichtig; }
</style></p> <p><div id="ida" class="classb">!wichtiger Test: 12px</div>

IE6-FEHLER:


Code kopieren
Der Code lautet wie folgt:

<Stil>
.classb{ Schriftgröße: 18px !wichtig; Schriftgröße: 12px }
</style></p> <p><div class="classA">!wichtiger Test: 12px</div>

Gründe und Lösungen:

Hier ist der Text im IE6 12 Pixel groß, während er in anderen Browsern 18 Pixel groß ist.

Wenn wir jedoch den Stil ändern und am Ende !important einfügen, also .classb{ font-size: 12px;font-size: 18px !important; }, zeigt IE6 wie andere Browser auch 18px-Schriftarten an.

<<:  Protokoll des Kompilierungs- und Installationsprozesses des Nginx-Quellcodes

>>:  Die Auswirkungen des Limits auf die Abfrageleistung in MySQL

Artikel empfehlen

Lösung für das Problem „VMware-virtuelle Maschine ohne Netzwerk“

Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...

Zusammenfassung von 9 hervorragenden Codevergleichstools, die unter Linux empfohlen werden

Wenn wir Code schreiben, müssen wir oft die Unter...

Lösung für das Problem, dass Nacos keine Verbindung zu MySQL herstellen kann

Grund Die MySQL-Version, von der Nacos‘ POM abhän...

Detaillierte Erläuterung zur Konfiguration der mehrfädigen Master-Slave-Replikation von MySQL 5.7-Slaveknoten

Vorwort MySQL unterstützt Multithread-Replikation...

Natives JS realisiert zusammengesetzte Bewegungen verschiedener Bewegungen

In diesem Artikel erfahren Sie mehr über eine zus...

Vue+thinkphp5.1+axios zum Realisieren des Datei-Uploads

In diesem Artikel erfahren Sie, wie Sie mit think...

20 hervorragende Beispiele für die Farbabstimmung auf ausländischen Webseiten

In diesem Artikel werden 20 hervorragende Beispiel...

Detaillierte Erklärung des HTML-Seitenkopfcodebeispiels

Wissenspunkt 1: Legen Sie die Basis-URL der Webse...

Tutorial zu HTML-Tabellen-Tags (23): Zeilenrahmen-Farbattribut BORDERCOLORDARK

In Zeilen können dunkle Rahmenfarben individuell ...

Ausführliche Erläuterung zum Beispiel der MySQL InnoDB-Tablespace-Verschlüsselung

Vorwort Ab MySQL 5.7.11 unterstützt MySQL die Dat...

Zusammenfassung der Wissenspunkte zum MySQL ALTER-Befehl

Wenn wir den Tabellennamen ändern oder die Tabell...

So implementieren Sie Import- und Exportbefehle für MySQL-Datenbanken unter Linux

1. Exportieren Sie die Datenbank mit dem Befehl m...

HTML n Möglichkeiten zum Erreichen eines alternativen Farbcode-Beispielcodes

In diesem Artikel wird hauptsächlich der Beispiel...

Erstellen privater Mitglieder in JavaScript

Inhaltsverzeichnis 1. Verwende Closures 2. Verwen...

Sogar ein Anfänger kann den Unterschied zwischen typeof und instanceof in js verstehen

Inhaltsverzeichnis 1. Art von 2. Instanz von 3. U...