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 beheben Sie den Fehler beim MySQL-Transaktionsvorgang

So beheben Sie den Fehler beim MySQL-Transaktions...

Ein Beispiel für die Implementierung einer einfachen Endlosschleifen-Scrolling-Animation in Vue

Dieser Artikel stellt hauptsächlich ein Beispiel ...

Einfache Anwendungsbeispiele für benutzerdefinierte MySQL-Funktionen

Dieser Artikel veranschaulicht anhand von Beispie...

Sicherheitskonfiguration und Erkennung von SSL, nachdem die Website https aktiviert hat

Heutzutage ist es für Websites Standard, SSL zu a...

mysql5.7.21 UTF8-Kodierungsproblem und -Lösung in der Mac-Umgebung

1. Ziel: Ändern Sie den Wert des character_set_se...

Führen Sie die Schritte aus, um mit Samba Ordner in CentOS 7 freizugeben

Vorwort Samba ist eine kostenlose Software, die d...

Implementierung von dynamischem REM für mobiles Layout

Dynamische REM 1. Lassen Sie uns zunächst die akt...

Zusammenfassung der allgemeinen MySQL-Funktionen

Vorwort: Die MySQL-Datenbank bietet eine breite P...

Beispiele für die Verwendung von Docker und Docker-Compose

Docker ist eine Open-Source-Container-Engine, mit...

HTML-Grundstruktur_Powernode Java Academy

Wenn wir lernen, Webseiten zu entwickeln, ist das...

VMware Workstation-Installation (Linux-Kernel) Kylin-Grafik-Tutorial

In diesem Artikel erfahren Sie, wie Sie Kylin auf...

HTML-Tabellen-Markup-Tutorial (43): VALIGN-Attribut der Tabellenüberschrift

In vertikaler Richtung können Sie die Ausrichtung...

Analyse des allgemeinen MySQL-Abfrageprotokolls und des langsamen Abfrageprotokolls

Die Protokolle in MySQL umfassen: Fehlerprotokoll...

Docker - Zusammenfassung von 3 Möglichkeiten zum Ändern von Container-Mount-Verzeichnissen

Methode 1: Ändern Sie die Konfigurationsdatei (Si...

Instanzmethode für MySQL-String-Verkettung und Festlegen von Nullwerten

#String-Verkettung concat(s1,s2); verkette die St...