Web-Typografie für Anfänger:innen: Text mit HTML und CSS verzieren

1. Einführung: Hallo, ich bin Brent Miller und heute werde ich Ihnen beibringen, wie man kreative und auffällige Typografie auf Webseiten umsetzt. In den letzten Jahren habe ich Code hinter Websites geschrieben. Ich habe an Business-Apps mit dem Fokus auf Eingabe-Etiketten und Tooltipps und einem sauberen professionellen Stil gearbeitet. Ich habe auch an vielen Broschüren-Websites mit mutigen, künstlerischen Kopfzeilen und langformatigen Inhalten gearbeitet. Nachdem Sie diesen Kurs abgeschlossen haben, werden Sie in der Lage sein, ein ausgefeiltes Design von einem Designer zu übernehmen und dieses Design in perfektem Detail in einer tatsächlich funktionierenden Webseite zu implementieren. Wenn Sie die Art von Person sind, die gerne mit Ihren eigenen Designs zu kommen, werden Sie ein viel besseres Verständnis davon haben, wie Stil Text für das Web funktioniert. Sie werden eine Reihe von Techniken zur Verfügung haben, um mit diesen Details zu experimentieren. Außerdem entwickeln Sie generell ein stärkeres Wissen über HTML und CSS. Wenn Sie sich für Webdesign oder Webentwicklung breiter interessieren, haben Sie eine stärkere Grundlage für Wissen in diesen Bereichen. Ich gehe davon aus, dass Sie zumindest an Schriftzug, Typografie oder Webdesign interessiert sind. Sie müssen kein professioneller Designer sein, um in diesem Kurs erfolgreich zu sein. Aber wenn du es bist, wirst du ein paar neue Tricks aufgreifen. Sie müssen auch keine Programmierung kennen, bevor Sie beginnen. Wenn Sie jedoch sehr grundlegende Kenntnisse in HTML und CSS haben, werden Sie dieses Wissen hilfreich finden. Wenn Sie Fragen haben, während wir diesen Kurs durchlaufen, zögern Sie nicht, diese hier im Kurs zu posten. Sie können mich auch auf Twitter oder LinkedIn kontaktieren. Ich ermutige Sie auch sehr, Ihre Projekte hier in diesem Kurs zu posten, unabhängig davon, ob Sie sie beendet haben oder nicht. Wenn Sie in einem Problem stecken bleiben, zögern Sie nicht, Ihr Projekt als „Work-in-progress“ zu posten und um Feedback zu bitten. Egal, wie Sie sich wenden, ich bin bestrebt, Ihnen zu helfen, erfolgreich zu sein und alle Fragen zu beantworten, die Sie haben könnten. Das war's. Wir sind bereit für den Einstieg. Lass uns eintauchen und wir sehen uns in der ersten Lektion. 2. Aufstellung des Projekts: In dieser Lektion dreht sich alles um das Kursprojekt. Es deckt ab, was Sie während des Kurses machen werden und wie Sie anfangen können. Auf dem Bildschirm sehen wir eine einfache Webseite. Es ist die „Über uns“ -Seite für die fiktive Letterville Library Webseite. Neben der Typografie ist hier nicht viel los. Für diejenigen unter Ihnen, die die Dinge einfach halten möchten , wird diese Seite Ihr Ziel sein. Ich werde Sie durch alle Schritte führen, die benötigt werden, um von Klartext zu diesem zu gehen. Wenn Sie vorhaben, meinem Projektbeispiel zu folgen, hier sind zwei wichtige Links. Ich habe diese Links in den Kursnotizen gepostet, also zögern Sie nicht, sie zu kopieren und einzufügen. Sie zeigen Ihnen, womit Sie anfangen werden und was Sie am Ende haben werden. Du musst meinem Beispielprojekt nicht folgen. Einige von Ihnen haben jedoch möglicherweise Ihre eigenen Ziele und Projekte für Web-Typografie im Auge. Einige von Ihnen könnten denken, ich bin ein schrecklicher Designer und dass Sie mit dieser Beispielseite viel besser machen können. Beide Standpunkte sind völlig in Ordnung. Fühlen Sie sich frei, um ein Projekt zu implementieren, das Sie möchten. Für den Rest dieses Kurses werde ich jedoch diese Letterville Library Demo als meine Hauptreferenz verwenden. Jetzt reden wir über CodePen. Sie könnten all diese zusätzlichen Sachen auf unserer Webseite bemerkt haben. Das liegt daran, dass ich dieses Projekt auf CodePen veranstalte. Codepen ist ein Spielplatz für die Erstellung einfacher Webprojekte und Prototypen, genau das, was wir in diesem Kurs tun. Wenn Sie meinem Projektbeispiel folgen möchten, verwenden Sie CodePen. Nun fragen viele von Ihnen wahrscheinlich: „Hey Brent, bittest du mich, noch ein neues Online-Konto zu erstellen?“ Nun, die Antwort ist vielleicht, streng genommen, nein, Sie müssen kein CodePen-Konto erstellen, um in diesem Kurs erfolgreich zu sein, aber Sie werden es einfacher finden, Ihre Arbeit zu teilen oder später wieder darauf zu kommen, wenn Sie ein Konto haben. Ich werde in diesem Kurs nicht auf die Details der Erstellung eines CodePen-Kontos eingehen , weil es super einfach ist. Sobald Sie auf CodePen sind, klicken Sie einfach auf die Anmeldeschaltfläche oben auf dem Bildschirm, um loszulegen. Der letzte Schritt, um Ihr Projekt bereit für die Arbeit zu machen, besteht darin, mein Starterprojekt zu verzweigen. Forking ist nur Phantasie Programmierer Lingo für das Erstellen einer Kopie. Gehen wir zum Starterprojekt der Letterville Library. Es gab einen Link auf dieser Folie, und es gibt auch einen Link unten in den Kursnotizen. Dies ist das Starterprojekt. Der Textinhalt befindet sich auf der rechten Seite, und dann haben wir diese Code-Boxen auf der linken Seite. Sobald Sie im CodePen-Konto angemeldet sind, klicken Sie für diejenigen von Ihnen, die Ihr eigenes Konto verwenden möchten, auf diese Schaltfläche „Fork“ oben auf dem Bildschirm. Sobald du das tust, solltest du sehen, dass dieser Benutzername hier von meinem Namen in deinen Namen wechselt. Oder wenn Sie kein Konto haben, werden Sie die Worte Kapitän anonym dort sehen. Sobald Sie diese Änderung des Benutzernamens, voila, sehen , haben Sie jetzt Ihre eigene Kopie dieses Projekts. Sie können es ändern, speichern, tun, was Sie wollen, es ist Ihr eigenes Projekt von diesem Punkt an. CodePen hat einen Ton an Funktionen, aber wir werden die meisten davon in diesem Kurs nicht abdecken. Wir werden die Dinge einfach halten. Ich zeige Ihnen gerade genug Funktionen, um Ihre Projekte zu vervollständigen. Erstens, dieses Panel hier drüben auf der linken Seite mit verschiedenen Abschnitten. Wir interessieren uns nur für zwei der Abschnitte hier, den mit HTML und den mit CSS markierten Abschnitten. Wenn du nicht weißt, was das bedeutet, keine Panik. Es ist in Ordnung. Wir werden das alles abdecken, ich verspreche es. Die HTML- und CSS-Felder sind, wo Ihr Code geht. Beachten Sie, dass da schon welche drin sind. CodePen nimmt den Code aus diesen Feldern und wandelt ihn in die Ausgabe oder Ergebnisse auf diesem größeren Teil des Bildschirms um. Dies geschieht in Echtzeit, d. h., wenn Sie Änderungen an Ihrem Code vornehmen, die Ergebnisse sofort aktualisiert. Zum Beispiel, wenn ich bis zu unserem Letterville Library Header hatte, und ich habe meinen Cursor dort gesetzt, und ich lösche das E-Zeichen, warte eine Sekunde. Beachten Sie, dass das E gerade von unserer Ergebnisseite verschwunden ist. Das liegt daran, dass CodePen unseren Code live auf unserer Beispielseite neu lädt. Wenn ich zurückgehe und das E wieder eingib, warte eine Sekunde, und dann kehrt das E zurück. Das ist alles, was Sie wirklich über CodePen wissen müssen. 3. Text mit HTML-Tags strukturieren: In dieser Lektion dreht sich alles um HTML. Wir decken ab, was HTML ist, was es tut und wie man es benutzt. HTML steht für Hypertext-Markup-Sprache. Die Definition gibt uns einen Hinweis darauf, was HTML tut, es markiert Sprache mit Tags, die dem geschriebenen Inhalt Bedeutung geben. In diesem Kurs verwenden wir HTML für zwei Dinge, eins, um unsere Textstruktur zu geben, und zwei, um ein bisschen grundlegende Styling zu bieten. Wenn Sie hier unseren vorhandenen HTML-Code betrachten, beachten Sie, dass es nicht nur ein riesiger Textblock ist. Es ist zerbrochen und in diesen übereinstimmenden Sätzen von Wörtern namens HTML-Tags eingewickelt. Werfen wir einen Blick auf unseren Seitentitel zum Beispiel. Also hier haben wir die Letterville Library, und dieser Satz ist in ein Paar übereinstimmender h1-Tags eingewickelt, und es übersetzt zu dieser Header-Ausgabe hier drüben, auf der rechten Seite. Beachten Sie, dass das zweite Tag, das schließende Tag genannt wird diesen Schrägstrich vor dem h1-Teil hat. Alle Tags in diesem Kurs werden dieses öffnende und schließende Tag-Duo haben , das uns zu unserem nächsten Vokabular führt. Ein öffnendes Tag kommt vor dem Textinhalt und hat keinen Schrägstrich. Ein schließendes Tag kommt hinter dem Textinhalt und hat den Schrägstrich vor dem Tag-Namen. Wenn wir das öffnende Tag und den Textinhalt und das schließende Tag zusammen setzen, bildet es ein HTML-Element. Unsere zweite Verwendung für HTML ist die Bereitstellung grundlegender Styling. Einige HTML-Tags, aber nicht alle, bieten Ihren Inhalt ein bisschen Standardpräsentation. Werfen wir einen Blick auf diesen Seitentitel hier drüben in unserem Code. Beachten Sie, dass es größer ist als der gesamte andere Text auf der Seite neben den anderen Kopfzeilen hier in der Ausgabe. Der Browser sieht es, wir haben den Titel in diesem h1-Tag in unserem Code eingewickelt und macht den Titel hier als Ergebnis groß und fett. Hier ist eine Liste aller HTML-Elemente aus unserem Letterville Library-Projekt. Keine Panik, wir kommen zu jedem dieser Punkte an verschiedenen Punkten im Kurs zurück, aber vorerst werde ich nur ein paar von ihnen erklären. Zuerst verwenden wir das p- oder ein Absatz-Tag, um einen einzelnen Textabsatz zu definieren. Standardmäßig geben Browser Absätzen zusätzlichen Leerraum oberhalb und unterhalb. Beachten Sie hier den Absatz, der mit beginnt, wir streben an, hier in unserem Code wird durch Öffnen von p und Schließen von p Tags und dann hier in unserer Ausgabe, beachten Sie, dass es wie ein Absatz mit ein wenig oberem Leerraum und ein wenig unterer Raum gestylt ist. Zweitens, das starke Tag gibt uns Elemente des mutigen Stils. Also beachten Sie, hier haben wir das Wort empower in das beginnende starke Tag eingewickelt, das öffnende Tag und ein schließendes Tag mit dem Schrägstrich hier auf unserer Ausgabe hat dieses Wort empower genommen, und es hat es fett gemacht. Drittens setzt das em-Element seinen Text kursiv. Beachten Sie, dass die ersten beiden Wörter jedes Listenelements hier unten in em-Tags eingeschlossen sind und feststellen, wie sie in den Ergebnissen kursiv sind. Wir scrollen nach unten in den Code und bemerken em-Tag hier um wir pflegen, em Tag hier um wir handeln, et cetera. Schließlich werden wir das letzte Element dieser Lektion zusammen implementieren. Sie haben wahrscheinlich die Grundidee hinter Tags mittlerweile bekommen, also ist dies ein guter Punkt für Sie, mit der Arbeit zu beginnen. Das Markierungs-Tag hebt Texte mit einer Hintergrundfarbe hervor. Gehen wir zurück und schauen wir uns den ersten Satz des letzten Absatzes an, beginnend mit, wie wir verfolgen. Hier im Code gibt es, wie wir in das Öffnen und Schließen von Absatz-Tags eingewickelt verfolgen. Also werden wir dies mit einem Markierungselement hervorheben. Wir setzen unseren Cursor direkt nach dem öffnenden Absatz-Tag, wir geben die Wortmarke in unsere eckigen Klammern ein, und dann werden wir hier am Ende dieses Satzes nach der Periode eine Markierung mit einem Schrägstrich am schließenden Tag haben, und da gehen wir. Wir haben diesen ersten Satz als Markierungselement gesetzt und bemerken hier auf unserer Webseite, unser Browser hat ihm diese Hintergrundfarbe als Mittel zur Hervorhebung gegeben. Es gibt viel mehr Tags in der HTML-Sprache als das, was wir in diesem Projekt verwendet haben. Wenn Sie mehr erfahren möchten, empfehle ich Ihnen, Mozillas HTML-Elemente Referenzhandbuch zu lesen. 4. Listen: In dieser Lektion werden Listen auf Webseiten untersucht. Wir erläutern, wie man Listen erstellt und wie man ihre Präsentation anpassen kann. Wir haben bereits ein Beispiel für eine Liste hier in unserem Projekt unten nach unten. Liste zu erstellen ist ziemlich unkompliziert und wir tun es mit nur HTML. Alle Listen haben ein äußeres Tag, das entweder ein OL- oder UL-Tag ist, und ein oder mehrere innere LI-Tags. Hier in unserem HTML haben wir ein äußeres UL-Tag, das die gesamten Listen enthält. Innerhalb davon haben wir fünf LI-Tags von denen jedes den Inhalt für ein einzelnes Listenelement enthält. Sie hier in unseren Ergebnissen, BeachtenSie hier in unseren Ergebnissen,wie der Browser gibt unserer Liste ein bisschen Standard-Styling. Jedes Listenelement beginnt in einer neuen Zeile und hat ein Aufzählungszeichen vorne. Es gibt zwei Haupttypen von Listen. Die erste, die wir hier in unserem Projekt sehen, sind ungeordnete Listen. Ungeordnete Liste zeigt Aufzählungszeichen, Datenträger oder andere nicht numerische Symbole vor ihren Listenelementen an. Wir erstellen eine Liste unsortiert, indem wir das UL-Tag verwenden. Ordnete Listen auf der anderen Seite, zeigen Sie eine sequentielle Reihenfolge. Jedes Listenelement beginnt mit einer Zahl oder einem Buchstaben davor. Wir erstellen eine Liste, die mit dem OL-Tag bestellt wird. Hier ist eine weitere Übung, die wir gemeinsam abschließen können. Lassen Sie uns vorübergehend unsere Liste von einer ungeordneten Liste ändern, um eine geordnete Liste zu sein. Wir markieren das U in unserem UL-Tag hier in unserem HTML, wir geben ein O statt der U. Notice CodePen gerade aktualisiert unser schließendes Tag für uns ein OL-Tag zu sein. Jetzt hier drüben in den Ergebnissen sehen wir, dass wir Zahlen vor der Liste anstelle der Aufzählungspunkte haben , die vorher da waren, denn jetzt haben wir eine geordnete Liste. Aber für unser letztes Projekt wollen wir nicht die nummerierte Liste hier drin. Wir wollen die Flaschenliste. Wir gehen zurück zu unserem HTML, nehmen das O heraus, setzen das U wieder ein. CodePen hat gerade unser schließendes Tag für uns aktualisiert, und jetzt kehren wir wieder zu dieser ungeordneten Liste zurück. Sie können eine Liste innerhalb einer anderen verschachteln. Lasst uns das versuchen. Lassen Sie uns einen Listeneintrag am Ende unseres Sets hinzufügen. Wir gehen hier runter, wir fügen ein weiteres LI-Tag hinzu. Dann innerhalb unseres LI-Tags, jetzt haben wir ein schließendes Tag. Da gehen wir hin. Wir werden in einer anderen Liste hinzufügen. Dies wird ein OL-Tag sein und dass wir dies mit unserem OL schließen werden. Jetzt haben wir eine zweite Liste innerhalb eines Listenelements. Wir werden zwei Listenelemente zu unserer Innenliste hinzufügen. Ich mache nur die Tags hier, unsere Inhalte werden ich liebe. Dann werden wir in einem LI hinzufügen. Dies wird Briefe als unser zweiter Listenpunkt sein. Lassen Sie mich das Ende machen. Da gehen wir hin. Jetzt sehen wir, dass wir diese verschachtelte geordnete Listen innerhalb unserer äußeren ungeordneten Listen haben. Wir können das immer ändern. Wenn ich das O in die U umwandle, wie wir es vorher getan haben, gehen wir hin. Es wurde für eine Sekunde aktualisiert und sie hatten die Kugeln dort. Es hat einen anderen Aufzählungsstil, da dies eine verschachtelte Liste ist, aber wir sehen es immer noch als Teil der äußeren Liste. Jetzt wollen wir diesen zusätzlichen Listeneintrag nicht in unserem endgültigen Projekt. Also werden wir es löschen und es loswerden. Jetzt sind wir wieder so, wie es vorher war. Damit ist unsere Lektion über Listen abgeschlossen. Wenn Sie sich entschieden haben, dass Sie Listen lieben und mehr erfahren möchten, schauen Sie sich dieses Tutorial an. 5. Schriftart mit HTML: In dieser Lektion lernen wir einige Techniken zum Vergrößern und Verkleinern von Text mit nur HTML-Code. Wir werden mit Header-Elementen beginnen. Beachten Sie, wie wir bereits ein paar Abschnittskopfzeilen auf unserem Bildschirm haben. Sie entsprechen diesen H1-Elementen, die wir in unserem Code haben. Es gibt tatsächlich sechs verschiedene Ebenen von Abschnittskopfzeilen in HTML. Wir definieren die Ebene der Abschnittskopfzeile durch die Zahl in unseren HTML-Tags. Beachten Sie, dass alle unsere Abschnittsüberschriften die gleiche Ebene sind, H1, das ist H1, das ist H1, das ist H1 und so weiter alle durch die verschiedenen Header, die wir haben. So haben sie in der Ausgabe hier auf der rechten Seite alle die gleiche Größe. Dies funktioniert aus einer Designperspektive nicht sehr gut, es gibt unseren Inhalten keine visuelle Hierarchie. Aus der Programmierperspektive macht es unseren Code schwieriger zu verstehen, da unsere Elemente nicht unsere beabsichtigte Hierarchie kommunizieren. Gehen wir zu den Seiten Untertitelelemente, das Über uns Element und ändern Sie es in ein H2-Elemente. Ich werde nur die Nummer 1 und dieses öffnende Tag ersetzen, die Nummer 2 CodePen ist unser schließendes Tag für uns aktualisiert. Beachten Sie nun in den Ergebnissen, der Untertitel wurde gerade ein bisschen kleiner. Als nächstes ändern wir diese Abschnittsüberschrift über jedem Absatz in ein H3-Element. Für unsere Mission, Ich änderte es zu einem H3 für unsere Vision, Ich ändere es zu einem H3 für unsere Werte, eine Änderung es und H3. Jetzt haben wir diese auf H3-Tags aktualisiert und bemerken, dass der Abschnittskopf jetzt eine visuelle Hierarchie kommuniziert und der Code, den wir hier haben, kommuniziert unsere beabsichtigte Struktur. Ein weiteres Element, das die Größe des Textes ändert, ist das kleine Element. Das kleine Element wird in der Regel verwendet, um Kleingedruckte in einem Dokument darzustellen , z. B. ein Urheberrecht oder Rechtstext. Es macht seinen Textinhalt eine Größenkategorie kleiner. Beachten Sie, dass der letzte Satz auf der Seite, der die Urheberrechtslizenz beschreibt , die gleiche Größe hat wie der gesamte andere Text. Da es sich um einen Copyright-Hinweis handelt, lassen Sie es uns kleiner machen, wie eine Fußnote über Eingabe-HTML-Feld werden wir nach unten scrollen und wir haben bemerkt, dass dieser geschriebene Inhalt den Satz innerhalb dieses Absatz-Tags beginnt. Wir werden das öffnende Tag von klein hier in unserem Code schreiben. Da ist das öffnende Etikett von klein. Dann am Ende unseres Inhalts, am Ende dieses Schließens eines Tags, werden wir das schließende kleine Tag einfach so machen. Beachten Sie nun in den Ergebnissen, die Sätze jetzt eine Größe kleiner und es sieht aus wie eine Fußnote. Da haben wir es. Wir haben gerade die Größe unseres Textinhalts mithilfe von HTML-Tags angepasst. 6. Schriftarten mit CSS umrissen: In dieser Lektion lernen wir weiterhin Techniken zum Vergrößern und Verkleinern von Text. Dieses Mal bekommen wir unseren ersten Vorgeschmack, CSS-Code anstelle von HTML zu schreiben. CSS steht für Cascading Style Sheets. Webentwickler verwenden es, um die visuelle Darstellung von Inhalten in den Webseiten zu definieren. Werfen wir einen Blick auf diese CSS-Box, die ich kurz erwähnt habe. Es hat schon ein paar Sachen drin. Die meisten davon sind Kommentare und sie ändern nicht die Ergebnisse. Stattdessen sind sie nur für Entwickler zu lesen, und sie helfen Entwicklern, den Code zu verstehen. Für unser erstes Stück CSS-Code werden wir die Schriftgröße einiger unserer Elemente festlegen. Am Ende unseres bestehenden CSS-Codes werden wir unseren ersten kompletten CSS-Regelsatz schreiben. Schreiben wir ein h 1 und dann schreiben wir eine öffnende geschweifte Klammer so. CodePen erkennt, was wir tun und hat uns nur eine passende schließende geschweifte Klammer gegeben. Drücken Sie die „Return“ -Taste, um uns unseren Code in einer neuen Zeile zu geben. Dann geben wir das Wort Schriftart, Bindestrich, die Wortgröße, einen normalen Doppelpunkt, ein Leerzeichen, und dann die Zahl vier, die Buchstaben r-e-m, Doppelpunkt. Beachten Sie, was gerade mit unserem Header passiert ist, unserem Titel hier oben. Das war, weil wir gerade die Schriftgröße geändert haben. Ich sollte erwähnen, dass CSS Groß-/Kleinschreibung ist. Wenn wir in diesem Kurs CSS-Code schreiben, muss es klein sein, damit es korrekt funktioniert. Lasst uns aufschlüsseln, was wir gerade getan haben. Jeder CSS-Regelsatz besteht aus einigen Komponenten. Der h 1 Teil unseres Satzes wird als Selektor bezeichnet. Selektoren können kompliziert werden, aber in diesem Kurs halten wir es einfach. Das h 1 bedeutet, dass die Regeln für alle h 1 Elemente in den Ergebnissen gelten. Die öffnenden und schließenden geschweiften Klammern legen den Abschnitt fest, in den die Deklarationen gehen. Innerhalb der geschweiften Klammern kommt eine oder mehrere Deklarationen. Eine Deklaration ist eine einzige Sache, die Sie an den ausgewählten Elementen ändern möchten. Die Eigenschaft jeder Deklaration kommt vor dem Doppelpunkt und es ist die Sache über das Element, das Sie ändern möchten. In diesem Fall möchten wir die Schriftgröße aller h 1-Elemente ändern. Der Eigenschaftswert kommt nach dem Doppelpunkt. Es ist das Erscheinungsbild, das Sie der Eigenschaft zuweisen möchten. In diesem Fall möchten wir, dass die Schriftart unserer h 1-Elemente viermal so groß wie unsere Körperschriftart ist. Die REM-Einheit bedeutet, dass wir die Stammschriftgröße mit einer bestimmten Zahl in diesem Fall vier multiplizieren . Schließlich ist es eine bewährte Vorgehensweise, eine Deklaration immer mit einem Semikolon zu beenden. Technisch gesehen, müssen Sie es nicht immer zur Gewohnheit machen, und Sie werden abgedeckt sein. Lassen Sie uns nun die Schriftgröße unserer anderen Header nach dem h 1 Regelsatz einstellen, fügen Sie einen h 2-Selektor hinzu. Wir fügen h 2 hinzu, öffnen geschweifte Klammer auf einer neuen Linie. Wir verwenden die Schriftgröße erneut. Das ist also Schriftstrichgröße, Doppelpunkt, Leerzeichen. Dieses Mal werden wir 2 rem als Wert zuweisen. Das bedeutet, dass es doppelt so groß wie die Körperschriftart ist, und beachten Sie, dass unser Untertitel nur größer wurde, basierend auf unserem CSS-Code. Lassen Sie uns das Gleiche für unsere h 3 Elemente tun. Es wird der gleiche Code sein, aber dieses Mal werden wir das Aussehen von drei Elementen auf einmal ändern. Nach unserem h 2-Selektor fügen wir einen h 3-Selektor hinzu, wir werden unsere geschweiften Klammern haben. Wir werden die font-size Eigenschaft nochmals für den font-size Wert schreiben. Lass uns 1.75 rem machen. Sie können mit Größen spielen, wenn Sie möchten, es sind Ihre Projekte. Ich benutze 1.75. Dann beachten Sie, dass unsere Kopfzeilen hier auf der rechten Seite nur etwas kleiner sind als der Seitenuntertitel. Sie alle änderten sich im Wert, weil unser h 3 Regelsatz alle drei h 3 Elemente in unserem HTML-Code ausgewählt hat. Damit ist unsere Lektion über die Dimensionierung von Schriftarten mit CSS abgeschlossen. Wenn Sie mit der Größenänderung von Schriftarten viel präziser werden möchten, empfehle ich dieses Tutorial auf verschiedenen Wegen, Dinge in CSS zu dimensionieren. 7. Web: In dieser Lektion erläutern wir, was Webschriftarten sind und wie sie in Ihrem Projekt verwendet werden. Eine Webschriftart ist eine Schriftart, die der Browser aus dem Internet herunterlädt , wenn er eine Webseite lädt, die diese Schriftart verwendet. Dies unterscheidet sich von systemeigenen Schriftarten, die bereits auf dem Computer des Benutzers installiert sind, bevor der Browser die Seite lädt. Ich nehme an, Sie wissen bereits, was eine Schrift und eine Schriftart sind. Wenn nicht, schauen Sie sich diesen Wikipedia-Artikel zu diesem Thema an, bevor Sie diese Lektion fortsetzen. Eine der einfachsten Möglichkeiten, eine kostenlose Webschriftart in Ihr Webprojekt zu integrieren , ist Google Fonts. Wenn Sie mit mir folgen möchten, navigieren Sie zu fonts.google.com. Google Fonts hat Hunderte von kostenlosen Web-Fonts, die Dutzende von verschiedenen Arten kategorisieren. Ich ermutige Sie, diese Seite auf eigene Faust zu erkunden. Für diesen Kurs werden wir die Lobster Two Schriftfamilie finden und verwenden. also in das Suchfeld Geben Siealso in das SuchfeldLobster ein, und Sie werden feststellen, dass es mit zwei Ergebnissen kommt. Wir werden die Lobster Two Schriftart verwenden, und so werden wir dieses Plus-Symbol neben dem Schriftnamen hinzufügen. Dieses Reduzierfeld unten nach unten lässt uns wissen, dass wir die Schriftart ausgewählt haben. Klicken Sie hier unten auf dieses kleine Panel, um es zu erweitern. Das Panel gibt uns die Steuerelemente, um einen Import unserer ausgewählten Schriftart für unser Projekt anzupassen. Lassen Sie uns zuerst diese Registerkarte anpassen hier. Dies gibt uns die Schriftart in verschiedenen Stilen, vier von ihnen. Regulär und fett beziehen sich auf die Schriftstärke bzw. 400 bzw. 700, wobei jede Gewichtung kursiv und nicht kursiv dargestellt wird. In diesem Projekt verwenden wir nur die fett formatierte, nicht kursiv formatierte Schriftart. Also habe ich diese Optionen ausgewählt. Zurück zum Tab „Einbetten“ sagt uns Google, wie wir unsere ausgewählten Schriftarten in unser Projekt einbetten können. Um die Dinge einfach zu halten, aber wir werden Dinge nur ein bisschen anders tun, als das, was Google vorschlägt. Wechseln wir zur Import-Technik wählen Sie dann den Code zwischen den Style-Tags hier aus. Achten Sie darauf, dass Sie die Style-Tags von den ausgewählten Elementen ausschließen, und kopieren Sie sie dann. wir nun zu unserem Projekt zurück. Oben in diesem CSS-Feld, direkt nach diesem Kommentar über Importanweisungen, Fügen Sie den Code, den wir von Google kopiert. Jetzt ist die Lobster Two fett, nicht kursiv Schriftart Gesicht bereit in unserem Projekt zu verwenden. Unser nächster Schritt besteht darin, den Kopfzeilen mit der Schriftfamilie die Schriftart Lobster Two zuzuweisen . Schauen wir uns einen etwas komplexeren CSS-Regelsatz an. Beachten Sie, dass es zwei Selektoren gibt, nicht einen. Sie sind jeweils in ihrer eigenen Zeile durch ein Komma getrennt. Dies bedeutet, dass die Deklarationen hier für jedes der angegebenen Elemente gelten. In diesem Fall gilt die Schriftfamilie Dekoration für alle h1 und alle h3 Elemente. Der nächste Unterschied besteht im Eigenschaftswert. Hier haben wir zwei Werte durch ein Komma getrennt. Der erste Wert steht in doppelten Anführungszeichen. Die font-family Eigenschaft können wir einen primären Wert angeben, gefolgt von einer Reihe von Sicherungen. Wenn der Browser die erste Schriftfamilie, nach der wir gefragt haben, nicht finden kann verwendet er die zweite. Hier sagen wir dem Browser an, die Lobster Two Schriftart zu verwenden, wenn er sie finden kann. Wenn der Browser nicht kann, sollte er die Standard-Schreibschriftarten des Benutzers verwenden, was auch immer diese Schriftart ist. Angeben von Sicherungsschriftfamilien wie diese ist eine bewährte Vorgehensweise, da Sie nie wissen, welche Probleme auftreten können , wenn ein Benutzer die angegebene Webschriftart lädt. Schließlich, da der gleiche Lobster Two ein Leerzeichen mit einem Namen enthält, müssen wir es in Anführungszeichen umschließen. Die Anführungszeichen sagen dem Browser, dass Lobster Two ein einziger Schriftname ist, nicht zwei Schriftnamen. Die Anführungszeichen sind hier erforderlich. Lassen Sie uns die gleiche Regel in unserem CSS-Code implementieren. In unserem CSS-Code werden wir nach unten scrollen. Direkt vor dem Regelsatz h1, den wir bereits geschrieben haben, werden wir eine neue schreiben. Wir schreiben h1, und dann h3, und dann haben wir unsere geschweiften Klammern, und dann werden wir die font-family Eigenschaft verwenden. Also das ist Schriftfamilie, und dann ein Doppelpunkt. Wir werden Lobster Two in unseren doppelten Anführungszeichen schreiben, und dann werden wir Cursive als Verstärkung auflisten und dann einen Doppelpunkt. Nun, beachten Sie, dass wir gerade diese schöne Schriftart auf unseren Seitentitel und unsere Abschnittsüberschriften angewendet haben. 8. Benutzerdefinierte Schriftarten: In dieser Lektion erfahren Sie, wie Sie eine benutzerdefinierte Schriftart implementieren. In der letzten Sitzung haben wir eine Webschriftart von Google-Fonts heruntergeladen. Auch wenn wir nicht sehen, es in den Code, Google hat uns eine Font-Face-Definition für die Hummer zwei fett, nicht-kursiv Schriftart, wenn unser Browser heruntergeladen es von Google-Servern. Luxus haben wir nicht immer. Manchmal haben wir nur Zugriff auf die rohen Schriftdateien selbst. In diesen Fällen müssen wir unsere eigenen Font-Face-Definitionen schreiben. Ich werde nicht über die verschiedenen Schriftdateiformate gehen, da viele Topographie-Enthusiasten mit ihnen bereits vertraut sind. Wenn nicht, zögern Sie nicht, diesen Artikel zu überprüfen. Lesen Sie es als fakultativ für unsere Zwecke im Kurs. Ich werde jedoch darauf hinweisen, dass während ich dieses Video aufnehme, das zuverlässigste Dateiformat im Web das WOFF-Format W-O-F-F ist. Ich werde Ihnen später in dieser Lektion zeigen, wie Sie es verwenden. Für unser Projekt müssen wir drei benutzerdefinierte Schriftarten definieren Roboto regular, Roboto regular Italic und Roboto bold. Schriftart-Gesicht-Regeln können mehrere Eigenschaften enthalten. In diesem Projekt werden wir nur vier verwenden. Wir haben die font-family Eigenschaft bereits abgedeckt. Ein Unterschied besteht darin, dass wir in einer Schriftart-Face-Regel keine Fallbacks angeben. Fallback-Schriftfamilien werden besser in den Regelsätzen angegeben , welche Stilelemente wie Header-Regelsatz wir zuvor geschrieben haben. Die Schriftartformatdeklarationen legen fest, ob eine Schriftart mit normaler Kursivschrift oder schräger Fläche aus ihrer Schriftfamilie formatiert werden soll . In diesem Projekt verwenden wir normale und kursive Flächen. Die Schriftgewichtdeklaration gibt das Gewicht oder die Kühnheit an. Um unser Projekt einfach zu halten, verwenden wir nur die normalen und fett Werte, obwohl wir viel spezifischer werden könnten, wenn wir es wollten. Schließlich teilt der SRC oder die Quelldeklaration dem Browser mit, wo die Ressource zu finden ist, die die Schriftdaten enthält, z. B. alle Klippen, aus denen die Schriftart besteht. In vielen Fällen, wie unserem, wird der Quellwert der Speicherort einer Schriftdatei sein. In diesem Projekt verwenden wir den Wert des URL-Formats in Klammern, der dem Browser einen bestimmten Speicherort zur Verfügung stellt. Schließlich wird dieses Format den Wert nach dem Ressourcenstandort Klammern hilft Browsern, die Art der Ressource zu verstehen, die wir bereitstellen. Lassen Sie uns ein paar benutzerdefinierte Schriftarten in unserem CSS-Code implementieren. In unserer CSS-Box, direkt unter diesem Import in der Regel, werden Sie diesen Kommentar bemerken, den ich dort über Roboto-Schriftarten eingefügt habe. Dies wird sich in nur einer Minute als nützlich erweisen. Übrigens nennen wir dies eine at Regel, keinen Regelsatz wegen dieses kaufmännischen Und-Symbols vor. Unmittelbar unter unserem Kommentar über unsere Font-Gesichter, lasst uns anfangen, Schriftart-Gesicht nach Regeln zu schreiben. Fangen wir mit Roboto-Regular an. Wir verwenden Font-Gesicht. Wir werden unsere geschweiften Klammern verwenden, wir geben Schriftfamilie an. Wir weisen die Roboto-Schriftfamilie zu. Wir werden Font-Stil Eigenschaft verwenden. Wir verwenden für dieses spezielle Gesicht keine Kursivschrift, daher wird unser Wert hier normal sein. Wir schreiben die Schriftgewichtseigenschaft. Lassen Sie mich es richtig buchstabieren W-E-I-G-H-T. Da gehen wir. Wir verwenden kein feines Schriftbild. In diesem Fall ist die Schriftstärke normal. Schließlich werden wir diese Quelleigenschaft verwenden, um die Datenressource zu finden. Hier kommen diese drei Kommentare ins Spiel. Hier oben habe ich Ihnen eine Datei Speicherorte für unsere drei verschiedenen Schriftarten gegeben , da wir da sind, um das Roboto reguläre Schriftfeld zu finden, ich werde den Roboto-regulären Dateiort kopieren und einfügen. Wir müssen die Anführungszeichen in den Teil einfügen, den wir kopieren. Wir verwenden die URL und dann Klammern. Wir werden diesen Speicherort innerhalb der URL einfügen. Wir werden die Formate Helfer mit Klammern hinzufügen, da dies eine WOFF-Datei ist, werden wir WOFF als unseren Helfer einfügen und die Deklaration wie immer mit einem Semikolon schließen. Nachdem wir nun unseren Roboter oder unsere reguläre Schriftart definiert haben, ist es an der Zeit, sie auf den Inhalt unserer Seite anzuwenden. Auch wenn Sie es nicht in unserem HTML-Feld hier oben sehen, haben alle unsere Ergebnisse ein Körperelement. Alle Webseiten haben ein body-Element. In diesem Fall versteckt Code Pen das Körperelement aus unserer HTML-Box, um unser Leben ein bisschen einfacher zu machen. Aber stellen Sie sich vor, dass der gesamte HTML-Code und unsere HTML-Box innerhalb eines Körperelements lebt. Wir können immer noch unsere Webseiten Body-Element stylen. Hier in unserer CSS-Box scrollen wir ein wenig nach unten und Sie werden diesen Kommentar sehen , den ich über das Körperelement geschrieben habe. Sie uns unter diesem Kommentar LassenSie uns unter diesem Kommentareinen neuen Regelsatz schreiben. Wir wählen das Körperelement, geschweifte Klammern, die Schriftfamilie Eigenschaft. Wir werden Roboto als unseren ersten Wert und dann Komma verwenden. Dann geben wir uns den Standard-serifen-Fallback für den Fall, dass der Browser Roboto nicht finden kann und dann das ist es. Beachten Sie in den Ergebnissen hier, dass der Großteil des Textes jetzt die Roboto-Schriftart verwendet. Sie sehen das Ergebnis der Vererbung in CSS. In diesem Fall, mit Ausnahme der Header-Elemente, denen bereits der Hummer zwei Schriftarten zugewiesen ist. Alle Textelemente der Seite haben ihre font-family -Eigenschaft vom body-Element geerbt. Im Allgemeinen, wenn die CSS-Regeln nicht anders angegeben haben, wird jedes HTML-Element die meisten Styling-Eigenschaften aus dem Element innewohnen , das sie enthält. Dies kann eine Kette von geerbten Eigenschaften bis hin zu den Root-HTML-Elementen etablieren . Nun, ich weiß, dass es eine Menge war, aber Sie müssen sich keine Sorgen um diese Details zu sehr machen, um in diesem Kurs erfolgreich zu sein. Betrachten Sie, dass eine Vorschau eines fortgeschritteneren Themas. Nun, hier ist eine Übung, die du alleine machen wirst. Ihre Aufgabe besteht darin, die beiden anderen Roboto-Schriftarten, Roboto-regulär Kursiv und Ruboto-Bold, zu definieren . Direkt unter diesem ersten Schriftart-Gesicht in der Regel, werden Sie zwei weitere Schriftarten nach Regeln schreiben, eine für jede Schriftart. Verwenden Sie die URL-Werte, die ich hier im obigen Kommentar zur Verfügung stelle. Wenn Sie einen Hinweis dazu benötigen, gehen Sie zurück und überprüfen Sie die Eigenschaften des Schriftgewichts und des Schriftartstils von oben in der Lektion. Sie können auch mein abgeschlossenes Projekt verwenden, hat eine Referenz. Auch hier habe ich den Link zu diesem abgeschlossenen Projekt in den Kursnotizen gepostet. Sie werden keine Änderungen in den Ergebnissen sehen, wenn Sie diese neuen Schriftarten implementieren, wir werden sie später im Kurs anwenden. Wenn Sie interessiert sind, gibt es noch viel mehr über Font-Faces im Web zu erfahren. Hier sind ein paar Ressourcen, um Ihnen den Einstieg zu erleichtern. 9. a: Diese Lektion konzentriert sich auf die Beschränkung der Breite von TextContent innerhalb einer vertikalen Spalte. Beachten Sie, wie sich unsere längeren Textelemente wie Absätze und Listenelemente über die gesamte Webseite erstrecken und dann unter nachfolgenden Zeilen umschlossen werden. Als ein netter Trick können wir unsere Ergebnisabschnitt hier einfach ändern, indem wir den Mittelteiler packen und ihn zu unseren Ergebnissen ziehen. Vielleicht wird unser Inhalt auf einem Smartphone so aussehen, und Sie können die Größe wiederherstellen, indem Sie diesen Mittelteiler zurück in die Mitte ziehen. Im Moment sind diese Textzeilen ziemlich lang. Um die Lesbarkeit zu erhöhen, empfehlen die meisten Designer Zeilenlängen zwischen 40 und 80 Zeichen. Unsere erste Aufgabe besteht darin, die Breite unserer Textelemente so einzuschränken, dass die Zeilen nicht länger als eine bestimmte Breite, wie etwa 60 Zeichen, laufen. Um eine Spalte von TextContent auf einer Webseite zu erstellen, haben wir diesen Inhalt zuerst in einem HTML-Elemente platziert. Ich habe das schon für Sie getan. Sie in unserem HTML-Feld BeachtenSie in unserem HTML-Felddieses div-Element, das alle anderen HTML-Code umschließt. Beachten Sie, dass das Tag hier geöffnet wird, da sich das schließende Tag unten am Ende aller anderen Inhalte befindet. Wir können sagen, dass es alle anderen HTML-Elemente im Projekt enthält. Ein div für sich ist ein ziemlich generisches HTML-Element. Es bietet kein Styling für sich, aber Entwickler verwenden es oft, um ihren eigenen Styling-Code an einen bestimmten Ort im HTML zu binden, was genau das ist, was wir hier tun werden. zu unserer CSS-Codebox gewechselt habe, habe ich einen Kommentar und einen Zeilensatz für die Spalte direkt unter unserem Hauptzeilensatz platziert. Wie mein Kommentar hier besagt, habe ich das div-Element bereits mit etwas Styling versehen, das ich in diesem Kurs nicht abdecken werde, da sie wirklich nicht mit Styling-Text zu tun haben. Nun, um die Breite dieser Spalte einzuschränken, verwenden wir die max width Eigenschaft. Wie Sie sehen können, gibt es mehrere verschiedene Arten von Werten, die wir einer max width Eigenschaft zuweisen können. Glücklicherweise werden wir sie nicht alle in diesem Kurs verwenden. Da wir wollen, dass unsere Zeilen nicht länger als 60 Zeichen sind, gehen wir mit dieser ch Maßeinheit. Die ch Einheit stellt die Breite des 0 Zeichens der Schriftart dar, die mit dem Element verknüpft ist. Als Nebenanmerkung, dass Tutorial auf dem Bildschirm gibt es Sie in viel mehr Details, wie Sie verschiedene Einheiten in CSS verwenden, so erkunden Sie diese Ressource in Ihrer Freizeit. Lassen Sie uns unsere Erklärung beenden, indem Sie einen Wert von 60ch setzen. In unserem div fügen wir die max-width Eigenschaft hinzu und wir geben ihr einen Wert von 60ch; und jetzt bemerken Sie die Breite, wie sie bis zu etwa 60 Zeichen am Maximum eingewickelt ist, ist jetzt in einer schönen einfachen Spalte enthalten. Ich möchte diese Lektion schließen, indem ich zwei weitere CSS-Eigenschaften erwähne , die Sie möglicherweise nützlich finden. Wenn Ihre Texte ein super langes Wort enthalten , das länger ist als die maximale Breite für dieses Element, können Sie angeben, wie der Browser dieses super lange Wort behandeln soll. Verwenden Sie die Eigenschaft break word, um dem Browser mitzuteilen, das Wort in Stücke aufzuteilen und diese Teile über mehrere Zeilen zu trennen, oder um das ursprüngliche Wort die maximale Breite in einer einzigen Zeile überlaufen zu lassen. Wenn dieses Wort unterbrochen wird, können Sie die Eigenschaft Bindestriche verwenden, um dem Browser mitzuteilen, ob zwischen den aufgebrochenen Wortstücken ein Bindestrich eingefügt werden soll. Ich werde diese Eigenschaften nicht demonstrieren, aber fühlen Sie sich frei, in dieses Tutorial eintauchen, um mehr zu erfahren. 10. Horizontale Ausrichtung: In dieser Lektion lernen wir, wie Sie unseren Text horizontal ausrichten. Wir beginnen mit der text align Eigenschaft. Kurz gesagt, die Textausrichtung funktioniert genau wie die Ausrichtungsoptionen in Textverarbeitungsprogrammen, sodass Sie Text am linken Rand, an einem rechten Rand, in der Mitte oder an beiden Kanten ausrichten Rand, an einem rechten Rand, können. Lassen Sie uns den Text ausrichten Eigenschaft auf unsere Seite Titel und Untertitel anwenden. Um unseren Code ein bisschen effizienter zu machen, werden wir die Stilregel auf das Header-Element anstatt auf jedes der H1- und H2-Elemente anwenden . Wir können in der HTML-Box sehen, dass unser Header-Element sowohl die H1- als auch H2-Elemente umschließt. Indem Sie die Regel auf dem Header platzieren, werden die H1- und H2-Elemente die Regel von unserem Header-Element erben. Unten in unserer CSS-Box unter dem Regelsatz, den wir für unsere Entwicklung geschrieben haben, werden wir einen weiteren Regelsatz hinzufügen. Wir wählen das Header-Element aus und fügen dann geschweifte Klammern wie folgt hinzu. Wir werden den Text ausrichten Eigenschaft so hinzufügen. Wenn wir nun den richtigen Wert zu dieser Eigenschaft hinzufügen, werden wir sehen, schauen, unsere Seitentitel und Untertitel haben sich auf den rechten Rand unserer Mittelspalte ausgerichtet. Ich werde Center in meinem Projekt verwenden. So sehen wir, dass der Seitentitel und der Untertitel nun in der Mitte unserer Spalte ausgerichtet sind. Ziemlich einfach, nicht wahr? Nun, es sieht so aus. Eine Einschränkung hier ist, dass Text ausrichten nur auf Blockebene Elemente und Tabellenzellen funktioniert. Ein Element auf Blockebene wird automatisch auf einer neuen Zeile angezeigt. Bei einem Inline-Element können Sie jedoch mehrere Inline-Elemente nebeneinander platzieren und alle werden in derselben Zeile angezeigt. Beispiele für beide Arten von Elementen können wir hier in unserem Projekt sehen. Betrachtet man diesen ersten Absatz des Textes. Denken Sie daran, diese starken Tags, die ihren Kommentar fett machen, verwenden wir die starken Tags hier in unserem HTML. Dies sind Inline-Elemente. Beachten Sie, wie sie nicht brechen, sie verursachen keine Zeilenumbrüche in den Ergebnissen, das macht sie inline. Im Gegensatz dazu schauen wir uns unsere Listenelemente an. Beachten Sie, wie jedes Listenelement automatisch in einer neuen Zeile beginnt, dies sind Blockelemente. Der Schlüssel, an den Sie sich erinnern sollten, ist, dass die Eigenschaft text align nur funktioniert, wenn Sie sie für Blockelemente verwenden. Ziel dieser Regel ist es, dass alle Textinhalte in einem einzigen Block, wie ein Absatz, die gleiche Ausrichtung haben. Diese Technik funktioniert für die Zentrierung des Textinhalts innerhalb eines Blockelements. Aber was ist, wenn wir das Blockelement selbst zentrieren wollen? Nehmen Sie unsere Spalte zum Beispiel, würde es nicht schöner aussehen, wenn diese gesamte Textspalte auf der Seite zentriert wäre? Der einfachste Weg, um ein Blockelement zu zentrieren, das dünner ist als sein Container, besteht darin, seine margin Eigenschaft auf auto zu setzen. Elemente Ränder trugen dazu bei, die Menge und die Art des negativen Raums um das Element zu bestimmen . Kehren wir zu dem Regelsatz für das div zurück, das hier unsere Spalte bildet. Wir werden eine neue Deklaration mit einer Margin-Eigenschaft hinzufügen, also tun wir Marge und dann werden wir den Auto-Wert hinzufügen, und da gehen wir. Sehen Sie, die Spalte ist jetzt auf der Seite zentriert. Denken Sie daran, dass diese Technik nur funktioniert, wenn das Blockelement dünner ist als das Element, das es enthält. Wenn das mittlere Element dasselbe ist wie sein enthaltendes Element, wird mit dieser Technik nichts erreicht. Für diejenigen von Ihnen interessiert, mehr über die Einstellung der negativen Raum um Elemente zu lernen , zögern Sie nicht, dieses Tutorial zu überprüfen. 11. Abstand für Buchstaben, Linien und Wörter: In dieser Lektion geht es um Abstände. Wir behandeln, wie der Abstand zwischen Buchstaben, zwischenWörtern, zwischen Zeilen in einem Blockelement und dann zwischen Blockelementenselbst genau festgelegt Wörtern, zwischen Zeilen in einem Blockelement und dann zwischen Blockelementen wird. Lasst uns zuerst den Buchstabenabstand angehen. Dadurch wird der Abstand zwischen einzelnen Buchstaben geändert oder das, was Designer oft das Kerning nennen. Werfen wir einen weiteren Blick auf unseren H2-Regelsatz in unserer CSS-Box. Fügen Sie eine zweite Deklaration mit einer Buchstabenabstandseigenschaft hinzu. Der Buchstabenabstand ist also Buchstabenabstand. Sie können einen negativen Wert verwenden, um die Standardgröße des Buchstabenbereichs zu verringern. Versuchen wir also negativ 0,2 REM, negativ 0,2 REM, und dann ein Semikolon und dann bemerken, dass die Buchstaben unseres Untertitels gerade etwas näher gekommen sind. Persönlich denke ich, das ist irgendwie schwer zu lesen. Lassen Sie uns also einen positiven Wert von 0,1 REM geben, ich werde negativ loswerden, ändere die beiden zu eins, und jetzt haben wir ein wenig mehr Platz. Die Wortabstands-Eigenschaft funktioniert ähnlich wie Buchstabenabstand, aber es passt den Abstand zwischen Wörtern anstelle von Buchstaben im gleichen H2-Regelsatz an, lassen Sie uns die Buchstabenabstandsdeklaration kopieren und einfügen. Ich kopiere es, und dann füge ich es ein und richte es an. Nun lasst uns diesen Brief vorwärts ändern. Jetzt haben wir die Wortabstands-Eigenschaft. Auch nur um dies wirklich offensichtlich zu machen, lassen Sie uns den Wert auf ein REM setzen und jetzt bemerken, wie wir eine schöne große Lücke zwischen unseren Worten haben. Persönlich mag ich den zusätzlichen Platz nicht. Du kannst es behalten, wenn du willst. Ich werde es entfernen. Also habe ich die Wortabstanddeklaration in unserem CSS entfernt und jetzt haben wir dort eine etwas engere Wortausrichtung. Für die letzte der drei einfachen textbasierten und Eigenschaften, können wir die Zeilenhöhe von Textelementen mit einer zeilenhöhe Eigenschaft anpassen. Diese Eigenschaft gibt die Höhe jeder Textzeile auf der Seite an. In unserem LetterVille Library Project möchten wir, dass alle Absätze und Listenelemente die gleiche Zeilenhöhe haben , und wir möchten, dass diese Höhe etwas größer als der Standardabstand ist. Also unten am unteren Rand unserer CSS-Box, lassen Sie uns einen neuen Zeilensatz hinzufügen. Wir werden alle p-Elemente auswählen und dann möchten wir auch alle LI-Elemente auswählen. Machen Sie unsere geschweiften Klammern. Wir werden die Zeilenhöhe Eigenschaft hinzufügen, also ist das Zeilenhöhe. Wir geben ihm einen Wert von 1,5 und was dies tut, ist, dass es alle unsere Zeilen unserer Absätze und Linien unsererZeilenhöhen auf das anderthalb fache ihrer Schriftgröße setzt unsere Zeilen unserer Absätze und Linien unserer . Beachten Sie also hier in unseren Ergebnissen und wir haben jetzt größere Leerzeichen zwischen unseren umbrochenen Textzeilen. Für die endgültige Technik für den Abstand von Text im Web werden wir Ränder abdecken. Werfen Sie einen Blick auf unsere Listeneinträge. Obwohl jedes neue Listenelement mit einem Aufzählungszeichen beginnt, kann es schwierig sein, auf einen Blick zu erkennen, wo jedes Listenelement beginnt und endet. Ich denke, die Liste wäre leichter zu lesen, wenn wir zusätzlichen Platz zwischen den Elementen hätten. Leider können wir die Eigenschaft zeilenhöhe hier nicht verwenden , da dies zusätzlichen Platz für alle Textzeilen hinzufügen würde. Daher werden wir die margin bottom Eigenschaft verwenden, um zusätzliche Leerzeichen am unteren Rand jedes Listenelements hinzuzufügen . Fügen Sie am unteren Rand unserer CSS-Box einen neuen Regelsatz für Anpassen von LI-Elementen hinzu. Wir werden die margin-bottom Eigenschaft verwenden und ich denke, 0.5 RAM macht den Job gut. Also tun 0,5 REM Doppelpunkt und jetzt bemerken, dass wir ein wenig zusätzlichen Platz zwischen unseren Listenelementen haben , was es nur ein wenig einfacher zu lesen macht. Das ist es für unsere Lektion über den Abstand von Text für das Web. In Ihren eigenen Projekten können Sie mit diesen Eigenschaften und den verschiedenen Maßeinheiten in CSS experimentieren . Sehen Sie, welche Art von kreativen Designs Sie sich einfallen lassen können. 12. Dekorieren von Figuren und Worten: Diese Lektion behandelt eine Reihe von CSS-Eigenschaften , die Zeichen und Wörter mit Visual Flair schmücken. Fangen wir mit Farbe an. Ich gehe davon aus, dass Sie bereits die verschiedenen Möglichkeiten kennen, eine Farbe anzugeben. Wenn Sie dies nicht tun, empfehle ich dringend, dieses kostenlose Mozilla-Tutorial zu lesen, bevor Sie fortfahren. Sobald Sie Farbwerte verstehen, das Ändern der Farbe von Textelementen ziemlich einfach. Es ist langweilig, dass der gesamte Text auf unserer Seite schwarz ist. Wir können den Header mit etwas Farbe abheben. Also in unserer CSS-Box, in der Zeile h1 und h3, die wir bereits geschrieben haben, fügen wir eine weitere Deklaration hinzu. Die Eigenschaft ist einfach Farbe. Für diesen Wert werden wir ein Waldgrün verwenden. Ich habe hier in diesem Kommentar ein paar Farbwerte oben im CSS-Feld angegeben. Also werde ich einfach diesen hellgrünen Wertausschneiden und einfügen diesen hellgrünen Wert und dann zu unserer Farbeigenschaft zurückkehren und ihn einfügen. Jetzt haben alle unsere Header, die Header h1 und h3 jetzt diese waldgrüne Farbe und die Farbpalette hat etwas mehr Vielfalt. Wenn wir nach unten scrollen, werden wir feststellen, dass unsere Hyperlinks die standardmäßige blaue Farbe haben , die die meisten Browser Links zugewiesen haben. Da wir mit der grünen und schwarzen Farbpalette gehen, müssen wir diese Links auf Grün ändern. Sie unten in unserer CSS-Box eine neue ländliche Menge hinzu, die ein Element auswählt. Hierbei handelt es sich um Hyperlink-Elemente, geschweifte Klammern und dann um die Farbeigenschaft. Leider ist das Grün, das wir für unsere Kopfzeilen verwenden, zu spät, um es für den Textkörper zu verwenden. Es bietet nicht genügend Farbkontrast und würde keine Barrierefreiheitsstandards erfüllen, daher verwenden wir ein dunkleres Grün. Ich werde zurück zu unserem Kommentar über Farbwerte scrollen und dann werde ich diesen Wert für dunkelgrün für Links kopieren. Dann komme ich zurück zum a Tag Styler und ich füge den Farbwert hinzu. Jetzt habe ich bemerkt, dass sich unsere Links zu diesem dunkelgrünen Text geändert haben. Eine weitere Farbeigenschaft, die wir ändern können, ist die Hintergrundfarbe. Beachten Sie diesen markierten Satz, der mit „wie wir“ beginnt, wenn wir hier in unserem HTML aussehen, stellen wir fest, dass der Satz in einem Mark-Tag eingewickelt ist. Dieses Tag stellt eine Standardhintergrundfarbe hinter dem darin enthaltenen Textinhalt zur Verfügung. Ich weiß nicht, wie es dir geht , aber dieses Gelb ist irgendwie hell und ablenkend. Ich würde es gerne etwas abschwächen. Unten unten in unserer CSS-Box, werde ich einen weiteren Zeilensatz hinzufügen. Dieses Mal verwenden wir den Markierungs-Selektor für Markierungselemente, geschweifte Klammern. Wir werden die Hintergrundfarbe Eigenschaft verwenden, also Hintergrundfarbe und dann ein Leerzeichen. Jetzt gehen wir zurück zu unseren Farbkommentaren und ich werde die hellgelbe Farbe für unsere Markierungs-Tags kopieren. Ich komme wieder runter und füge diesen Wert ein. Jetzt gehen wir. Jetzt viel einfacher für die Augen und es ist immer noch Hervorhebung des Textes, aber jetzt ist es nicht annähernd so ablenkend. Für die endgültige Formateigenschaft der Lektion ändert die Texttransformation die Groß- und Kleinschreibung von Text Inhalt. Es ist ziemlich unkompliziert. Es ändert Texte entweder in Groß- oder Kleinbuchstaben oder Großbuchstaben , was den ersten Buchstaben jedes Wortes in Großbuchstaben und alle anderen Buchstaben in Kleinbuchstaben sagt . Lassen Sie uns den Seiten-Untertitel auf alle Kleinbuchstaben setzen. Scrollen Sie hier nach oben, wir haben unseren Untertitel und ein h2-Tag. Das ist also, was wir in unserer CSS-Box ändern werden. Wir gehen nach oben, finden die Reihe h2. Wir werden eine neue Deklaration hinzufügen. Diesmal ist es die Text-Transformationseigenschaft. Wir werden den Kleinbuchstaben verwenden. Beachten Sie nun, dass der Untertitel jetzt ganz in Kleinbuchstaben enthalten ist. 13. Textschatten: Unsere letzte Lektion des Kurses ist für mich am meisten Spaß. Sie können wirklich verrückt mit Textschatten werden und Styling-Effekte erstellen, die wie Word Art aussehen. Der letzte Schliff unseres Letterville Library-Projekts ist es, Text-Schatten zu unserem Seitentitel hinzuzufügen, um einen Blickfang und unvergesslich zu machen. Die text-shadow Eigenschaft nimmt drei oder vier Komponenten für ihren Wert. Die erste Komponente, das Offset-x, ist erforderlich und gibt den Abstand an, um den Schatten nach links oder rechts zu verschieben , wobei der Schatten direkt hinter dem Text platziert wird. Ein negativer Wert verschiebt den Schatten nach links vom Text. Die zweite Komponente, der Offset-y ist ebenfalls erforderlich und gibt den Abstand an, um den Schatten nach oben oder unten zu verschieben, wobei der Schatten direkt hinter dem Text platziert wird. Ein negativer Wert verschiebt den Schatten über den Text. Die dritte Komponente, der Unschärfeladius, ist optional und gibt an, wie breit und hell der Schatten ist. Wenn nicht angegeben, ist der Standardwert Null. Die vierte Komponente, die Farbe, ist erforderlich und legt die Farbe des Schattens fest. Lassen Sie uns das in die Praxis umsetzen. Sie in unserem CSS-Feld zum Zeilensatz H1 zurück. Wir fügen eine neue Deklaration mit einer Textschatteneigenschaft hinzu. Also, das ist Text-Schatten für die Eigenschaft. Wir verwenden einen Offset-x von negativen 4px, stehen für negative vier Pixel, um den Schatten links von seinem Text zu ziehen. Für den Offset-y verwenden wir vier Pixel, um den Schatten unter seinen Text zu verschieben. Wir überspringen den Unschärfen-Radius und für die Farbe, lässt einen helleren Farbton dieses Waldgrün von der Spitze unseres Farbkommentars greifen. Hier sehen wir hellgrün für den Textschatten. Ich hole das, kopiere es, komm zurück und benutze das dann, um unsere Text-Eigenschaft zu beenden. Da sind wir, Sie können einen helleren Schatten des ursprünglichen Textes nur links und unterhalb des Textes sehen. Eine coole Sache über Textschatten ist, dass Sie mehrere Schatten übereinander legen können , um einen komplexeren visuellen Effekt zu erzielen. Wenn Sie mehrere Werte für eine Textschatteneigenschaft angeben, wendet der Browser die Schatten von vorne nach hinten mit dem ersten Schatten an. Fügen wir unserem H1-Element einen weiteren Schatten hinzu. Vor dem ursprünglichen Schattenwert fügen Sie ein Komma hinzu, wir verwenden das Komma, um die beiden Werte zu trennen. Fügen Sie ein Offset-x von negativen zwei Pixeln hinzu, um den Schatten leicht nach links von seinen Texten zu ziehen. Wir werden einen Offset-y-Wert von zwei Pixeln hinzufügen , um den Schatten leicht unter seinen Text zu ziehen. Wir überspringen den Unschärfen-Radius erneut und geben den Farbwert Weiß an. Jetzt können wir den zweiten weißen Schatten sehen, knapp über dem ersten hellgrünen Schatten, aber unterhalb des Textes, wodurch ein Umrisseffekt entsteht. Wie ich bereits erwähnt habe, gibt es viele weitere visuelle kreative Effekte, die Sie mit Textschatten für Interessenten erzielen können. Schauen Sie sich dieses kostenlose Tool an, um Demos zu erkunden und mit verschiedenen Textschattenwerten zu experimentieren. 14. Schlussbemerkung: Herzlichen Glückwunsch, das Ende des Kurses zu erreichen, du hast es geschafft. In diesem Kurs haben wir eine Menge Techniken für das Styling von Text im Web behandelt. Alles vom Ändern der Schriftgröße bis zur Farbe, der Implementierung einer Google Font, Definition einer benutzerdefinierten Schriftart, technischen Schatten und vieles mehr. Wenn Sie Fragen zu etwas haben, das wir hier im Kurs behandelt haben, sollten Sie diese Fragen bitte hier im Kurs posten. Ich beantworte ihnen das Beste, was ich kann. Außerdem ermutige ich Sie sehr, Projekte hier im Kurs zu posten, egal ob Sie meinem Letterville-Bibliotheksbeispiel gefolgt sind oder Sie Ihr eigenes Ding gemacht haben. Andere Studenten und ich sind daran interessiert, Ihre Arbeit zu sehen. Das ist deine Zeit zu glänzen. Wenn Sie in diesem Kurs mit etwas zu kämpfen haben, sollten Sie Ihre Arbeit in Bearbeitung als Ihre Projekte posten und um Feedback bitten. Ich überprüfe es. Ich gebe deine Zeiger. Sie können Ihre laufende Arbeit jederzeit entfernen und Ihr abgeschlossenes Projekt später posten. Wohin gehen wir von hier aus? Ich habe vier Vorschläge, was zu tun ist, wenn ihr fertig seid. Erstens, wenn Sie diesen Kurs genossen haben, überlegen Sie bitte, hier in diesem Kurs eine positive Bewertung zu hinterlassen . Andere Schüler werden wissen wollen, dass Ihnen dieser Kurs gefallen hat und Sie ihn nützlich fanden. Zwei, überlegen Sie, mir hier auf Skillshare zu folgen. Es sollte eine Taste dafür unten unter dem Video sein. Ich plane, mehr Kurse und HTML und CSS in naher Zukunft zu unterrichten. Ich möchte Sie gerne auf dem Laufenden halten, wenn ich diesen Inhalt poste. Drittens, besuchen Sie meine Website. Ich veröffentliche eine wöchentliche Zusammenfassung von Tutorials und Demos für HTML, CSS und Web Graphics. Viertens teile ich eine Tonne von kostenlosen Ressourcen für das Lernen von Web-Entwicklung auf Twitter und LinkedIn. Also verbinde dich mit mir dort. Ich liebe es, diesen Kurs zu unterrichten, und ich hoffe, es hat dir genauso gefallen wie ich. Vielen Dank, dass Sie sich mir hier angeschlossen haben, und ich freue mich darauf, Sie in meinem nächsten Kurs zu sehen.