Hallo, in der heutigen Vorlesung werden wir über das Styling Ihres Textes auf Ihren Webseiten sprechen. Eine der besten und einfachsten Möglichkeiten, um Ihre Seite wirklich ein wenig anders als die Standardeinstellung aussehen zu lassen, besteht darin, darüber nachzudenken, wie Sie Ihren Text formatieren möchten, um eine maximale Wirkung zu erzielen. So viele, viele Optionen und wir werden heute über einige von ihnen reden. Eine dieser Optionen besteht darin, über Ihre Schriftart nachzudenken. Einige der Dinge, die Sie stylen können, sind die Schriftfamilie, der Schriftstil, die Schriftvariante und die Schriftgröße. Wir können auch über das Styling der Farbe und des Hintergrunds Ihrer Schriftart nachdenken. Wir können auch über die Ausrichtung sprechen. Und schließlich werden wir sehr kurz über die Zeilenhöhe sprechen. Dies sind alles vier Dinge, die Sie tun können, um einfach wirklich Art von Highlight oder betonen Sie die verschiedenen Dinge, die Sie möchten Ihren Stil zu bringen. Lassen Sie uns zuerst über Schriftfamilie sprechen. Schriftfamilien sind nur verschiedene Arten von Text. Also, wenn Sie Word bereits verwendet haben, Sie sind gegangen, Sie sind in die Schriftfamilie gegangen und Sie können Arial oder Wingdings oder all diese verschiedenen Arten von Schriftarten auswählen. Sie können die gleichen Dinge auf Ihrer Webseite tun. Also habe ich hier oben ein paar Beispiele für die Häufigeren. Sie haben Helvetica, Kurier, Courier New, Comic Sans, kursive oder Verdana. Ich habe versucht, den Schrifttyp hier auf die Folie zu setzen, aber es könnte schwer für Sie sein, zu sehen. Und ich habe das absichtlich gemacht, denn was für Sie offensichtlich aussieht, wenn Sie entwerfen, sieht nicht immer offensichtlich für die Leute aus, die auf Ihre Seite schauen. Ich habe auch diese besonderen ausgewählt, denn ich wollte Ihnen zeigen , dass einige ein einziges Wort sind, wie Helvetica. Aber Comic Sans MS ist mehrere Wörter, also musste ich es in Anführungszeichen setzen. In Ordnung. Also, wie es funktioniert, ist, wieder, verwenden Sie Ihre Syntaxregel. Sie haben Ihren Selektor, Ihre Eigenschaft und dann Ihren Wert. Also in diesem Fall habe ich gesagt, wenn Sie eine h1-Überschrift sehen, verwenden Sie nicht die Browser-Standardüberschrift, stattdessen möchte ich, dass Sie die Arial-Schriftart verwenden. Es ändert also die Schriftart etwas, um wie dieses Beispiel hier zu sehen. Jetzt unterstützt jeder einzelne Browser nicht alles. Wir haben dies sogar mit HTML 5 gesehen. Einige Browser unterstützen Text, andere nicht. Auf die gleiche Weise unterstützen einige Browser einige Schriftarten und andere nicht so gut. Also, was Sie tun können, ist, dass Sie Alternativen zur Verfügung stellen können. In diesem Beispiel habe ich dem Browser drei verschiedene Alternativen zur Verwendung gegeben. Ich sage im Grunde, wenn Sie zu einem h1-Tag kommen, möchte ich wirklich, dass Sie die Courier-Schriftart verwenden. Aber wenn Sie die Courier-Schriftart nicht haben, gehen Sie weiter und verwenden Sie die Impact-Schriftart. Wenn du das nicht hast, geh weiter und benutze Arial. Nun, eine der Fragen, die Sie sich stellen könnten, ist, was, wenn es keine drei dieser Schriftarten hat? Es hat keinen Kurier, Impact oder Arial. Nun, wenn Sie sich erinnern, als wir zum ersten Mal über Cascading Stylesheets gesprochen haben, sagten wir, wenn Sie ihm eine Regel geben und es nicht unterstützen kann, wird es immer wieder auf den Browser-Standard zurückgehen. Sie brauchen sich also keine Sorgen über das Verschwinden von Schriftarten zu machen, weil Sie ihm eine schlechte Schriftfamilie gegeben haben. Es wird immer durchkommen. Wenn Sie also Ihre Schriftfamilien auswählen , sollten Sie über ein paar Dinge nachdenken. Die erste ist vielleicht die wichtigste, ist einige Schriftarten sind viel benutzerfreundlicher als andere. Es gibt grundsätzlich zwei Kategorien. Sie haben Serifenschriftarten und serifenfreie Schriftarten. Die Serifen-Schriftarten sind diejenigen, die die Art der ausgefallenen Kanten entlang der Seite haben , die Sie verwendet haben, als Sie Kalligraphie oder andere Dinge wie diese gelernt haben. Die serifenlosen Schriften sind sehr sauber, es gibt keine Drop-Downs oder so etwas. Wenn es also an der Zeit ist, dass jemand deine Seite in die Luft sprengt, gehe irgendwie rein und ich versuche, an das richtige Wort zu denken, wenn sie reingehen wollen, und sie wollen es größer aussehen. Serif-Schriftarten können wirklich chaotisch werden, also vermeiden Sie diese, wann immer möglich. Ich persönlich benutze keine benutzerdefinierten Schriftarten selbst, aber ich war noch nie eine künstlerische Art von Person. Wenn Sie also entscheiden, dass Sie Ihre eigene Schriftart oder eine spezielle websichere benutzerdefinierte Schriftart haben möchten, müssen Sie hier etwas Besonderes verwenden, das als Schriftart-Face-Regel bezeichnet wird. Und was wir tun, ist, dass Sie im ersten Beispiel sehen können, sagen Sie, hey, ich werde mein eigenes Font-Gesicht definieren. Ich werde es zufällig MySpecialFont nennen. Sie können es so nennen, wie Sie es nennen möchten, und dann müssen Sie ihm eine Quelle geben. Diese Quelle, das ist eine neue, die Sie noch nicht gesehen haben. Wir verwenden nicht href, wir verwenden keine Quelle, wir verwenden url. Und die URL sagt, dass Sie hier die Datei finden können , die meine spezielle Schriftart definiert. Und wenn Sie das tun, sobald Sie die Schriftgesichtsregel einmal geschrieben haben, können Sie während des restlichen Stylesheets fortfahren und darauf verweisen. Also, jedes Mal, wenn ich eine h1-Schriftart verwende, wirst du MySpecialFont verwenden. Lassen Sie uns jetzt über den Schriftstil sprechen. Es ist ein viel schickeres Wort, als Sie vielleicht erwarten, aber wir sprechen einfach darüber, ob Ihre Schriftart normal aussieht, was die Standardeinstellung ist, oder möchten Sie, dass sie kursiv ist? Oder wollen Sie, dass es schräg ist, was im Grunde nur eine besondere Art kursiv ist. So wird normale Schriftart passieren, egal was, wenn es genau ist, wie es sein wird. Wenn jemand anderes ein Stylesheet geschrieben hat und sie alles kursiv gemacht haben, dann wollen Sie vielleicht sagen, nein, ich werde es überschreiben und es normal machen. Kursiv ist immer eine bestimmte Art von schlank, im Grunde, zu Ihrer Schrift. Ein schräger ist, wenn Sie wirklich etwas Besonderes sein wollen und genau definieren, in welchen Winkel Sie Ihren Text lehnen möchten. Die Schriftvariante, wir haben hier wirklich nur zwei Möglichkeiten. Wir haben normal und wir haben kleine Mützen. Die Leute benutzen das ziemlich viel, wenn sie versuchen, sehr konsistente und doch etwas ausgefallene Blicke darauf zu machen. Also hier habe ich wieder gesagt, immer mit h1, ich möchte, dass meine Schriftvariante klein ist. Also, wenn Sie sich meinen Text ansehen, meinen h1-Text unten unten, habe ich <h1>Small Cap-Variation geschrieben. Aber wenn der Browser es anzeigt, wird es in kleinen Kappen angezeigt. Dies verhindert, dass Sie hin- und hergehen müssen, um sich daran zu erinnern, Ihren gesamten Text in Groß- oder Kleinbuchstaben zu ändern. Es spielt keine Rolle, wie Sie es schreiben, der Browser zeigt es immer in Großbuchstaben an. Jetzt ist die Schriftgröße etwas, über das wir während des gesamten Kurses sprechen werden, und in anderen Kursen werden wir auch tun, wie Responsive Design, weil es wirklich viele verschiedene Möglichkeiten, es zu tun. Also fangen wir einfach mit den grundlegendsten an. Ihre Optionen sind, können Sie Schriftgröße gleich extra klein, extra klein, klein und kleiner verwenden. Ich mag die nicht sehr, weil es mir nicht wirklich einen Bezugsrahmen gibt. Sie können Medium haben, Sie können groß, extragroß, xx-large und größer haben. Sehr wenige Leute benutzen diese Optionen, aber sie sind da draußen, also wollte ich dir sagen, was sie sind. Vielmehr verwenden viele Menschen Pixel. Also, ich werde auf der Website diese nette Art von Tabelle für Sie, die bezieht, wie viele Pixel auf einen Zoll, wie viele Pixel auf Picos, so dass Sie ein Gefühl dafür bekommen. Aber die meisten Menschen tun etwas in der Linie von 20 Pixeln, 35 Pixeln, 80 Pixeln. Und das ist ein sehr konsistentes Aussehen und es ist etwas, das Menschen irgendwie fühlen können, wie es aussehen sollte. Ich neige jedoch dazu, stattdessen Prozentsätze zu verwenden. Prozentsätze werden uns erlauben, die Schriftgröße zu ändern, da wir die Größe des Bildschirms viel einfacher ändern. Wenn Sie also sagen, verwenden Sie 100%, wird es die Standardgröße sein. Wenn Sie sagen, verwenden Sie 110% es wird etwas größer sein. Wenn Sie 75% verwenden würden, wären es drei Viertel der Größe. Als nächstes sprechen wir über Farbe und Hintergrundfarbe. Das Farbattribut ist die Farbe des Vordergrunds, die das schicke Wort nur für den Text selbst ist. In Ordnung. Die Hintergrundfarbe ist die Farbe des Hintergrunds hinter der Schriftart, die wir betrachten. Und je nachdem, welche Art von Text Sie stylen, kann es sehr unterschiedlich aussehen. Also, hier habe ich eine Regel gemacht, und du hast das noch nicht gesehen. Ich gehe voran und style zwei verschiedene Selektoren. Ich werde h1 stylen und span. Wenn Sie also ein Komma genau dort setzen, habe ich es genau hier, zwischen der h1 und der Spanne, können Sie so viele Kommas setzen, wie Sie wollen, und so viele Selektoren schreiben, wie Sie wollen. In diesem Fall habe ich gesagt, hey, ich möchte, dass meine Farbe blau ist, und ich möchte, dass meine Hintergrundfarbe grau ist. Und wenn Sie nicht sicher sind, woher diese seltsamen Zahlen kommen, schauen Sie sich das Farbvideo an. Dort wird es dir alles erklären. Also jetzt bin ich hineingegangen, und in meinem HTML habe ich Farben in einem h1-Tag, und ich habe das Wort inline in einem span -Tag. Und was ich möchte, dass Sie bemerken, dass für das h1, das Blockelement, die Hintergrundfarbe die gesamte Breite der Seite bedeckt. Aber für span, für Inline-Elemente, geht die Hintergrundfarbe nur um das Element und den Text selbst. Als nächstes sprechen wir über das Ausrichten von Text. Das Ausrichten von Text ist einfach. Es ist wahrscheinlich eines der einfachsten Dinge, die Sie in HTML tun können. Und du wirst wirklich glücklich sein. Denn später, wenn Sie sich entscheiden, andere Dinge auszurichten, ist es so schwer und Sie werden einfach alles in Text schreiben wollen. Ihre Optionen sind also, wenn Sie Text ausrichten verwenden, können Sie links verwenden, was bedeutet, dass Sie einfach den Text nach links ausrichten. Das machen wir schon. Sie können Recht haben, was bedeutet, alles nach rechts, zentrieren und rechtfertigen. Zentrieren Sie alles so sehr wie Sie, entlang der Mitte dieser Abteilung. Rechttify versucht, es auszubreiten, um so viel Platz wie möglich zu nutzen. Lassen Sie mich Ihnen einige Beispiele zeigen, denn das ist wirklich der beste Weg, um zu verstehen, was hier vor sich geht. Hier habe ich eine linke Ausrichtung. Alles richtet sich entlang der linken Seite des Bildschirms. Der nächste, den ich Text in Zeile verwendet habe, ist gleich rechts. Und Sie können sehen, dass alles nach rechts gereiht ist. Sieht wirklich komisch aus. Es gibt nur sehr wenige Gründe, warum du das benutzen wirst. Es sei denn, du hast etwas anderes in der Seite in der Mitte hier. Die nächste, die wir tun werden, ist Mitte. Die Leute benutzen das Zentrum ziemlich viel. Sie verwenden es fast zu viel, aber es ist eine nette Möglichkeit, Ihren Text irgendwie zu brechen und ihn ein wenig anders aussehen zu lassen. So rechtfertigen ist wirklich schwer zu erklären, und selbst wenn Sie es zum ersten Mal betrachten, werden Sie vielleicht nicht bemerken, was los ist. Aber mit Begründung, der Browser setzt in kleine Bits zusätzlichen Platz, um Ihnen zu helfen, es auszubreiten, so dass es die exakt gleiche Breite den ganzen Weg entlang hat. Also zeige ich Ihnen das Rechtfertigte mit der Linken. Und ich denke, das ist der beste Weg, um den Unterschied zu sehen, ist, dass Sie im Grunde nicht den leeren Raum hier haben. Sie haben es irgendwie hier verteilt, also hat niemand zu viel Leerraum. Als nächstes werden wir über die Zeilenhöhe sprechen, und die Zeilenhöhe ist wirklich anders, weil sie die Schriftart selbst nicht beeinflusst. Es wirkt sich nicht auf Ihren Text aus. Es wirkt sich darauf aus, wie viel Platz um Ihren Text herum ist. Einige von Ihnen haben Word bereits verwendet, und Sie können gehen und wie viel Platz zwischen den Zeilen ist. Vielleicht möchten Sie, dass es eine Zeile ist, anderthalb Zeilen, doppelter Abstand. Das ist es, worüber wir hier reden. Also mein erstes Beispiel sagte ich Zeilenhöhe gleich 50%. Und die nächste, die ich sagte, Zeilenhöhe entspricht 200%. Also, in der ersten Regel ist das eine seltsame Regel zu schreiben, weil ich sage, ich möchte, dass sich die Dinge miteinander überlappen. In der zweiten Regel will ich, dass du dich wirklich weit ausbreitest. Oops, in Ordnung, ich werde weitermachen und später ein Beispiel online machen, wo ich dir genau zeigen kann, wie diese Dinge aussehen würden. Oder noch besser, ich werde das einfach in einen lehrbaren Moment verwandeln und dich dort reingehen lassen und es selbst eingeben und sehen, wie diese beiden verschiedenen Regeln den Text beeinflussen. Also lassen Sie uns überprüfen. Ich weiß, dass ich eine Menge Dinge durchgegangen bin, und es kann überwältigend sein. Eines der wichtigsten Dinge ist also mit allem, was wir in diesem Kurs tun, ist fünf, zehn Minuten zu nehmen, ein paar Sachen einzugeben, einen Blick zu werfen und zu sehen, was passiert. Machen Sie so viele Fehler wie möglich, denn dies ist die Zeit, Fehler zu machen, wenn Sie mich und den Rest der Menge hier haben, um die Fragen auf den verschiedenen Brettern zu beantworten. Üben Sie auf Spielzeugprobleme. Machen Sie keine riesige Webseite und versuchen Sie es zu stylen. Erstellen Sie eine Seite mit drei oder vier Absätzen, ein paar Links, und üben Sie darüber , weil es egal ist, Sie müssen nicht auf einer großen Seite üben, Sie können auf die kleinen Probleme üben und es macht wirklich einen großen Unterschied. Und schließlich, wenn Sie sich entscheiden, dass Sie bereit sind zu programmieren und Sie bereit sind, dieses große Projekt zu machen, stellen Sie sicher, dass Sie zuerst Ihre größeren Projekte auf Papier entwerfen. Ich kann nicht genug betonen, dass, wenn Sie anfangen zu programmieren und zu stylen , ohne wirklich einen klaren Plan zu haben, Sie einfach sehr frustriert werden und hoffentlich, nicht hoffentlich, werden Sie sehr frustriert und Sie werden aufhören. Und ich will nicht, dass du das tust. Planen Sie also zuerst alle Ihre Projekte auf Papier. Wenn Sie diesen Anregungen folgen, wenn Sie üben, üben, wenn Sie Spielzeugprobleme machen, wenn Sie bevor Sie in große Probleme springen Sie es zuerst skizzieren, ich denke, Sie werden eine Menge Spaß haben, und Sie werden eine wirklich tolle Seite, auf die Sie stolz sein werden.