CSS -TIPS -Test: Verstehst du CSS wirklich?

überprüfung der Schlüsselpunkte

• Der beste Weg, um die doppelte Leitungsh?he festzulegen, besteht darin, unitlose Nummern (z. B. 2) zu verwenden, damit untergeordnete Elemente mit unterschiedlichen Schriftgr??en das korrekte Verh?ltnis von Linienh?hen erben k?nnen.
• Obwohl das allgemeine Missverst?ndnis, das z-index selbst überlappt, überlappt, kann HTML -Elemente tats?chlich durch das margin Attribut überlappt werden (insbesondere negative Margen).
• Pseudo-Elemente und Pseudoklassen sind sehr unterschiedliche Funktionen in CSS: Pseudoklassen werden unter bestimmten Bedingungen auf tats?chliche HTML-Elemente angewendet, und Pseudo-Elemente erm?glichen das Styling von Teilen eines Dokuments, die keine tats?chlichen HTML-Elemente sind.
• w3c Versuche, zwischen Pseudo-Elementen und Pseudoklassen in der CSS3-Selektorspezifikation unter Verwendung von zwei Colons (::first-line) für Pseudo-Element-Selektoren und einem Dickdarm (:hover) für Pseudo-Element-Selektoren zu unterscheiden Bestell zur Rückverdichtung muss der Browser beide Versionen unterstützen.

Glauben Sie, dass Sie CSS beherrschen? Wenn die kostenlosen CSS -Testergebnisse, die ich in den letzten sechs Monaten online geliefert habe, in jeder Hinsicht aufweist, wissen viele erfahrene Entwickler nicht so viel über CSS, wie sie denken. Von den mehr als 3.000 Menschen, die bisher am Test teilgenommen haben, betr?gt die durchschnittliche Punktzahl nur 55%.

ist jedoch der Durchschnitt selbst nicht so interessant. Ich m?chte mehr darüber wissen, wo sich die Leute falsch liegen. Um diesen Artikel zu schreiben, analysierte ich die Daten und konzentrierte mich auf drei Themen, bei denen Menschen besonders niedrig erzielten. Ich werde jede Frage nacheinander erl?utern, Ihnen die Antworten zeigen, die die meisten Personen w?hlen, und die richtigen Antworten erkl?ren.

Es ist sicher zu sagen, dass Sie einen unfairen Vorteil haben, wenn Sie den Test selbst selbst machen, wenn Sie diesen Artikel gelesen haben!

Problem 1: Der beste Weg, um Zeilenh?he

festzulegen

Die erste Frage sollte für Personen, die regelm??ig an Textstilen arbeiten, einfach sein:

Sie m?chten, dass der Text auf der Website standardm??ig doppelt so hoch ist. Welcher der folgenden line-height -Werte ist der beste Weg, um dies zu erreichen?

• 200%
• 2em
• 2
• double

Es gibt vier Antworten zur Auswahl, und Sie erwarten, dass 25% der Personen durch Glück ordnungsgem?? antworten, aber nur 31% werden diese Frage richtig beantworten! Nehmen Sie sich etwas Zeit, um eine Antwort für sich selbst zu w?hlen und weiter zu lesen.

Zun?chst einmal ist double eine Ablenkung. line-height Der einzige akzeptierte Schlüsselwortwert ist normal. Ich bin froh zu sagen, dass nur 9% der Menschen diese Option ausgew?hlt haben. Die anderen drei Antworten sind sehr beliebt.

Die Antwort, die die meisten Menschen gew?hlt haben, lautet 2em (39% gew?hlt diese Antwort). Tats?chlich wird 2em sicherlich doppelte H?hen für die Elemente anwenden, die es anwenden; Entweder EM ist beliebter als Prozents?tze oder die Leute verstehen sie nicht wirklich. 200%

Die richtige Antwort lautet jedoch

. 2

Ich habe mich vor langer Zeit mit dieser Lektion einverstanden, als ich CSS zum ersten Mal gelernt habe. Geben Sie immer als einheitlosen Zahl an. line-height

Angenommen, die Seite hat eine Standard -Schriftgr??e von 12PT, enth?lt aber auch einen Titel mit einer Schriftgr??e von 24PT. Wenn Sie das

des K?rpers auf line-height (oder 2em) festlegen, erhalten Sie im gesamten Dokument genau 24PT (doppelt so gro? wie die K?rperschrift). Der Titel ist also eine Doppelh?he anstelle einer Doppellinienh?he! 200%

Stattdessen fordert das Einstellen von

nach line-height dem Browser an, das Verh?ltnis von Schriftarten zu einer Schriftgr??e/Linien zu erhalten, auch wenn sich die Schriftgr??e ?ndert. Die Linienh?he des K?rpers betr?gt 24PT, aber für die 24 -6 -Schriftart des Titels erh?ht sich die Linienh?he automatisch auf 48PT. 2

