Web Design Vocabulary Refresh Part 2 CSS-Struktur

Was ist der Unterschied zwischen einer Eigenschaft und einem Selektor? Wie unterscheidet sich eine Deklaration von einem Deklarationsblock und was ist eine CSS-Regel? Wie erkenne ich den Unterschied zwischen einer Pseudoklasse und einem Pseudoelement?

Diese Serie dient als grundlegende Einführung in einige Begriffe, die jeder neue Webdesigner unbedingt in sein Vokabular aufnehmen sollte. Es wird keine erschöpfende Vokabelliste sein, sondern eher eine Einführung in ein paar Begriffen, die mir als Anfänger schwer zu verstehen waren. Wir haben Anfang dieser Woche mit HTML begonnen und heute werden wir uns mit einigen strukturellen Komponenten von CSS beschäftigen.

CSS

Cascading Style Sheets (CSS) bieten Stil und Formatierung für den allgemein rohen Inhalt, der über HTML bereitgestellt wird. Genau wie wir es in unserem vorherigen Artikel mit HTML getan haben, können wir diese Terminologie aufteilen, um eine Bedeutung zu gewinnen.

Beginnen wir am Ende. CSS ist ein Stilvorlagensprache im Gegensatz zu einem Auszeichnungssprache wie HTML oder a Skriptsprache wie JavaScript. Wie bereits erwähnt, werden Stylesheet-Sprachen hauptsächlich zum Formatieren von Dokumenten verwendet. CSS ist das Sahnehäubchen des HTML-Kuchens, was bedeutet, dass die Substanz wirklich im HTML-Code enthalten ist, aber ohne CSS ohne deren Hilfe sehr schlicht aussieht.

Das kompliziertere Teil dieser Definition ist das "Kaskadieren". Teil. Die Funktionsweise von Stylesheets besteht darin, dass eine bestimmte Regel, die an einem Ort festgelegt ist, tatsächlich "kaskadieren" kann. herunter und wirken sich auf andere Teile eines Dokuments aus, unabhängig davon, ob Sie dies beabsichtigen oder nicht.

Die Kaskade verfügt über eine Reihe von Regeln, nach denen festgelegt wird, wie Stile im gesamten Dokument angewendet werden. Weitere Informationen hierzu finden Sie in Nicolas Gallaghers neuem Artikel CSS: Kaskade, Spezifität und Vererbung. Dies ist eine kurze, aber hervorragend erläuterte Diskussion darüber, wie sich die Kaskade von anderen Begriffen wie Spezifität und Vererbung unterscheidet.

CSS3

CSS3 ist die dritte große Iteration von CSS. In CSS2 gab es eine große Spezifikation, aber mit CSS3 wurde alles in so genannte Chunks unterteilt Module. Einige Beispielmodule umfassen Folgendes: CSS-Farbe, Medienabfragen, CSS-Animationen, flexibles Rahmenlayout usw. Hier finden Sie eine vollständige Liste.

Jedes Modul wird als eine Einheit bearbeitet und hat einen Status, der weitgehend unabhängig von den anderen Modulen ist. Zum Beispiel hat das Modul Selectors Level 3 die "Empfehlung" erreicht. bedeutet, dass es zur Implementierung bereit ist, während CSS Flexible Box Layout noch ein "Arbeitsentwurf" ist. das wird überarbeitet.

Das Interessante an dieser Modularität ist, dass Entwickler es kaum erwarten können, mit all diesen Leckereien zu spielen. Auch wenn ein bestimmtes Modul nur sehr wenig Browserunterstützung bietet und ein äußerst experimenteller Entwurf ist, wird es wahrscheinlich immer noch auf Live-Sites im gesamten Web verwendet. Seien Sie immer vorsichtig, wenn Sie neue CSS3-Funktionen verwenden, und überprüfen Sie die Browserkompatibilität.

Die Anatomie von CSS

Eines der wichtigsten Konzepte, die Sie bei der Arbeit mit CSS verstehen müssen, ist die Art und Weise, wie auf die einzelnen Teile normalerweise Bezug genommen wird. Wenn Sie sich die Zeit nehmen, diese Sprache zu beherrschen, wird das Verständnis für Tutorials, Bücher und andere Quellen, aus denen Sie CSS lernen, erheblich verbessert. Wenn Sie dann das Wort "Eigenschaft" lesen oder hören? Sie wissen sofort, was diskutiert wird.

Um zu beginnen, hier ein grundlegendes Diagramm einer CSS-Linie. Wie Sie sehen, gibt es hier drei Einzelteile: einen Selektor, eine Eigenschaft und einen Wert.

Wähler

