Hallo.
Willkommen zu unserem ersten wirklich technischen Vortrag in unserem CSS Kurs.
Es geht darum, Ihren Seiten Stil hinzuzufügen.
Wenn Sie mit mir aus unserem HTML-Kurs zu diesem Kurs gekommen sind,
wissen Sie, dass Sie allgemeine HTML-Dateien erstellen können.
Aber bis jetzt haben Sie sie vielleicht überhaupt nicht gestylt.
Was ich möchte, dass Sie wissen, bevor wir überhaupt mit dem Styling beginnen, und Sie beginnen, Ihre
eigenen kleinen Drehungen auf den Seiten zu setzen, ist, dass die gleiche HTML-Datei kann anders aussehen,
wenn sie in verschiedenen Browsern angezeigt wird, und es gibt ein paar Gründe dafür.
Erstens werden einige Tags in einigen Browsern nicht unterstützt, während sie sich in anderen befinden.
Also, wenn Sie jemals das Detail-Tag verwendet
haben, können Sie sehen, dass Ihre Seite manchmal kleine Pfeile oder verschiedene kleine Markierungen auf ihnen hat und manchmal nicht.
Das kommt also auf Tags an, die unterstützt werden.
Aber auch jeder einzelne Browser hat seinen eigenen Standardstil.
Und was dieser Standardstil sagt, ist, dass ich meine H1-Überschriften aussehen soll, oder
so viel Polsterung möchte ich um meine Absätze herum.
Wenn Sie also auf die gleiche Seite in verschiedenen Browsern gehen, kann es schwer zu
sagen sein, aber Sie werden winzige kleine Unterschiede in der Art und Weise sehen, wie die Dinge gemacht werden.
Aber im Allgemeinen ist dieser Standardlook wirklich schlicht.
Und die meisten Leute, die ich kenne, wollen nicht, dass ihre Seiten einfach aussehen.
Sie wollen in irgendeinem Stil setzen.
Lassen Sie uns also anfangen, nach Möglichkeiten zu suchen, wie Sie dies tun können.
Eine Möglichkeit, Stil hinzuzufügen, besteht darin, darüber nachzudenken, ihn direkt in den Text hinzuzufügen.
Jetzt, als HTML sich weiterentwickelte, gingen wir davon aus, Tags zu haben, die deutlich über Farbe
und über verschiedene Zentrierung und Dinge wie diese waren.
Um Nein zu sagen, nein, wir wollen keine Tags, die mit Stil zu tun haben.
Wir wollen nur Tags, die mit Inhalten zu tun haben.
Die Leute sagten, okay, wir können das tun, aber ich will es hübsch machen.
Also, wie sie das getan haben, sind sie Stilattribute hinzugefügt.
Also in diesem Fall habe ich ein h1-Tag genommen und das style-Attribut hinzugefügt und
einfach „color: blue“ gesagt.
Und was das tun wird, ist, dass diese bestimmte h1-Überschrift
blaue Schrift dazu hat.
Es ist also sehr einfach.
Es ist eine schöne Möglichkeit, einfach reinzugehen und Ihrer Seite einfaches Styling hinzuzufügen.
Allerdings bricht diese Art von immer noch unsere Regel,
Inhalte von Stil trennen zu wollen.
Denn wenn Sie es
später in, sagen wir, rot oder grün oder so etwas ändern möchten, müssen Sie eingehen und
das Tag ändern, weil Sie das Attribut ändern müssen.
Also habe ich wirklich versucht, aus dem Weg zu gehen, um das überhaupt nicht zu verwenden, und stattdessen
die Gewohnheit, die Dinge richtig zu machen.
Und der richtige Weg, um Ihre Seiten zu stylen, ist CSS zu verwenden.
Cascading Stylesheets sind im Grunde eine Möglichkeit für Sie, Regeln zu schreiben,
die besagen, wie Sie alle Absätze formatieren möchten, wie Sie alle Überschriften formatieren
möchten oder wie Sie einige Ihrer Bilder formatieren möchten.
Es ist eine wirklich schöne,
spezifische Art und Weise, die jeder folgen kann, um diese Styling-Entscheidungen zu treffen.
Und die Regeln sind so aufgestellt.
Zuerst müssen Sie Ihren Selektor aufstellen, und
Selektor ist nur eine Art ausgefallene Art zu sagen, was Sie stylen möchten.
In unserem Fall beginnen wir, indem wir dem Selektor einfach
verschiedene Tag-Namen wie h1 oder Absatz geben.
Sobald Sie gefunden haben, welches Tag Sie stylen möchten,
sagen Sie, welche Eigenschaft Sie ändern möchten.
So können wir Dinge wie Farbe, Hintergrundfarbe betrachten,
wie viel Platz wir um sie herum legen, wir werden all die abdecken.
Aber im Moment werden wir ganz einfach anfangen und uns mit Farben befassen.
Dann müssen Sie jeder Eigenschaft einen Wert geben und
sagen, welche Farbe Sie haben möchten.
Auf der einen Seite haben wir die sehr generische, wie wir eine Regel schreiben.
Und auf der anderen Seite habe ich eine sehr spezifische Regel geschrieben, die besagt, hey,
wenn Sie eine h1-Überschrift sehen, möchte ich, dass Sie die Schriftfarbe blau machen.
Also haben wir genau das getan, was wir getan haben, als wir mit dem Style-Tag eingebettet haben,
aber jetzt ist es sehr generisch, und wir sprechen nicht über eine bestimmte Überschrift.
Wir reden nicht von einem bestimmten Tag.
Wenn Sie diese Regeln schreiben, ist die Syntax sehr wichtig.
Viele Male, wenn Sie HTML schreiben, ist der Browser wirklich nett zu Ihnen und
wenn Sie vergessen, ein Tag zu schließen, steht es, das ist in Ordnung,
ich weiß, was sie will, dass ich tun und es wird gehen weiter und legen Sie die Seite sowieso.
Wenn Sie CSS machen,
wenn Sie schlampig sind mit dem, was wir Ihre Syntax nennen, werden Sie in Schwierigkeiten geraten.
Also, die Klammern und die Semikolons sind sehr wichtig.
Also, lassen Sie mich Ihnen nochmal zeigen, wenn wir hierher zurückgehen,
können Sie sehen, dass ich eine Anfangsklemme und
eine schließende Klammer habe, und ich habe dieses Semikolon direkt am Ende.
Sie müssen daran denken, diese einzubeziehen.
Und einer der Gründe, warum ich darüber spreche, ist, dass, wenn Sie anfangen, Ihren Code zu schreiben
, wenn Sie einen guten Editor auswählen, und die meisten Editoren ziemlich gut sind, wie Sublime
oder TextRangler, TextEdit, Notepad ++, werden sie Farben für Sie einfügen.
Also plötzlich, wenn Sie sich Ihre CSS-Regeln ansehen und
Sie wie, woah, ich erwartete, dass Dinge verschiedene Farben haben, aber
stattdessen ist alles weiß oder alles ist rot.
Es gibt Ihnen irgendwie diesen Hinweis, dass Sie Ihre Regelsyntax durcheinander gebracht haben.
In der gleichen Zeile möchte ich hier einfach reinwerfen, dass Sie, wenn Sie Ihre Regel schreiben,
Kommentare einfügen können, um Ihnen zu helfen, debuggen und
Ihnen zu helfen, sich selbst zu erklären, was Sie gehen.
Und so werden Kommentare in CSS gemacht.
Sie machen einfach die /*, */ wieder.
Was passiert also, wenn Sie mehr als nur eine Eigenschaft machen wollen?
Was ist, wenn Sie, anstatt nur zu sagen, dass die Farbe blau sein
soll, auch die Hintergrundfarbe gelb sein soll?
Nun, kein Problem.
Sie können beliebig viele Eigenschaftswertkombinationen haben.
Sie müssen nur daran denken, sie mit Semikolons zu trennen.
Also
habe ich in diesem Fall wieder die Farbe auf Blau und die Hintergrundfarbe auf Gelb gesetzt.
Also
, jetzt, wo du weißt, wie man eine Regel schreibt, wie bringen wir sie wirklich zur Arbeit?
Nun, es gibt zwei Möglichkeiten und
der erste Weg, von dem ich Ihnen erzählen werde, ist mit einem internen Stylesheet aufgerufen.
Wie Sie hier in meinem Code sehen können, habe ich die grundlegende Vorlage unserer Datei.
Und in den Head-Tags habe ich dieses Style-Tag eingefügt, das ist, wo
Sie Ihre Regeln setzen wollen, sie sind direkt in diesem Stil definiert.
Also, jetzt, innerhalb des Style-Tags, habe ich die h1 hinzugefügt, die Farbe blau, und
ich habe mein Style-Tag beendet.
Was jetzt passiert ist, ist, dass, wenn der Browser Ihre Seite öffnet,
es in den Kopfbereich kommt es sagt, oh toll,
sie hat einige Regeln geschrieben, mal sehen, was sie will, dass ich zu tun.
Und es wird wissen, durch Ihre Seite zu gehen und
diese Regel auf alle H1-Tags anzuwenden.
Und wenn Sie mehrere Regeln haben, einschließlich Absätze, Bilder, Dinge wie diese,
wird es wissen, dass ich dies auf alle Instanzen in der gesamten Datei anwenden möchte.
Ok.
Jetzt gibt es eine wirklich gute Chance, dass du dich vermasseln wirst, weil ich das 80%
der Zeit mache, wenn ich mich im Unterricht entwickle, und
was ich tue, ist, dass ich vergesse, dieses Style-Tag zu schließen.
Und wenn Sie vergessen, dieses Style-Tag unten unten zu schließen,
gut, tatsächlich könnte Ihre Seite am Ende leer sein.
Also flippen Sie nicht aus, wenn Sie das erste Mal anfangen, wenn Ihre Seite leer ist,
es bedeutet wahrscheinlich, dass Sie vergessen haben, das Style-Tag zu schließen.
In Ordnung.
Also, interne Stylesheets sind wirklich nett
, wenn Sie nur versuchen, eine Seite zu stylen.
In Ordnung?
Und ich mache es oft, nur damit ich meinen ganzen Code in einer Datei behalten kann, anstatt hin
und her und her zu gehen.
Aber Stellen Sie sich vor, Sie haben Website, wo Sie 10,20 haben, ein 1.000
verschiedene Seiten und Sie wollen, dass sie alle einen sehr konsistenten Blick über sie haben.
Sie wollen nicht hineingehen und sagen, wenn Sie eine Farbe ändern möchten,
müssen Sie nicht jede einzelne dieser Dateien öffnen, damit
Sie die Farbe in Rot oder Grün ändern können.
Stattdessen möchten Sie etwas verwenden, das als
externe Stylesheets bezeichnet wird.
Die Art und Weise, wie es mit einem externen Stylesheet funktioniert, besteht darin, dass Sie Ihre Regeln
in eine andere Datei einfügen.
Wenn Sie also eine Datei öffnen,
werden Sie sie etwas wie mystyle mit einer Dateiendung .css speichern.
Jetzt weiß der Browser, oh alles in HTML, das ist der Inhalt.
Alles in .css, das ist das Layout.
Wenn Sie nun Ihr externes Stylesheet erstellen, sieht es genauso aus, wie wir es gerade
im internen getan haben, außer dass Sie kein Style-Tag verwenden.
Sobald Sie Ihre Regeln dann in einer separaten Datei gespeichert haben,
müssen Sie lediglich einen Link in den Kopfbereich einfügen.
Also in diesem Fall, ich bin reingegangen,
ich habe meinen Link gesetzt, ich muss es wissen, die Beziehung Cuz des Stylesheets.
Und Sie müssen daran denken, den Dateinamen zu setzen.
Also wieder hier ist es, wo es wirklich wichtig sein wird
, dass Sie Dinge auf eine Weise benennen, die sie seitdem zu Ihnen machen.
Sie können beliebig viele verschiedene Stylesheets verknüpfen, wie Sie möchten,
meistens beginnen wir mit einem.
Nun, da wir dieses Stylesheet hatten,
wird jede einzelne Datei, die mit ihr verknüpft ist, dieses Stylesheet teilen.
Also erinnern Sie sich, als ich erwähnte, dass Sie eine Seite mit 10, 20,
1000 Seiten haben könnten und Sie entscheiden, diese Farbe von blau zu rot oder grün oder
so etwas zu ändern?
Das ist großartig.
Alles, was Sie tun müssen, ist style.css zu öffnen, eine Codezeile zu ändern, und
Sie haben jetzt potenziell Tausende von Seiten geändert. Okay,
also lassen Sie uns für eine Sekunde über diese Idee sprechen, Stylesheets zu kaskadieren.
Was bedeutet das, dass wir kaskadieren?
Nun, wenn der Browser geht, um Ihre Seite zu erstellen, ist das erste, was es sehen
wird, los, in Ordnung, vielleicht sagen sie mir nichts.
Wie erstelle ich normalerweise h1 Überschriften?
Wie groß mache ich diese Schriftart?
Verfügen Sie über eine eigene Art von Standardwerten.
Aber dann geht es und es sieht aus und es steht, oh gibt es irgendwelche externen Stylesheets.
Denn wenn ja, werde ich meine Browser-Standardeinstellungen überschreiben und
stattdessen die Regeln in diesem externen Stylesheet einfügen.
Als nächstes wird es für den internen Stil zu überprüfen.
Diesen Stil haben Sie im Kopfbereich.
Denn im Allgemeinen denkt der Browser, hm, vielleicht gibt es etwas wirklich Besonderes
an dieser bestimmten Seite, und hier will sie, dass ich stattdessen diese Regeln mache.
Schließlich haben alle Inline-Stile, in denen Sie das Attribut-Tag verwenden,
die die höchste Priorität von allen haben.
Es kann also wirklich verwirrend sein, weil Sie vielleicht anfangen, verschiedene Regeln zu schreiben,
und Sie können nicht herausfinden, warum einige arbeiten und andere nicht.
Hier kommt das kaskadierende Teil wieder ins Spiel.
Zuerst betrachtet es die Standardwerte, dann extern, dann intern und dann inline.
Deshalb möchten Sie wirklich vermeiden, jeden Inline-Stil zu verwenden,
weil er alle Ihre Styling-Regeln annulliert.
Okay, also wissen wir, wie diese vier gehen, aber was ist, wenn Sie einen Selektor haben und
Sie mit zwei oder drei verschiedenen Stylesheets verknüpft haben
, und dasselbe H1 wurde als blau, grün und gelb definiert, aber in verschiedenen Dateien.
Woher weiß der Browser, was zu tun ist?
Nun, wie es funktioniert, ist, dass die Regeln aus der letzten Datei Vorrang haben.
Und was ich mit der neuesten Datei meine, es bedeutet, dass es in den Kopfbereich geht
und es geht eins, zwei, drei, und es sieht irgendwie an, in welcher Reihenfolge Sie sie aufgelistet haben,
und die letzte, die Sie aufgelistet haben, ist diejenige, die Vorrang haben wird.
Ok?
Nun, was ist, wenn Sie einen Selektor in derselben Datei
haben und H1 mehrmals geschrieben haben.
Das kann tatsächlich ziemlich viel passieren.
Vor allem, wenn du dich entscheidest zu gehen und Teil einer großen Entwicklungsfirma zu sein,
du schreibst Code, und dann schreibt jemand anderes Code, oder,
wie ich es sage, du bist vielleicht rausgegangen und hast dich eines Nachts richtig amüsiert,
und du bist nach Hause gekommen und hast beschlossen, ich werde programmieren!
Und du vergisst, dass du schon einige Regeln geschrieben hast.
Nun, wenn das der Fall ist, wird
der Browser wieder den sehen, den er zuletzt gesehen hat.
Also, in diesem Fall habe ich zwei Regeln für h1.
Man schreibt an der Farbe zu Blau.
Und ich sagte, hey, ich möchte, dass du diese Luftschriftfamilie benutzt.
Und später könnte es eine ganze Reihe von Sachen hier drin geben,
vielleicht nichts sein, und ich sage hey, ich möchte, dass du eine Schriftfamilie Times benutzt.
Wie der Browser sich das ansehen wird, wird er runtergehen,
doo-doo-doo-doo-doo und sagen, ich werde die ganze Schrift blau machen, und
ich werde die Schriftfamilie Times machen.
Es ist nur immer wird das letzte, das es gesehen hat, benutzen.
Auch hier hat die neueste Regel Vorrang,
ob sie sich in Ihrem Code befand oder aus verschiedenen Dateien stammt.
Es gibt jedoch eine Möglichkeit, dies zu überschreiben.
Angenommen, Sie schreiben etwas und Sie wissen, dass etwas so sein soll.
Es ist dir egal, ob es jemand sonst überschreibt.
Sie wollen wirklich sicherstellen, dass die Leute keinen Inline-Stil verwenden,
verschiedene Dinge wie diese.
Was Sie verwenden können, ist, dass Sie die! wichtiges Attribut genau hier.
Also hier habe ich Font-Familie, Arial, und ich habe hier wichtig.
Also, obwohl ich später beschließe, es mit Zeiten zu überschreiben, wird der Browser
nope sagen, ich weiß, dass sie wirklich wollte, dass ich Arial benutze, und es klappt.
Gehen wir also weiter und schauen wir uns ein Beispiel an, was ich mit all diesen Präzedenzfällen meine.
Ich weiß, dass mir nur zuhören kann ein wenig überwältigend werden, also habe ich ein kurzes
Beispiel, das Ihnen die verschiedenen Wege zeigt und dann werde ich diesen Vortrag einschließen.
Beginnen wir also mit dem style-Attribut.
Wie Sie hier sehen können, habe ich den Code geschrieben, und
ich habe das style-Attribut für diese h1-Überschrift und diesen einen Absatz verwendet.
In diesem Fall möchte ich, dass meine h1-Überschrift blau und mein Absatz rot ist.
Und was ich Ihnen wirklich zeigen möchte, ist, dass
der einzige Absatz, der in roten Text oder rote Schrift geändert wurde, der erste war.
Der andere ist immer noch schwarz.
Die einzige Möglichkeit zu stylen ist, wenn Sie hineingehen und
jedes Tag ändern, um es so aussehen zu lassen, wie Sie es wollen.
Wenn ich wollte, dass alle Absätze rot sind, müsste ich da reingehen und
Stil gleich setzen, Stil gleich.
In diesem Beispiel gibt es nur zwei,
aber Sie können sich vorstellen, wie es wirklich ärgerlich würde, wenn Sie viel hätten, okay.
In unserem nächsten Beispiel haben wir einen internen Stil.
In diesem Fall habe ich mein Style-Tag oben eingefügt und Regeln für
Absätze und H1-Überschriften hinzugefügt, und es sollte beides behandeln.
Also, jetzt ist hier nichts mehr drin, mein Tag ist ganz von alleine.
Und wenn Sie sich das Ergebnis ansehen, gehen wir hier rüber.
Sie können das jetzt sehen, obwohl mein HTML
überhaupt keine Art von Styling hat, sind beide Absätze hier drüben rot und auch die Überschrift.
In Ordnung?
Das letzte Beispiel, das ich für Sie hatte, ist, dass ich genau die gleichen Regeln genommen
habe und sie in ein externes Stylesheet gelegt habe.
Auch hier gibt es kein Style-Tag.
Es sind nur die Regeln selbst.
Und dann musste ich zurück zur HTML-Datei gehen, und Sie können hier oben sehen,
in der Nähe der Spitze, ich habe hey, lassen Sie uns auf das Stylesheet verlinken, das ich will.
Ich möchte Ihnen das sehr sorgfältig darauf hinweisen.
Wenn Sie bemerken, habe ich CSS/ExternalStyle Sheet.
Dies bedeutet, dass sich mein Stylesheet in einem speziellen Ordner namens css befindet.
Entwickler betonen wirklich, dass Sie dies tun,
weil Sie möchten, dass Ihr Code in verschiedenen Teilen organisiert ist.
Also wieder, auf die gleiche Weise
habe ich jetzt eine Seite, die externe Stylesheets verwendet und wirklich gut aussieht.
Also wird dieser ganze Code für dich verfügbar sein, um ihn anzusehen, aber
ich möchte, dass du so viel wie möglich damit spielst.
Aber ich möchte dieses letzte Beispiel verwenden, um
Ihnen zu helfen, zu verstehen, wie die Kaskadierung funktioniert.
Genau hier habe ich mein externes Stylesheet.
Ich werde für eine Sekunde hier rüber gehen.
Geh zu meinem, und ich werde hinzufügen, eine letzte Sache.
Tut mir leid, das wird peinlich.
Und ich werde sagen, dass du was weißt?
Stattdessen möchte ich, dass diese Schriftart wieder schwarz ist, und ich beende sie.
Ich zeige dir, was passiert, wenn du dich schnell vermasselst.
Ich werde es retten, ich werde meine Seite neu laden und alles ist verschwunden.
Das war es, wovon ich gesprochen habe.
Sie möchten wirklich sicherstellen, dass Sie dieses Style-Tag einschließen.
Tun Sie es. Stellen Sie sicher, dass Sie es schließen.
In Ordnung.
Also, jetzt, was ich hier los habe, ist mein Browser hat seinen Browser-Standard.
Es hat ein externes Stylesheet und jetzt hat es auch ein internes.
Mal sehen, welche Farbe es sein wird,
ob es blau sein wird oder ob es schwarz wird.
Und wie Sie sehen können, ist es schwarz.
Wenn Sie also mit dem Styling beginnen, wird es sehr wichtig sein, dass Sie
verschiedene Möglichkeiten zum Trennen Ihrer Inhalte von Ihrer Formatierung betrachten.
Sowie Blick auf die verschiedenen Möglichkeiten, wie Sie diese Formatierung tun können.
Also, eines der ersten Dinge, über die ich nachdenken möchte,
ist, wie diese Idee von externen und
internen Stylesheets wirklich in die Trennung von Inhalt und Formatierung spielt.
Und gleichzeitig möchte ich, dass Sie verstehen, dass wir nicht immer
jede Regel befolgen.
Am Anfang müssen wir immer mit wirklich,
wirklich einfachen Beispielen beginnen, die euch helfen, zu festigen, was mit CSS vor sich geht.
Also werde ich das jetzt mit einer kurzen,
kurzen Demo von einem Beispiel beenden, das sie auf csszengarden.com haben, weil
ich denke, es bringt wirklich die Idee nach Hause, dass CSS sehr mächtig sein kann.
Also schauen wir uns mal an.
Also auf dieser Seite,
CSS Zen Garden, Sie haben tatsächlich einen wirklich tollen Job gemacht,
all die verschiedenen Möglichkeiten zu zeigen, können Sie eine exakt gleiche Datei aber auf unterschiedliche Weise formatieren.
Also hier oben, wenn Sie einen Blick werfen, können Sie sehen, dass dies ein
Stylesheet einer Person ist, um dieses Dokument zu dekorieren oder zu stylen.
Nun, ohne irgendeinen HTML-Code zu ändern, kam jemand anderes rein und sagte: Hey,
weißt du was, das ist nett, aber ich werde es so gestalten.
Es sieht ganz anders aus.
Es ist das gleiche exakte HTML, aber es sieht völlig anders aus.
Auf die gleiche Weise haben wir dieses hier, genau das gleiche HTML.
Aber Sie konnten nicht anders aussehen,
weil sie etwas CSS und JavaScript hinzugefügt haben, das anders ist.
Also komm mit mir.
Wir werden in diesem Kurs viel programmieren.
Wir werden viel mit diesem Kurs spielen.
Du wirst in diesem Kurs viel vermasseln.
Aber ich kann es kaum erwarten,
dass Sie etwas entwickeln, das wirklich widerspiegelt, wie Sie Ihre Seite aussehen soll.
Danke.