CSS lernen: Die vollständige Anleitung

Wir haben eine vollständige Anleitung erstellt, die Ihnen beim Erlernen von CSS hilft, unabhängig davon, ob Sie gerade erst mit den Grundlagen beginnen oder fortgeschritteneres CSS erkunden möchten.

CSS-Selektoren

So lernten Sie die Basis id, class und descendant Selektoren-und nannten es dann einen Tag? Wenn ja, verpassen Sie ein enormes Maß an Flexibilität. Sie schulden es sich selbst, diese erweiterten CSS-und CSS3-Selektoren in den Speicher zu übertragen.

Grundlegende Selektoren

1., *

* { margin: 0; padding: 0;}

Lassen Sie uns die offensichtlichen für Anfänger ausschalten, bevor wir zu den fortgeschritteneren Selektoren übergehen.

Das Sternsymbol zielt auf jedes einzelne Element auf der Seite ab. Viele Entwickler werden diesen Trick verwenden, um die margins und paddingauf Null zu setzen. Während dies für schnelle Tests sicherlich in Ordnung ist, würde ich Ihnen raten, dies niemals im Produktionscode zu verwenden. Es fügt dem Browser zu viel Gewicht hinzu und ist unnötig.

Die * kann auch mit untergeordneten Selektoren verwendet werden.,

#container * { border: 1px solid black;}

Dies zielt auf jedes einzelne Element ab, das ein untergeordnetes Element der #container divist. Versuchen Sie erneut, diese Technik nicht sehr zu verwenden, wenn überhaupt.

2. #X

#container { width: 960px; margin: auto;}

Durch Voranstellen des Hash-Symbols einem Selektor können wir nach idzielen. Dies ist leicht die häufigste Verwendung; Seien Sie jedoch vorsichtig, wenn Sie id Selektoren verwenden.,

Fragen Sie sich: Muss ich unbedingt eine id auf dieses Element anwenden, um es anzuvisieren?

id Selektoren sind starr und erlauben nicht zur Wiederverwendung. Wenn möglich, versuchen Sie zunächst, einen Tag-Namen, eines der neuen HTML5-Elemente oder sogar eine Pseudoklasse zu verwenden.

3. .X

.error { color: red;}

Dies ist ein class Selektor. Der Unterschied zwischen ids und classes besteht darin, dass Sie mit letzterem auf mehrere Elemente abzielen können., Verwenden Sie classes, wenn Ihr Styling auf eine Gruppe von Elementen angewendet werden soll. Alternativ können Sie ids, um eine Nadel in einem Heuhaufen zu finden, und nur dieses bestimmte Element formatieren.

4. X

a { color: red; }ul { margin-left: 0; }

Was ist, wenn Sie alle Elemente auf einer Seite entsprechend ihrer type anstelle einer id oder className? Halten Sie es einfach und verwenden Sie eine Typauswahl. Wenn Sie auf alle ungeordneten Listen abzielen müssen, verwenden Sie ul {}.,

Live-Demo Grundlegende Selektoren

Combinator-Selektoren

5. X Y

Der nächsthäufigste Selektor ist der Selektor descendant. Wenn Sie mit Ihren Selektoren genauer sein müssen, verwenden Sie diese. Was ist zum Beispiel, wenn Sie nicht auf alle Anker-Tags abzielen, sondern nur auf die Anker abzielen müssen, die sich in einer ungeordneten Liste befinden? Dies ist insbesondere dann der Fall, wenn Sie einen Nachkommen-Selektor verwenden würden.

Pro-Tipp: Wenn Ihr Selektor wie X Y Z A B.error aussieht, machen Sie es falsch., Fragen Sie sich immer, ob es absolut notwendig ist, all dieses Gewicht anzuwenden.

6. X + Y

ul + p { color: red;}

Dies wird als benachbarter Selektor bezeichnet. Es wird nur das Element ausgewählt, dem das vorherige Element unmittelbar vorausgeht. In diesem Fall hat nur der erste Absatz nach jedem ul roten Text.

