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

So verwenden Sie mysqldump zum Sichern von MySQL-Daten

1. Einführung in mysqldump mysqldump ist ein logi...

Detaillierte Erläuterung des Nginx-HTTP-Ressourcenanforderungslimits (drei Methoden)

Voraussetzung: nginx muss über die Module ngx_htt...

Detaillierte Erläuterung der FTP-Umgebungskonfigurationslösung (vsftpd)

1. Installieren Sie die vsftpd-Komponente Install...

Beispiel für Sterne für den CSS-Bewertungseffekt

Was? Welcher Sternenmantel? Schauen wir uns zur V...

Stellen Sie die Breite der Tabelle so ein, dass sie sich nicht mit dem Text ändert

Nachdem die Tabellenbreite auf der Seite auf width...

Verwenden Sie Node-Media-Server, um einen einfachen Streaming-Media-Server zu erstellen

Zeichnen Sie einige der Prozesse der Verwendung d...

Starten Sie eine lokale Kubernetes-Umgebung mit Kind und Docker

einführen Haben Sie schon einmal einen ganzen Tag...

HTML-Cellpadding- und Cellspacing-Attribute in Bildern erklärt

Zelle -- der Inhalt der Tabelle Zellenrand (Tabell...

Detaillierte Erläuterung des primitiven Datentyps Symbol in JavaScript

Inhaltsverzeichnis Einführung Beschreibung Namens...

Canonical ermöglicht Linux-Desktop-Apps mit Flutter (empfohlen)

Das Ziel von Google mit Flutter bestand immer dar...

Tutorial zu HTML-Formular-Tags (4):

Nehmen Sie nun an, dass Sie dem Formular ein Elem...

Lösung für den Fehler beim Aufrufen des Containers aufgrund vollen Docker-Speicherplatzes

Da das Problem ziemlich plötzlich auftrat und das...

Eine elegantere Methode zur Fehlerbehandlung in JavaScript async await

Inhaltsverzeichnis Hintergrund Warum Fehlerbehand...

JS ES: Neue Funktion zur variablen Entkopplungszuweisung

Inhaltsverzeichnis 1. Entkoppelte Zuweisung von A...

Einige Hinweise zur Verwendung von Standard-HTML-Codes bei der Webseitenerstellung

<br />Der häufigste Fehler vieler Website-De...