Frage 2: Wie man Elemente überlappen

Diese Frage ist etwas schwierig. Es erfordert einige "F?higkeiten", die CSS -Layout h?ufig erfordert:

Welche der folgenden CSS -Attribute k?nnen dazu führen, dass sich HTML -Elemente überlappen?

• z-index
• margin
• overflow
• background

Haben Sie die Antwort gew?hlt? OK, lass uns tiefer gehen.

Auch hier gibt es eine Option, die leicht auszuschlie?en ist:

. Jeder au?er 2% der Tester mied es, weil sie wussten, dass sie die Hintergrundfarbe und das Bild kontrollierten. background

Leider w?hlen die meisten Leute

direkt. Bis zu 46% haben diese Antwort gew?hlt. Ich denke, es liegt daran, dass niemand wirklich versteht, wie z-index funktioniert. Tats?chlich hat das Einstellen des z-index -attributs keine Wirkung. Kurz gesagt, z-index erm?glicht es Ihnen, die Stapelreihenfolge von Elementen zu steuern, die sich überlappen, aber sie müssen sich zuerst überlappen. MDN hat einen sehr guten Artikel mit dem Titel ?Verst?ndnis für CSS Z-Index“, die es wert ist, weitere Details zu lesen. position z-index Wenn Sie jemals z-index verwendet haben, sollte es auch einfach ausschlie?en. Es steuert das Verhalten von Inhalten, das nicht für die Gr??e der Box geeignet ist: ob er abgeschnitten wird, ob es aus der Rande der Box flie?t usw. Dies h?ngt auch davon ab, ob die Kastengr??e durch andere Eigenschaften eingeschr?nkt wird. Trotzdem denken 22%.

Dies l?sst uns nur overflow, was die richtige Antwort ist. Nur 30% der Personen antworteten richtig. M?glicherweise sind Sie neugierig, wie ein Attribut, das Entfernungen zwischen Elementen erzeugt, dazu führen kann, dass sie sich überlappen. Wenn Sie ein tats?chliches CSS -Layout durchgeführt haben, sollte die Antwort offensichtlich sein: Negative Margen führen dazu, dass sich Elemente überlappen.

Um dies zu demonstrieren, erstellen Sie eine Seite mit zwei DIV -Elementen. Stellen Sie die margin-top des zweiten Divs auf einen negativen Wert ein, wie z. B. -100px. Knall! Der zweite Div bedeckt nun die unteren einhundert Pixel der ersten Div.

In der Praxis überlappen Sie sich kaum absichtlich solche Bl?cke wie dieses, aber negative Margen sind sehr nützlich, um HTML -Elemente an Orte zu drücken, an denen sie normalerweise nicht gehen. Ich benutze sie oft, um Elemente zu drücken, die nach links oder rechts in den Füllbereich ihrer übergeordneten Box schweben.

Für die Begeisterung für Webdesign-Geschichte machte die Verwendung von negativen Rand-überlappelementen im Jahr 2005 drei Spalten-Seiten-Layouts, einschlie?lich des sogenannten ein echtes Layout (und sp?teres Holy Grail-Layout).

Problem 3: Pseudo-Elemente und Pseudoklasse

Ich gebe zu, die letzte Frage ist ein bisschen verabscheuungswürdig. Aber nur 23% der Tester konnten diese Frage richtig beantworten (dies ist schlechter als Glück!) Und es hat offensichtlich einen verwirrenden Punkt berührt:

Welche der folgenden Effekte eignet sich am besten für die Verwendung von Pseudoelementen, um sie zu implementieren?

• Fügen Sie dem Benutzer einen Schatten hinzu, wenn er über den Hyperlink schwebt.
• Wenn das Kontrollk?stchen ausgew?hlt ist, werden die Beschriftungen des Kontrollk?stchens in verschiedenen Farben angezeigt.
• Weisen Sie ungerade und sogar Reihen der Tabelle verschiedene Hintergrundfarben zu.
• Zeigen Sie in einem flexiblen Seitenlayout die erste Zeile des Absatzes als fettem Text an.

Diese drei Auswahlm?glichkeiten sind alle Effekte, die mit Pseudoklassen implementiert sind. Kannst du sie unterscheiden?

Pseudoklassen sind spezifische Zust?nde, in denen sich das tats?chliche HTML-Element befindet. Stellen Sie sich dies als eine virtuelle Klasse vor, die der Browser unter bestimmten Bedingungen automatisch für Elemente gilt.