7., X > Y

Der Unterschied zwischen dem Standard X Y und X > Y besteht darin, dass letztere nur direkte Kinder auswählen. Betrachten Sie beispielsweise das folgende markup.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

Ein Selektor von #container > ul zielt nur auf die uls ab, die direkte untergeordnete Elemente der div mit einer id von container., Es zielt beispielsweise nicht auf die ul, die ein untergeordnetes Element der ersten li.

Aus diesem Grund gibt es Leistungsvorteile bei der Verwendung des Child Combinators. In der Tat wird es besonders empfohlen, wenn Sie mit JavaScript-basierten CSS-Selektor-Engines arbeiten.

8. X ~ Y

ul ~ p { color: red;}

Dieser Geschwisterkombinator ähnelt X + Y, ist jedoch weniger streng., Während ein benachbarter Selektor (ul + p) nur das erste Element auswählt, dem der frühere Selektor unmittelbar vorausgeht, ist dieser verallgemeinerter. Es wählt, bezogen auf unser Beispiel oben, alle p Elemente aus, solange sie einer ulfolgen.

Live-Demo Combinator-Selektoren

Attribut-Selektoren

9. X

a { color: green;}

In unserem obigen Beispiel werden nur die Anker-Tags ausgewählt, die ein title Attribut haben., Anker-Tags, die dies nicht tun, erhalten dieses spezielle Styling nicht. Aber was, wenn Sie genauer sein müssen? Schauen Sie sich das nächste Beispiel an!

10. X

