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

Vue implementiert das Hinzufügen von Wasserzeichen zu hochgeladenen Bildern

In diesem Artikel wird der spezifische Implementi...

Vollständige Analyse des Vue-Diff-Algorithmus

Inhaltsverzeichnis Vorwort Vue-Aktualisierungsans...

Detailliertes Grafik- und Text-Tutorial zum Herunterladen, Installieren und Konfigurieren von mysql-5.7.28 unter Windows

Vor kurzem musste ich die Version der MySQL-Daten...

Einführung in das Hinzufügen neuer Benutzer zu MySql, das Erstellen von Datenbanken für Benutzer und das Zuweisen von Berechtigungen an Benutzer

1. Neuen Benutzer hinzufügen Nur lokalen IP-Zugri...

So erstellen Sie einen MySQL-Cluster mit hoher Verfügbarkeit und Leistung

Inhaltsverzeichnis Was ist MySQL NDB Cluster? Vor...

So verwenden Sie den Linux-Befehl md5sum

01. Befehlsübersicht md5sum - MD5-Prüfcode berech...

So teilen Sie Daten in MySQL-Tabellen und -Datenbanken auf

Inhaltsverzeichnis 1. Vertikales (längsseitiges) ...

Detaillierte Erläuterung des grafischen Tutorials zum Herunterladen, Installieren und Konfigurieren von Win10 DVWA (Lernen von Anfängern)

Das Computersystem wurde neu installiert und die ...

Detaillierte Schritte zum Portieren von Busybox zum Erstellen eines minimalen Root-Dateisystems

Busybox: Ein Schweizer Taschenmesser voller klein...

So reduzieren Sie die Bildgröße mithilfe des mehrstufigen Docker-Builds

In diesem Artikel wird beschrieben, wie Sie die m...

So verwenden Sie fdisk zum Partitionieren der Festplatte in Linux

Häufig verwendete Befehle für Linux-Partitionen: ...

JavaScript zum Implementieren einer dynamischen Digitaluhr

In diesem Artikel finden Sie den spezifischen Cod...

Der Unterschied zwischen der Speicherung von Zeichen mit voller Breite und Zeichen mit halber Breite in MySQL

Leider trat der Fehler MYSQL_DATA_TRUNCATED währe...

Drei Möglichkeiten zur Implementierung des Wasserfall-Flow-Layouts

Vorwort Als ich heute Xianyu durchsuchte, fiel mi...

Bootstrap 3.0 - Schaltflächenstil für Lernnotizen

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