Das Pseudoelement ist Teil des Dokuments, und selbst wenn es sich nicht um ein tats?chliches HTML-Element handelt, k?nnen Sie es CSS erm?glichen, es zu stylen. Es ist wie ein virtuelles HTML -Element - Sie k?nnen es auch dann stylen, wenn es kein tats?chliches HTML -Tag um es gibt.

Mit diesem Unterschied schauen wir uns die folgenden Optionen an:

Fügen Sie dem Benutzer einen Schatten hinzu, wenn er über den Hyperlink schwebt.

Der Hyperlink ist ein tats?chliches HTML -Element. Das Anwenden von Stilen nur in bestimmten F?llen (wenn die Maus darüber schwebt) bedeutet, dass wir Pseudoklassen verwenden. In diesem Fall ist die von Ihnen verwendete Pseudoklasse :hover.

22% der Tester betrachteten dies als Pseudoelement.

Wenn das Kontrollk?stchen ausgew?hlt ist, werden die Beschriftungen des Kontrollk?stchens in verschiedenen Farben angezeigt.

In ?hnlicher Weise ist ein Tag ein tats?chliches HTML -Element, kein virtuelles Element. Wenn das Kontrollk?stchen ausgew?hlt ist, wendet der Browser die :checked Pseudo-Klasse darauf an. Sie k?nnen es dann in Ihrem Selektor verwenden, um das Kontrollk?stchen zu stylen oder sogar das Etikett daneben zu stylen (z. B. mit dem benachbarten Geschwister -Selektor ).

20% der Tester betrachteten dies als Pseudoelement.

Weisen Sie ungerade und sogar Reihen der Tabelle verschiedene Hintergrundfarben zu.

Dies ist eine Frage, die Menschen wirklich t?uscht, aber wir sprechen auch davon, Stile auf tats?chliche HTML -Elemente anzuwenden (in diesem Fall tr Elemente). tr Ist es seltsam oder sogar in der Reihe von untergeordneten Elementen seines übergeordneten Elements, was nur ein weiterer Fall ist, in dem Sie mit Pseudoklassen übereinstimmen k?nnen.

in diesem Fall ist die Pseudoklasse für sogar Elemente und :nth-child(even) (oder :nth-child(2n)) für ungerade Elemente :nth-child(odd) (oder :nth-child(2n 1)).

Ich denke, das liegt einfach daran, dass :nth-child und Pseudo-Elemente normalerweise wie sehr obskure CSS-Funktionen klingen, aber 36% der Tester haben dies als Pseudo-Element ausgew?hlt.

Zeigen Sie in einem flexiblen Seitenlayout die erste Zeile des Absatzes als fettem Text an.

Dies ist natürlich die richtige Antwort. Bisher war der Unterschied hoffentlich klar. In einem flexiblen Seitenlayout k?nnen Sie den HTML -Code der Seite nicht anzeigen und sagen: "Die Elemente dort enthalten nur die erste Zeile des Absatztextes". Der Browser wickelt die Linie nach der Breite des Absatzes, die Sie in einem flexiblen Seitenlayout nicht kontrollieren k?nnen.

:first-line ist ein Pseudoelement, mit dem Sie Stile auf die erste Textzeile in einem Block anwenden k?nnen, unabh?ngig davon, wo die erste Zeile in die zweite Zeile unterbrochen wird.

Wenn Sie denken "Okay, das klingt vernünftig, aber niemand kennt den Unterschied zwischen Pseudo-Elementen und Pseudoklassen", dann stimmt W3C mit Ihnen zu. In der CSS3-Selektorspezifikation ?nderte sie die Syntax so, dass der Pseudo-Element-Selektor zwei Kolonen verwendet (::first-line), w?hrend die Pseudoklasse noch einen Dickdarm verwendet (:hover). Natürlich muss der Browser für die Rückw?rtskompatibilit?t beide Versionen unterstützen.

Also ja, wie ich sagte: Mean Frage. Aber hey, wenn Sie ein CSS-Geek wie ich sind, werden Sie den Unterschied zwischen Ihrem Pseudo-Element und der Pseudoklasse kennen.

Wie sind Ihre Punkte?

Es ist so: Drei R?tsel im Test. Wenn Sie eine dieser Fragen zuversichtlich beantworten, machen Sie einen guten Job. Hast du zwei richtig beantwortet? Nicht schlecht. Wenn Sie alle drei richtig antworten würden, würde ich gerne h?ren, was Sie denken! Besonders nachdem ich diese Antworten gegeben habe, brauche ich wirklich einige schwierigere CSS -Fragen. Bitte poste sie in den Kommentaren!

Wenn Ihnen diese Fragen gefallen, m?chten Sie vielleicht den Rest der Tests ausprobieren. Seien Sie versichert, andere Fragen sind viel einfacher als diese… die meisten von ihnen!

Das obige ist der detaillierte Inhalt von3 Dinge (fast) niemand wei? über CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!