a { color: #83b348; /* Envato green */}

Das obige Snippet formatiert alle Anker-Tags, die auf https://code.tutsplus.com verlinken. Alle anderen Anker-Tags bleiben davon unberührt.

Beachten Sie, dass wir den Wert in Anführungszeichen setzen. Denken Sie daran, dies auch zu tun, wenn Sie eine JavaScript CSS Selector Engine verwenden. Verwenden Sie nach Möglichkeit immer CSS3-Selektoren gegenüber inoffiziellen Methoden.,

Das funktioniert gut, obwohl es ein bisschen starr ist. Was ist, wenn der Link tatsächlich direkt zu Envato Tuts+, aber vielleicht ist der Pfad code.tutsplus.com anstatt die vollständige URL? In diesen Fällen können wir ein wenig von der Syntax regulärer Ausdrücke verwenden.

11. X

a { color: #83b348; /* Envato green */}

Los geht ‚ s; das brauchen wir. Der Stern gibt an, dass der Attributwert irgendwo im Wert des Attributs erscheinen muss. Auf diese Weise deckt dies tutsplus.com, code.tutsplus.com, und sogar webdesign.tutsplus.com.

Denken Sie daran, dass dies eine breite Aussage ist., Was ist, wenn das Anker-Tag mit der Zeichenfolge tutsplus in der URL mit einer Nicht-Envato-Site verknüpft ist? Wenn Sie genauer sein müssen, verwenden Sie ^ und $, um auf den Anfang bzw. das Ende einer Zeichenfolge zu verweisen.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

Haben Sie sich jemals gefragt, wie einige Websites ein kleines Symbol neben den externen Links anzeigen können? Ich bin sicher, Sie haben diese schon einmal gesehen; Sie sind schöne Erinnerungen daran, dass der Link Sie zu einer ganz anderen Website führt.

Dies ist ein Kinderspiel mit dem Karat-Symbol., Es wird am häufigsten in regulären Ausdrücken verwendet, um den Anfang einer Zeichenfolge zu bezeichnen. Wenn wir auf alle Ankertags abzielen möchten, die eine href die mit http beginnt, können wir einen Selektor ähnlich dem oben gezeigten Snippet verwenden.

Beachten Sie, dass wir nicht nach suchen; das ist unnötig und berücksichtigt nicht die URLs, die mit beginnen

Was ist, wenn wir stattdessen alle Anker stylen möchten, die beispielsweise auf ein Foto verweisen?, Suchen wir in diesen Fällen nach dem Ende der Zeichenfolge.

13. X

a { color: red;}

Erneut verwenden wir ein Symbol für reguläre Ausdrücke, $, um auf das Ende einer Zeichenfolge zu verweisen. In diesem Fall suchen wir nach allen Ankern, die auf ein Bild verlinken—oder zumindest nach einer URL, die mit .jpgendet. Beachten Sie, dass dadurch keine GIF-und PNG-Bilder erfasst werden.

14. X

a { color: red;}

Wie kompensieren wir die verschiedenen Bildtypen?, Nun, wir könnten mehrere Selektoren erstellen, wie zum Beispiel:

a,a,a,a { color: red;}

Aber das ist ein Schmerz, und es ist ineffizient. Eine andere mögliche Lösung ist die Verwendung benutzerdefinierter Attribute. Was wäre, wenn wir jedem Anker, der mit einem Bild verknüpft ist, ein eigenes data-filetype Attribut hinzufügen würden?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Mit diesem Hook können wir dann einen Standardattribute-Selektor verwenden, um nur auf diese Anker abzuzielen.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

Hier ist eine besondere, die Ihre Freunde beeindrucken werden. Nicht zu viele Leute wissen von diesem Trick., Mit dem Symbol tilde (~) können wir auf ein Attribut abzielen, das über eine durch Leerzeichen getrennte Werteliste verfügt.

Zusammen mit unserem benutzerdefinierten Attribut von Nummer 15 oben könnten wir ein data-info Attribut erstellen, das eine durch Leerzeichen getrennte Liste von allem erhalten kann, was wir beachten müssen. In diesem Fall notieren wir uns externe Links und Links zu Bildern—nur für das Beispiel.,

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

Mit diesem Markup können wir jetzt alle Tags mit einem dieser Werte ansprechen, indem wir den ~ Attribute selector Trick.

Ziemlich raffiniert, huh?

Live-Demo von Attribut-Selektoren

Pseudo-Selektoren

16. X: link und X: link

a:link { color: red; }a:visited { color: purple; }

Wir verwenden die Pseudoklasse :link, um auf alle Ankertags abzuzielen, auf die noch geklickt werden muss.,

Alternativ haben wir auch die Pseudo-Klasse :visited, mit der wir, wie zu erwarten, nur die Ankertags auf der Seite anwenden können angeklickt oder „besucht“.

17. X: checked

input:checked { border: 1px solid black;}

Diese Pseudoklasse zielt nur auf ein aktiviertes Benutzeroberflächenelement ab—wie ein Optionsfeld oder Kontrollkästchen. Es ist so einfach wie das.

18. X: Nach

sind die Pseudoklassen before und after großartig., Es scheint, dass die Menschen jeden Tag neue und kreative Wege finden, sie effektiv zu nutzen. Sie erzeugen einfach Inhalte um das ausgewählte Element herum.

Viele wurden zuerst in diese Klassen eingeführt, als sie auf den Clear-Fix-Hack stießen.

Dieser Hack verwendet die Pseudoklasse , um ein Leerzeichen nach dem Element anzuhängen und es dann zu löschen. Es ist ein ausgezeichneter Trick in Ihrer Werkzeugtasche, insbesondere in den Fällen, in denen die overflow: hidden; – Methode nicht möglich ist.

Eine weitere kreative Verwendung finden Sie in meinem schnellen Tipp zum Erstellen von Schatten.,

Gemäß der CSS3-Selektoren-Spezifikation sollten Sie technisch die Pseudoelementsyntax von zwei Doppelpunkten verwenden ::. Um jedoch kompatibel zu bleiben, akzeptiert der User-Agent auch eine einzelne Datennutzung.

19. X:hover

div:hover { background: #e3e3e3;}

ach, komm schon. Du kennst diesen hier. Der offizielle Begriff dafür ist „User Action pseudo class“. Es klingt verwirrend, ist es aber wirklich nicht. Möchten Sie ein bestimmtes Styling anwenden, wenn ein Benutzer über einem Element schwebt? Dies wird die Arbeit erledigen!,

Beachten Sie, dass ältere Versionen von Internet Explorer nicht reagieren, wenn die Pseudoklasse :hover auf etwas anderes als ein Ankertag angewendet wird.

Sie verwenden diesen Selektor am häufigsten, wenn Sie beispielsweise eine border-bottom zum Ankern von Tags verwenden, wenn Sie mit der Maus darüber fahren.

a:hover { border-bottom: 1px solid black;}

Pro-Tipp: border-bottom: 1px solid black; sieht besser aus als text-decoration: underline;.

20., X:not(selector)

div:not(#container) { color: blue;}

Die negation pseudo-class, besonders hilfreich ist. Angenommen, ich möchte alle divs auswählen, mit Ausnahme derjenigen mit der ID container. Das obige Snippet erledigt diese Aufgabe perfekt.

Oder, wenn ich jedes einzelne Element (nicht empfohlen) mit Ausnahme von Absatz-Tags auswählen wollte, könnten wir Folgendes tun:

*:not(p) { color: green;}

21., X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

Wir können Pseudoelemente (bezeichnet durch ::) verwenden, um Fragmente eines Elements wie die erste Zeile oder den ersten Buchstaben zu formatieren. Beachten Sie, dass diese auf Elemente auf Blockebene angewendet werden müssen, um wirksam zu werden.,

Ein Pseudoelement besteht aus zwei Doppelpunkten: ::

Ziel der erste Buchstabe eines Absatzes

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Dieses Snippet ist eine Abstraktion, die alle Absätze auf der Seite findet, und dann Unterziel nur den ersten Buchstaben dieses Elements.

Dies wird am häufigsten verwendet, um zeitungsähnliches Styling für den ersten Buchstaben eines Artikels zu erstellen.,

Ziel die Erste Zeile eines Absatzes

p::first-line { font-weight: bold; font-size: 1.2em;}

Ähnlich, die ::first-line pseudo element wird, wie erwartet, stil die erste zeile der element nur.

“ Zur Kompatibilität mit vorhandenen Stylesheets müssen Benutzeragenten auch die vorherige Ein-Doppelpunkt-Notation für Pseudoelemente akzeptieren, die in den CSS-Ebenen 1 und 2 eingeführt wurden (nämlich :first-line, :first-letter, :before und ). Diese Kompatibilität ist für die in dieser Spezifikation eingeführten neuen Pseudoelemente nicht zulässig.,“- W3C Selectors Specs

Live-Demo von Pseudo-Selektoren

Nth Kind und Typ-Selektoren

22. X: nth-child (n)

li:nth-child(3) { color: red;}

Erinnern Sie sich an die Tage, an denen wir keine Möglichkeit hatten, bestimmte Elemente in einem Stapel anzuvisieren? Die Pseudoklasse nth-child löst das!

Bitte beachten Sie, dass nth-child eine Ganzzahl als Parameter akzeptiert, diese jedoch nicht auf Null basiert. Wenn Sie auf das zweite Listenelement abzielen möchten, verwenden Sie li:nth-child(2).

Damit können wir sogar einen Variablensatz von Kindern auswählen., Zum Beispiel könnten wir li:nth-child(4n), um jedes vierte Listenelement auszuwählen.

23. X: nth-last-child (n)

li:nth-last-child(2) { color: red;}

Was wäre, wenn Sie eine riesige Liste von Elementen in einer ul hätten und Sie beispielsweise nur auf das drittletzte Element zugreifen müssten? Anstatt li:nth-child(397), können Sie stattdessen die Pseudoklasse nth-last-child.

Diese Technik funktioniert fast identisch mit Nummer 16 oben. Der Unterschied ist, dass es am Ende der Sammlung beginnt und sich zurückarbeitet.

24., X: nth-of-type (n)

ul:nth-of-type(3) { border: 1px solid black;}

Es wird Zeiten geben, in denen Sie anstelle einer child nach der type des Elements auswählen müssen.

Stellen Sie sich ein Markup vor, das fünf ungeordnete Listen enthält. Wenn Sie nur die dritte ul formatieren möchten und keine eindeutige id zum Einhaken haben, können Sie die Pseudoklasse nth-of-type(n) verwenden. Im obigen Snippet hat nur die dritte ul einen Rand.

25., X: nth-last-of-type (n)

ul:nth-last-of-type(3) { border: 1px solid black;}

Und ja, um konsistent zu bleiben, können wir auch nth-last-of-type, um am Ende der Selektorliste zu beginnen und uns wieder auf das gewünschte Element zu konzentrieren.

26. X: first-child

ul li:first-child { border-top: none;}

Mit dieser strukturellen Pseudoklasse können wir nur auf das erste untergeordnete Element des übergeordneten Elements abzielen. Sie verwenden dies häufig, um Ränder aus den ersten und letzten Listenelementen zu entfernen.Angenommen, Sie haben eine Liste von Zeilen und jede hat eine border-top und eine border-bottom., Nun, mit dieser Anordnung werden das erste und das letzte Element in diesem Set etwas seltsam aussehen.

Viele Designer wenden Klassen von first und last an, um dies zu kompensieren. Stattdessen können Sie diese Pseudoklassen verwenden.

27. X:last-child

ul > li:last-child { color: green;}

Das Gegenteil von first-child, last-child Ziel wird das Letzte Element des element ‚ s parent.

last-child Selector Example

Lassen Sie uns ein einfaches Beispiel erstellen, um eine mögliche Verwendung dieser Klassen zu demonstrieren., Wir erstellen ein gestyltes Listenelement.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

Für das markup, gibt es nichts besonderes: nur eine einfache Liste.

Hier ist das CSS:

Dieses Styling setzt einen Hintergrund, entfernt das Standard-Auffüllen des Browsers für die ul und wendet Ränder auf jede li an, um ein wenig Tiefe zu erhalten.

Um Ihren Listen Tiefe hinzuzufügen, wenden Sie eine border-bottom auf jede li an, die ein oder zwei Schatten dunkler ist als die Hintergrundfarbe der li., Wenden Sie als nächstes eine border-top an, die einige Nuancen heller ist.

Das einzige Problem, wie im Bild oben gezeigt, ist, dass ein Rahmen ganz oben und unten auf die ungeordnete Liste angewendet wird—was seltsam aussieht. Verwenden wir die Pseudoklassen :first-child und :last-child, um dies zu beheben.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

Los geht ‚ s; das behebt es!

28., X: only-child

div p:only-child { color: red;}

Wahrheitsgemäß werden Sie wahrscheinlich die Pseudoklasse nicht zu oft verwenden. Trotzdem ist es verfügbar, sollten Sie es brauchen.

Damit können Sie auf Elemente abzielen, die das einzige untergeordnete Element des übergeordneten Elements sind. Wenn Sie beispielsweise auf das obige Snippet verweisen, wird nur der Absatz, der das einzige untergeordnete Element der div, rot gefärbt.

Nehmen wir das folgende Markup an.,

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

In diesem fall wird die zweite div’s absätze werden nicht gezielt; nur die erste div. Sobald Sie mehr als ein untergeordnetes Element auf ein Element anwenden, wird die Pseudoklasse nicht mehr wirksam.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

Diese strukturelle Pseudoklasse kann auf clevere Weise verwendet werden. Es zielt auf Elemente ab, die keine Geschwister in seinem übergeordneten Container haben. Nehmen wir als Beispiel alle uls, die nur ein einziges Listenelement haben.,

Fragen Sie sich zunächst, wie Sie diese Aufgabe erfüllen würden. Sie könnten , aber dies würde auf alle Listenelemente abzielen. Die einzige Lösung ist die Verwendung von only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

Mit der Pseudoklasse first-of-type können Sie die ersten Geschwister ihres Typs auswählen.

Ein Test

Um dies besser zu verstehen, lassen Sie uns einen Test durchführen. Kopieren Sie das folgende Markup in Ihren Code-Editor:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

Versuchen Sie nun, ohne weiter zu lesen, herauszufinden, wie Sie nur auf“Listenelement 2″ abzielen., Wenn Sie es herausgefunden haben (oder aufgegeben haben), lesen Sie weiter.

Lösung 1

Es gibt verschiedene Möglichkeiten, diesen Test zu lösen. Wir werden eine Handvoll von ihnen überprüfen. Beginnen wir mit first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

Dieses Snippet besagt im Wesentlichen, die erste ungeordnete Liste auf der Seite zu finden und dann nur die unmittelbaren untergeordneten Elemente zu finden, bei denen es sich um Listenelemente handelt. Filtern Sie dies als Nächstes nur nach dem zweiten Listenelement in diesem Satz.

Lösung 2

Eine weitere Option ist die Verwendung des benachbarten Selektors.,

p + ul li:last-child { font-weight: bold;}

In diesem Szenario finden wir die ul, die sofort das p – Tag und dann das allerletzte Kind des Elements.

Lösung 3

Mit diesen Selektoren können wir so widerlich oder verspielt sein, wie wir wollen.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Dieses Mal greifen wir die erste ul auf der Seite und finden dann das allererste Listenelement, aber beginnend von unten!,

Live-Demo der N-ten Child-und Type-Selektoren

Wenn Sie ältere Browser wie Internet Explorer 6 kompensieren, müssen Sie dennoch vorsichtig sein, wenn Sie diese neueren Selektoren verwenden. Aber bitte lass dich davon nicht davon abhalten, diese zu lernen. Du würdest dir selbst einen großen Dienst erweisen. Achten Sie darauf, hier für eine Browser-Kompatibilitätsliste zu verweisen. Alternativ können Sie Dean Edwards exzellenten IE9 verwenden.js-Skript, um diese Selektoren in älteren Browsern zu unterstützen.,

Zweitens versuchen Sie bei der Arbeit mit JavaScript-Bibliotheken wie dem beliebten jQuery immer, diese nativen CSS3-Selektoren nach Möglichkeit über die benutzerdefinierten Methoden/Selektoren der Bibliothek zu verwenden. Dadurch wird Ihr Code schneller, da die Selector-Engine das native Parsen des Browsers anstelle des eigenen verwenden kann.

Es ist großartig, dass Sie Zeit mit dem Erlernen der Grundlagen des Webdesigns verbringen, aber wenn Sie eine schnelle Lösung benötigen, ist eine unserer gebrauchsfertigen CSS-Vorlagen möglicherweise eine gute Option. Wir haben auch ein paar premium-CSS-Elemente für Sie zu prüfen.,

• CSS3
  12 Elegante CSS Preistabellen für Ihr neuestes Webprojekt
  Monty Shokeen
• Bootstrap 4
  18 Beste Bootstrap 4 Plugins
  Monty Shokeen

Kostenloser Zugriff auf Envato Elements für 1 Monat

Schließlich ist hier ein ganz besonderes Angebot, das Ihnen beim Aufbau professionell aussehender Websites und Apps hilft. Warum nutzen Sie nicht nur diese CSS-Selektoren, sondern auch hochwertige Fotos, Videomaterial, Premium-Schriftarten, Grafiken, Illustrationen und mehr?,

Normalerweise müssten Sie für solche Ressourcen bezahlen. Im Moment können Sie jedoch einen ganzen Monat lang völlig kostenlos auf Millionen kreativer Assets für Ihre Codierungsprojekte zugreifen. Darüber hinaus erhalten Sie unbegrenzte Downloads, sodass Sie in diesem Monat so viel abrufen können, wie Sie möchten, und nur bezahlen können, wenn Sie fortfahren möchten!,

Um dieses Angebot zu nutzen, klicken Sie auf diesen speziellen Anmeldelink oder geben Sie den folgenden Code auf der Registrierungsseite ein:

elements_cont_tuts-freemonth1-4bwkbp

Warten Sie nicht zu lange—das Angebot ist nur für eine begrenzte Zeit gültig!