Das erste Puzzleteil ist als Selektor bekannt. Das ist so ziemlich genau das, wonach es klingt: ein Weg zu wählen oder Ziel etwas zum Stylen. CSS verwendet einfache Muster, die sich auf Teile des DOM beziehen (worüber wir im ersten Teil erfahren haben) und wendet dann Stile auf diese bestimmte Auswahl an. Der obige Code zielt beispielsweise auf alle Absatzelemente ab und setzt ihren Farbwert auf Schwarz.

Einige Selektoren, wie der oben, sind unglaublich einfach, während andere sehr komplex sind. Später werden wir einige der komplizierteren Terminologien für Selektoren besprechen.

Eigentum

Die Eigenschaft ist der Aspekt des Ziels, das Sie ändern möchten. Jedes HTML-Element ist ein kompliziertes Objekt, das einer Reihe von Eigenschaften zugeordnet werden kann. Das obige Beispiel zielt beispielsweise auf Absatzelemente, die Standardeinstellungen für Schriftgröße, Schriftfamilie, Farbe, Zeilenhöhe und vieles mehr enthalten, die jeweils über CSS überschrieben werden können.

Einige Eigenschaften beziehen sich auf geringfügige ästhetische Entscheidungen, andere können sich jedoch drastisch auf das Layout Ihres Dokuments auswirken. Um die Dinge noch komplizierter zu gestalten, weisen verschiedene Browser den verschiedenen Eigenschaften häufig unterschiedliche Standardwerte zu. Projekte wie Normalize.css sparen Ihnen eine Menge Arbeit, indem Sie versuchen, diese Unterschiede zu berücksichtigen und zu beseitigen.

Wert

Nachdem Sie ein zu änderndes Element ausgewählt und den zu ändernden Teil des Objekts ausgewählt haben, ist es an der Zeit, etwas zu ändern! Mit dem Wertebereich können Sie die Eigenschaft auf etwas Neues setzen. Beispielsweise setzt der Browser-Standard Ihre Absätze möglicherweise bereits auf Schwarz, aber Sie denken, dass ein dunkles Grau besser ist, so dass der für Farbe eingestellte Wert # 4b4b4b ist.

Der Begriff? Wert? ist etwas verwirrend, weil Sie es wahrscheinlich sofort mit etwas Numerischem verbinden. In der Tat sind viele CSS-Werte numerischer Natur. Werte können in Pixeln (Schriftgröße: 10px), Prozentangaben (Breite: 33,33%), Ems (Zeilenhöhe: 1em) usw. ausgedrückt werden. Sie können jedoch auch auf andere Weise ausgedrückt werden. Betrachten Sie die folgenden Beispiele:

Wie Sie sehen, ist dies ein großer Teil von CSS mit vielen Werten, aber es ist keine einzige Zahl in Sicht! Denken Sie daran, dass der Begriff? Wert? ist hier ziemlich allgemein und kann sich auf eine Reihe verschiedener Eingaben beziehen.

Deklaration vs. Deklarationsblock vs. Regel

Dies sind Begriffe, die mich ständig in die Irre führen, und um ehrlich zu sein, hatte ich es bis dahin nicht viel untersucht. Deklarationen, Deklarationsblöcke und Regeln sind so ähnlich, dass es leicht ist, Ihre Etiketten durcheinander zu bringen und die falsche Terminologie zu verwenden.

Letztlich ist es nicht die schlimmste Sache auf der Welt, wenn Sie es falsch sagen, aber wenn Sie ein Tutorial lesen oder ansehen, ist es hilfreich zu wissen, worüber der Lehrer gerade spricht. Hier ist ein schnelles Diagramm, das hoffentlich sofort klar macht, worauf sich jeder Begriff bezieht:

Wie Sie sehen, haben wir hier eine klare Hierarchie. Fangen wir klein an und arbeiten wir uns hoch. EIN Erklärung besteht aus einer Eigenschaft und einem Wert (Farbe: rot). EIN Deklarationsblock ist eine oder mehrere Deklarationen, die in geschweiften Klammern enthalten und durch Semikolons voneinander getrennt sind: {color: red; Breite: 20px;}. Zum Schluss werfen Sie einen Selektor in diese Mischung und Sie haben sich selbst eine Regel.

Arten von Selektoren

Sie sollten jetzt eine gute Vorstellung davon haben, was Selektoren sind, aber wussten Sie, dass es viele verschiedene Selektortypen gibt? Hier sind einige, die Sie kennen sollten.

Typenauswahl

Dies ist der grundlegendste Selektor. Gemäß dem Modul der Selektorenebene 3 repräsentiert ein Typselektor eine Instanz des Elementtyps im Dokumentbaum. Beispiele für Typselektoren umfassen solche, die einfach auf einen bestimmten Typ von HTML-Elementen abzielen:

Klassen-Selektoren vs. ID-Selektoren

