Hallo, heute werden wir über fortgeschrittene Selektoren sprechen.
Bis zu diesem Zeitpunkt, als wir unsere Regeln geschrieben haben,
haben wir unsere Regeln für eine bestimmte Art von Tag geschrieben.
Wir haben h1 oder p oder h2 gesagt.
Also haben wir uns wirklich nur auf eine Sache konzentriert, die all die verschiedenen Elemente
dieses Typs abdeckt.
Aber was, wenn Sie nicht alle Links stylen wollen, nur einige davon?
Oder Sie möchten nicht alle Ihre Listen stylen,
Sie möchten nur einige von ihnen stylen?
Nun, jetzt werden wir über diese Art von fortgeschrittenen Selektoren sprechen
, die uns genau das machen lassen.
CSS wird Ihnen so viele Möglichkeiten geben, dass ich in diesem Vortrag versuchen werde, so
viele wie möglich zu decken, aber es wird immer noch an Ihnen liegen, zu gehen und
einige mehr auf eigene Faust zu suchen, wie Sie sie brauchen.
Beginnen wir also mit den CSS-Selektoren, die dem DOM folgen.
Wenn Sie sich daran erinnern, dass das Dokumentobjektmodell
ist, wie der Browser Ihre Seite in eine baumartige Struktur aufteilt.
Auf diese Weise weiß der Browser tatsächlich, ob ein Absatz direkt nach einem
h1-Tag kommt oder ob zwei Absätze Geschwister im selben Abschnitt sind.
Wir werden das nutzen, um nur bestimmte Teile Ihrer Seite zu stylen.
Also sind abhängige Selektoren eine Möglichkeit zu sagen, hey, wenn Sie sich in einem nav-Tag befinden,
möchte ich, dass Sie alle Links formatieren, die sich innerhalb des nav -Tags befinden.
Anstatt sie alle zu tun, nur diese.
Wenn Sie noch genauer sein möchten, können Sie die untergeordneten Selektoren verwenden.
Diese Regel ist sehr ähnlich, außer es sagt,
alle ein Links müssen sein, was wir direkte Nachkommen des nav Link nennen.
Wenn Sie einen Absatz drin haben und einige Links darin enthalten sind, ignorieren Sie das.
Sie müssen direkt untereinander sein.
Das letzte ist benachbarte Geschwister.
Das ist nicht eine, die ich tatsächlich sehr in meiner eigenen Codierung verwende, aber
ich wollte Sie wissen lassen, was es ist, weil es eine wirklich gute Chance gibt, dass
Sie es sehen werden, wenn Sie den Code anderer Leute betrachten.
Wie das benachbarte Geschwister funktioniert, ist, dass die Elemente das sein müssen,
was wir die gleiche Ebene nennen und einander folgen müssen.
Wenn Sie also einen Abschnitt haben, der eine h1 und
dann eine geordnete Liste hat, wären sie Geschwister.
Wenn Sie ein h1 hätten und dann einige andere Dinge und
diese geordnete Liste innerhalb eines Absatzes wäre, würde es nicht so funktionieren.
Als nächstes werden wir darüber sprechen, was wir ID-Selektoren nennen.
IDs werden verwendet, um ein einzelnes Element im DOM zu identifizieren.
Die Art, wie IDs funktionieren, ist, dass
Sie eingehen würden, und Sie würden in Ihrem HTML etwas in den Zeilen der ID gleich header sagen, oder
id equals footer ist eine, die sie verwendet haben, um viel zu verwenden.
Dann
können Sie in Ihrem Stylesheet mithilfe des Pfund-Symbols identifizieren, welche Sie formatieren möchten. Im
Moment gibt es eine kleine Bewegung, aber
es wächst ein wenig, um sich aus der Verwendung von ID aus CSS zu entfernen.
Sie sagen, dass es wirklich keinen Sinn hat, das zu
verwenden, weil viele Leute diese ID wirklich für JavaScript und solche Dinge verwenden.
Aber wieder, das ist etwas, das Sie viel sehen werden, also
möchte ich Ihnen vorstellen.
Also lassen Sie uns ein Beispiel wirklich schnell hier nur auf dem Bildschirm sehen, wie es funktioniert.
In meinem HTML würde ich meine Quelle, mein Alt-Tag,
aber auch ID = „MainLogo“ einfügen.
Dann, in meinem Stylesheet, mit dem #-Symbol zusammen mit dem ID-Namen,
wird der Browser wissen, oh, wenn ich eines dieser Bilder sehe,
möchte ich sicherstellen, dass ich diesen Rahmen und diesen Rand hinzufüge.
Klassenselektoren ähneln IDs, aber der Unterschied besteht darin, dass Klassen für
einen Bereich von Elementen gelten können, nicht nur für ein bestimmtes Element im DOM.
Also, denken Sie an Thumbnail-Bilder oder die sozialen Icon-Medien.
Es ist diese Idee, dass, weißt du was,
ich in der Lage sein will, eine große Gruppe von Dingen auf die gleiche Weise
zu gestalten, aber ich will sie nicht unbedingt alle so stylen.
Sie möchten nicht, dass alle Ihre Bilder Miniaturansichten sind,
aber Sie möchten, dass viele von ihnen sind.
Sie würden diesen Code auf eine sehr ähnliche Weise schreiben.
Hier drüben in meinem HTML habe ich class = „thumb“, class = „thumb“,
class = „thumb“.
Und in meinem CSS müssen Sie anstelle von # sicherstellen, dass Sie den
Punkt oder den Punkt zusammen mit dem Klassennamen verwenden, und dann können Sie ihm irgendwelche Regeln geben.
Und auf diese Weise wird die Seite durchgehen und wissen, dass Sie zusätzlich zu
jedem Styling, das Sie gerade auf Bilder setzen, auch dieses Styling für die Thumbnails wollen.
Also, nur um zu versuchen, Ihnen zu helfen, es ein wenig klarer zu machen,
was ist der Unterschied zwischen der Verwendung von Klassen und IDs?
Nun, zuerst wollen Sie sicherstellen, dass Sie die Syntax kennen.
Der Zeitraum ist für Klassen, und das Pfund ist für IDs.
Sie können dies nicht durcheinander bringen, weil der Browser es nicht für
Sie repariert, wenn Sie das Falsche vor Ihren Klassen- oder ID-Namen stellen.
Sie möchten sich daran erinnern, dass Klassen mehrfach verwendet werden können.
Es macht Sinn in Ihrem HTML-Code, class = „thumb“, class = „thumb“,
class = „thumb“ zu sehen, weil es kein bestimmter Teil der Seite sein soll.
Mit IDs sollte es eindeutig sein, Sie sollten nur id gleich sehen, zum
Beispiel Header, die wir nicht einmal verwenden.
Sie sollten id="main section“ nur einmal sehen.
Lassen Sie uns also noch einmal an Bilder und Navigationsleisten denken.
Es ist sehr üblich, dass Sie zahlreiche, aber
nicht alle Bilder auf die gleiche Weise formatieren möchten.
Und Sie würden dafür Klassen verwenden.
Wo Sie eine ID verwenden könnten, bin ich sicher, dass Sie sich an einigen Stellen befunden haben
, an denen Sie auf der Webseite die Navigationsleiste sehen und
die Seite, auf der Sie sich gerade befinden, etwas anders gestaltet ist.
Und das macht Sinn, weil Sie nur auf einer Seite zu einer Zeit sein können, und
deshalb können Sie wählen, die ID zu verwenden.
Also gehen wir weiter und gehen Sie durch ein kurzes Beispiel mit dieser Navigationsleiste.
Also hier ist eine Beispiel-HTML-Datei,
in der alles, was ich getan habe, ist in vier Links zu setzen, die nicht einmal wirklich irgendwo hingehen.
Ich habe das Stylesheet auskommentiert, nur damit
Sie sehen können, wie es ohne Styling aussehen würde.
Sie können sehen, ich habe mein Zuhause, Interessen, Lebenslauf, Hobbys, und
ich habe einen zusätzlichen Link hier unten, den ich hier sehr schlecht angerufen habe.
Lassen Sie uns also voran gehen und
versuchen Sie, ein wenig Styling mit diesen erweiterten Selektoren hinzuzufügen.
Geh hier rüber.
Sie können sehen, dass ich das untergeordnete Element von verwendet habe, eigentlich
nur irgendwie der Nachkomme von, hey, all den Links, die in der Navigationsleiste sind,
ich möchte anders stylen, ich möchte ihnen eine andere Hintergrundfarbe,
eine andere Breite, solche Dinge geben.
Darüber hinaus möchte ich alles, was die Klasse aktuell ist, sogar anders machen
als jeder andere Link oder irgendetwas anderes, das wir so gesehen haben.
Also lasst uns voran gehen und das Stylesheet auskommentieren.
Speichern Sie es.
Geh von hier zu diesem.
Sie können sehen, dass nur die Links in meiner Navigationsleiste formatiert sind.
Dieser wurde gleich gelassen.
Und derjenige, wo ich class = „current“ habe, sieht anders aus als die anderen.
Also ist es wirklich einfach, diese Dinge zu verwenden, Sie müssen nur über sie wissen. Wenn
Ihre Seiten weiter fortgeschritten werden,
möchten Sie den Geltungsbereich einiger der Regeln einschränken.
Wir wollen sie nur auf bestimmte Dinge anwenden.
Und eine der Notationen, die Sie dafür verwenden können, ist der Punkt.
Also in Ihrem Stylesheet würden Sie tatsächlich p.main haben.
Das bedeutet, gehen Sie und finden Sie alle Absätze, die die Klasse main verwenden.
Oder Sie haben vielleicht Header img.special.
Dies würde bedeuten, finden Sie alle Bilder, die Bild klassische Spezial
, die in der Kopfzeile gehören.
Es ist nur eine Möglichkeit für Sie, wirklich zu reduzieren, was gestylt wird.
Auf der gleichen Seite können Sie auch, was wir nennen, den Umfang erweitern.
Nehmen wir an, dass es eine Art von Styling gibt, die Sie sowohl auf
die Kopf- und Fußzeile oder auf die Abschnitte und die Artikel anwenden möchten.
Kein Problem.
Was Sie tun, ist, dass Sie einfach das Element schreiben,
und Sie fügen ein Komma direkt dort ein, um es wissen zu lassen.
So wie ein kurzer Rückblick.
Und das ist etwas von viel früher.
Sie müssen darüber nachdenken, was passiert, wenn mehrere Regeln für
denselben Selektor vorhanden sind.
Also könnten Sie diesen hier oben mit dem Absatz haben, wo er bestimmte
Eigenschaften hat, die er zwischen den Absätzen h1, der ID main und
der Klasse Special teilen möchte.
Aber später, wenn Sie zusätzliches Styling für
einen Absatz haben möchten, solange Sie das irgendwo unten setzen,
wird es überschreiben und mit allem kombinieren, was höher ist.
Es sei denn, eine Regel hat das Ausrufezeichen, das danach wichtig ist,
verwendet sie immer nur die letzte, die sie gesehen hat, zusammen mit den früheren, die nicht in Konflikt stehen.
Neben den Elementselektoren und den verschiedenen DOM-Beziehungsselektoren
haben wir auch ein paar mehr, über die ich kurz sprechen möchte.
Der erste ist der Universal-Selektor, der der Stern oder
die Shift Acht auf Ihrer Tastatur ist.
Was diese tut, ist,
es wird Ihr Styling auf jedes einzelne Element auf der Seite anwenden.
Es ist absolut verrückt.
Ich werde es nicht tun.
Ich lasse es dir tun, aber geh weiter und setze einen Stern ein, und dann den Stil,
vielleicht Grenze, um jedes Element herum.
Es wirkt sich auf alles auf Ihrer Seite aus.
Manchmal ist es schön zum Debuggen.
Die nächste, die Sie vielleicht darüber nachdenken möchten, sind das, was wir
Attributselektoren nennen.
Anstatt auf die Tags zu gehen, gehen Sie auf die Attribute, die in die Tags gehen.
In diesem Fall würde es weitergehen und es würde jeden Link stylen wollen, wo Sie
href="info.html“ haben, und ich werde ein kurzes Beispiel dafür in nur einer Sekunde machen.
Aber bevor ich das mache, wollte ich zwei weitere erwähnen, die wir später betrachten werden,
die Pseudo-Klassen und Pseudoelemente sind.
Nur eine weitere Ebene, um nur bestimmte Dinge zu unterscheiden, die Sie
auf Ihrer Seite stylen möchten.
Aber zuerst gehen wir weiter und schauen uns die Verwendung dieser Attributselektoren an.
Die Art und Weise, wie Attributselektoren arbeiten, besteht darin, dass sie das DOM nach
Elementen suchen, die das Attribut haben, nach dem Sie suchen.
So, zum Beispiel, möchten Sie vielleicht alle Bilder, die GIF-Dateien verwenden, oder
alle Bilder, die leere Alt-Text oder vielleicht
alle Links, die zu staatlichen Websites oder gemeinnützigen Websites oder Bildungs-Websites gehen.
Es ist wirklich einfach für uns, diese zu finden und voranzugehen und
sie ein wenig anders zu stylen.
Wie wir das tun, ist, dass wir Operatoren verwenden, um
die verschiedenen Teile des Alt-Textes, den Sie suchen, zu entsprechen.
Also hier oben, in dem, was wir das Caret nennen, wird es mit dem Anfang übereinstimmen.
In diesem Fall würde es all diesen Links entsprechen, die mit http://umich beginnen, und
es spielt keine Rolle, wie es endet.
Der nächste mit dem Dollarzeichen wird genau zum Ende passen.
Es wird jede Datei finden, die in .png endet.
Wir haben auch den Platzhalter, wo Sie gehen und
sagen, wenn Sie umich in irgendeinem Teil einer Hyperreferenz überhaupt sehen, wenden Sie diese Regel an.
Wir werden uns also eine Datei ansehen, die verschiedene
Links hat und jede eine andere Art von Erweiterung hat, die wir anders gestalten wollen.
In Ordnung.
Also, was ich hier habe, ist nur eine Liste von Links.
Es gibt keinen Unterricht.
Nichts Besonderes an diesen, das geht zu verschiedenen Universitätsstandorten, Organisationen
, Regierungsstellen, und wenn Sie einen Blick werfen, wird es standardmäßig nur als
Ihre traditionellen blauen Links mit unterstrichen, dem Text direkt dort erscheinen.
Aber was ich will, ist, dass ich reingehen und sagen will,
weißt du was, all die, die auf .org enden?
Mach ihnen eine Farbe.
Alle, die .edu sind, eine andere Farbe, und
alle, die in .gov enden, eine dritte Farbe.
Mal sehen, wie es aussieht.
Hier können Sie sehen, dass ohne dass ich irgendwelche Informationen in den Tags
selbst einfügen muss, der Browser sie in der richtigen Farbe gefärbt hat.
Okay, ich habe gerade eine Menge Sachen in einem sehr kurzen Video behandelt.
Du musst erkennen, dass diese Ideen miteinander verschmelzen werden.
Sie werden Klassen verwenden,
Sie werden IDs verwenden, Sie werden Attribute verwenden.
Und das Wichtigste, was ich möchte, dass Sie wissen, dass, wenn
Sie all diese Dinge zusammen hinzufügen, die Reihenfolge, in der Sie Klassen und
verschiedene IDs in Ihrem Text schreiben, keine Rolle spielt.
Es spielt keine Rolle, ob Sie ein besonderes Frühdunkel oder dunkles Frühe-Special haben.
Worauf es wirklich ankommt, ist die Reihenfolge, in der Sie Ihre Regeln in Ihr Stylesheet schreiben.
Browser beginnen immer nach oben und wenden jede Regel an.
Nun ist die gute Nachricht aus diesem Vortrag, dass ich möchte, dass Sie erkennen
, dass mit der Macht von Klassen und IDs und diesem Cascading Stylesheet ist
, dass dies bedeutet, dass Sie Stylesheets von anderen Leuten verwenden können, um Ihren Code zu stylen.
Und Sie können einfach eine Klasse hinzufügen, die das eine kleine Attribut ändert
, das Ihnen vielleicht nicht gefallen hat.
Sie können diese Stylesheets überschreiben und sie zu Ihrem ganz eigenen machen.
Stellen Sie einfach sicher, dass Sie Ihr Stylesheet zuletzt verknüpfen.
Alles klar, wir haben viel gedeckt, und
ich hoffe, ich habe dich nicht mit dem Video überwältigt.
Ich möchte nur, dass Sie sich daran erinnern, dass, wenn wir Typselektoren machen und
die Art von Dingen, die Sie in dieser Klasse tun
werden, dass wir sie normalerweise hinzufügen, um den Umfang zu verengen, wo Regeln angewendet werden.
Also wollen wir nicht alles stylen.
Wir wollen nur bestimmte Dinge stylen.
Eine ID wird verwendet, um ein bestimmtes Element in einer Seite anzugeben, und
Klassen werden verwendet, um Elemente zu verknüpfen, die wirklich dazu neigen, das ähnliche Aussehen zu haben.
Also, während wir weitermachen, weiß ich, dass ich einige Code-mit-Me-Beispiele haben werde.
Ich hoffe, Sie werden aufhören, Ihren Laptop rausholen und
wirklich mit mir programmieren, um eine Vorstellung davon zu bekommen, wie mächtig diese verschiedenen Dinge sein können.
Danke.