Abgesehen von Typ-Selektoren sind Klassen-Selektoren und ID-Selektoren zwei der häufigsten Arten von Selektoren, die Sie in CSS sehen. Wie wir beim letzten Mal gelernt haben, besteht der Hauptunterschied zwischen Klassen und IDs darin, dass Klassen wiederverwendbar sind und IDs eindeutig sind.

Sie können eine bestimmte Klasse aus Ihrem HTML-Code mit einem Klassenselektor anvisieren, dem immer ein Punkt vorangestellt ist. Ebenso können Sie eine beliebige ID aus Ihrem HTML-Code mit einem ID-Selektor anvisieren, dem immer ein Hash-Symbol vorangestellt ist.

Attribut-Selektoren

Klassen und IDs sind eigentlich HTML-Attribute, die häufig genug sind, um spezielle Selektoren zu verdienen, aber es gibt auch viele andere Attribute. Betrachten Sie zum Beispiel den folgenden Ausschnitt:

Hier haben wir ein paar Ankerelemente, die enthalten href-Attribute. Sie wissen wahrscheinlich, dass Sie CSS verwenden können, um alle Ankertags auf einmal auszurichten, aber wussten Sie, dass Sie einen bestimmten href-Wert gezielt ansprechen können?

Hier haben wir eine Attributauswahl um nur die href mit dem Wert von 'https://designshack.net/' anzugreifen und ihre Farbe in weiß zu ändern. Dies ignoriert den anderen Anker in unserem Beispiel vollständig. Attributselektoren führen zu einigen der kompliziertesten CSS-Selektoren, die Sie jemals sehen werden.

Glücklicherweise haben wir einen großartigen Artikel, in dem Sie alles über Attribut-Selektoren lernen und verrückte Selektoren wie den oben genannten interpretieren.

Nachkomme, Kinder und Geschwisterauswähler

Es gibt einige Selektoren, die sich anfühlen, als ob sie aus einem Familienstammbaum stammen (was mit unserer DOM-Diskussion vom letzten Mal zusammenhängt). Zum Beispiel hier ist die absteigender Kombinator:

Dies gilt für alle Absätze, die Nachkommen von Header-Elementen sind. Beachten Sie, dass Nachkommen nicht mit Kindern identisch sind. Wie bei Ihrer Familie sind alle Kinder eines Objekts Nachkommen, aber nicht alle seiner Nachkommen sind Kinder. Die Auswahl über den Zielen alles der Absätze hier:

Angenommen, wir wollten nur die untergeordneten Elemente des Headerelements anvisieren. Dazu verwenden wir die Kinderkombinator. Dies gilt nur für die ersten beiden Absätze im obigen HTML-Code.

Es gibt auch Geschwisterkombinatoren (allgemein und nebeneinander). Diese und mehr finden Sie in unserem Artikel CSS Selectors: Just the Tricky Bits. So sehen sie aus:

Der erste Selektor richtet sich an jeden Absatz, dem unmittelbar ein Element h1 vorangestellt ist (benachbarter Geschwister), während der zweite Selektor einen beliebigen Absatz vor einem h1 anspricht, unabhängig davon, ob es sich um das vorherige Element (allgemeines Geschwister) handelt oder nicht.

Pseudoklassen gegen Pseudoelemente

Ein weiteres Spezialgebiet von Selektoren ist das Thema Pseudoklassen und Pseudoelemente. Um diese Diskussion klarer zu machen, hier eine Grafik, die ich für The Lowdown am erstellt habe: Before und: After in CSS.

Hier sehen wir einige bekannte Pseudoklassen wie schweben zusammen mit einigen, die ein bisschen seltener wie erstes Kind. Aber wie unterscheiden sich diese von den Pseudoelementen wie :Vor und :erste Linie?

Die Antwort ist ziemlich einfach. Denken Sie daran, dass Pseudo-Klassen als Ziel dienen komplette Elemente oder Elementzustände während Pseudoelemente zielen Unterteile eines Elements. Zum Beispiel die schweben Pseudoklasse kann auf einen gesamten Anker, Absatz, Div usw. angewendet werden. Im Gegensatz dazu :erste Linie zielt nicht auf einen ganzen Absatz ab, sondern nur auf einen Teil davon.

Mit welchen CSS-Bedingungen haben Sie Probleme?

Ich wollte, dass dieser Artikel etwas umfassender wird, aber ich bin so in die grundlegende Struktur von CSS eingepackt, dass ich dort aufhören musste. Ich werde wahrscheinlich weitermachen und einen dritten Teil dieser Serie schreiben, der einige andere häufig verwendete CSS-Jargon behandelt, die hier nicht behandelt wurden.

Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, mit welchen CSS-Konzepten und Begriffen Sie Probleme haben. Welche Phrasen hören Sie austauschbar, obwohl sie nicht unbedingt dasselbe bedeuten?