Einführung in CSS: Füge einer Portfolio-Website grundlegende Stile hinzu

1. Trailer: Cascading Stylesheets ermöglichen es uns, eine Präsentation zu unserer sonst schlichten HTML-Seite hinzuzufügen . In dieser Klasse nehmen wir unsere vierseitige HTML-Portfolio-Website nur und verknüpfen sie mit einem neuen CSS-Dokument. Wir werden grundlegende Stile auf unsere Elemente anwenden und sehen, wie diese auf unser HTML-Dokument wirken. Wir beginnen ganz am Anfang von CSS und decken alle notwendigen Grundlagen ab, um die Präsentationsebene in unsere Projekte zu bringen. Wenn Sie noch nie von Cascading Stylesheets gehört haben oder nach einer Auffrischung auf CSS suchen, ist diese Klasse genau das Richtige für Sie. Wir werden die Grundlagen des Schreibens von CSS, das mit unseren Seiten verbunden ist, behandeln und auch über die Fehlerbehebung sprechen. Sie sollten die Grundlagen von HTML kennen, bevor Sie meine Klasse nehmen. Wenn Sie mein Intro in die HTML-Klasse genommen haben, ist dies das perfekte Follow-up. Ich werde den HTML-Code bereitstellen, mit dem ich arbeiten werde , damit Sie herunterladen und folgen können. Unsere CSS-Stile können auf jeden HTML-Code angewendet werden, den wir wollen auch wenn es sich um eine Website über Hunde handelt, weil sie auch süß sind. 2. Willkommen!: Oh. Hi, neue Freunde. Schön, Sie hier zu haben. Ich bin Jenn, und heute werden wir über CSS sprechen, auch bekannt als Cascading Style Sheets. CSS ist das großartige Follow-up, wenn Sie meine HTML-Klasse oder eine andere HTML-Klasse bereits irgendwo genommen haben , oder wenn Sie eine Auffrischung über CSS benötigen, wie es funktioniert und was es tun kann. CSS ist so genial, wie es Stile für alle unsere Webseiten bietet. Also, die Dinge sehen ein wenig hübscher aus, und hey, das gefällt uns allen. Bevor wir anfangen, dachte ich, ich würde dir etwas über mich erzählen, und ich dachte, ich würde das tun, indem ich zwei Wahrheiten und eine Lüge spiele. Also werde ich dir drei Dinge erzählen. Eine Sache wird eine Lüge sein. Nummer eins, die erste Website, die ich je gemacht habe, war 1999. Nummer zwei, ich habe Bon Jovi zweimal im Konzert gesehen. Nummer drei, ich ging einmal auf Price is Right und gewann $700 spielen Plinko. In Ordnung. Also, ich habe nicht $700 beim Plinko gewonnen. Jedenfalls nicht. Ich schweife ab. Lass uns mit dem CSS runtergehen. Hey, das ist das einzige Mal, dass ich die ganze Klasse reimen werde. Ich verspreche es irgendwie. CSS steht für Cascading Style Sheets, und in dieser Klasse werden wir ein Projekt erstellen, das auf einer HTML-Basis für unser Portfolio basiert. Wir haben eine vierseitige Portfolio-Website , mit der wir arbeiten werden, und zusätzlich zu diesem einfachen HTML, wir CSS hinzu, um Textilien, Farben hinzuzufügen und macht die Dinge ein wenig angenehmer für unser Auge. Also, wir werden den HTML für Jon Arbuckle's Portfolio hier nehmen, das mit HTML nur ein bisschen so aussieht, und wir werden das nehmen und Stile mit CSS hinzufügen. Also, wir werden unseren HTML von diesem zu diesem gepaart mit CSS nehmen. Wir lernen ein wenig darüber, wie Textfarben, Hintergrundfarben, Schriftfamilien und Schriftgrößen sowie Textdekoration unsere Seiten entsprechend anpassen können, um unserem einfachen HTML mehr visuelles Interesse zu verleihen. Also, sobald Sie bereit sind zu beginnen, kommen Sie zurück für die nächste Lektion, und wir werden darüber sprechen, welche Werkzeuge wir brauchen, um unsere Website mit CSS zu erstellen. 3. Sammle unsere Tools: Wir werden beginnen, indem wir ein paar Tools herunterladen, die wir benötigen, um unser CSS zu schreiben. Genau wie ein HTML können wir jeden Texteditor verwenden, um CSS zu schreiben. Die Vorteile der Verwendung eines Texteditors für Code sind Dinge wie Syntax-Hervorhebung, Tastenkombinationen und Formatierungshilfe, die uns helfen, effizienteren Code zu schreiben. Wenn Sie die Intro in HTML-Klasse mit mir genommen haben, dann sind Sie mit Sublime Text 2 vertraut. Wir werden Sublime Text 2 verwenden, um wieder. Die Sache, die an Sublime Text 2 großartig ist, ist, dass Sie es für Windows und Mac verwenden können, und sie haben auch eine unbegrenzte kostenlose Testversion, die Sie auffordert, die Software zu kaufen, die, wenn Sie es genießen, sollten Sie aber während du es ausprobierst, kannst du es kostenlos benutzen. Sie werden dies auf sublimetext.com/2 finden und von dort aus können Sie die neueste Version herunterladen, basierend auf dem Betriebssystem, auf dem Sie sich befinden. Also, warum gehen Sie nicht voran und laden Sie das herunter, wenn Sie es noch nicht getan haben, und installieren Sie es dann und kommen Sie zurück. Nachdem Sie Sublime Text installiert haben, ist das nächste, was wir brauchen, ein moderner Browser. Ich werde dafür die neueste Version von Chrome verwenden. Sie können jeden Browser verwenden, den Sie wünschen, ich würde empfehlen, die neueste zu verwenden, da es normalerweise am einfachsten mit und sie haben eine Menge mehr Tools für Entwickler in späteren Versionen. Ich werde Chrome speziell verwenden, weil ich den Chrome Web Inspector liebe. Der Chrome Web Inspector, wir werden ein wenig später sehen, aber im Wesentlichen lässt es uns alle Elemente auf der Seite überprüfen und in der Lage sein, die HTML und CSS für sie zu sehen. Also, es ist wirklich ordentlich. Empfehlen Sie dringend, Chrome dafür zu verwenden. Wenn Sie Firefox verwenden, hat Firefox etwas Ähnliches, dass Sie Elemente auf der Seite überprüfen können. Das wird sehr nah an dem sein, was wir in Chrome tun. Internet Explorer hat auch Entwickler-Tools wie Safari. Also, wieder, Sie haben einige andere Möglichkeiten, aber ich werde Chrome für diese Klasse verwenden. Wenn du dem mitmachen möchtest, wird das hier drin sein. Das letzte, was wir brauchen, ist HTML für diese Klasse, die Sie aus den Projektschritten finden und diese Datei jon-arbuckle-site.zip herunterladen können . Hier entpacken Sie Ihre Datei und speichern Sie sie dann an einem Ort, wo Sie sie leicht finden können. Manchmal ist das auf Ihrem Desktop, manchmal Dokumentenordner, manchmal ein Site-Ordner, was auch immer für Sie funktioniert, wo Sie es nicht vergessen werden und leicht für jetzt gefunden werden kann. Also, holen Sie sich all das Setup und dann gehen wir weiter und beginnen, uns den Überblick über die Dateien anzusehen, mit denen wir arbeiten werden. 4. Überblick über unsere HTML-Kursdateien: Im Intro zur HTML-Klasse haben wir eine Website für das Portfolio von Jon Arbuckle, unserem fiktiven Client, erstellt. Wir werden den HTML für diese Klasse als Grundlage für das Lernen von CSS verwenden. Wenn Sie Ihr eigenes Portfolio entweder aus dieser Klasse erstellt haben oder es einen anderen HTML-Code gibt, mit dem Sie arbeiten möchten, ist das völlig in Ordnung. Wenn Sie genau dem folgen wollen, was ich hier mache, dann gehen Sie weiter und greifen Sie diese Datei und lassen Sie uns damit arbeiten. Also, nachdem Sie die Datei entpackt haben und Sie wissen, wo Ihr Ordner ist, gehen wir weiter und öffnen Sublime Text. Wenn Sie Sublime Text zum ersten Mal öffnen, werden Sie nicht viel sehen. Sublime Text öffnet keine Dateien, in denen Sie zuletzt gearbeitet haben. Daher müssen Sie Sublime Text mitteilen, dass Sie den Ordner oder die Datei öffnen möchten , an der wir arbeiten möchten. Die andere Sache, die wir tun wollen, ist es ein wenig an unsere Vorlieben anzupassen. Also, das erste, was ich werde klicken, Ansicht, Seitenleiste, Show Side Bar, und der Abschnitt Seitenleiste wird wieder geöffnet. Wieder, das ist Ansicht, Seitenleiste, Seitenleiste anzeigen. Jetzt werden wir in der Lage sein, die Dateien zu sehen, mit denen wir arbeiten. Von dort aus gehe ich zur Datei öffnen und navigiere in diesem Fall zu dem Ordner, dem Jon Arbuckle-Ordner, mit dem ich arbeiten möchte. Also, Datei, Öffnen oder Steuern oder Befehl O, wenn Sie die Tastenkombination verwenden möchten. Dann sehe ich den Jon Arbuckle-Site-Ordner. Ich könnte einfach eine der Dateien öffnen, aber ich würde gerne alles sehen, mit dem wir arbeiten. Also, ich werde es auf Jon Arbuckle Website hervorgehoben halten und dann werde ich auf Öffnen klicken. Sobald ich das tue, werden Sie Jon Arbuckle-Site mit allen Dateien und Ordnern sehen , die ich in diesem Ordner habe. Eine andere Sache, die Sie bemerken werden, es ist ein wenig wackelig über Sublime Text ist, dass sich das tatsächlich vor diesem Flake-Fenster öffnet, das wir gerade angesehen haben. Wann immer Sie einfach Datei öffnen, öffnet es ein völlig neues Fenster oder Browser Chrome, so können Sie einfach voran gehen und schließen alte aus, weil wir es nicht mehr brauchen. Also, noch einmal, um Sie durch zu gehen, Ich öffne Sublime Text, Ich gehe zu Datei, Öffnen und dann navigiere ich zu dem Ordner, den ich öffnen möchte, und klicke auf Öffnen. Eine andere Option, die Sie für die Anzeige der Dateien haben, ist, wenn Sie Ihren Ordner hier drüben in der Seitenleiste haben, gehen Sie einfach voran und ziehen Sie das und die Dateien öffnen sich direkt dort, ohne ein anderes Fenster zu öffnen. Also, jetzt, da wir das offen haben, werfen wir einen Blick auf einige der Dateien, mit denen wir für Jon Arbuckle Portfolio arbeiten müssen. Ich werde dies im Browser öffnen, um visuell zu sehen, was wir haben. Also, ich werde diesen Ordner öffnen, und ich werde auf Index HTML klicken, die erinnern, ist unsere Homepage. Siehe hier können Sie sehen, ist die Homepage des Jon Arbuckle-Portfolios. Wir haben ein Logo, das zurück auf die Homepage oder die Seite Indexseite verweist. Wir haben Hauptnavigation, die Links zu drei Unterseiten, die die über und den Kontakt arbeiten. Wir haben unsere Überschrift auf Jon Arbuckle, freiberuflicher Illustrator und Autor. Wir haben unser Heldenbild, das später ersetzt wird , sobald wir wissen, was dieses Bild sein wird. Wir haben einige Überschriften, basierend auf dem Zeug, das Jon für sein Leben und Freizeit tut, wie seine Web-Comics, zusammen mit der Beschreibung und einem Link, um mehr zu sehen. Seine Musik geht zusammen mit einem Bild, für seine Polkaholic CD und ich werde Link, um es zu kaufen. Wir haben eine weitere Überschrift über Jon auf Twitter mit einem Absatz, so können wir über Jon auf Twitter lesen, indem wir seinem Twitter-Account folgen, die der Link ist hier. Wir haben ein Blockquote-Element. Dieses Blockquote-Element ist ein Zeugnis von einem Mandanten von Jons. Dann haben wir einen weiteren Absatz mit einem Call to Action, um in Kontakt zu treten, der auf die Kontaktseite geht. Dann haben wir unser Foto, das auf jeder Seite mit dem Copyright erscheint, zusammen mit unserem Copyright HTML Entity. Wir springen in einige dieser Unterseiten, wir können sehen, die Arbeitsseite hat das Beispiel von Jon Web Comics wie die LASAGNA CHRONIKLES und CAT TOWN. Wir können auch sehen, dass dies die Porträts sind, die Jon angeboten hat, zu machen. Wieder, seine Musik, Jon wirklich liebt es, seine Musik zu fördern. Als Nächstes haben wir die About Page. Klicken Sie auf der Seite Info. Wir können auch ein bisschen mehr über Jons lernen. Also fügen wir ein Bild von Jon hinzu, eine Überschrift und dann haben wir zwei Absätze, um Jon zu beschreiben. Wir haben auch eine andere Überschrift, um die Liste der professionellen Dienstleistungen, die er bietet zusammen mit ungeordneter Liste beschreiben die Dinge, die Jon tut beschreiben. Auch hier sehen Sie unsere Filterinhalte weiter unten. Schließlich haben wir unsere Kontaktseite, die gerade erklärt, dass Sie Jon über seine E-Mail mit einer E-Mail Kontakt zu verlinken, und dann auch einen Link zu seiner sozialen Präsenz auf Twitter, Facebook oder Pinterest unter der Überschrift Anderswo auf der Interwebs. Schauen wir uns diese Seite im Browser an. Denken Sie daran, wenn Sie eine Ihrer Dateien öffnen möchten, können Sie einfach doppelklicken, um sie zu öffnen, solange sie that.html am Ende haben, und sie werden in Ihrem bevorzugten Browser geöffnet. Gehen wir zurück zu Sublime Text und werfen einen Blick auf den HTML. Also, um einen Ordner zu öffnen, denken Sie daran, dass Sie nur einmal klicken, es wird nicht wirklich geöffnet, aber wenn Sie doppelklicken, wird die Registerkarte angezeigt, die besagt, dass sie geöffnet ist. Sie können das kleine X-Symbol hier sehen, was bedeutet, dass im Moment keine Änderungen gespeichert werden müssen. Sie werden auch sehen, dass meine Schriftart ziemlich klein ist. Also, ich werde das ein bisschen aufstoßen. Ich kann das mit dem Kommando oder Control Plus tun. Dafür gibt es eine Abkürzung. Sie können auch sehen, dass ich diese kleine Minimap hier habe, und was das tut, es zeigt uns einfach eine kleine Karte von all unserem Code. Ich finde, dass mir diese Art in die Quere kommt. Also, ich werde sehen, Minimap verstecken, um loszuwerden, dass, wieder anzeigen Minimap verstecken und Sie werden sehen, dass verschwindet die ich ein Fan von machen, dass verschwinden. also einen Blick auf unsere Homepage werfen, haben wir wieder unseren doctype oder HTML-Tag. In unserem Kopf setzen wir das meta und charset Attribut, wir haben den Titel unserer Seite, die das Portfolio von Jon Arbuckle ist, und dann gehen wir zum Körper, wo wir unsere Header-Informationen haben. Wir markieren das mit den HTML-Kommentaren, unserem Ankerlink zurück zur Homepage, weil wir möchten, dass dieses Bild in der Lage ist, wieder nach Hause zu verlinken. Die ungeordneten Listen für unsere Navigation, und dann haben wir unsere Seite Inhalt. In unserem Seiteninhalt, wieder können Sie sehen, dass durch den Kommentar markiert, nur um unseren Code schön und organisiert zu halten. Wir haben unsere Überschrift Ebene eins, die erklärt, worum es auf der Website geht, das Hero-Bild, die Web-Comics Überschrift, das ist ein h zwei unter dem h eins. Unser Absatz verlinkt, wieder nach der gleichen Formel, eine andere Überschrift, ein anderes Bild. Eine Überschrift Ebene drei, weil es unter der Überschrift Ebene zwei der Musik nistet. Wir sahen den Jon auf Twitter. Als wir ihn im Browser angeschaut haben, können wir es auch hier sehen. Wir haben unseren Blockquote-Abschnitt, und innerhalb unseres Blockquote haben wir unsere Absatz-Tags wieder mit unseren Entitäten, um sicherzustellen, dass wir die geschweiften Anführungszeichen für die richtigen Anführungszeichen in einer Bindestrich Entität erhalten , um das zu erhalten. Dann haben wir unseren Absatz mit einem Link auf die Kontaktseite und unsere Fußzeile. Das ist unsere Homepage. Werfen Sie einen Blick auf die Seite „Info“. Auch hier sollte der Header gleich sein, da wir ihn von Seite zu Seite kopiert haben, und nur der Seiteninhalt wird mit einem h1-Bild etwas anders sein. Ein paar Absätze in der ungeordneten Liste hier. Als nächstes werfen wir einen kurzen Blick auf die Kontaktseite. Die Kontaktseiten sind ziemlich kurze Seite. Auch hier ist das einzige, was auf allen Seiten anders ist, der Seiteninhalt Abschnitt, und dass man wieder ein h1 bekommen hat, das wir auf jeder Seite haben sollten und es ist die wichtigste Überschrift. Unser Absatz, und dann unsere anderswo im Web zusammen mit unserer ungeordneten Liste. Zuletzt ist die Arbeitsseite. Die Arbeitsseite wieder, Seiteninhalt anders. Wir haben unsere Überschriften, wir haben Unterüberschriften für Web Comics, die Überschriften in die für die verschiedenen Arten von Comics. Unter den Comics ist das Bild Link, und unter der Musik ist die gleiche Art von Material hier. Also, werfen Sie einen Blick durch das. Wenn Sie nicht dieses Portfolio von Jon Arbuckle in der anderen Website machen, kein Problem. Nehmen Sie sich einfach ein paar Minuten Zeit, um sich mit dem Code vertraut zu machen, wenn Sie diesen verwenden möchten. Andernfalls können Sie jede HTML-Basis verwenden, die Sie für die Website verwenden möchten. Wir werden über CSS sprechen und das kann auf jeden HTML angewendet werden. Also, keine Sorgen, wenn Sie Jon Arbuckle nicht helfen möchten. Ich bin sicher, er wird es nicht gegen Sie halten und lassen Sie uns im nächsten Abschnitt beginnen, um genau zu betrachten, was CSS ist und wie es für unser HTML gelten wird. 5. Was ist CSS?: Also, was ist CSS? Nun, CSS steht für Cascading Stylesheets und Cascading Stylesheets sind, was wir verwenden, um Stile zu unseren HTML-Elementen hinzuzufügen. Also, Dinge wie Layouts, Farben, Schriftarten, die alle mit CSS oder Cascading Stylesheets gesteuert werden. Das ist mundvoll und schwer zu sagen, fünfmal schnell also lassen Sie uns einfach von hier an für CSS gehen. CSS ist, was als Präsentationsschicht bekannt ist. Wenn es um das Front-End einer Website geht, die wir im Grunde nennen , wie Sie ein Design in Code umstellen, bevor Sie die Backend-Technologie treffen, also Dinge wie Datenbanken, behandelt das Front-End HTML, CSS und JavaScript, auch bekannt als die Inhalts-, Präsentations- und Verhaltensebenen. Also CSS ist die Präsentationsschicht, da es die gesamte Präsentation behandelt. CSS wurde erstellt, damit wir den Inhalt von der Formatierung trennen Wenn also einer von Ihnen in den 90er oder frühen 2000er Jahren eine Reihe von Webdesign gemacht hat, können Sie sich an Dinge wie Schriftart-Tags erinnern und wir haben viele Dinge in HTML getan, um die Styling dafür. Dinge wie fett, die Verwendung von fett Tags, nur um ein mutiges Aussehen zu erhalten, aber wir möchten das jetzt mit CSS tun,weil die Verwendung von CSS zum Umgang mit dem Stil bedeutet, dass unser HTML portabler ein mutiges Aussehen zu erhalten, aber wir möchten das jetzt mit CSS tun, ist. Es bedeutet, dass wir es für verschiedene Dinge wiederverwenden können. Es hilft bei der Barrierefreiheit und wir können mehr als ein Dokument super einfach formatieren und in der Lage sein, die Stile wirklich leicht zu aktualisieren, wenn wir Dinge getrennt halten. Die Website csszengarden.com ist ein großartiges Beispiel für alles, was CSS tun kann. Die Idee hinter der Website, als sie gestartet wurde, besteht darin, den gleichen HTML zu nehmen und zu sehen, wie durch Anwendung eines anderen Stylesheets wir sehr unterschiedliche Layouts erhalten und die Ästhetik auf den gleichen Code betrachtet. Werfen wir einen Blick auf einige der Designs, die sie hier haben, und sehen wie, obwohl sie alle den gleichen HTML verwenden, sie ganz anders aussehen. Wenn wir uns die HTML-Datei ansehen, indem wir Quelle der Seite sehen, können wir sehen, dass das gleiche HTML verwendet wird, um diese Homepage zu erstellen, und es ist das gleiche, um diese Seite zu erstellen, gleichen HTML, aber verschiedene CSS, um diese oder diese und dies zu erstellen. Sie können sehen, dass, obwohl der HTML-Code identisch ist, es völlig anders aussieht. Wir können unsere Websites so aussehen lassen, wie wir möchten, dass sie aussehen indem wir einfach das CSS und die Stile ändern, die wir auf die Seite anwenden. Also keine Sorge, wenn Sie nicht das gleiche Markup verwenden möchten, wird jedes Markup tun, wir können das CSS darüber hinaus verwenden, aber wir werden sehen, wie die Anwendung von Stilen Sie alle Kontrolle darüber haben, wie Ihre Seite aussieht. Was ist wirklich ordentlich ist, wenn wir unsere Chrome DevTools verwenden, wieder können wir irgendwie sehen, was hier los ist. Also, wenn ich das Element durch Rechtsklick oder Strg-Taste inspizieren, können Sie sich in der HTML-Klasse erinnern, die wir verwendet haben um unsere HTML-Elemente zu betrachten, aber auch auf der rechten Seite sehen Sie hier das CSS , das in , um die Stile für die Website zu erstellen. Also, wenn ich zurück nach oben gehe und ich einen Blick auf diesen CSS ZEN GARMENTS Header werfe, kann ich sehen, dass es ein H1 ist und dann hier drüben Sie sehen , dass dies alle CSS-Stile sind, die angewendet werden, um dies zu ermöglichen. Mach dir keine Sorgen, wenn irgendwas von dem jetzt keinen Sinn ergibt, wird es bis zu der Zeit, die wir fertig sind. Aber so verwenden Sie Ihren Inspektor und es wird dies tun, so dass Sie hier zum Beispiel Farbe sehen, und es ist blaue Farbe. Aber wenn wir einen Blick auf eines der anderen Designs werfen und ihre H1 inspizieren, werden wir sehen, dass das H1 immer noch das gleiche wie CSS Zen Garden ist. Lasst uns das hochziehen, damit ihr das ein wenig besser sehen könnt. Sie können sehen, dass die Stile hier ganz anders aussehen als das, was wir dort gesehen haben , einschließlich der Farbe, die eine Art von dieser dunkleren schwarzen Farbe ist. Das fängt an, Ihnen eine Vorstellung davon zu geben, wie wir nur CSS-Stile optimieren können, verschiedene Looks erhalten können. Lassen Sie uns also lernen, wie wir CSS schreiben und die Syntax und Terminologie im nächsten Video. 6. CSS-Syntax und Terminologie: CSS besteht aus zwei Teilen, dem Selektor und der Deklaration. Der Selektor wird uns das Ziel sagen, von dem wir stylen. Also, so etwas wie ein Absatz oder eine Überschrift. Was auch immer Element oder Objekt, wir wollen Stil. Das ist, was wir als Selektor bezeichnen. Die Deklaration wird die Eigenschaft in Wert angeben. Also, was wir tatsächlich an diesem Objekt ändern werden. Also, wenn wir die Farbe ändern wollen oder wenn wir die Größe von etwas ändern wollen, gibt es etwas, das wir in unserer Deklaration angegeben haben. Also, was genau bedeutet das überhaupt? Nun, lassen Sie uns sagen, dass wir alle Absatz-Tags auf unserer Seite wollten. Also, alle unsere Absätze, die durch ein p-Tag in HTML markiert sind, was, wenn wir wollen, dass sie alle blau sind? Nun, im Wesentlichen werden die Absätze dann unser Selektor, und der Wert von Blau wird in unserer Erklärung hinzugefügt. Wir müssen auch die Eigenschaft angeben, auf die blau angewendet wird. In diesem Fall sagen wir die Farbe. Also, in einfachem Englisch, wollen wir die Farbe Eigenschaft in blau von allen unseren Absätzen ändern. Nun, wie schreiben wir das? Ich meine, wir können den Computer anschreien, aber er wird uns wahrscheinlich nicht zuhören. Stattdessen werden wir es mit CSS schreiben. Also, was wir tun müssen, ist, dass wir unserem CSS sagen, was unser Selektor ist, und dann sagen wir ihm die Eigenschaft, die wir ändern, und den Wert, auf den wir es ändern. Es sieht genau so aus mit Selektor, und dann ist die Insider-Deklaration innerhalb der geschweiften Klammern enthalten. Wir notieren die Eigenschaft und dann einen Doppelpunkt, dann den Wert und ein Semikolon. Alle CSS-Formatierungen sehen so aus. Also, um ein Beispiel aus der realen Welt zu sub-in, wie das, was wir gerade für Absätze Selektor gesprochen haben. Wir sagen p, weil das das HTML-Äquivalent ein p-Tag ist. Die Eigenschaft wird Farbe, weil dies die CSS-Eigenschaft ist, die wir geändert haben. Der Wert wird blau, da dies der Wert ist, den wir der Eigenschaft zuweisen möchten. Also, im Wesentlichen möchten Sie immer in dieser Formel mit für das, was Sie versuchen, in Ihrem HTML mit CSS zu ändern. Also, jeder Selektor kann hier Ihre Absätze gehen, Ihre jeden einen Blockcode. Alles kann hier reinspringen, und das sehen wir uns ein wenig später an. Es ist auch wichtig zu beachten, dass unsere Deklarationen mehr als ein Eigenschaftswert-Paar haben können. Wir wollen uns nicht darauf beschränken, Text zu sagen, der blau sein kann. Also, sagen wir auch, wenn wir wollten, dass die Farbe aller unserer Absätze blau und die gesamte Schriftgröße 14 Pixel beträgt, können wir das tun. Alles, was Sie noch einmal tun müssen, ist Schriftgröße zu schreiben: 14 Pixel; Also wieder Eigenschaft: Wert; Das Semikolon sagt Ihrem CSS im Grunde, dass Sie anfangen, eine neue Eigenschaft zu sagen, oder es ist das Ende der Eigenschaft. Es muss nicht auf eine neue Zeile gehen, genau wie HTML-Whitespace spielt keine Rolle. Ich finde es jedoch leichter zu lesen, besonders wenn ich anfange. Wenn Sie alle Ihre verschiedenen Eigenschaften auf einer neuen Zeile behalten. Aber jetzt, da wir wissen, wie man CSS schreibt. Wie bekommen wir dies, um tatsächlich auf unser HTML anzuwenden? Im nächsten Video werden wir darüber sprechen, Dinge wie unsere blauen Absätze mit unserem eigentlichen HTML zu verknüpfen , damit das funktioniert. 7. Wie man CSS zu unseren Seiten hinzufügt: Lassen Sie uns also das CSS zu unseren Seiten hinzufügen, die wir bereits mit unseren HTML-Projekten erstellt haben. Wenn Sie Ihr eigenes Projekt verwenden, gehen Sie weiter und öffnen Sie das in Sublime Text Wenn Sie jon-arbuckle porfolio verwenden, werden wir das auch öffnen wollen. Also, öffnen Sie Sublime Text, wenn Sie nicht bereits, und Datei öffnen, und navigiert zu diesem Ordner, in diesem Fall, jon-arbuckle-site, und klicken Sie auf „Öffnen“. Wenn Sie Ihre Seitenleiste aktiviert haben, sehen Sie alle Ihre Ordner und Dateien auf der linken Seite, genau wie wir es mögen. Wir haben drei Optionen, wenn es darum geht, CSS zu unseren Seiten hinzuzufügen , und das ist durch Inline-Styles, in internen Stylesheets und in externen Stylesheets. Spoiler-Alarm, wir werden den letzten benutzen wollen. Ich möchte Sie jedoch durch jede einzelne führen, um die Vor- und Nachteile von ihnen zu erklären und warum sie anders sind, und warum Sie vielleicht einige von ihnen verwenden möchten und was zu tun ist, wenn Sie sie sehen. Also, der erste, mit dem ich anfangen werde, sind Inline-Stile. Ich werde eine unserer Seiten öffnen. In diesem Fall werde ich nur mit der Über Seite beginnen. Öffnen Sie die Info-Seite in Sublime Text durch Doppelklick. Nur eine Erinnerung, das ist, was unsere über Seite derzeit aussieht. Also, alles ist im Grunde mit so genannten Browser-Standardeinstellungen gestylt. Browser-Standardeinstellungen sind, wie unsere Seite ohne CSS aussieht. In diesem Fall heißt es, dass, weil dies ein H1 ist, der Browser sagt: „Nun, mach das größer und mutiger als andere Schriftarten auf der Seite.“ Unser Absatz ist, dass ein Text, der in einer Serif-Schriftart ziemlich lesbar ist. Unser H2 ist wieder kühner, weil es eine Überschrift ist, aber ein wenig weniger groß als unser H1, weil es nicht so wichtig ist. Unsere Liste hat bereits Aufzählungszeichen als Marker dafür. Dies sind die so genannten Browser-Standardstile. Also, wenn wir keinen Stil hinzufügen, erhält jeder Text oder HTML, den wir auf unserer Seite setzen, die Browser-Standardeinstellungen. Wir werden das mit unserem CSS überschreiben, um genau zu sagen , wie wir unsere Seite aussehen soll. Also, der erste Weg werden wir das mit diesen Inline-Stilen tun. Ich werde nach unten zu meinem Absatztext scrollen, und in meinem Absatz-Tag werde ich etwas hinzufügen, und was ich hinzufügen werde, ist ein Attribut. Sie erinnern sich an unsere HTML-Lektion, dass Attribute mehr Informationen zum Tag liefern. Zum Beispiel, auf unseren verknüpften Tags war unser H ref kein Attribut, oder hier oben auf unserem Bild können Sie sehen, dass die Quelle ein Attribut genannt wird, und der Alt-Text ist ein Attribut. Dann geht der Wert immer innerhalb der Anführungszeichen nach dem Gleichheitszeichen. Also, unsere Inline-Stile werden im Wesentlichen ein weiteres Attribut sein , und dieses Attribut ist das Stil-Attribut. Genau wie jedes andere Attribut, werden wir damit beginnen, zu sagen, was es in diesem Fall ist, Stil, dann gleich Quote-Quote. Innerhalb des Attributwerts werden wir sagen, wie der Stil wir es haben wollen. Also haben wir in unserem letzten Video einen Blick auf Deklarationen, die mit Selektoren gepaart sind, und in diesem Fall hatte unsere Deklaration eine Eigenschaft und einen Wert. Wir werden die Eigenschaft und den Wert innerhalb unseres Style-Attributs schreiben. Also, in diesem Fall Farbe, und genau wie wir es im CSS-Syntaxbeispiel getan haben , Doppelpunkt, Blau, Semikolon, dann werde ich die Datei speichern. Denken Sie daran, es ist immer wichtig zu speichern, ich kann sagen, dass meine Dateien ungespeichert, weil es den Kreis dort hat. Also Datei, speichern oder steuern S, oder Befehl S. Ich werde das öffnen, dass über die Seite in einem Browser in, wenn Sie es nicht wieder geöffnet haben, erinnern Sie sich einfach, um es zu öffnen. In Ihrem Finder und Ihren Dokumenten, wo immer Sie ihn gespeichert haben. Öffnen Sie diesen Ordner, und doppelklicken Sie dann, um ihn zu öffnen. Also, hier sind wir auf der aktualisierten geöffneten Seite, und hey, da gehst du. Sehen Sie sich an, dass unser Text jetzt blau ist, genau wie wir gesagt haben, dass er mit einem Inline-Stil sein soll. Wenn Sie etwas anderes hinzufügen möchten, wenn Sie sich in unserem vorherigen Beispiel nicht erinnern, haben wir darüber gesprochen, mehrere Eigenschaften und Werte in unserer Deklaration zu haben. Wir können das auch im Inline-Stil tun. Also, direkt nach diesem Semikolon, der anzeigt, dass das Eigenschaftswertpaar fertig ist, können wir eine andere Eigenschaft schreiben. In diesem Fall werden wir die Größe der Schriftart ändern. Die CSS-Eigenschaft dazu wird FAAB-Größe genannt. Also, wir schreiben Schriftgröße, einen Doppelpunkt, um zu sagen, dass wir den Wert für diese Eigenschaft geben werden, und wir werden einfach in etwas wie 18 Pixel ändern. Um zu sagen, dass wir fertig sind, unseren Wert zu deklarieren, ein Semikolon. Wieder wollen wir dies speichern, wieder über, aktualisieren Sie die Seite, und jetzt können Sie sehen, unsere Schriftgröße geändert wird. Dies ist das CSS, das wir anwenden, um die Farbe und die Schriftgröße zu ändern, und wir haben das mit einem sogenannten Inline-Stil gemacht. Inline-Stil sagt also: „Verwenden wir ein Style-Attribut für ein Tag, um die Farbe oder Größe oder jede andere CSS-Eigenschaft zu erhalten , die wir ändern möchten.“ Also, was passiert, wenn wir wollen, dass alle unsere Absätze blau und Schriftgröße 18 sind? Nun, wir müssten zu all unseren Absätzen auf einer Seite gehen und andere Stilattribute eingeben. So ist Stil gleich Farbe, Doppelpunkt, Blau, Semikolon Schriftgröße, Doppelpunkt, 18 Pixel, Semikolon. Ich kann dies speichern, gehen Sie zurück zu Chrome, aktualisieren, und jetzt, dass Absatz ist blau und 18 Pixel zu. Das ist toll, ich meine, es ist cool, dass wir so viel Kontrolle haben, aber können Sie sehen, wie mühsam das würde, wenn Sie mehr als zwei Absätze auf Ihrer Website haben, was Sie wahrscheinlich werden? Wenn Sie an große Websites denken, stellen Sie sich vor, jede CSS-Eigenschaft, die Sie möchten, direkt auf dem Tag durchgehen und deklarieren zu müssen? Das würde wirklich stinken, und ich wette, Sie haben bessere Dinge, die Sie mit Ihrer Zeit machen möchten. Das wird also zu einem Problem mit dem Inline-Stil. Ein weiteres Problem mit Inline-Stil ist, sagen wir auf der Straße, die Sie entscheiden, dass Sie verdammt blau hassen. Blau ist nur ein Ruck und Sie wollen nicht mehr, dass Ihre Absätze blau sind. Nehmen wir an, stattdessen Ihre neuen Lieblingsfarben rot. Um es in Rot zu ändern, können Sie hier reinkommen, das Blau löschen, Rot eingeben. Natürlich wird das funktionieren und wenn wir zurückgehen und aktualisieren, können Sie sehen, dass das rot ist, aber jetzt müssen Sie jeden einzelnen Ort finden, an dem Sie blau gesagt haben, und ändern Sie das in Rot. Das wäre ein sehr langwieriger Prozess und eine Menge Änderungen und es wäre wirklich einfach für Sie, einen zu verpassen. Die gute Nachricht ist, dass wir eine bessere Lösung haben. Werfen wir einen Blick auf interne Stylesheets als nächstes. Also, ich werde diese Inline-Stile rückgängig machen, weil sie nicht der bevorzugte Weg sind , den ich gerne unser CSS schreiben möchte. Also werde ich das einfach zurücksetzen. Was ich tun werde, ist im Wesentlichen, ich möchte unserem CSS sagen, dass er sich auf alles bezieht. Ich möchte Informationen zu den Formatvorlagen des Dokuments bereitstellen. Klingt das ein bisschen vertraut? Denken Sie daran, wo wir andere Informationen für das Gesamtdokument definiert haben und was es bedeutete? Vielleicht unsere Meta-Informationen? Wir haben das in unserem Kopf behalten, oder? Denken Sie daran, dass der Kopf Meta-Daten für die Seite beschreibt. Also, mit in Unser Kopf ist eigentlich, wo wir gehen, um unsere Stil Dokument zu definieren. Um ein Inline-Stylesheet zu erstellen, benötigen wir ein Style-Tag. Ich werde das Style-Element in unserem Kopf hinzufügen. Ich mache nur ein paar, schau, zu viele Räume. Nur zwei Leerzeichen unten, nur für mich in der Lage zu sein, dies ein wenig besser zu sehen, und wann mit dem Schreiben und Öffnen von Style-Tag beginnen. S, wie Sie sehen können, in Sublime Text eines der Dinge, die es tut, weil es ein HTML-Texteditor ist, dass es anfängt automatische Vervollständigung für das vorzuschlagen, was wir zu schreiben versuchen. Also, es sieht mich Typ S, T, und es geht davon aus, dass ich ein Style-Tag schreiben möchte. Natürlich sind sie richtig, das kann wirklich gut sein, wenn ich Enter drücke, es wird das für mich automatisch vervollständigt. Aber ich werde das vorerst ausschalten. Sie können das in den Einstellungen deaktivieren, und ich werde das tun, weil es ein wenig einfacher für Sie sein wird zu sehen, was ich tue, wenn ich alles austippe, und weil ich manchmal denke, dass es wichtig ist, Dinge auszutippen wenn Sie zum ersten Mal anfangen zu lernen. Um dies zu tun, gehe ich zu meinen Sublime Text-Einstellungen und setze meine Benutzereinstellungen. Im Moment können Sie oder vielleicht nichts hier sehen, meine Schriftgröße ist da, weil ich die Schriftgröße früher vergrößert habe und diese Präferenz für mich gespeichert hat. contex können Sie so viele Einstellungen hinzufügen, wie Sie möchten. Sie können mehr über die Sublime Texteinstellungen einfach durch Googeln erfahren. Also, sagen wir, ich möchte die automatische Vervollständigung deaktivieren und ich war mir nicht sicher, wie. Ich könnte eine schnelle Google für Sublime Text Autocomplete machen, und Sie erhalten die Ergebnisse dafür. Fühlen Sie sich frei, das zu tun, und wenn nicht, können wir einfach kopieren, was ich hier tue , was Komma wäre, weil wir über zoomen eine neue Eigenschaft, dann werde ich nur schreiben, auto_complete, Doppelpunkt, false. Ich werde das speichern, und jetzt, wenn ich zurückkomme und mit der Eingabe beginne, wäre die automatische Vervollständigung deaktiviert. Denken Sie daran, wenn ich das sehen wollte, oder wenn ich vergessen habe, wie man so etwas schreibt, könnte ich einfach zu Google gehen und nach Sublime Text suchen, um automatisch zu vervollständigen. Sie werden genau hier sehen, sie geben Ihnen diese Informationen. In diesem Fall könnten Sie das einfach kopieren und einfügen, wenn Sie möchten, steuern Sie C oder Befehl C, um Kopie zu kopieren oder zu bearbeiten, dann könnten Sie wieder in Ihre Einstellungen kommen und es stattdessen einfügen. Natürlich müssen wir das nicht tun, weil ich es bereits eingegeben habe, also werde ich das speichern und schließen. Nun, zurück zu unseren Style-Tags, ich öffne Stil und Sie werden sich von HTML erinnern, dass, wenn ich ein Tag öffnen werde, ich es auch schließen möchte. Also werde ich das dort schließen. Dann, mit Inline-Style-Tag ist, wo ich meine CSS-Selektoren und Deklarationen schreiben werde. Also, Sie erinnern sich zurück, als wir uns die Syntax angesehen haben, sieht die Syntax im Wesentlichen so aus, Selektor , geschweifte Klammer und dann die Eigenschaft, Doppelpunkt, Wert, Semikolon. Alles, was wir tun müssen, ist, wenn wir tatsächliche Eigenschaften und Werte auf unsere Selektoren anwenden wollen , ist, diese Formel durch das zu ersetzen, was wir tatsächlich zu manipulieren versuchen. In diesem Fall mache ich es im Selektor zu einem P für das P-Tag, die Eigenschaft, die ich ändere, ist Farbe und die Werte, in die ich ändere, sind blau. Sublime Text gibt uns hier Farbe der Syntax-Hervorhebung, so dass es erkennt, dass die Werte, die wir gerade einfügen, echte CSS-Eigenschaften und -Werte sind, und das ist ein echter Element- oder Tag-Selektor. Deshalb habe ich von der weißen Farbe auf das Rosa und das Blau gewechselt , so dass es registriert, dass es tatsächlich eine funktionierende CSS-Eigenschaft ist. Also, wir haben unseren Typenwähler, in diesem Fall ist der Typ ein Absatz, ein P. Unsere Farben sind Eigentum und unser Blau ist unser Wert. Lassen Sie uns das speichern, wieder zu Chrome springen, aktualisieren Sie die Seite. Nun, alle unsere Absätze sind blau. Denken Sie daran, dass unser Fußzeileninhalt tatsächlich ein Absatz mit unseren Copyright-Informationen ist, so dass auch blau wurde. Alles andere sollte so bleiben, wie es war, weil es kein Absatz ist, und so fangen wir mit internen Stylesheets an. Das Gleiche, wenn ich mehr Eigenschaften und Werte anwenden möchte, kann ich das tun. Ich gehe zu einer neuen Zeile, ich werde diese Schriftgröße, Eigenschaft, also Schriftgröße 18 Pixel eingeben. Wir werden einen Blick auf die Farbe und Schriftart Eigenschaft ein wenig später werfen, aber ich möchte nur, dass Sie dies in Aktion sehen, damit Sie sehen können, wie es sich mit unserer Seite verbinden wird. Ich werde dies speichern, aktualisieren Sie die Seite, jetzt sind alle meine Absätze 18 Pixel. Also, unser internes Stylesheet ist definitiv besser als unsere Inline-Styles. Einfacher zu schreiben, wir müssen es nicht in jedes einzelne Absatzelement kopieren. Wir sind ziemlich cool, oder? Es sieht ziemlich gut aus. Wo das Problem mit Inline-Stilen auftritt , ist , dass Ihre Website höchstwahrscheinlich nicht nur eine Seite sein wird. Höchstwahrscheinlich möchten Sie, dass jede Seite Ihrer Website ähnlich aussieht, damit die Leute wissen, dass sie in derselben Website gehört. Wenn wir möchten, dass die Stile von unserer About Seite auch auf den Stilen für unsere Arbeitsseite stehen, müssten wir unser Style-Element kopieren, die Arbeitsseite öffnen, es hier einfügen, speichern. Öffnen Sie diese Sicherung, gehen Sie zu unserer Arbeitsseite, und dort sind unsere Absätze blau und 18 Pixel. Ich weiß nicht, wie viele Absätze auf dieser Seite sind, aber Sie können sehen, was anfängt zu ärgern, oder? Jetzt muss ich das kopieren und in das Kopfelement jeder Seite meiner Website einfügen. Wenn Sie eine 40.000 Seiten Website haben, die keine angenehme Erfahrung sein wird. Das lässt uns also unsere dritte Wahl, unsere externen Stylesheets. Das externe Stylesheet ist eine separate Datei, die unser CSS aufnehmen wird. Also, lassen Sie uns unser externes Stylesheet machen. Wie wir das machen, werden wir eine neue Datei erstellen, so können Sie entweder eine neue Datei ablegen oder Sie können mit der rechten Maustaste klicken und auf neue Datei im Ordner klicken. Ich werde eine neue Datei einreichen. Was ich hier jetzt tun kann, ist anfangen, meine CSS-Inhalte zu schreiben. Also, in diesem Fall werde ich alles, was ich hier hatte, ohne das Style-Tag in meinem CSS-Dokument kopieren . Denken Sie daran, dass ich sagen werde: „Ich möchte, dass alle meine Absätze blau sind.“ Also, P, geschweifte Klammern, Farbe, blau, Semikolon, und speichern. Nun, wenn ich speichere, wird es mich mit dem Speichern Feld, dem Speichern Dialogfeld, Es wird sagen, „Was wollen Sie speichern?“ Nun, drücken Sie nicht zurück zu schnell, weil sonst wird es als „P geschweifte Klammer“ gespeichert , die die erste Zeile unseres Dokuments ist. Natürlich wollen wir das nicht. Was wir wollen, dass es speichert, ist so etwas wie „Styles“. Nun, der wirklich wichtige Teil ist, es as.CSS zu nennen. Also, genau wie wir had.HTML Dateien, um zu sagen, dass es eine HTML-Datei ist, haben wir got.CSS Datei. Dies teilt dem Browser mit, dass dies ein Cascading Stylesheet ist und dass es Stile für unser HTML haben wird. Sie können dies also als styles.css speichern. Ich nenne es gerne styles.css, es ist ein ziemlich kurzer Name, um zu tippen, es ist leicht zu merken. Ein paar Namen wie JohnArbucklestyles.css, der viel Typ ist, lassen Sie uns einfach mit styles.css gehen. Wir werden es direkt auf der gleichen Ebene wie alle unsere HTML-Seiten speichern, also speichern. Jetzt werden Sie sehen, sobald ich gespeichert habe, die Farbsyntax hervorgehoben wurde, weil Sublime Text 2 weiß, dass es sich um die Datei a.CSS handelt, was bedeutet, dass es weiß, sie basierend auf dem CSS-Text hervorzuheben. Also, jetzt werde ich zurückgehen und dieses interne Stylesheet herausnehmen. Ich werde das löschen, ich werde das wieder speichern. Gehen Sie zu Chrome, Ich bin auf der Arbeitsseite und ich möchte auf der About Seite sein. Ich werde nur zurückklicken, die Seite aktualisieren, und ich bin zurück zu den Browser-Standardeinstellungen. Nun, warum gehe ich zurück zu den Browser-Standardeinstellungen? Ich sagte, wir sollten dieses externe Stylesheet verwenden, oder? Nun, wir haben die styles.css erstellt, aber was haben wir nicht getan? Wir haben die beiden Akten sowieso nicht miteinander verknüpft, oder? Wir haben in about.html, wir haben eine styles.css, wir haben es nicht gesagt, styles.ccs auf unsere About und HTML-Seite anzuwenden, also müssen wir das tun. Wir tun dies, indem wir unser externes Stylesheet mit einem Link-Tag anhängen. Das verknüpfte Tag unterscheidet sich von unserem Anker-Tag, das Links definiert, also ein wenig ähnlich in Namen, aber definitiv eine andere Sache. Der Link wird die Datei anhängen, die wir für unser CSS verwenden möchten. Wir werden in unserem Link-Tag hinzufügen, um eine andere Datei zu definieren, mit der wir einmal verknüpft sind. Also, wir geben offene Klammer, Link, und dann werden wir ein paar Attribute benötigen. Im Wesentlichen ist der Link ein eigenständiges Tag, das nur Attribute und keinen Inhalt enthält. Also, das erste, was wir sagen werden, ist rel="stylesheet“. Die rel-Attribute werden die Beziehung dieser Verknüpfungsdatei zum Dokument speichern. In diesem Fall heißt es, dass seine Beziehung darin besteht, dass es sich um ein Stylesheet handelt. Also, das nächste Attribut, das wir schreiben, sollte vertraut aussehen, wie Sie es vorher gesehen haben und das ist die href. Denken Sie daran, dass die href sagte, dass das Dokument, zu dem wir verlinkt wurden, gefunden wurde, und werden das gleiche tun, wo wir die CSS-Datei verknüpfen sollten. Also, href= "“, dann füllen wir das mit, wo sich das Stylesheet befindet. Also, in diesem Fall wird es ziemlich einfach sein. Genau wie unsere Arbeit in Kontaktseiten funktioniert hat, sind wir derzeit auf der About Seite und wir wollen zu styles.css gehen. Also, wir sind auf der gleichen Ebene, was bedeutet, dass wir keine Ebene oder in irgendeinen Ordner gehen müssen. Styles.css, schließen Sie dann unser Link-Tag. Nun, wenn ich meine styles.css in einem Ordner namens CSS oder so etwas halten würde, denken Sie daran, dass ich den Ordner speichern müsste, in den ich gehen wollte, dann geht ein Schrägstrich in den Ordner. Aber da wir auf der gleichen Ebene sind, werde ich das löschen und es einfach eine styles.css speichern, weil es auf der gleichen Ebene in unserer Ordnerstruktur wie unsere über Seite ist. Ich werde mit Befehl speichern, S steuern, wieder zu unserem Browser zurückkehren, die Seite aktualisieren, hier nach unten scrollen. Sie können sehen, dass alle unsere Absätze blau sind weil unser Stylesheet jetzt korrekt verknüpft ist. Im nächsten Video werden wir uns mit dem Webinspektor ansehen, um zu sehen, wie unser CSS auf die Seite angewendet wird und wie wir Dinge optimieren können, um zu sehen, wie die Dinge aussehen werden. Wir werden uns auch die Fehlerbehebung ansehen. Wenn deine Stile jetzt nicht angezeigt werden, schau dir das nächste Video an und lass uns sehen, wie wir sicherstellen können, dass die Dateien korrekt miteinander verknüpft werden und wir sie im Browser sehen können. 8. Fehlerbehebung und der Web-Inspektor: Wenn Sie nicht sehen, dass Ihr Text gerade blau wird, na ja, das ist ein super bummer. Werfen wir einen Blick auf einige der Dinge, die schief gehen könnten. Stellen Sie zunächst sicher, dass Sie sich die richtige Seite ansehen. Im Moment haben wir nur unser Link-Tag in unsere about.html hinzugefügt. Wir haben es auf keiner der anderen Seiten wie unsere Arbeit, unseren Index oder unseren Kontakt hinzugefügt . Also, wenn Sie sich eine dieser anderen Seiten ansehen, dann wird das für Sie nicht funktionieren. Wenn Sie das Link-Tag in eine dieser anderen Seiten einfügen, wird es nicht auf der Info-Seite sein. Also, stellen wir sicher, dass wir unsere über Seite geöffnet haben, und dass unser Link-Tag darin ist. Als nächstes ist es wirklich wichtig, Dinge wie Ihre Zitate zu überprüfen. Denken Sie daran, manchmal, wenn Sie so etwas verlassen, wird das CSS nicht richtig gelesen werden. Verwenden Sie daher die Farbsyntax-Hervorhebung, um sicherzustellen, dass die Syntax von styles.css korrekt hervorgehoben wird. als Nächstes sicher, dass Ihr Pfad korrekt ist. Hast du das eigentlich genannt, styles.css? Wenn du es etwas anders nennst als ich, dann wirst du das in das ändern wollen, was du es nanntest. Also, wenn Sie etwas wie colors.css oder catsrule.css brauchten, dann möchten Sie sicherstellen, dass es das ist, was es sagt. In diesem Fall sagten wir styles.css. Manchmal, was ich mag, ist, wenn es einen komplizierten Namen gibt oder vielleicht etwas, das ich nicht einfach eingeben kann, ich kann hier klicken, um umzubenennen, wählen Sie einfach alles aus, um es zu kopieren. Ich werde es nicht umbenennen. Ich komme zurück und füge das einfach ein , um sicherzustellen, dass ich es genau so bekomme, wie es sein soll. Als nächstes haben Sie darauf geachtet, dass es auf der gleichen Ebene ist? Wenn Sie andere Ordner haben, denken Sie daran, dass der Pfad ein wenig anders sein wird. Also, für Bilder, müssen wir in unseren Image-Ordner gehen. Das ist etwas, das du dir vielleicht ansehen möchtest. Eine andere Sache, die Sie tun können, um sicherzustellen, dass die Datei tatsächlich verknüpft wird und so liegt das Problem in der Datei und nicht Ihren tatsächlichen Selektoren hier drüben, ist, lassen Sie uns voran und schauen Sie sich dies in einem Browser an. Also, ich werde die Dinge wieder so retten, wie sie waren, kommen zurück und erfrischen. Nun, sagen wir, es funktioniert nicht, weil ich vielleicht vergessen habe, ein Angebot zu schließen oder zu öffnen. Wenn ich hierher zurückkomme, können Sie sehen, dass die styles.css nicht mehr funktioniert, weil mein Attribut nicht korrekt benannt wurde. Also, eines der Dinge, die ich tun kann, ist, entweder unser Inspect-Element zu öffnen , um Web Inspector zu tun, oder ich kann unsere Quelle anzeigen. Also, View, Developer, View Source, und Sie werden feststellen, wann immer wir die Quelle sehen, werden wir sehen, dass unsere Links blau sind, genau wie wir in normalen Webseiten gesehen. Wenn ich dies in einer neuen Registerkarte öffnen wollte, könnte ich es tatsächlich tun, weil dies ein Link zu dieser logo.png ist. Dies lässt mich wissen, dass dieser Link tatsächlich funktioniert und an den richtigen Ort geht. Also, ich könnte versuchen, das gleiche mit Stilen hier zu tun, so öffnen Sie den Link in neuer Registerkarte und ich sehe, dass diese Webseite nicht gefunden wird, und ich kann beginnen zu sehen, dass es hier ein Problem gibt , weil ich dieses Zitat hier drüben sehe sollte kein Zitat in meiner Datei-URL sein? Also, lassen Sie mich hier rüber gehen und sagen: „Das ist seltsam.“ Das könnte mir helfen zu erkennen, dass etwas nicht stimmt, wie ich es verknüpfe. Eine andere Sache, die wir tun können, ist unseren HTML-Validator zu verwenden. Sie können sich daran erinnern, dass aus unserer letzten Klasse, also möchten Sie weiter zum W3-Validierungsdienst gehen. Ich werde meinen ganzen Code kopieren. Ich werde das mit Steuerelement A oder Befehl A tun, um alle auszuwählen, oder Bearbeiten, Alles auswählen. Ich werde alle auswählen und dann werde ich kopieren. Ich gehe zu validator.w3.org und gehe zu Direct Input, füge meinen Code dort ein und klicke auf Check. Jetzt wirst du sehen, dass ich jetzt einen Fehler bekomme, wenn ich das durch den Validator führe. Also, lassen Sie mich nach unten gehen und sehen, was der Fehler ist und der Fehler sagt: „In unquotierten Attributwert.“ Das ist fabelhaft, es sagt mir genau, was falsch ist. Also, Zeile 10 unzitiert Attribut, ich komme zurück hierher. Das war mit Zeile neun, aber Sie haben den allgemeinen Bereich und ich kann sehen, Oh Shucks, ich habe dieses Zitat vergessen, und speichern Sie das. Also, das ist eine Möglichkeit. Nun, lass mich weitermachen und das ein wenig brechen, komm zurück zu unserem Browser, aktualisiere das. Wieder, es funktioniert nicht. Also gehen wir zurück zu dem, was ich vorher getan habe. Was ich tat, war, dass ich dafür sorgte, dass die Stile dort waren. Eine andere Möglichkeit, das zu tun, indem ich Element inspiziere. Denken Sie daran, Inspector ermöglicht es uns, alle HTML auf der Seite zu sehen? Ich werde mein Kopfelement öffnen, ich gehe zu meiner styles.css, ich werde darauf klicken, und ich kann sehen, dass es tatsächlich die styles.css lädt. Also, das Problem ist nicht mehr verknüpft, das Problem ist etwas in meiner styles.css. In Ordnung, lassen Sie mich zurückgehen und das überprüfen. Also, ich gehe zu styles.css, und an diesem Punkt bin ich mir nicht wirklich sicher, was los ist. Es ist wirklich einfach, ab und zu ein Semikolon oder einen Doppelpunkt zu verpassen. Also, wenn ich das nicht sofort sehe, kann ich wieder etwas wie einen Validator verwenden. Es gibt nicht nur HTML-Validierung, es gibt auch die CSS-Validierung. Also werde ich meinen Code von hier kopieren, dann gehe ich zum CSS Validation Service. Das ist jigsaw.w3.org/css-validator oder einfach eine schnelle Google-Suche nach CSS-Validator und klicken Sie auf den Link, der auftaucht. Ich werde zu Direct Input gehen. Natürlich können Sie auch eine tatsächliche URL des Dokuments einfügen oder die Datei hochladen, aber ich habe alles bereits kopiert, also lassen Sie mich das einfach dort einfügen. Ich werde überprüfen, und jetzt wird es sagen, dass sie einen Fehler auf 2 gefunden haben, Textbereich p, Farbe Parse Error blau. Dies identifiziert mich, wo das Problem ist. Jetzt kann ich in Zeile 2 finden, und ich kann sagen, Farbe, Semikolon blau, oh warte, ich habe nicht wirklich einen Doppelpunkt reingesteckt. Also, lassen Sie mich den Doppelpunkt hinzufügen. Jetzt können Sie sehen, dass Sublime Text manchmal für Sie automatisch vervollständigt, was ein wenig nervig sein kann, weil ich es jetzt nicht will. Also, wir werden das löschen, dann bin ich wieder fertig und im Geschäft. Also, lassen Sie mich das speichern, kommen Sie zurück zu meinem Browser, aktualisieren Sie das, und die Dinge sind wieder blau. Also, jetzt, wo alles funktioniert, lassen Sie uns gehen und kopieren Sie das externe Stylesheet in unsere anderen Dateien. Denken Sie daran, im Moment, es ist nur in unserer über Seite. Also, wenn ich zu unserer Heimat ging, werden die Absätze immer noch im schwarzen Stil statt dem blauen Stil sein , den wir angesprochen haben. Also, ich gehe zu meiner Über Seite, ich werde dieses Link-Element kopieren, und dann werde ich alle meine anderen Seiten öffnen. Ich werde das ersetzen. Denken Sie daran, ich mag es, die Dinge ordentlich zu halten, also werde ich die Registerkarte dort drinnen, gehen Sie auf die Kontaktseite, lassen Sie das dort rein. Schließlich, unsere Startseite, können Sie hinzufügen, dass dort, auch, und speichern. Sieht aus, als hätte ich vergessen, Kontakt zu speichern und ich habe vergessen, Arbeit zu sparen, lassen Sie mich diese speichern. Wenn ich nun zum Browser zurückgehe und aktualisiere, können wir sehen, dass die Stile angewendet werden. Wir können auch unseren Inspektor verwenden, um die Stile zu sehen, die derzeit angewendet werden. Genau wie wir es verwendet haben, um nach jedem HTML zu suchen, können wir auch unser CSS sehen. Ich werde nach unten scrollen, damit ich das sehen kann. Sie können sehen, ich bin auf meinem Blockquote, und dann mein Absatz und Sie können auf der rechten Seite hier sehen, wir haben unsere Styles Registerkarte. Unsere Registerkarte „Formatvorlagen“ sagt uns, dass die Farbe des Absatzes blau ist. So können wir sehen, welche Stile auf unsere Seite angewendet werden , indem wir auch die Elemente für unser CSS überprüfen. Eine andere nette Sache, die Sie im Inspektor tun können ist tatsächlich zu sehen, wie eine andere Farbe aussehen würde. Also, ich kann hier rüber gehen, Sie bemerken, wenn ich klicke, es ist hervorgehoben, und sagen wir, dass ich nicht will, dass die Dinge blau sind. Denk dran, wir mögen kein Blau. Lass es rot machen. Ich kann rot eingeben, und jetzt können Sie sehen, dass der Text rot ist. Der Inspektor lässt uns die Live-Vorschau sehen, um zu sehen, ob wir vielleicht etwas anderes besser mögen. Natürlich wird dies nicht in Ihrem tatsächlichen CSS gespeichert, aber Sie können die Dinge testen, um zu sehen, wie sie aussehen, entscheiden, ob Sie etwas mögen und dann fühlen Sie sich wie, wissen Sie was, rot sieht gut aus, kommen Sie zurück zu Ihren Stilen und wechseln Sie dies zu rot . So funktioniert die Verwendung des Inspectors und ein wenig darüber, wie wir Probleme beheben können , um sicherzustellen, dass unsere Styles tatsächlich auf unsere Seite kommen. Natürlich haben wir gerade angefangen, die Oberfläche auf dem zu kratzen, was wir mit CSS machen können. in der nächsten Lektion Lassen Sie unsin der nächsten Lektioneinen tieferen Blick auf die CSS-Eigenschaften werfen, mit denen wir arbeiten müssen, um auf unser HTML anzuwenden. 9. Schrifteigenschaften: CSS-Eigenschaften sind, was wir verwenden, um das Aussehen unseres HTML zu ändern. In diesem Fall haben wir uns bisher zwei CSS-Eigenschaften angesehen, Farbe und Schriftgröße. Schriftgröße ändert, wie der Name schon sagt, die Größe unserer Schriftarten. Wir können zu unserer styles.css zurückkehren und lassen Sie uns erneut eine Schriftgröße auf unsere Absätze anwenden. In diesem Fall sagen wir 16 Pixel. Nun, wir werden nicht nur unsere Absätze ändern wollen, wir werden wahrscheinlich auch Dinge wie unsere Überschriften und unsere Liste ändern wollen. Fangen wir zunächst mit unseren Überschriften an, und wir werden sagen, dass unser h1 30 Pixel sein wird. Jetzt, um eine andere Eigenschaft für einen anderen Selektor zu tun, werden wir nur genau das gleiche tun, was wir hier oben getan haben und unserer Selektor-Eigenschaftswert-Syntax folgen. In diesem Fall wird unser Selektor unsere Überschriftenebene eins sein. Um das zu schreiben, denken Sie daran, unser HTML ist h1. Geschweifte Klammern, das ist, wo wir unsere Erklärungen machen. In diesem Fall sagen wir Schriftgröße: 30 Pixel. Das heißt, verwenden Sie die Pixeleinheit und machen Sie es 30 Pixel. Lasst uns das retten. Ich werde meine Kontaktseite öffnen und ich werde aktualisieren, und da ist es. Es sieht nicht viel anders aus, richtig. Nun, schauen wir uns an, was passiert, und stellen sicher, dass es tatsächlich funktioniert. Unser h1 ist 30 Pixel und unsere Absätze sind blau und 16 Pixel. Okay, vielleicht sind wir sowieso etwas nah an den Browser-Standardeinstellungen. Lasst uns das aufstoßen. Wie viel sollten wir es aufstoßen? Ich weiß es nicht. Lass uns hier rumspielen, bis wir etwas finden, das uns gefällt. Ich klicke nur auf den Pfeil nach oben. Der Aufwärtspfeil und der Abwärtspfeil ändern den Pixelwert um einen Betrag. Hey, das sieht ziemlich gut aus, 52. Ich werde das retten. Nun, ich kann es nicht von hier retten. Ich muss wieder reingehen und es hier in meine Akte ändern, und ich werde das machen, jetzt machen wir es einfach 50. Meine h1 50 Pixel. So würde er die Schriftgröße definieren. Pixel ist nur eine Maßeinheit, die wir verwenden können, um die Größe unserer Schriftarten zu definieren. Genauso wie wir Dinge in etwa Metern oder Zoll oder Fuß beschreiben können, können Sie auch Ihre Schriftgrößen in verschiedenen Maßeinheiten beschreiben. Ein weiteres Beispiel ist die Verwendung eines Schlüsselworts. Einige der Schlüsselwortwerte, die wir möglicherweise haben, sind klein oder extra groß, was so geschrieben würde. Wir können dies speichern, gehen Sie zurück zu unserem Browser und sehen, wie das aussieht. Nun, es ist wirklich nicht so groß im Vergleich zu dem, was wir vorher hatten, aber so machst du extra groß. Sie können jedoch sehen, dass unsere Absätze ziemlich klein sind. Wir können auch sehen, wie es bei extra klein oder extra, extra klein aussieht , und das ist ziemlich winzig. Ich trage noch keine Brille, aber ich denke, ich würde, wenn alles so klein wäre. Andere mögliche Werte, die wir haben, sind em, also könnten wir etwas wie 1em oder 5em sagen. Wir können das speichern, aktualisieren, und Sie können sehen, dass das ziemlich größer wurde, und 1em ist im Grunde der Standard der Schriftgröße sowieso. Sie könnten auch Dezimalstellen verwenden, also könnten Sie etwas wie 1.5em oder 2em sagen. Wir haben auch Prozentsätze, also könnte man etwa 100 Prozent oder 300 Prozent sagen. Speichern Sie das, gehen Sie zurück. Die Schriftgröße basiert auf dem Prozentsatz des übergeordneten Elements. In diesem Fall die ganze Seite. Diese Schriftgröße können Sie tief in die Seite graben, welche Schriftgrößenmaße am besten für Sie sind. Ich werde sagen, dass Pixel am einfachsten zu beginnen sind und irgendwie am einfachsten, um Ihren Kopf herum zu erfassen, weil wir wissen, wie groß 16 Pixel sein werden, also werden wir es wieder darauf setzen. Lassen Sie uns Schriftgröße 20 Pixel für Absätze und h1 als 40 Pixel. Fühlen Sie sich frei, um mit einigen der anderen Einheiten zu spielen, die Sie für die Schriftgröße verwenden können. Die nächste Schriftarteigenschaft, die wir betrachten, ist die Schriftstärke. Was ist, wenn wir wollen, dass unser Schriftgewicht fett ist? Nun, wir haben schon einige fett formatierte Schriften mit unseren Überschriften gesehen. Was wäre, wenn wir auch unsere Absätze fett machen wollen? Nun, wir können das mit der Schriftgewichtseigenschaft tun. So Schriftgewicht: fett. Ich werde das speichern, Datei, Speichern, und aktualisieren Sie die Seite. Jetzt können Sie sehen, dass mein Absatztext fett ist. Wenn ich sehen wollte, wie es ohne fett aussah, nur eine Vorschau im Browser-Inspektor, können Sie einfach die Eigenschaften ein- und ausschalten, und Sie können die Unterschiede sehen, die sie machen, während wir gehen. Nun denken Sie vielleicht: „Woher sollte ich jemals wissen, dass das Wort dafür mutig ist?“ Ja, natürlich, ich sage dir das jetzt, aber woher würdest du das wissen? Dort kommen die Googles wieder ins Spiel. Mach dir jetzt keine Sorgen darüber, dass du all das auswendig lernt. Das Schöne an der Arbeit in CSS ist, dass Sie CSS auf einem Computer schreiben werden. Nun, in der Hoffnung, dass Sie eine Internetverbindung haben, sind Sie höchstwahrscheinlich wie eine Registerkarte davon entfernt, nur zu googeln, was der CSS-Eigenschaftswert dafür ist. Nehmen wir an, ich konnte mich nicht erinnern, aber ich wusste, dass ich mein Schriftgewicht fett machen wollte. Nun, ich kann zu einer Referenzseite gehen. Eine der Referenzseiten, die ich wirklich mag, ist HTML Dog. HTML Dog hat diese Liste von Referenzen auf der Website. Vielleicht haben Sie sich die HTML-Tags vorher angesehen, wir können auch CSS-Eigenschaften betrachten. Ich weiß, dass ich das Gewicht meiner Schriftart ändern möchte, und genau hier, schauen Sie unter Text und Schriftarten, ich sehe Schriftgewicht. Ich klicke in das, und dann, was es hier tun wird, ist die Liste der möglichen Werte, die ich für diese Eigenschaft festlegen kann. Normal, mutiger, fett, leichter und dann Gewicht. Das Gewicht beginnt von leichtesten bis kühnsten. In diesem Fall können Sie sogar ein Beispiel sehen, font-weight: bold, das ist, was wir hier eingeben. Sie können auch die Schriftstärke deaktivieren: fett der Überschriften, wenn Sie möchten, und Sie können dies tun, indem Sie font-weight: normal verwenden. Für die h1 kann ich Schriftgewicht sagen und dann normal schreiben. Ich habe diesen normalen Wert wieder von hier bekommen, ich werde meine Datei speichern, hierher zurückkommen und jetzt die h1 beobachten. Es ist nicht mehr fett, weil wir uns entschieden haben, das zu normalisieren. So würden Sie beginnen, Schriftgewichtungen zu Ihrer Seite hinzuzufügen. Vielleicht möchten Sie Ihre Überschriften fett lassen, damit die Leute wissen, dass dies in der Tat Überschriften sind, aber wir haben unsere Schriftgröße bereits so stark auf 40 Pixel erhöht, dass es ziemlich offensichtlich ist, dass dies nicht nur Absatztext ist, den wir suchen bei. Moment fühle ich mich gut, die Schriftgewichte fett zu entfernen und sie wieder auf normal zu setzen. Als nächstes haben wir die Font Style Eigenschaft. Der Schriftstil lässt uns den Stil der Schriftart anpassen. Beispiele, die wir haben, sind kursiv oder schräg. Wenn wir machen wollten, lassen Sie uns die H2s aufstellen. Sie haben noch keine CSS Liebe. Also, h2 für unseren Selektor, geschweifte Klammern, und dann innerhalb davon sind Eigenschaft und Wert. In diesem Fall sprechen wir über Schriftarten, also Font-Stil፦ Dann sagen wir Kursiv. Speichern Sie das. Aktualisieren Sie den Browser und Sie können sehen, dass unsere Überschriftenebene 2 in Kursiv geändert wurde. Das sieht ein wenig schwer aus, kursiv und fett zu sein, so dass wir Dinge kombinieren können, damit wir Schriftart und Schriftgewicht haben können. Ändern wir also das Schriftgewicht auf normal und entfernen Sie das Fett. Nun, hier haben wir unsere Überschrift, die kursiv und normales Gewicht ist. Auch wenn ich wissen wollte, welche Optionen ich für Schriftarten hatte, könnte ich zu meinen CSS-Eigenschaften bei htmldog zurückkehren und den Schriftstil überprüfen. Hier finden Sie die verschiedenen Optionen, die ich habe. Also haben wir ein paar Dinge bessere Schriftart bisher angepasst, aber eines der Dinge, die wir überhaupt nicht geändert haben, ist die tatsächliche Schriftart, die wir verwenden. Vielleicht bist du kein großer Fan von dieser Serifenschrift. Vielleicht möchten Sie eine serifenlose Schrift verwenden. Wir können das völlig anpassen und wir werden das mit der font-family Eigenschaft tun und die font-family sagt uns, welche Schriftart Sie verwenden möchten. Lassen Sie uns also unsere Absätze in die Schriftfamilie ändern. Also lasst uns dies in die Schriftfamilie von Arial ändern. Also, was wir tun werden, ist für Wert über Eigenschaft, wir werden den Schriftnamen schreiben, den wir verwenden möchten, in diesem Fall Arial. Ich sage das und Arial ist eine serifenlose Schrift. Also, alle Schriftarten, die wir gesucht haben, sind Serifen, die diese kleinen Zeilenkerle am Ende haben außer für unser Logo natürlich, aber das ist ein Bild. Ich werde das speichern und jetzt werden Sie sehen , dass sich unser Absatztext von unserem Browserstandard auf Arial geändert hat. So würden Sie also eine Schriftart definieren. Es gibt ein paar verschiedene Möglichkeiten, Schriftfamilien zu machen , und eine davon ist die Beschreibung der spezifischen Schaltfläche, die wir verwenden, wie Arial, aber wir können auch eine generische Schriftfamilie verwenden. Du hast gehört, dass ich das Wort „Serif und Serif“ benutze. Nun, man kann einfach sagen, ich will jeden Serif. Das nennen wir generischer Familienname. Sie können hierher zurückkommen, klicken Sie darauf, dass Sie sehen, dass es dem Browser ähnlich ist, den wir vielleicht Arial verwenden. Aber was es im Wesentlichen tut, sagt der Browser „Finden Sie , was serif Standard Sie haben und dienen Sie es.“ Die anderen generischen Familiennamen, die wir haben, sind serif, wie wir gesehen haben, damit wir das wieder auf eine Serife umstellen können. Wir könnten auch kursiv machen. Speichern Sie das. Kommen Sie zurück hierher und Sie können sehen, dass es auf die Standardschriftart des Computers wechselt. Die nächste generische Schriftfamilie ist Monospace. Speichern Sie das, kommen Sie zurück und Monospace, den Sie sehen werden, ist wie Karriere. Sie verwenden das im Wesentlichen für etwas wie Code. Samples sind irgendwo, wo Sie sehen würden, dass Sie oft verwenden, und das letzte, das wir haben, was mein Favorit für generische Schriftfamilien sein könnte, ist Fantasie. Speichern Sie das und Sie bekommen etwas Süßes. Vielleicht für Pyros auf einem Mac oder Comic Sans, wenn Sie das Vergnügen haben, Windows zu verwenden und diese Schönheit zu sehen. Also, es geht mir völlig gut, wenn du all deine Kopie auf Fantasie setzen willst. Ich finde, das ist cool. Manche Leute stimmen vielleicht nicht überein, aber „Hey, es ist deine Website.“ Eines der Dinge, die eine generische Familie tut, ist im Wesentlichen, dass es dient jeder Schriftart, die zur Maschine verfügbar ist. Nicht jede Schriftart ist auf jedem Computer verfügbar. Es gibt verschiedene Schriftarten, die darauf basieren, ob Sie auf einem Mac- oder Windows- oder Linux-Computer sind. Es gibt verschiedene Schriftarten, je nachdem, ob Sie sich entschieden haben, Schriftarten zu installieren oder Schriftarten zu löschen. Die Schriftarten auf den einzelnen Rechnern entsprechen dem Betriebssystem, das Sie ausführen, und die Benutzereinstellungen. Da nicht jede Schrift auf jeder Maschine ist, sind wir irgendwie begrenzt in dem, was wir servieren können. Vielleicht möchte ich Helvetica bedienen, aber es ist vielleicht nicht auf Ihrem Computer. Diese generischen Familien dienen jeder Schriftart, die in diesem generischen Familiengenre verfügbar ist, also wird es nach dem Standard des Betriebssystems für kursive oder serifenweise suchen und das ist, was es dienen wird. Wir haben so genannte Web Safe Fonts. Websichere Schriftarten mit dieser Liste von sechs Schriftarten, die sie fanden, dass ihre Dienste auf fast jedem einzelnen Computer verfügbar waren. Also Arial, Georgia, Verdana, Kurier, Trebuchets, Times New Roman, das sind Dinge, die Sie häufig auf den meisten Computern sehen. So können Sie ziemlich sicher mit jedem dieser sein. Wir haben jedoch auch den Font-Stack und der Font-Stack ist eine Möglichkeit, Fallback-Schriftarten zu bedienen. Das bedeutet, dass Sie Ihre erste Schriftart auswählen können und wenn diese Schriftart nicht verfügbar ist, wird stattdessen die nächste Schriftart auf der Liste an den Computer gesendet. Also, lassen Sie uns so etwas wie sagen: „Ich wollte Helvetica dienen.“ Ich könnte Helvetica schreiben, aber dann möchte ich sagen, wenn der Computer keine Helvetica hat, stattdessen diese Schriftart servieren und ich würde das mit einer kommagetrennten Liste tun. So kann ich einigen Eigenschaften mehrere Werte mit einer durch Kommas getrennten Liste von Werten bereitstellen. Also natürlich werden Sie keine kommagetrennten Werte für das Schriftgewicht haben , weil Sie nicht fett Komma normal sagen werden. Die Schriftart wird fett sein. Schriftfamilie ist jedoch die Situation, in der Sie so etwas tun möchten und in der Arbeit gültig sein kann , da Sie mehrere Schriftarten angeben können, falls Sie einen Fallback verwenden müssen. Also, sagen wir, es gibt keine Helvetica dienen Arial statt. Wenn es keinen Arial gibt, wird die letzte Schriftart, die wir in unserem Schriftstapel auflisten möchten , der generische Familienname sein. In diesem Fall sind das alles serifenlose Schriftarten, also werde ich sagen, wenn Sie keine Helvetica haben und Arial nicht haben, um zu dienen, was auch immer serif Sie auf dieser Maschine ausgraben können. Also, speichern wir das und aktualisieren Sie die Seite. So können Sie das Update hier sehen. Was ist, wenn ich eine verrückte Schrift einfüge, eine Schriftart, die ich nicht habe? Lucida ist eine Schriftart, die ein paar verschiedene Versionen hat. Diese grundlegende Version von Lucida, Ich habe nicht auf meinem Computer. Also, wenn ich es hier hinzufüge und auf Speichern und Aktualisieren klicke, bekomme ich immer noch den nächsten in meinem Font-Stack, weil ich diese Schriftart nicht habe. Wenn Sie keine Schriftart haben möchten, die mehrere Namen enthält, wie Times New Roman, tun Sie dies, indem Sie es in Anführungszeichen setzen. Also, „Times New Roman“ und kommen Sie zurück hier und jetzt sehen Sie meine Schriftart auf Times New Roman umgestellt. Die gute Nachricht ist, als die Jahre vergingen, die Menschen die sechs websicheren Schriften satt haben und einen Weg gefunden haben, Technologie zu finagle, um Webfonts zu verwenden, was bedeutet, dass wir tatsächlich mehr Schriftarten kontrollieren. Also, wir werden mit diesen sechs in unseren Website-Schriften beginnen, aber keine Sorge, Sie werden später mehr Auswahl haben. Also, ich werde meinen Absatztext auf eine Serife setzen , weil das manchmal leicht zu lesen sein kann und ich werde es nach Georgia senden, mit einem Backup von Serifen und für meine Überschriften werde ich sie zu Verdana machen. Also werde ich sagen, Font-Familie Verdana und die Unterstützung dafür wird eine Sans-Seriif sein. Dasselbe für meine H2 Font-Familie Verdana, serif. Ich werde das retten, komm zurück. Also, ich habe das geändert. Ich liebe die Italic und Verdana nicht wirklich zusammen. Also, ich werde das ausziehen. Also werde ich diesen Schriftstil entfernen. Das ist ein bisschen besser für mich. Das werde ich vorerst mitmachen. Also, unsere Schriften sehen ein bisschen besser aus. Allerdings ist dieses Blau irgendwie schrecklich. Also, im nächsten Video, lassen Sie uns einen Blick auf Farben, insbesondere Textfarbe und Hintergrundfarben und sehen, wie wir etwas davon anpassen können. 10. Textfarbe und Hintergrundfarbe: Also, wir mögen es an unserer CSS-Farbeigenschaft zu haben, aber im Moment haben wir einfach dieses schreckliche Blau. Nun, es gibt verschiedene Möglichkeiten, wie wir unsere Farbwerte für unsere Farbeigenschaft definieren können . Wenn wir blau sagen, ist das, was als Farbname oder Schlüsselwort bekannt. Es gibt ein paar verschiedene Keyword-Optionen, die wir verwenden müssen. Hier sind einige Beispiele. Sie können sehen, dass wir Dinge als schwarz, weiß, kastanienbraun, fuchsia definieren können, das ist einer meiner Favoriten zusammen mit Aqua, Gelb, Olive, Limette, Grün. Es gibt einen Haufen zur Auswahl, aber sie erinnern alle Mitte der 90er und vielleicht wollen wir etwas mehr Kontrolle über unsere Farbe. Keine Sorge, das können wir tun. Wir können das mit diesen anderen Farbwert-Optionen tun. Der erste, den wir betrachten werden, ist hexadezimal. Hexadezimale Notationen im Grunde, um die roten, grünen und blauen Werte zu finden , wobei entweder drei oder sechsstellige hexadezimale Zahlen verwendet werden. Es gibt ein paar verschiedene Möglichkeiten, wie Sie eine hexadezimale Zahl erhalten können. Wenn Sie ein Bildbearbeitungsprogramm haben, wie Photoshop , sehen Sie oft die Farbauswahl hier drüben, und wenn Sie sich bewegen und die Farbe ändern, ist der Wert hier unten unsere hexadezimale Zahl. Also, vielleicht will ich ein Blau, das etwas zähmiger ist, vielleicht wie ein Blaugrün wie dieses. Was ich tun kann, ist diese Zahl zu kopieren, diese hexadezimale Zahl, gehe zurück zu meinem Sublime Text, und dann werde ich in Sublime Text unser Schlüsselwort blau loswerden. Um zu sagen, dass wir eine hexadezimale Zahl machen, beginnen wir mit dem Pfundzeichen und fügen dann unsere sechsstellige Zahl ein. Von dort aus klicken wir auf Speichern und dann lassen Sie uns eine Vorschau im Browser erneut anzeigen. Also, wenn ich zurückkomme und mich erfrischen, sieht man, dass Blau nicht mehr so intensiv ist. Sie werden immer noch sehen, dass es etwas Blau auf dieser Seite gibt und das ist eigentlich für unsere Links. Standardmäßig werden unsere Browser-Standardeinstellungen alle unbesuchten Links blau. Aber unser Absatz ist vorerst eher von diesem blau-grünen und sieht etwas ruhiger aus. Also, wir werden das ändern. Wir werden dies zu einem grauen Wert machen und wir werden den Grauwert von 333333 verwenden, ich werde das speichern, aktualisieren. Dort habe ich jetzt graue Texte. Hexadezimalzahlen können drei- oder sechsstellig sein, da Sie eine Verknüpfung für sie schreiben können, wenn Sie sich wiederholende Zahlen haben. 333333 ist das gleiche wie 333. Wenn Sie eine Zahl wie ff3300 hätten, könnten Sie sie auch als f30 schreiben. Der Browser liest das als doppelte Wiederholung. In diesem Fall können Sie also jederzeit, wenn sich Ihre beiden Ziffern für Ihre roten, grünen oder blauen Werte wiederholen, eine Verknüpfung vornehmen. Wir werden jetzt 333 haben. Wir können das als unseren hexadezimalen Wert speichern, aber wir haben andere Optionen zusätzlich. Wir haben auch RGB oder rot, grün, blau Werte. Also sagen wir, ich wollte meine Texte in lila Farbe machen. Ich könnte diesen RGB-Wert hier greifen. Also 129, 45, 112 und ich könnten das in Sublime Text stecken. Ich werde unsere hexadezimale Zahl loswerden und einen RGB-Wert ausprobieren. Ich schreibe RBG und in Klammern, und mein Wert für das Lila wird in Klammern gehen. Wenn ich also zurückschummeln und mir ansehe, was das war 129, 45, 112, kann ich zurück gehen und 129, 45, 112 sagen. Diese Werte sind roter oder grüner Wert oder blauer Wert. Die durch Kommas getrennten Werte gelten für diesen RGB. Wenn ich das speichere und zu Chrome zurückgehe und aktualisiere, habe ich jetzt diese violette Farbe im RGB-Wert. RGBA ist ein weiterer Wert, den wir haben, und das steht für, rot, grün, blau, alpha. Wir können die Alpha-Zahl für Transparenz verwenden. Wenn ich also unseren RGB auf RGBA umstelle und dann ein weiteres Komma für einen anderen Wert hinzufüge , ist es standardmäßig ein Wert von 1, und das heißt, dass es vollständig undurchsichtig ist. Wenn ich das auf etwas wie 0,5 ändere, wird das die Deckkraft zu 50 Prozent machen. Also gehen wir zurück zu Chrome, und Sie werden sehen, wenn ich aktualisiere, das verblasst, weil wir die Deckkraft auf die Alpha-Ebene nach unten auf 0.5 setzen. Das ist also ein bisschen darüber, wie Sie RGB und RGBA verwenden. HSL und HSLA sind diesem sehr ähnlich, außer sie stehen für Farbton, Sättigung, Leichtigkeit. Wenn Sie Photoshop nicht haben, ist das okay. Es gibt auch viele Farbwähler online. Diese Seite ist colourlovers.com und Colour Lovers zeigen einige häufig verwendete Paletten. Wenn wir voran gehen und nur einige Paletten durchsuchen, kann dies Ihnen einige Ideen von Farbpaletten geben, die Sie auf Ihrer Website verwenden könnten oder die Sie dazu inspirieren, verschiedene Farben auf Ihrer Website zu verwenden. Sie könnten darauf klicken und mehr erfahren, wenn Sie eine Farbpalette wie diese für „Ich verlange einen Pfannkuchen“ mögen . Wenn wir nach unten scrollen, ich bin mir nicht ganz sicher, ob ich einen blauen Pfannkuchen will, aber ich mag das Aussehen dieser Palette. Sie können sehen, dass sie Ihnen die Farben hier zeigen, und Sie können sehen, dass sie Ihnen sowohl den Hexadezimalwert als auch den RGB-Wert geben. Sie könnten also diese Werte in Ihr CSS stecken, wenn Sie so etwas verwenden möchten. Also könnte ich das kopieren, zurück zu Sublime Text. Ich benutze RGB und nicht RGBA, also werde ich das hier wechseln und das einfügen. Jetzt, wenn ich zurückgehe, verwende ich den Grauwert, den ich von hier kopiert habe. Dies ist HSL Picker, und HSL Picker gibt Ihnen ein wenig wie ein Schieberegler hier, und Sie werden sehen, wie ich Dinge bewegen, es ändert die Farbe hier Sie können alle Arten von Werten ändern , bis Sie die Farbe erhalten, die Sie wollen. Hier unten ist die Deckkraft oder Alpha-Ebene, so dass Sie sehen können, dass Sie sich dort ändern. Lasst uns das auf 1 stoßen. Wir können das sehen. Jetzt wechseln wir Leichtigkeit. Wenn Sie das mögen, könnten Sie entweder die Hexadezimalzahl, den RBGA-Wert und dann den HSLA-Wert erfassen den RBGA-Wert und , der auch Prozentsätze für die Sättigung und Helligkeit verwendet. Nehmen wir an, ich mag diese grüne Farbe, und ich mag den HSLA-Wert, ich kann den kopieren, zu meinem Sublime Text zurückkehren, und dann kann ich die Farbe meiner H1s ändern, indem ich diesen einfach einfüge, auf Speichern klicke und zurück gehe. Jetzt sind meine Überschriftenebene grün. Colorpicker.com ist ein weiterer Farbwähler ähnlich dem Photoshop-Wert, und Sie können sehen, ob Sie einfach anpassen können, um eine Farbe daraus zu wählen. Sie können sich andere Tools wie kuler.adobe.com ansehen. Ich frage mich, ob das farblich ausgesprochen werden soll. Ich bin mir nicht wirklich sicher. So oder so, wenn es einen Farbwähler hat, merke ich, dass ich diese Dinge nicht so oft laut aussage, aber man kann hier eine Grundfarbe einstellen und Dinge optimieren und man kann sagen, ob man monochromatisch oder ergänzen und es gibt Ihnen Vorschläge für eine Farbpalette, die Sie verwenden können, zusammen mit den RGB- und Hexadezimalwerten, die Sie in Ihren Dokumenten verwenden können. Es gibt also eine Menge Werkzeuge da draußen. Wenn Sie nur CSS-Farbe in einer Google-Suche machen, erhalten Sie eine Tonne von ihnen, die Sie hoffentlich in einigen Farbauswahl inspirieren wird. Also werde ich das auswählen. Jetzt wieder bei meinem Code, sage ich Farbe und füge sie dort ein. Sie werden bemerken, dass, wenn ich da rauskopiere, es für die Buchstaben in diesem Großbuchstaben war. Es spielt keine Rolle. Groß-/Kleinschreibung wird nicht beachtet. Ich werde nur meinen Kleinbuchstaben konsistent machen. Ich kann auch meine Schriftartfamiliennamen in Kleinbuchstaben ändern, wenn ich das konsistent halten und dann speichern möchte . So können Sie sehen, dass Sie alle Arten von Werten mischen können. Sie können RGB, HSL, HSLA, hexadezimal haben. Jeder der Werte funktioniert für diese Farben. Speichern Sie das, aktualisieren Sie hier. Jetzt werden Sie sehen, dass wir einige weitere Farben auf unserer Seite haben. Nun, was ist, wenn ich alle unsere Textfarbe auf einmal ändern möchte? Was ist, wenn ich die Stile des Browsers überschreiben und alles auf unserer Seite in eine Farbe setzen möchte? Gibt es eine Möglichkeit, das zu tun, außer nur auf jeden einzelnen, das p, das H1, das H2? Die Antwort ist ja. Wäre das nicht gemein, wenn die Antwort nein wäre? Keine Sorge, es ist ja. Was wir also tun können, ist, anstatt unsere Eigenschaften auf etwas wie unserem Absatz oder H1 oder H2 zu definieren , wir haben etwas anderes, das wir verwenden können. Im Moment haben wir gerade Farbeigenschaft auf das Tag angewendet , das diesen spezifischen Text umgibt, aber wir haben ein anderes Tag, das unseren H1 oder H2 oder Absatztext umgibt. Das ist unser Körperelement. Genau wie unsere H1 oder H2 können wir auch Stile auf den Körper anwenden. Also zurück hier rüber, denn jetzt werde ich unsere Farbeneigenschaften entfernen. Dann werde ich ein neues hinzufügen. Ich werde es oben auf der Seite hinzufügen, und das wird für unsere Körperelemente sein. Also jetzt im Körper, genau wie jedes andere Tag und in jedem anderen Selektor, kann ich Farbe sagen. Dann kann ich eines unserer Keywords verwenden, wenn ich hier will, wie grün. Ich werde speichern und zurück zu Chrome gehen, aktualisieren und jetzt können Sie minus die Links sehen, die von den Browser-Standardeinstellungen gesteuert werden und minus den Text im Logo, der ganze Text ist grün, weil es auf alle unsere kaskadiert -Elemente. Das ist also eine der Möglichkeiten, wie wir das body-Tag verwenden können, um Stile anzuwenden. Eine andere Sache, für die wir das body-Tag verwenden können, ist, die gesamte Hintergrundfarbe unserer Seite zu ändern. Also im Moment haben wir dieses wirklich helle Weiß und vielleicht wollen wir das nicht. Was wir tun können, ist eine andere CSS-Eigenschaft zu ändern, die Hintergrundfarbe Eigenschaft. Wir wollen das auf unser Body-Tag anwenden, weil unser Körper unsere gesamte Seite hält. Also lasst uns weitermachen und das tun. Also jetzt werden wir eine neue Eigenschaft verwenden, und diese Eigenschaft ist Hintergrundfarbe: und dann, wie wir in der Lage waren, unsere Schlüsselwörter oder RGB- oder Hex-Werte zu verwenden, können wir dasselbe tun, um hier eine Hintergrundfarbe zu definieren. Also, wenn ich wollte, könnte ich so etwas wie Aqua sagen. Ich bin sicher, dass Sie sich alle vorstellen, wie schön das aussehen wird, wenn ich es speichere und im Browser aktualisiere. Wenn ich mich erfrischen, schau auf deine Augen. Das ist ein helles Webdesign, aber wie Sie sehen können, hat das funktioniert. So können wir unser body-Tag verwenden, um das allgemeine Aussehen unserer Seiten zu steuern, und dann können wir später überschreiben, wenn nötig. In diesem Fall möchten wir vielleicht zurückgehen und einige dieser Werte optimieren, weil es ein wenig stark aussieht. Nehmen wir an, ich wollte es auf Weiß zurücksetzen. Nun, ich habe ein paar Möglichkeiten, das zu tun. Ich kann unseren Keyword-Wert verwenden, der das Wort weiß ist. Ich könnte einen hexadezimalen Wert wie Zahl ffffff verwenden , der auch der hexadezimale Wert für Weiß ist. Wir könnten eine Abkürzung verwenden, die nur fff wäre. Der RGB-Wert dafür wäre 255, 255, 255. Wie Sie sehen können, gibt es viele verschiedene Möglichkeiten, unsere Eigenschaftswerte zu definieren. Bis zu Ihnen, was auch immer Sie verwenden möchten. Denn jetzt könnten wir es auf Weiß setzen. Aber wenn Sie etwas vielleicht ein wenig weniger hell wollen, zwicken Sie das einfach zu einer off-white Farbe, in diesem Fall den Hex-Wert von efebdf, und Sie können sehen, dass das ein wenig einfacher für die Augen ist. Ich werde auch die Farbe unseres Textes von Grün zu diesem Hex-Wert von 27211f ändern. Speichern Sie das, aktualisieren Sie, und jetzt sind wir zurück zu einer traditionellen dunkleren Farbe. Das ist ein bisschen schwarz. Lassen Sie uns auch die Farbe unseres H1 ändern , weil wir wollen, dass es anders ist als unser schwarzer Körpertext. Wir werden Farbe sagen, und lassen Sie uns den Hex-Wert hier hinzufügen. Das wird also e96f4b sein. Jetzt wird es uns ein wenig wie ein Lachs-ish geben, wie ein Lachs-rosa rot, und jetzt wird uns wissen lassen, dass dies eine größere Überschrift ist. Wir könnten die gleiche Farbe auch auf unsere H2s anwenden, wenn wir wollen. Also, wir können entweder kopieren und einfügen oder neu schreiben. Wir werden das einfach kopieren und einfügen. Jetzt haben wir die Farben für viele Elemente auf unserer Seite sowie für unsere Hintergrundfarbe angepasst . So wenden wir Farben an. Werfen wir einen Blick auf die nächste Lektion über die Umwandlung unseres Textes auf etwas mehr Arten als nur die Größen und Schriftfamilien, die wir bisher verwendet haben. 11. Grundlegender Textstil: Lassen Sie uns also einen Blick auf ein anderes Textstyling werfen, das wir mit CSS auf die Wörter auf unserem Bildschirm anwenden können. Hier ist unsere About Seite und für unsere Über Jon haben wir eine Überschrift, ein Bild, und wir haben einen Text. Nun, lasst uns den Text ein wenig hochtauschen. Zum Beispiel, was, wenn wir unsere Überschrift zentrieren wollen? Was ist, wenn wir wollen, dass About Jon in der Mitte der Seite erscheint? Nun, das können wir tun. Um dies zu tun, werden wir unsere text-align Eigenschaft verwenden. Also, unsere text-align Eigenschaft ist text-align. Wir haben ein paar verschiedene Eigenschaften dafür, aber wie wir unsere Tech-Center-Linie wollen, werden wir den Wert des Zentrums nutzen. Nun, wenn ich die Seite aktualisiere, können Sie sehen, dass About Jon jetzt auf unserer Website zentriert ist. Sie können Text-align anwenden: links oder rechts oder gerechtfertigt. Sagen Sie, wir wollten die Dinge auf der rechten Seite. Wenn wir das einfach nach rechts wechseln, können Sie jetzt sehen, dass unser Text auf der rechten Seite ist. Ich werde das wieder in den Mittelpunkt stellen, und ich werde auch alle unsere h2 zentriert machen. Also, jetzt werden alle unsere Überschriften, die wir bisher haben, zentriert auf der Seite erscheinen. Also, speichern Sie das, und jetzt können Sie sehen, unsere h1 und unsere h2 sind auf der Seite zentriert. Also, das ist text-align. Wir können auch eine Eigenschaft namens Text-Dekoration haben. Die gebräuchlichste Verwendung von Textdekoration ist es, unseren Text zu unterstreichen. Also, um Textdekoration anzuwenden, ist es Textdekoration und dann in diesem Fall werden wir sagen unterstrichen für unsere h1, und gehen Sie zurück und sehen, wie das im Browser aussieht. Ich kann sehen, dass unsere Überschrift eine Unterstreichung hat. Es gibt noch ein paar andere Werte, von denen einige ehrlich ein bisschen klebriger sind als andere für diesen, wie andere, die unseren Inspektor hier verwenden, um Ihnen ein paar von ihnen zu zeigen. Wir haben andere Optionen, wie Überstrich für Zeile über unserem Text, oder wir haben Zeile durch, und das bietet einige gestrichenen Text. Also, wenn Sie jemals Line-through, Overline oder Unterstrichen benötigen , so würden Sie das tun. In diesem Fall lassen Sie uns das zurücksetzen, um in unserem Inspektor hier zu unterstreichen , damit wir sehen können, wie es tatsächlich aussehen wird. Dies ist eine andere Eigenschaft, die ich mag. Also werde ich voran gehen und es auch in die h2 kopieren. Wir haben auch eine text-indent Eigenschaft. Nehmen wir also an, wir wollten Text-Einzug verwenden, um den Anfang aller unserer Absätze einzurücken. könnten wir tun. Also, in diesem Fall werde ich text-indent sagen, und dann einen Wert wie 20 Pixel. Speichern Sie das, aktualisieren Sie, und jetzt können Sie sehen, dass mein Absatztext 20 Pixel eingerückt ist. Denken Sie daran, dies gilt auch für meine Absatzfußkopie. Die letzte, die wir uns ansehen werden, ist text-transform. Text-Transform ermöglicht es uns, Dinge zu tun, wie unsere Buchstaben Großbuchstaben zu machen. Also, wir können sagen, text-transform: Großbuchstaben. Speichern Sie das. Jetzt, wenn ich aktualisiere, ist unser h1 alles in Großbuchstaben. Andere Werte, die wir dafür haben, sind Kleinbuchstaben, was unseren gesamten Text in Kleinbuchstaben umstellt, egal wie er in unserem HTML eingegeben wird, und wir haben auch Großbuchstaben, und wir haben auch Großbuchstaben, die den ersten Buchstaben Großbuchstaben Großschreibung , der passiert ist zu sein, wie wir es sowieso in unserem HTML geschrieben haben. Also, Sie werden dort keine Unterschiede sehen. Es gibt also ein paar Blicke auf einige Dinge, die wir mit unserem Text machen können und wie wir sie auf unserer Seite kontrollieren können. Schauen wir uns einige fortgeschrittene Dinge in unseren nächsten Lektionen an, wie Buchstabenabstand und Zeilenhöhe. 12. Erweiterte Textsteuerung: wir einen Blick auf unseren Absatztext und nehmen Sie hier ein paar Anpassungen vor. Lassen Sie uns zuerst dieses kühne, es ist ein bisschen intensiv und wir brauchen das nicht wirklich für die Textkopie auf der Seite. Denken Sie daran, dass wir das entweder tun können, indem Sie dies auf Schriftstärke normal ändern, aber standardmäßig war unser Absatztext normal, also brauchen wir das nicht. Also, wir können einfach entfernen, diese Regel ganz und jetzt können Sie sehen, wir sind zurück zu nur Georgia normales Gewicht Text. Ich finde jedoch, dass es ein wenig schwer ist, zwischen den Zeilen zu lesen , und ich möchte das ein wenig mehr trennen. Ich möchte etwas Luft dazu hinzufügen. Oft haben Sie vielleicht gehört, dass dies als Letting bezeichnet wird, in CSS, im Gegensatz zu einer Vermietung Eigenschaft, nennen wir es eine Zeilenhöhe Eigenschaft. Also, wenn ich zu unseren Absätzen gehe, kann ich Zeilenhöhe sagen und dann kann ich es auf den Wert setzen, den ich suche. Also, jetzt ist unsere Schriftgröße 20 Pixel, ich könnte es auf einen Pixelwert wie 40 Pixel setzen. Wenn ich hierher zurückkomme und aktualisiere, kann man sehen, dass die Zeilenhöhe stark aufgesprungen ist, was ziemlich cool ist, aber vielleicht ein bisschen zu viel. Wir können auch einheitlose Werte für die Zeilenhöhe tun. Also, wenn wir es wieder auf eins setzen und aktualisieren, können Sie sehen, dass wir wieder zu eng sind. Ich kann es auf einen Wert wie 1.5 setzen und jetzt können Sie sehen, dass es viel einfacher für die Augen ist, macht es mir einfacher, dies zu scannen und diese Absätze auf unserer Seite lesen zu können. Also, ich mag 1.5, vielleicht ist es ein bisschen, vielleicht will ich zu 1.4 gehen, das ist ziemlich gut. Ich kann das ziemlich leicht lesen und es ist wirklich gut, besonders wenn wir viel Körpertext haben. Also, ich werde meine Zeilenhöhe für jetzt als 1.4 verlassen. Aber fühlen Sie sich frei, mit dem Wert der Zeilenhöhe herumzuspielen und ihn so zu optimieren , dass Sie Ihre Leser Ihren Text sehen möchten. Wir haben noch ein paar andere Dinge, die wir optimieren können, wenn es um unseren Text geht. Wenn du dich erinnerst, haben wir unser Über John ganz Großbuchstaben gemacht. Wenn Sie Dinge in Großbuchstaben machen, kann das manchmal ein wenig eng und schwer zu lesen sein. Was wir also tun können, ist, dass wir die Kerning-Werte anpassen können, und das Kerning ist der Abstand zwischen jedem Buchstaben. Wir nennen es nicht Kerning in CSS, sondern wir nennen es Buchstabenabstand. Also, wenn ich zu meinem h1 zurückkomme, werde ich eine Buchstabenabstandseigenschaft anwenden und dann kann ich wieder verschiedene Maßeinheiten verwenden. In diesem Fall werde ich ein Pixel sagen und das wird ein Pixel Buchstabenabstand zwischen jedem unserer Buchstaben anwenden. Also, jetzt erfrischend, können Sie sehen, dass es ein wenig ausfällt, was ein bisschen schöner für unsere Überschrift ist. Die letzte Effekttext-CSS-Eigenschaft, die wir heute betrachten werden, ist Wortabstand und genau wie es klingt, das wird den Abstand zwischen unseren Wörtern beeinflussen. Wenden wir es auf unsere Absätze an, weil wir hier ein paar Worte haben. Also, Wortabstand und dann nur, damit wir die Dinge in Aktion sehen können, sagen wir 15 Pixel. Nun, das ist eine Menge Abstand, aber je nachdem , was du zu tun versuchst, vielleicht ist das deine Gasse, du könntest natürlich im Gegensatz zu 115 noch verrückter werden, wow, das ist überhaupt nicht leicht zu lesen aber vielleicht gehst du für einige Website Installation Kunst. Also, nehmen Sie nur zur Kenntnis, dass die Eigenschaft Ihnen zur Verfügung steht, ich werde den Wortabstand entfernen, weil ich möchte, dass der Browser es wie ein Standard rendert, der ziemlich es wie ein Standard rendert, der ziemlich einfach zu lesen ist, aber so würden Sie Ihren Wortabstand hinzufügen -Websites. Also sehen wir hier gut aus, Sie werden feststellen, dass eine Sache, die bisher noch nicht betroffen ist, unsere Listenelemente hier drüben sind. also in der nächsten Lektion einige der Dinge an, Sehen wir unsalso in der nächsten Lektion einige der Dinge an,die wir tun können, um unsere Listeneigenschaften zu ändern. 13. Auflistung der Eigenschaften: Also, wenn wir uns unsere Listenelemente ansehen, wollen wir ihnen auch etwas Liebe schenken. Im Moment haben sie nur das Browser-Standard-Styling. Wir können alles überprüfen, was bisher auf sie angewendet wurde. So können Sie hier sehen, dass sie die Farbe vom Körper haben, aber das ist es. Also, lassen Sie das ändern, weil wir wollen, dass sie auch etwas Liebe bekommen, und genau wie wir in der Lage sind, unsere Absätze, unseren Körper und unsere Kopfzeilen auszuwählen , können wir dasselbe mit unseren Listenelementen tun. Also, wenn man sich das anschaut, ist unsere professionellen Dienstleistungen ein ul mit li's gekennzeichnet. Also, was wir tun können, ist das li-Element als unseren Selektor zu verwenden und sie entsprechend zu gestalten. Ich werde gehen und das Ende unserer Seite fragen. Ich werde nur ein paar zusätzliche Renditen machen, nur damit Sie sehen können, was ich hier oben tippe, und hier werde ich li schreiben, und dann werde ich Farbe schreiben, und lasst uns die Farbe ein wenig optimieren. Lassen Sie uns sie 666 machen, die ein mittelgrau ist. Also, es gibt unsere erste Liste Änderungen, und Sie können feststellen, dass der Text und das Aufzählungszeichen , die wir hier sehen, angepasst, um diese graue Farbe sein. Sie werden auch feststellen, dass die Aufzählungszeichen in unserer ungeordneten Navigationsliste auch in grau geändert wurden, da dies auch ein li-Element ist. Lassen Sie uns auch die Schriftart hier ändern. Lassen Sie uns die Schriftfamilie auf Georgia setzen, und setzen Sie uns die Schriftgröße auf 16 Pixel. Schriftgröße: 16 Pixel. Wir werden das speichern, und es gibt unsere aktualisierte Liste. Aber was ist mit diesen Kugeln? Was passiert, wenn ich diese Artikel nicht wirklich mag? Nun, wir können das auch mit unserer List-Stil-Eigenschaft ändern. Also, um die Kugeln zu ändern, werden wir List-Style-Typ sagen, und dann können wir es zu einer Vielzahl von verschiedenen Optionen wechseln. Standardmäßig handelt es sich also um eine Disc. Wir können es auch ändern, um Kreis, und jetzt können Sie sehen, sind ungefüllte Kreis. Es gibt auch eine Auswahl von Dingen wie quadratisch, und jetzt haben wir quadratische Kugeln. Wenn du keine Kugeln willst, kannst du das auch haben, und dazu würdest du keine sagen, und jetzt haben wir keine Kugeln. Aber jetzt lassen Sie es uns wieder auf Platz setzen, denn es ist hip, quadratisch zu sein und Jon Arbuckles Welt und in allen unseren. Also, jetzt haben wir quadrierte Listenelemente. Wenn Sie eine geordnete Liste verwenden, möchten Sie möglicherweise auch das Aufzählungszeichen dafür ändern. Also, nur damit ich Ihnen zeigen kann, wie das aussieht, werde ich es vorübergehend zu einer geordneten Liste machen. Also, um das zu tun, schalten wir das einfach auf ein ol, ich komme zurück und ich erfrischen. Alles sollte jetzt gleich aussehen, denn anstatt die ul zu stylen, wir stylen die li und li sind auch in ol. Aber jetzt lasst es uns wechseln. also daran, dass, wenn ich dies standardmäßig abgenommen habe, geordnete Listen Zahlen haben. Also im Moment haben wir list-style-type decimal, was die Dinge standardmäßig mit einer geordneten Liste sind, aber wir könnten auch etwas wie decimal-leading-zero sagen, und wenn wir hier zurück kommen, können Sie sehen, dass eine Null vor unserer Zahlen, haben wir auch andere Optionen für geordnete Liste wie niedrigerer Alpha, und jetzt ist unsere geordnete Liste alphabetisch aufgezählt. Wir könnten auch nieder-römisch sagen, und jetzt haben wir niedrigere römische Ziffern für unsere Listen. Sie können also sehen, dass es viele Optionen dafür gibt. Ich werde dies wieder auf Quadrat setzen, und dann werde ich auch meine Übersichtsseite auf eine ungeordnete Liste zurücksetzen, weil wir in diesem Fall eine ungeordnete Liste eingeben und diese speichern. Also, das ist ein bisschen mehr über Listen, und in der nächsten Lektion werfen wir einen Blick auf Hintergrundbilder und wie wir anfangen können, mehr Bilder auf unsere Seite zu bekommen, indem wir CSS und nicht nur das Bild-Tag. 14. Hintergrundbild: Unsere Seite sieht in Ordnung mit diesem weißen Hintergrund, aber sagen wir, wir wollen ein wenig interessanter werden. Lassen Sie uns noch ein paar Bilder auf unsere Seite bekommen. Vielleicht wollen wir ein Bild für unseren Hintergrund unserer Website. Also, lassen Sie uns eines davon bekommen und wir können Bilder auf die gleiche Weise wie in HTML mit einem absoluten Pfad oder einem relativen Pfad verknüpfen . Nehmen wir an, ich möchte einige Johns Arbeit präsentieren und ich werde dieses Bild präsentieren und ich möchte es im Hintergrund unserer Seite. Nun, ich kann Bild sehen und ich kann den Link von hier greifen und dann lassen Sie es zu unserer Website mit CSS hinzufügen. Bisher haben wir gerade eine Hintergrundeigenschaft angewendet und das war unsere Hintergrundfarbe, aber wir haben andere Werte und Eigenschaften, die wir auch für unseren Hintergrund anpassen können, beginnend mit dem Hintergrundbild. Um ein Hintergrundbild zu schreiben, werden wir Hintergrundstrichbild schreiben und dann von dort aus müssen wir dem CSS sagen, wo das Bild ist, und wir tun das, indem wir URL schreiben und dann in Klammern wird die URL haben, zu der wir verlinken möchten. Das kann ein lokaler oder arelativer Pfad sein, oder in diesem Fall wir auf einen absoluten Pfad verlinken, eine Bilddatei, die irgendwo anders im Internet existiert. In Anführungszeichen werde ich diese Wikimedia Garfield und Freunde PNG einfügen, ich werde die Datei speichern, und dann schauen wir uns es im Browser an. Hier bin ich, und ich werde die Seite aktualisieren und wow. Ich dachte, wir waren schon mal beschäftigt, aber jetzt sind die Dinge zu einer ernsthaften Image-Party gegangen. Wie Sie sehen können, haben wir das Bild hier drin und das Hintergrundbild wiederholt sich durchgehend auf unserer gesamten Website. Egal wie groß oder klein dies ist, wir können sehen, dass das Hintergrundbild auf unserer Website ist. Wir sind in der Lage, anzupassen, wie dies mit einer anderen CSS-Eigenschaft wiederholt wird, die Hintergrundwiederholung Eigenschaft. Hintergrundstriche wiederholen und dann sind die Werte, die wir haben, die Standardwerte, die sich wiederholt, wir können sicherlich sagen, dass das ist, was jetzt passiert. Eine andere Sache, die wir haben, ist keine Wiederholung. Also, wenn wir dies auf keine Wiederholung umschalten, kommen Sie zurück und aktualisieren, können Sie sehen, dass das Bild nur einmal auf der Seite im Hintergrund ist. Da es im Hintergrundbild ist, wird der gesamte Text darüber sitzen. Hintergründe beginnen standardmäßig auch an der linken Position, eine Hintergrundposition von 0,0 geht von linken und oberen Werten. Wir können das auch anpassen, indem wir unsere Hintergrundpositions-Eigenschaft verwenden. Also, Hintergrund Bindestrich Position und dann derzeit, es ist 0,0, gleiche Sache wie sagen Null Pixel, Null Pixel. Wir können dies ändern, so dass es ungefähr 20 Pixel von links und 100 Pixel von oben ist und jetzt können Sie sehen, dass es von links 20 und von oben 100 bewegt wird. Wir können auch Schlüsselwortwerte dafür verwenden, so dass wir etwas wie Zentrum, Zentrum sagen könnten. Jetzt sehen Sie, dass das Bild vertikal und horizontal zentriert ist , basierend auf der Breite und Höhe unserer Seite. Wir könnten auch etwas sagen wie Mitte, oben und jetzt können Sie sehen, dass es von oben auf unserer Seite zentriert ist. Wir können Werte mischen, so etwas wie Mitte und 30 Pixel und das wird links und rechts zentriert, aber dann 30 Pixel von oben. Verschiedene Wiederholungswerte, die wir haben, sind keine Wiederholung, Wiederholung von Bindestrich X, und dann wird es entlang der X-Achse wiederholen, und dann haben wir Wiederholungsstrich Y, der, wie Sie vielleicht vermuten , entlang der Y-Achse genau so durch die Spitze unserer Seite. Das ist ziemlich beschäftigt und ein wenig schwer zu lesen, also wollen wir vielleicht eine andere Art von Hintergrundbild. Vielleicht wollen wir nur ein subtiles Hintergrundbild, vielleicht ein Rauschmuster. Wir könnten das tun, es ist ein Programm wie Photoshop, in dem ich gerade eine leichte Rauschpixelation auf eine Hintergrundfarbe angewendet habe, ich kann diese Datei dann speichern. Also, ich werde das als JPG speichern und ich kann die Qualität runter nehmen einige und das. Ich werde das einfach direkt in meinen Bilderordner speichern und ich werde es bg-noise.jpg nennen. BG nur für mich, lässt mich wissen, dass es sich um ein Hintergrundbild handelt und es sich um ein Rauschmuster handelt. Ich werde das in unserem John Arbuckle-Site-Ordner speichern, innerhalb unseres Image-Ordners. Nun, in unserem CSS, gibt es einen Beitrag, der zu diesem absoluten Bild verlinkt , was gut ist, weil wir aus urheberrechtlichen Gründen nicht wirklich mit denInhalten anderer Personenverlinken sollten Inhalten anderer Personen und/oder weil sie es entfernen könnten, wie wir keine Kontrolle über ihren Link zu Wikimedia so dass sie diese Dateierweiterung immer ändern oder löschen können. Lassen Sie uns also sicherstellen, dass wir unsere eigenen Dateien hosten. Um eine Hintergrundbild-URL zu erstellen, möchten wir im Wesentlichen dasselbe tun, als ob wir mit einem Bild innerhalb unseres Bildquellattributs verknüpfen würden . Derzeit, gerade jetzt, sind wir in styles.css. Wir müssen in unseren IMG-Ordner gehen und dann die bg-noise.jpg laden. Wir müssen in den Ordner img gehen und dann in einen Ordner gehen, geben wir unsere /bg-noise.jpg ein. Wenn ich das speichere und zurück zu Chrome und aktualisieren gut, so können wir sehen, dass unser Garfield-Bild ist weg und es ist wirklich schwer, hier zu sehen, aber Sie können sehen, wenn Sie wirklich nah aussehen, dass in der Mitte der Seite, gibt ist dieses Hintergrundgeräusch, das Y wiederholt. Ändern wir das, weil wir nicht wollen, dass es einfach Y wiederholt. Da dies ein Hintergrundmuster ist, wollen wir beide Wege wiederholen. Also, ich werde das speichern und wiederholen. Jetzt können Sie sehen, dass wir ein leichtes Rauschmuster auf der Rückseite unserer Website haben. Sie können jede Art von Mustern wie diese verwenden, Diagonalen, Streifen, Kreise, was auch immer Ihr Lieblings-Hintergrundmuster hinzuzufügen ist. Wenn Sie die lauten Hintergrundbilder mögen, behalten Sie das auch bei. Aber so fügen wir unseren Seiten ein Rauschmuster oder irgendeine Art von Hintergrundbild hinzu. Bisher haben wir uns wirklich nur unsere über Seite angesehen, mal sehen, wie unser CSS den Rest unserer Seiten beeinflusst und sehen, wie wir in Zukunft Anpassungen für bestimmte Elemente vornehmen können. Das kommt in der nächsten Lektion. 15. Hinzufügen von CSS-Dateien auf unserer gesamten Website: Bisher haben wir uns wirklich nur angesehen, wie die Stile unsere über Seite beeinflusst haben. Aber denken Sie daran, dass wir unsere Cascading Stylesheets site-weit anwenden. Also müssen wir sehen, was es mit unseren anderen Seiten macht. Also hier ist unsere Homepage, und wir können sehen, dass die Stile hier auch zusammen mit Texteinzügen, Zentrierung, Unterstrichen auf unseren h2's gekommen sind, alle diese wirken sich auf unseren website-weiten Inhalt aus. Hier ist unsere Arbeitsseite und zuletzt unsere Kontaktseite. Also fing ich an, sich das anzuschauen, vielleicht erkennen wir, dass wir einige globale Anpassungen vornehmen müssen. Vielleicht funktioniert die Zentrierung nicht, vielleicht funktioniert der Texteinzug nicht. Vielleicht wollen wir einige Anpassungen vornehmen und in der Tat unsere Überschrift zentrieren. Vielleicht wollen wir das Logo-Bild zentrieren. Wäre es nicht schön, wenn wir diese Kugeln über unsere Arbeit oder unseren Kontakt loswerden könnten , oder sie zumindest nebeneinander erscheinen lassen anstatt als diese Liste? Nun, wir können diese Dinge tun. Eine Möglichkeit, dies zu tun, besteht darin, unsere Text-align global auf unserer gesamten Website anzuwenden. Also, anstatt es nur auf unser h1 anzuwenden, was wäre, wenn wir unser Textausrichtungszentrum auf unser Körper-Tag anwenden? Also, Text Bindestrich ausrichten, dann hilft es, richtig zu buchstabieren auszurichten, und dann zentrieren. Jetzt können Sie sehen, wenn ich tue, dass alles auf dieser Seite zentriert ist, erfrischend die anderen Seiten werden Sie auch sehen, dass passieren, und da ist es, und da. Sie können sehen, dass dies um einige Dinge auf den anderen ein wenig lustig aussieht, also wollen wir das vielleicht nicht überall machen. Sie werden auch feststellen, dass, wenn wir Dinge wie unsere Listenelemente zentrieren, einige Aufzählungszeichen ganz links bleiben, und das sieht ein bisschen verrückt aus. Es scheint, als wäre das, was wir brauchen, ein bisschen mehr Kontrolle über die Dinge. Klar, wir können reingehen und alles sagen, was Li uns links ausrichten lassen, und wir können das einfach durch Überschreiben tun. Also, wir sagen, Text ausrichten links, und dann gehen diese zurück, aber das ist auch keine Lösung dafür. Was wir tun müssen, ist einzelne Dinge wie die Navigationsliste separat zu steuern als andere Listen auf unserer Seite, oder die Überschrift und das Header-Logo anders als unsere anderen Überschriften. Wir werden in der Lage sein, dies mit ein paar anderen CSS-Selektoren zu tun , über die wir noch nicht gesprochen haben, ID-Selektoren, Klassenselektoren und abhängige Selektoren. Werfen wir einen Blick darauf, wie wir unsere Website reparieren können , um ein bisschen mehr einzigartige Aspekte zu haben, in der nächsten Lektion. 16. Zusätzliche CSS-Selektoren: Anstatt dieses Text-Align-Center global anzuwenden, möchten wir es auf unser Logo-Bild anwenden. Gehen wir also zurück zu unserem CSS und entfernen Sie das Textausrichtungszentrum. Stattdessen wollen wir es nur auf unserem Header-Bild. Also, bisher, im Moment, haben wir nur auf Elementselektoren. Das heißt, wenn wir das zentrieren wollen, haben wir im Wesentlichen ein Bild und ein A, mit dem wir arbeiten können. Aber wir werden mehr als das wollen. Wir wollen nur diesen Link oder nur dieses Bild anvisieren. Die andere Sache, die wir für die Textausrichtung tun wollen, ist Wrap mit bis jetzt ist dieses Inline-Element. Denken Sie daran, dass wir sowohl über Inline-als auch Block-Elemente in unserer HTML-Klasse gesprochen haben , und Ankerlinks und Bild-Tags sind beide Inline-Elemente, was bedeutet, dass sie in der gleichen Zeile erscheinen, im Gegensatz zu Blockelementen, die eine harte Zeilenrückgabe durchführen. Um die Textausrichtung zentrieren zu können, müssen wir auf ein Element auf Blockebene anwenden. Also, wir gehen weiter und wir werden diesen Anker in einem Absatz-Tag verschachteln. Also, wir werden einige HTML hinzufügen. Also, P und dann Ihr schließendes P. Sie werden feststellen, dass es beim Hinzufügen von CSS zu einer Seite manchmal notwendig ist, zurück zu gehen und Containerelemente zu Ihrem HTML hinzuzufügen , um Dinge richtig zu stylen. Wir versuchen, dies so weit wie möglich zu vermeiden, aber manchmal werden Sie Dinge wie diese brauchen. Dann haben wir diesen Absatz, der jetzt unseren Anker und unser Bild hält. Gehen Sie zurück zu Chrome, denken Sie daran, dass wir die Dinge abgenommen haben. Also, wir haben keine Textausrichtung mehr in diesem Bereich, wir haben nur einen Absatz, der ihn umgibt. Also, was wir tun möchten, ist im Grunde Text-ausrichten diesen Absatz zentrieren. Wir wollen es nicht für alle Absätze tun, da dann jeder Absatz auf der Seite zentriert ausgerichtet ist. Was wir tun können, ist eine Klasse zu verwenden. Ein Klassenselektor ermöglicht es uns, ein oder mehrere spezifische Elemente mit einem Klassenattribut darauf zu zielen . Um eine Klasse anzuwenden, würden Sie einfach ein anderes Attribut hinzufügen. In diesem Fall werden wir sagen, Klasse gleich und dann den Namen dessen, was wir versuchen zu tun. In diesem Fall werden wir sagen, Klasse entspricht Logo. Wir wollen Dinge nennen, Dinge mit semantischer Bedeutung. Also, Dinge, die tatsächlich Sinn machen für das, was wir versuchen zu tun. Dieser Absatz hält unser Logo, also macht es Sinn für uns, dies eine Klasse von Logo zu nennen, im Gegensatz zu einer Klasse von Elefantengesicht, die überhaupt nichts mit dem zu tun haben würde , was wir tun, und wäre einfach verwirrend für Sie, Ihre Teamkollegen, alle, die über diese gestolpert. Also, lassen Sie uns mit etwas gehen, das Sinn für sie hat. Also, so etwas wie Klasse gleich Logo. Jetzt können wir in unserem Stylesheet Stile auf diese Klasse anwenden. Also, was wir sagen können, ist.logo, denn so machen wir eine Klasse. Dann wie jeder andere Selektor, unsere geschweiften Klammern, und dann werden wir unsere Deklaration anwenden. Also, Text-ausrichten Mitte. Also, alles mit einer Klasse von Logo wird text-ausrichten zentriert. Wenn ich zurückgehe und auf Aktualisieren klicke, ist nichts passiert. Nichts ist passiert, weil ich meine aktualisierte Kontaktseite nicht gespeichert habe. Also, lassen Sie mich sicherstellen, dass ich das rette, und ich erkannte das, weil der Kreis hier war. Ich komme zurück zu unserem Kontakt, ich klicke auf Aktualisieren, und jetzt ist das Bild zentriert, weil unser Absatz mit der Klasse des Logos text-align Center darauf angewendet hat. Sie können die Klasse des Logos auch auf etwas anderes anwenden, z. B. diesen Absatz hier. Nun wird dieser Absatz zentriert, da er auch eine Klasse von Logo hat. In ähnlicher Weise sind Klassenselektoren ID-Selektoren. IDs sind Klassen sehr ähnlich, da wir sagen, dass ID als Attribut mit dem Namen gleich ist, genau wie wenn Sie etwas ID als Logo benennen wollten. Zwei der Unterschiede sind anstelle von.syntax, um zu sagen, dass, wenn eine Klasse, verwenden wir ein Pfund oder einen Hashtag, um zu sagen, dass wir einen ID-Selektor tun. Sie können nur eine ID auf einer Seite haben. diesem Grund kann es irgendwie einschränkend sein, wenn Sie sich entscheiden, dass Sie dies für etwas anderes wiederverwenden möchten. Ich neige dazu, Klassen zu verwenden, weil sie wiederverwendbarer sind und für die Browserverarbeitung einfacher sind. Wenn Sie jedoch eine ID auf der Seite sehen oder wenn Sie den Code eines anderen übernehmen und IDs bemerken, ist es wichtig zu wissen, was sie tun. Moment werden wir jedoch bei der Verwendung von Klassen bleiben. Lassen Sie uns noch ein paar Klassen anwenden. Also, lassen Sie uns auch diese Navigationselemente zentrieren. Wir können das tun, indem wir eine Klasse auf sie anwenden. Wir werden eine Klasse hier von nav anwenden, für die Navigation. Denken Sie daran, dass sie in Zitaten gehen müssen, die ich einfach falsch gemacht habe, und ich konnte das leicht erkennen, weil es sich nicht zu gelb änderte. Also, Klasse gleich Zitat nav, Ende des Zitats. Wir haben jetzt eine Klasse, um diese spezifische UL zu adressieren, so dass wir nicht die Stile haben müssen, die wir für unsere Navigation auf anderen allgemeineren, ungeordneten Listen in unserem Dokument wollen . Also, jetzt in unserem CSS, werden wir einen anderen Klassenselektor tun, den nav Selektor, weil das ist, was wir gerade unsere Navigationselemente genannt haben. Ich ging mit nav anstelle der Navigation, nur weil es ein wenig kürzer und einfacher zu tippen war, aber immer noch ganz klar, worauf ich mich bezog. Also, hier wieder, kann ich sagen, text-align center. Wechseln Sie zurück zum Browser, aktualisieren Sie, und es funktioniert nicht. Es funktioniert nicht, weil Sie sich vielleicht erinnern, ich habe speziell text-align links auf unsere LI's geschrieben. Wir möchten das entfernen, weil alles wieder auf Text-align links gesetzt wurde. Wir werden ein wenig darüber nachsehen, warum das in der nächsten Lektion passiert, aber bis dahin ändern wir dies in Textausrichtung zentriert. Aber wieder, wir haben das Problem mit den Kugeln. Nun, was ist, wenn wir diese Kugeln einfach entfernen, weil wir sie vielleicht nicht auf unserer Hauptnavigation wollen . Denken Sie daran, wir können das mit unserem List-Styling tun. Also, Liste, Stil, geben Sie keine ein, dann, und aus unserer Navigation haben wir ein Textausrichtungszentrum und einen List-Style-Typ keine. Ich komme hierher zurück. Auch hier sind wir auf das Problem gestoßen, dass sich nichts geändert hat. Dies liegt daran, dass ich tatsächlich einen Listenelementtyp direkt auf einem LI-Element habe und das LI näher als die UL zu unserem tatsächlichen Text ist. Also werden wir das auch überschreiben müssen. Wie wir das tun, ist, indem wir etwas verwenden, das einen abhängigen Selektor genannt wird. Ein abgeleiteter Selektor zielt auf ein Element in einem anderen Element ab. Also könnten wir so etwas wie alle Anker innerhalb von P-Tags sagen und es anvisieren, indem wir P, Leerzeichen, A in unserem CSS sagen . Das würde alle Anker in meinen Absatz-Tags die Farbe Rot machen. Sie zielen darauf mit einem Leerzeichen zwischen ihnen ab. Wenn Sie P und A ohne Leerzeichen schreiben, würden Sie PA erhalten und dann würde das CSS nach einem PA-Element suchen, was nichts ist. Also, im Wesentlichen, es sagt alle Anker innerhalb eines Absatzes, lassen Sie uns den Stil anwenden. Nun, wir können auch Klassen und Elemente für unsere Nachkommen Selektoren mischen, also was wir in diesem Fall sagen können, alle LIs innerhalb des nav, und dann, anstatt diesen List-Style-Typ keine hier oben zu setzen, wollen wir das in hier hinein. Also, jetzt haben wir alle LIs innerhalb einer nav Klasse finden und dann den Listenstil entfernen. Also, wenn wir jetzt wieder hier rüber gehen, werden Sie sehen, dass diese Kugeln jetzt weg sind, weil wir den LI-Stil mit dem nav LI explizit außer Kraft gesetzt haben. So würden Sie einen abhängigen Selektor verwenden. Also, lassen Sie uns eine andere Sache mit unserem Navigationselement machen. Alle unsere Links werden als Elemente auf Blockebene angezeigt da ein Listenelement in LI eine Blockebene ist. Das heißt, wir haben die harte Rückkehr nacheinander. Was, wenn wir wollen, dass sie nebeneinander erscheinen? Nun, genau wie wir sagen können, dass die Dinge blockieren oder inline basierend auf Browser-Standardeinstellungen sind, können wir diese auch überschreiben. Also, im Moment, standardmäßig, unsere LI-Elemente sind alle Anzeigeblock. Anzeige ist eine weitere CSS-Eigenschaft und eine von denen wir überschreiben können. Obwohl, genau wie unsere Liste standardmäßig Aufzählungszeichen hatte, können wir diese überschreiben, wir können auch die Anzeige überschreiben. Also, anstelle von Anzeigeblock, lassen Sie uns sie inline anzeigen lassen. Wenn ich nun zum Browser zurückkomme und auf „Aktualisieren“ klicke, werden sie inline angezeigt, genau wie unsere m-Tags oder unsere Anker-Tags oder unsere Image-Tags. Also, das ist eine andere Sache, die Sie mit Ihrem CSS überschreiben können. Also, Dinge von Inline oder Block zu ändern ist etwas anderes, das wir mit unserem CSS steuern können. Ein weiterer Selektor, den wir haben, ist der universelle Selektor. Der universelle Selektor wählt alles auf der Seite aus. Um dies zu tun, verwenden wir ein Sternchen. Das Sternchen besagt, dass dieser Stil auf alles angewendet wird. Also, wenn wir Textdekoration über alles machen wollten, würden wir den universellen Selektor verwenden. Wir aktualisieren das, und dann, genau wie wir es gewünscht haben, gibt es unsere Textdekoration über Linie auf allen unseren Elementen. So würden Sie den universellen Selektor verwenden. Wir sahen, dass wir auf einige Dinge gestoßen sind, die unerwartet sein könnten. Dinge mit Vererbung und Kaskadierung. Lassen Sie uns in der nächsten Lektion ein wenig mehr über diese kaskadierenden und kaskadierenden Stylesheets schauen und sehen, wie es funktioniert. 17. Die Kaskade: In unserer letzten Lektion haben wir gesehen, wie wir noch Nachkommen Selektoren verwenden, um unsere Stile genauer zu gestalten, um sicherzustellen, dass unsere Listenelemente die Stile erhalten, die wir wollten. Dies ist, was als Spezifität bekannt ist, sowie Vererbung und Kaskade. Dies sind alle Möglichkeiten, die bei der Verwendung von CSS die Stile beeinflussen, die auf unsere Seiten angewendet werden. Also, werfen wir einen Blick auf einige der Dinge, die passieren können. Lassen Sie uns das darüber liegende loswerden, das wir auf unserem Universal-Selektor haben, das ist ein bisschen bizarr. Lasst uns das einfach nicht benutzen. Also auf Wiedersehen von dem. Lassen Sie uns nun ein wenig darüber reden, wie die Dinge auf unsere Seite angewendet werden. Im Moment wird unser Doppelpunkt auf unser Körper-Tag angewendet, und das wird auf den Rest der Elemente kaskadiert. Dinge wie unsere Absätze sind in unserem Körper verschachtelt was bedeutet, dass es den Stil vom Körper erbt. Alles, was in einem anderen Element verschachtelt ist, übernimmt diese Stile für Dinge wie Farbe. Da wir also sagen, dass die Körperfarbe 27211f ist, erhält der Absatz auch diese Farbe. Das ist das, was man als Vererbung bezeichnet. Was wir tun werden, wenn wir die Absatzfarbe ändern wollten, um etwas anderes zu sein, ist, dass wir Spezifität verwenden müssen, um zu sagen, dass ein Absatz eine andere Farbe haben sollte. Also, im Moment, da ist diese dunkelschwarze Farbe. Lasst uns das auffrischen, das Grau loswerden. Aber was, wenn wir nur wollen, dass unsere Absätze grün sind? Nun, wenn wir Farbe grün setzen, was passieren wird, ist, dass die Absätze grün sein werden. Schauen wir uns unseren Inspektor an und sehen, was los ist. Im Wesentlichen, wenn die Seite geladen wird, geht der Computer wirklich schnell durch und es beginnt oben in unserem CSS-Dokument. Also, es liest die erste Regel, die auf den Körper angewendet wird und sagt „Okay, lass uns alles schwarze Farbe machen.“ Ist das wirklich schnell? Wir können nicht einmal sehen, was passiert, wenn es zu unserem Absatz-Tag geht und sagt: „Okay, warte, jetzt steht es „Alle Absätze grün machen“. Es wechselt also von der Farbe Schwarz zu dieser Farbe von Grün, die das Körper-Tag überschreibt. Wir können in unserem Inspektor hier sehen, wo es steht „P Farbe grün.“ Wenn Sie nach unten scrollen, sehen wir tatsächlich die Körperfarbe grau und es wird ausgekleidet. Es wird ausgekleidet, weil es durch die Spezifität der Farbe Grün überschrieben wird, die auf unsere Absatz-Tags angewendet wird. Es kann Ihnen also zeigen, wie sich die Spezifität auf die Stile auswirkt, die auf unseren Text angewendet werden. Das ist wirklich wichtig, wenn du wissen willst, was los ist. Vielleicht erwarten Sie, dass das schwarz ist, aber es endet grün. Dieser Inspektor ermöglicht uns eine schnelle Möglichkeit zu sehen, wie die Stile tatsächlich angewendet werden. Was passiert, wenn wir unseren Absatz und unseren Körper wechseln? Als wir jetzt über diese Kaskade sprachen, sagten wir, es ging von oben nach unten. Also, zuerst sagte es, „mach alles schwarz“, dann sagte es, „mach alle Absätze grün.“ Wenn wir dazu neigen, dies zu sagen, glauben Sie, dass Absätze grün oder schwarz sein werden? Gehen wir zurück und finden es heraus. Sie können sehen, dass sie immer noch grün sind. Hier gibt es ein paar Dinge im Spiel. Erstens hat es sie schwarz gemacht, weil das auf dem Body Tag steht. Aber abgesehen davon, von oben nach unten zu gehen, die andere Sache, die wichtig ist, wenn es um CSS geht, wie nah oder spezifisch das Element ist, auf das wir zielen. Da also der Text das übergeordnete Element des Absatzes ist und das Absatz-Tag, das als grün definiert wird, näher am eigentlichen Text ist, wird der Stil, der gelesen wird, was näher an den Elementen angewendet wird. In diesem Fall liegt die Absatzformatvorlage grün näher am Text der Seite als am Textkörper. Eine andere Sache über die Spezifität ist die Stile, die auf das am nächsten gelegene Containerelement angewendet wird, derjenige sein, der auf den Text angewendet wird. Das ist definitiv ein bisschen knifflig. Es gibt ein paar Artikel, die ich in die Ressourcen für die Nachverfolgung setzen werde. Manchmal ehrlich gesagt, damit herumzuspielen und zu sehen, wie sich die Reihenfolge auf Ihren Code auswirkt, ist eines der besten Dinge, die Sie tun können. Im Moment sehen wir, dass wir immer noch diese p-Klasse von Logo auf unseren Text hier drüben angewendet haben, und das wird natürlich grün, weil unsere Absätze grün sind. Was denkst du, wird passieren, wenn wir sagen, dass das Logo rot sein sollte? Nun, lass es uns herausfinden. Farbe rot und jetzt, wenn wir aktualisieren, können Sie sehen, dass diese spezifische mit Rot überschrieben wird. So können Sie sehen, dass es versucht, die Farbe grün zu bekommen, aber das dunkle Logo hatte mehr inhärente Macht als das Absatz-Tag. Also, zuerst, es war so schwarz, dann war es grün. Aber die dunkle Klasse hatte mehr Einfluss auf das Styling. Sie können in diesem praktischen Artikel sehen, wir sprechen über den meisten Spezifitätswert und den geringsten Spezifitätswert. Style-Attribut, dann ID, dann eine Klasse, dann ein Element, ist, wie es funktioniert. Sie können sehen, dass es hier eine Art Punktesystem gibt. Also, Dinge haben Inline-Styling oder IDs oder Klassen, wie das bestimmt wird, welchen Stil es nehmen wird. Ich empfehle, diesen Artikel zu lesen und auch einfach wieder herumzuspielen und zu sehen, wie sich die verschiedenen Stile, Klassen und Reihenfolge auf die Elemente auf Ihrer Seite auswirken. Ich verspreche, je mehr du daran arbeitest, desto mehr wirst du dich daran gewöhnen und alles wird Sinn ergeben. Schauen wir uns an, wie wir Selektoren in unserer nächsten Lektion gruppieren können. 18. Selektoren gruppieren: Wir wollen also immer effizientes CSS und Code im Allgemeinen schreiben. Gehen wir zurück und säubern Sie unser CSS ein wenig, und stellen Sie sicher, dass alle unsere Seiten so aussehen, wie wir es wollen. Also, denken Sie daran, dass wir den Absatz mit einer Klasse von Logo um unser Logo angewendet haben, aber wir alle haben es auf unserer Kontaktseite getan. Gehen wir also zurück und aktualisieren Sie unser HTML, um sicherzustellen , dass alle unsere Seiten denselben Text haben. Ich werde es von der Kontaktseite nehmen, eine Kopie bekommen, und dann werde ich nur diese ganze Zeile aktualisieren. Speichern, speichern und speichern. Es ist ein wenig mühsam, aber wir wissen genau, was wir hinzufügen müssen, also stellen wir sicher, dass wir diese vier Seiten aktualisieren. Wir erinnern uns auch, wir werfen einen Blick auf die Klasse des Logos. Wir wollen nicht wirklich, dass die Klasse des Logos dort erscheint. Also, lasst uns das loswerden. Also, lassen Sie uns diese Klasse von Logo entfernen. Da gehen wir. Wir sind auch mit diesen grünen Absätzen übrig geblieben, die wir nicht wirklich wollen. Also haben wir uns ein wenig die Vererbung angesehen, lassen Sie uns das Rot loswerden, und lassen Sie uns das Grün loswerden, das hier oben ist. Ok. Also, die Dinge sehen ein bisschen besser aus als sie waren. Also, Sie werden feststellen, dass ich daran erinnert, den Header zu aktualisieren , aber wir haben auch die Navigation aktualisiert, richtig? Ich habe das Update nicht gemacht, als ich diese Änderung vorgenommen habe. Also müssen wir sicherstellen, dass wir die UL-Klasse von nav auf alle unsere ULs hinzufügen. Sie werden feststellen, dass viele HTML und CSS ein wenig mühsam erscheinen können, aber sobald Sie herausfinden, was Sie ein wenig mehr tun, Sie in der Lage sein, diese Straßensperren zu erkennen, die viel auftauchen. Dinge wie Fehlerbehebung und Dinge wie das Vergessen, Dinge zu kopieren, werden viel natürlicher. Derzeit werden Sie feststellen, dass unsere H1's und unsere H2's beide eine Textdekoration unterstrichen haben. Sie sind auch auf der Seite zentriert. Wie wir das bisher gemacht haben, ist durch Wiederholen von CSS-Eigenschaften und -Werten. Wir haben Erklärungen zwischen hier und hier wiederholt. Also, auf diesem, hatten wir die Farbe war beide gleich in der Farbe. Sie teilen auch Schriftgewicht normal, ihre Schriftfamilie, ihre Textausrichtungsmitte und ihre Textdekoration unterstreichen. Sicherlich muss es einen effizienteren Weg geben, das zu schreiben. Sonst würde ich wahrscheinlich nicht mit dir darüber reden. Aber ich bin so sagen wir ja. Wenn wir die gleichen Stile auf zwei verschiedene Elemente anwenden möchten, ob diese Sätze eines Elementselektors, eines Klassenselektors, eines ID-Selektors, eines davon können wir das tun. Wie wir das mit einer kommagetrennten Liste von Selektoren machen. Also, H1, H2 und dann geschweifte Klammern. Das bedeutet, dass die H1 und H2 beide erhalten, was ich hier hineingesteckt habe. In diesem Fall könnte ich Farbe von beiden entfernen und einfach zu dieser Eigenschaft dort oben auflisten. Ich könnte auch die unterstrichene Textdekoration von hier und von hier entfernen und auch die Textdekoration, die Schriftfamilie und das Schriftgewicht werden wiederholt. Also lassen Sie mich das schließen. Stellen Sie das da hin. Befreien Sie sich von der Schriftstärke, der Schriftfamilie und der Textausrichtung. Dort können Sie alles sehen, was auf H2 angewendet wurde tatsächlich auf unser H1 angewendet wurde. Also, effizienter, hätte ich das einfach schreiben können, aber ich wusste das nicht, bis wir durch dieses Experiment gegangen und vielleicht alle etwas auf einem H2 hier überschreiben wollen. Lassen Sie uns das so lassen, wie es ist, speichern und zurückkommen, und ich kann sehen, dass die Dinge genau gleich aussehen weil wir die gleichen Stile auf eine effizientere Weise anwenden. Wir können auch so etwas wie Hintergrundfarbe lila sagen. Jetzt können Sie sehen, dass das Lila sowohl auf unsere H1 als auch H2 angewendet wird , was beweist, dass dies tatsächlich funktioniert. Nehmen wir an, wir hatten das, sagen wir, wir wollen das auch auf unsere H3s anwenden. Wir können einfach die Kommatrennliste halten, so dass alle unsere Überschriften mindestens diese Basiskachel erhalten. Dann können wir außer Kraft setzen. Also, sagen wir, dass wir eigentlich nicht wollen, dass die Hintergrundfarbe des H2 lila ist. Wir können sagen, wir wollen, dass es gelb ist. Wenn wir das speichern, was der Browser tun wird, gehen wir durch und sagen, lassen Sie uns Hintergrund lila machen und dann die Kaskade erinnern. Also, es trifft dies zuerst und dann trifft es das. Also, wenn ich erneuere, ist es gelb. Wenn ich zu diesem H2 oben ziehe, wird es lila oder gelb sein? Es wird violett sein. Das zu schreiben ist das Gleiche wie das Schreiben. Es ignoriert alle anderen Kommas, also ist es genau das, was du jemals als erstes wolltest. Die Kaskade geht von oben nach unten und es sagt zuerst H2 lila und dann H2 gelb. So funktioniert das in Bezug auf die Gruppierung von Selektoren zusammen. Sie können dies dort verwenden, wo Sie es effizienter finden, den gleichen Stil auf eine Gruppe von Selektoren anwenden zu können . Lassen Sie uns einige dieser Schlüsselwörter loswerden, die wir hier haben, weil wir nicht wirklich brauchen, dass diese uns die Augen verschlüpfen. Lassen Sie uns auch unsere Überschrift entzentrieren. Unsere zentrierten Überschriften können mit den meisten unserer Technologie eine gewisse Ablenkung darstellen. Also, lasst uns das aus unserer allgemeinen Überschrift entfernen und jetzt die Dinge wieder nach links verschieben. Lassen Sie uns auch diese Texttransformation auf unserem H1 loswerden. Es ist ein bisschen, uns anzuschreien. Ich glaube nicht, dass wir wirklich jemanden wegen John anschreien müssen. Das ist ein bisschen mehr unter Kontrolle. Also, unsere About Seite sieht jetzt gut aus. Weniger schreien, es ist ein bisschen einfacher zu scannen und zu lesen, mit allem, was übrig ist, das mit dem CSS, das wir bisher gemacht haben, ausgerichtet ist. Unsere Kontaktseite sieht ziemlich gut aus und ist leicht zu lesen. Schauen wir uns an, wie unsere Homepage aussieht. Also, es sieht gut aus. Vielleicht können wir hier und da ein paar Anpassungen vornehmen. Vielleicht möchten wir unsere Überschrift auf unserer Homepage zentrieren, vielleicht möchten wir unser Bild und H1 auf unserer Homepage zentrieren. Also, bis jetzt haben wir eine Klasse, um das zu tun. Das ist unsere Logo-Klasse außer unserem H1 und unser Heldenbild ist nicht wirklich ein Logo. Also, wenn wir diese Logo-Klasse erneut auf andere Dinge anwenden wollen, lassen Sie uns es etwas etwas semantischer nennen. Vielleicht können wir es so etwas wie Highlights nennen , die zeigen, dass wir diesen Stil verwenden, um diese Informationen hervorzuheben. Es macht mehr Sinn, weil wir es jetzt nicht nur auf unser Logo anwenden. Natürlich wird der Computer dies gut lesen, ob Sie es Logo oder Highlight nennen oder nicht. Aber es wird für uns als Menschen einfacher sein, unsere Absichten zu verstehen, wenn wir auf so etwas stoßen. Wenn Sie dies an Kunden oder Teamkollegen übergeben, wenn sie etwas wie Highlight sehen, wird es mehr Sinn für sie machen, warum Sie dies tun und welchen Styleguide Sie versuchen, indem Sie etwas auf diese Weise benennen. Also, wenn ich auf unsere Seiten zurückgehe und mich daran erinnere, dass wir die Klasse des Logos entfernt haben. Also, wir müssen Highlight aktualisieren. Wir werden das rundum tun, Highlights ist Spaß Wort zu tippen. Also das ist in Ordnung, markieren Sie und jetzt lassen Sie es auch auf unserer Index-Seite anwenden. Für H1 können wir Klasse gleich markieren und dann fügen wir einen weiteren dieser Hervorhebungsabsätze um unser Bild hinzu. Also, P-Klasse gleich Highlight. Denken Sie daran, dass wir dies brauchen, um dies zu zentrieren und dann dieses Absatz-Tag zu schließen. Jetzt können Sie sehen, dass die Spitze unserer Homepage viel mehr zentrierte Elemente hat und es macht es ein bisschen mehr wie ein Homepage-Bereich aussehen. Im Voraus wird CSS natürlich in der Lage sein, weitere Anpassungen daran vorzunehmen. Aber im Moment sehen wir mit unseren Textstile und unseren Ausrichtungsstilen ziemlich gut aus. Vielleicht möchten wir auch die Stile für blockquote ändern, um zu erkennen, dass es etwas anderes ist. Lasst uns das auch tun. Also, unter unserem letzten Element, werde ich unsere Klassen ein wenig getrennt von jetzt zu halten. Ich werde Blockquote schreiben und hier werde ich den Font-Stil kursiv ändern. Kommen Sie zurück, und jetzt können Sie sehen, dass unsere Schriftart kursiv ist, was etwas Gemeinsames ist, was Sie sehen werden, wenn es um Anführungszeichen geht. Aber wir wollen wahrscheinlich nicht, dass Dr. Liz Wilson ein Zitat ist. Also, lasst uns das ändern und wir können das tun. Das ist auf unserer Homepage und wir sind in der Lage, dieses Blockquote P anzusprechen, wir können den Satz-Selektor nicht verwenden, oder? Da das beide Ps erhalten wird, können wir eine andere Klasse anwenden. Grundsätzlich sagen wir, wer das ist, der dieses Zitat sagte. Also, machen wir es einfach zu einer Klasse von wem. Zurück zu unserer styles.CSS direkt unter Blockquote, lassen Sie uns schreiben, wer und wir sagen Font-style normal. So überschreiben Sie diese Kaskade. Also, wenn wir jetzt aktualisieren, wird es wieder normal. Vielleicht möchten wir auch unsere Fußzeile ändern, damit Sie feststellen können, dass es ein bisschen anders ist als unser anderer Text auf unserer Seite. Vielleicht wird es ein helleres Grau machen und vielleicht werden wir es kleineren Text machen. Also, derzeit werden Sie sich daran erinnern, unsere Markierung für Fußzeile ist nur ein Absatz. Lassen Sie uns eine weitere Klasse hinzufügen. Also, Klasse gleich Fußzeile. Kommen Sie zurück zu unseren Stilen und wir sagen Punkt Fußzeile und lassen Sie uns die Schriftgröße auf 12 Pixel ändern. Nun ist es viel offensichtlicher, dass dies Fußzeilenkopie und nicht allgemeiner Körperinhalt ist. Wir haben auch diesen Aufruf zur Aktion für Hire John für Ihr Haustier Porträt Bedürfnisse! Lassen Sie uns diese Klasse geben und es ist ein Aufruf zum Handeln. Geben wir ihm eine Klasse von CTA. Wir wollen, dass es ein wenig anders erscheint, so dass es einige visuelle Aufmerksamkeit erregt. Also, wir sagen CTA und wir könnten etwas wie Schriftgewicht gefüllt sagen und sehen, wie das aussieht. Ich kann sehen, dass es ein wenig offensichtlicher ist, dass dies wiederum eine andere Art von Inhalten ist, die wir auf unserer Seite haben. In diesem Fall ein Call to Action. Also, schließlich haben wir die Seite Arbeit. Sie wissen, was ich das sage, ich sehe, dass wirklich der Text Unterstreichungen nicht zu gut auf den H1s funktionieren. Also, lasst uns wieder nach oben gehen und lasst uns tatsächlich die Textdekoration unterstreichen ganz entfernen und sehen, wie das funktioniert. In Ordnung. Nun, vielleicht brauchen wir es bei einigen der anderen, oder vielleicht sollten wir das ändern. Hier haben wir ein H1 und H2 und ein H3, Sie können sehen, dass es vielleicht ein wenig schwer zu sehen ist, was der Unterschied in Bezug auf das, was die Überschrift Organisation ist. Also, lassen Sie uns einige Anpassungen daran vornehmen. Lassen Sie uns unser H3 ändern, um eine andere Farbe zu sein. Geben wir ihm eine dunklere Farbe wie der Körpertext, den wir haben. Also, wir sind nicht wirklich mit war H2s. Lass uns einfach weitermachen und das in ein H3 ändern. Sie müssen natürlich nicht alles definieren. Wir werden sagen, dass die Farbe, lassen Sie uns das Pfundzeichen vorne hinzufügen wird diese dunkle schwarze Farbe wieder sein. Vielleicht möchten wir die Unterstreichung wieder zu unseren H2s hinzufügen. Also, eigentlich lasst uns das H2 zurückholen. Also, H2 Textdekoration unterstreichen und das sieht gut aus. Vielleicht wollen wir unsere H3s ändern und wir wollen, dass sie kursiv sind. Vielleicht wollen wir, dass sie kursiv sind und wir wollen die Schriftfamilie ändern. Machen wir hier die Schriftfamilie, Georgia. Ich meine, komm rüber und da sind unsere H3s. Sie können sehen, dass unsere Bilder in der gleichen Zeile wie unsere Links erscheinen. Das ist, weil denken Sie daran, dass es sowohl Bilder als auch Links Inline-Elemente sind. Wir können das auf verschiedene Arten anpassen. Erstens könnten wir das Link-Tag innerhalb eines Absatztextes innerhalb von nur für sich selbst setzen. Oder wir können Klasse hinzufügen und anstatt Anzeige in Linie zu tun, können wir eine Anzeige schwarz machen. In diesem Fall möchte ich zurück in das H2 tatsächlich einen Absatztext um ihn herum gehen. Weil wir argumentieren könnten, dass es sich um einen Absatz handeln könnte. Also, lasst uns das machen. Wir sagen Absatz, Absatz und ich werde mich nur einrücken, damit wir das ein wenig besser sehen können und ich werde das Gleiche hier oben tun, um die Lasagne Chronicles zu lesen. Also, P-Tag, P-Tag. Nun, wenn ich zurückkomme und aktualisiere, können Sie sehen, dass sie Absätze Stile erhalten und in der nächsten Zeile angezeigt werden. Ich kann auch sehen, dass unsere H3s vielleicht ein wenig mit der Schriftgröße verloren gehen, lasst uns die Schriftgröße ein wenig aufpumpen. Also, wir können Schriftgröße machen. Lassen Sie uns 22 Pixel machen und sehen, wie das aussieht. Das ist ein wenig besser im Vergleich zu unserem Absatztext, noch ein bisschen groß sein könnte. Lassen Sie uns unsere Absätze auf 18 Pixel ändern, um ein wenig zu chillen. Gehen wir zurück und sehen, wie sich das auf den Rest unserer Website auswirkt. Denken Sie daran, wenn Sie eine Änderung in Ihrem CSS vornehmen, wirkt sich dies rundum aus. wir sicher, dass die Dinge immer noch gut aussehen. Das tun sie. Sie sehen immer noch ziemlich gut aus. Wir haben einen Link hier unten verpasst, also stellen wir sicher, dass wir einen Absatztext hinzufügen. Also, für „Kaufen Sie diese CD“ Absatz und Absatz. Wenn ich verwirrt bin, ob ich Absätze zu so etwas hinzufügen sollte oder nicht , versuche ich mir vorzustellen, ob es hier keinen Link gibt. Wenn wir nur tippen würden „Kaufen Sie die CD“, das wäre ein Absatztext, so kann ich voran gehen und setzen Sie das in einen Absatz, gehen, um das zu speichern und zurückkommen. Nun, unsere Seite sieht ziemlich gut aus, bis auf eine Sache. Diese lila und blauen Links, die ziemlich knornig sind. Schauen wir uns in der nächsten Lektion an, wie wir unsere Verknüpfungselementstile anpassen können. 19. Link- und Pseudo-Klassen: Zuletzt wollen wir uns das Styling unserer Links ansehen. Also, wir haben diese lila und blaue Links, lila für besuchte Links und blau für unbesuchte Links, und lassen Sie uns sie mehr von unserem Stil machen. Also, ein Link ist genau wie jeder andere Elementselektor, was bedeutet, dass wir es mit seinem Elementnamen anvisieren könnten , der nur ein A ist Lassen Sie uns also unsere Links blau halten. Es wird wirklich ziemlich offensichtlich für alle sein, dass es eine Verbindung ist, indem es blau ist, aber lassen Sie uns es nicht so intensiv ein Blau machen. Also stattdessen, lassen Sie uns 42a795 verwenden, und Sie können voran gehen und natürlich wählen Sie ein anderes Blau oder wählen Sie etwas anderes, eine lila, gelb oder rot gibt es eine Menge von Farben für Sie zur Auswahl. Also, lassen Sie uns einfach unsere Links ändern, so dass es anders ist als die Standardeinstellung. Wir werden unsere Datei speichern und dann aktualisieren, und jetzt können Sie sehen, dass es weniger blendend blau ist. Außerdem änderten sich unsere violetten Links zu Blau. Nun, wir haben alle unsere A's als neu blau definiert, wir definieren jetzt auch unsere besuchten und unsere Link-Zustände. Links haben, was als Pseudo-Klassen bekannt ist und Pseudo-Klassen ist ein anderes Konzept. In diesem Fall haben wir Pseudo-Klassen für unsere Links. A-Link ist unsere Standard-Pseudo-Klasse, so sieht ein Link standardmäßig aus. A-visited wäre, wie wir eine andere Farbe oder jede Art von Texteigenschaft für Links liefern , die besucht wurden. Hover und Fokus, kann ähnliche Dinge tun, dies wäre eine gute kommagetrennte Gruppierungsselektoren und das passiert für Hover, es ist, wenn Sie tatsächlich mit der Maus über einen Link schweben, und Fokus ist, wenn Sie Ihre Tastatur verwenden, um navigieren Sie zu einem Link. Aktiv ist für, wenn Sie tatsächlich nach unten auf den Link drücken, bevor Sie auflassen. Also, das sind Link-Pseudo-Klassen. Also, lassen Sie uns sehen, wie wir das zu unserem Stylesheet hinzufügen können. Etwas anderes, das wichtig zu beachten ist, ist die Reihenfolge, in der Sie als wichtig definieren. Also, wenn Sie gehen, um sie alle zu finden, müssen Sie sie in dieser Reihenfolge Link besucht, schweben und dann aktiv zu tun . Sie können jedoch einige auslassen, so dass Sie es nicht in einem besuchten Link definieren müssen. In der Tat werde ich das auslassen. Aber wir können einen Link definieren, einen Hover und eine aktive. Wir brauchen auch tatsächlich keinen Doppelpunkt Link zu schreiben. Da standardmäßig a identisch mit der a-Verknüpfung ist. Also, jetzt lassen Sie uns einen Hover-Zustand hinzufügen. Also, wir werden sagen, ein Hover, Komma a-Fokus. Wir definieren unseren Hover und Fokus zur gleichen Zeit, weil sie den gleichen Effekt haben werden. Wir möchten sicherstellen, dass unsere Tastaturbenutzer, wenn sie die Tastatur verwenden, um durch unsere Links zu navigieren, können auch sehen, welchen Link dort derzeit auf und über zu besuchen. Dafür können wir einfach die Farbe ändern und die Farbe dunkler machen, wenn wir den Mauszeiger darüber bewegen. Ich werde nur den Wert 5f6b69 verwenden. Sie könnten etwas wie Schwarz verwenden oder 333 wäre eine hexadezimale Zahl für etwas dunkleres. Ich werde das retten, ich gehe zurück. Jetzt können Sie sehen, dass, wenn ich den Mauszeiger über einen Link führe, wir den Hover-Zustand definieren. Ändern Sie daher, wie der Link aussieht. Wenn ich meine Tastatur benutze, gerade jetzt drücke ich Tab, und der erste Link auf unserer Seite ist natürlich unser Logo, also das passiert, wenn ich über das Logo Tab, wir bekommen eine Gliederung. Dann gehe ich zu unserer Arbeit, und Sie können sehen, dass wir den blauen Umriss und die große Veränderung haben , weil wir auch unseren Fokuszustand definiert haben. Dies lässt uns Tastaturbenutzer wissen, auf welchen Link sie klicken. Wir können auch eine aktive definieren, wenn wir starten, so a-aktiv und vielleicht wollen wir etwas wie ominös sagen, die Hintergrundfarbe wird weiß sein. Jetzt, wenn ich aktualisiere, können Sie sehen, dass ich im Moment physisch meine Maustaste gedrückt halte, und in diesem Moment ist, wenn Sie den aktiven Zustand bekommen. Also, wenn ich loslasse, gehe ich tatsächlich auf diese Seite. Da ist mein Hover und mein Aktives. Wir werden aktiv für jetzt entfernen, also ist es nicht etwas, das wir wirklich brauchen. Aber wenn das etwas ist, das Sie tun möchten, vielleicht möchten Sie ein kleines Osterei eines Edelsteins für Leute hinzufügen , wenn sie auf Ihre Links klicken, und um ihnen etwas zu zeigen, wenn es aktiv ist, können Sie das sicherlich tun. So wenden wir verschiedene Stile auf unseren Link an. Denken Sie daran, Sie müssen nicht nur Farben austauschen, wir könnten auch Dinge ändern, wie vielleicht wollen wir die Textdekoration entfernen, also können wir Textdekoration keine sagen und dann vielleicht im Hover-Fokus, wir können den zugrunde liegenden Rücken setzen, also text-dekoration unterstreichen. Sie können sehen, wie das hier aussieht, also wenn ich den Mauszeiger über, erscheint die Zeile. Vielleicht möchte ich dann keine Farbänderung vornehmen, ich kann einfach eine Unterstreichung machen, während ich über schwebe. Ich werde das zurücksetzen, weil ich meine Links gerne schön und offensichtlich mache, und ich möchte, dass die Leute wissen, dass es ein Link ist, also lassen wir das unterstrichen. So werden wir unsere Links stylen. In unserer letzten Lektion werden wir uns eine Kurzschrift-Eigenschaft ansehen, damit wir Dinge etwas einfacher für Dinge wie Farben und Schriftarten und Hintergrundeigenschaften schreiben können . 20. Eigenschaften nach Stichworten: Bisher haben wir uns eine Art der langen Wege angesehen, Dinge zu schreiben. Wir haben uns die Farbkürze ein wenig angesehen. also daran, dass für hexadezimale Zahlen, wenn die Werte gleich sind. Also, 666666, springen Sie zu sechs dort, wir können tatsächlich eine 666 machen. Also, so würden wir Farbkürzel machen, aber wir verkürzen auch für andere Dinge wie Schrifteigenschaften und Hintergrundeigenschaften. Im Moment sagen wir, dass die Schriftgröße in unseren Absätzen 18 Pixel beträgt und die Schriftfamilie Georgia und Serif ist. Wir können das miteinander kombinieren, indem wir einfach „Font“ sagen. Also, Schriftart 18 Pixel, Georgia, Serif wird das gleiche sein wie das Schreiben, aber so würden wir eine Kurzschrift für die Schriftart machen. Sie können sehen, es ist immer noch die gleichen Stile, aber Schriftart 18 Pixel Georgia. Wenn es um Abkürzung geht, die Reihenfolge, in der wir Dinge schreiben, wichtig. Also, sagen wir auf unseren h2s, wir hatten Schriftgröße 40 Pixel, Schriftgewicht ist Fett, Schriftart Kursiv und Schriftfamilie, Fantasy. Ich bin immer auf der Suche nach einer Ausrede, um Fantasie zu verwenden, also werden wir sie in dieser Demo verwenden. Kommen wir hierher zurück und sehen, wie unsere H2s angepasst wurden. Nun, wenn wir das als Kurzschrift schreiben wollen, können wir, aber es ist wichtig, dass wir sie in einer bestimmten Reihenfolge schreiben. Also, wir werden „Font“ sagen, und die Reihenfolge für unsere Schriftart Kurzschrift beginnt mit Schriftart, also Kursiv. Dann, Schriftgewicht in diesem Fall, Fett. Dann werden wir unsere Schriftgröße zu tun, also 40 Pixel. Wenn wir irgendwelche Zeilenhöhen haben, könnten wir das auch hier setzen, und wir tun das, indem wir Schrägstrich schreiben. Wir könnten das wie Schrägstrich 80 Pixel Zeilenhöhe schreiben. Das wird sehr groß sein, und dann werden wir unsere Font-Familie setzen, also Fantasy. Also, wieder, nur um zu sehen, wie das aussehen wird [unhörbar] lassen Sie uns die Zeilenhöhe hier hinzufügen, damit Sie sehen können, und so schreiben wir es in einer Kurzschrift. Also, wenn ich all das lösche und wir aktualisieren, können wir sehen, dass ihre H2s immer noch den Stil bekommen. Sie fügen auch die Zeilenhöhe hinzu, die wir hinzugefügt haben, weshalb sie vor und nach dem Text etwas größer wurde, und so schreiben wir unsere Kurzschrift. Wenn Sie vergessen, wie man Kurzbänder schreibt, machen Sie sich keine Sorgen. Es ist nur eine Google-Suche entfernt nach einer Schriftart Kurzschrift, und Sie können viele Ergebnisse hier sehen. Ich mag die CSS-Tricks, also werde ich hierher kommen und nur sehen, ob sie mich an die Reihenfolge erinnern werden, also font-style, font-variant, font-weight und ein Beispiel dafür. Also, kursiv, kleine Kappen, normale 13 Pixel/ 150%, Arial, Helvetica, Sans Serif, so wirklich schöne Ressource um nur sicherzustellen, dass Sie sich erinnern, wie Sie Ihre Schriftart Kurzschrift schreiben. Wir können auch eine Kurzschrift für unseren Hintergrund schreiben. Also denken Sie daran, wir haben den Hintergrund auf unserem Körper, um den Lärm zu machen. Also, anstatt all diese zu schreiben, können wir stattdessen Hintergrund schreiben. Wir beginnen mit unserer Farbe, also efebdf, dann schreiben wir unser Hintergrundbild. In diesem Fall img/bg-noise.jpg. Dann sagen wir unsere Wiederholung, und da wir uns wiederholen , brauchen wir eigentlich nicht mehr die Hintergrundposition, also könnten wir sie einfach wieder oben links starten, das ist 00. Aber wenn Sie eine Hintergrundposition machen würden, wäre es am Ende nach Ihrer Wiederholung. Also, ich werde das löschen. Wir werden diese vier Zeilen los, aktualisieren, und alles ist natürlich immer noch gleich, weil wir das aufräumen. Wenn ich es hier auf keine Wiederholung umschalte, dann könnten Sie sehen, dass wir sie einfach in der oberen Ecke haben. Denken Sie daran, wir können immer diese Werte ändern, so 100 Pixel, 100 Pixel, und jetzt sehen wir unser Quadrat hat sich hier bewegt, 100 Pixel. Es ist irgendwie wie ein Word Waldo Spiel versucht, dieses Rauschmuster zu finden, aber das ist, wo es ist. Also, das sind einige Möglichkeiten, mit denen Sie effizientere CSS schreiben können, indem Sie diese Kurzbänder verwenden. Im nächsten Video schauen wir uns CSS-Kommentare an. 21. CSS Kommentare: So können Sie sich in HTML erinnern, wir hatten HTML-Kommentare, aber wir haben auch Kommentare für CSS. Wenn wir also unsere Stile ein wenig aufräumen, möchten wir einige Kommentare hinzufügen. Also zuerst werden wir den Körper über den Absatz bewegen , nur weil der Körper alles enthält. Also möchte ich das zuerst auf unserer Seite haben. Nun, was ich tun werde, ist eine Notiz für mich selbst hier oben zu schreiben und ich werde meine Notiz schreiben, um so etwas wie „Styles für den Körperhintergrund“ zu sagen . Nun natürlich wird dies versuchen, vom Browser gelesen zu werden, also muss ich etwas um ihn herum legen, das den Browser darauf aufmerksam macht, dass dies ein Kommentar ist. In CSS schreiben Sie Ihre Kommentare mit einem Schrägstrich, Stern und dann Stern, Schrägstrich, und Sie können in Sublimetext sehen, es wurde grau. Es spielt keine Rolle, ob es hier Räume gibt oder nicht. Ich lege nur gerne Leerzeichen, damit es einfacher zu lesen ist, und diese sind wirklich gut, um Notizen für sich selbst zu machen. Also, vielleicht hier unten, werde ich einen Kommentar machen, der sagt: „Überschriftenstile“, und hier unten werde ich anfangen, in Klassenüberschreibungen zu gelangen, weil wir hier Klassen verwenden, um unsere allgemeinen Elementselektoren zu überschreiben. Hier können Sie so viele Notizen hinterlassen, wie Sie möchten. Denken Sie daran, dass es für Personen möglich ist, Ihre Notizen anzuzeigen. Wenn jemand Ihre Quelle anzeigen und Ihr CSS anzeigen möchte, kann er dies natürlich sehen, also schreibe nichts Bedeutendes oder schreibe nichts in schlechtem Geschmack, weil Leute dies möglicherweise finden könnten. Sie können auch Kommentare verwenden, um bestimmte Codeabschnitte auszukommentieren , wenn Sie sehen möchten, wie die Dinge aussehen. Also was, wenn ich sage: „Weißt du was, ich weiß nicht wirklich, ob ich diese Farbe haben will, aber ich will sie auch nicht löschen.“ Also im Moment kommentiere ich es nur vorübergehend aus, komm zurück, und jetzt kann ich sehen, wie die Dinge aussehen, wenn sie in der dunkleren Körperklasse Farbe sind. Ich bin nicht wirklich ein Fan von dem, also gehe ich zurück und kontrolliere entweder Z oder gehe einfach voran und lösche diese. Ich bin mir nicht sicher, was diese Schriftfamilie Fantasie angeht, also möchte ich das vielleicht aussagen. Also werde ich das kommentieren, und ich kann auch einige Notizen für mich hinterlassen. Alles in den Kommentaren wird so groß sein und Sie können feststellen, dass das ein Kommentar ist, und ich kann hier eine Notiz hinterlassen, die besagt, „Schriftart Kurzschrift zum Beispiel“. Dann, wenn ich mir sagen will : „Kommentiert, weil es nicht hübsch aussieht.“ oder so etwas, und das ist ein Weg für mich zu wissen, warum ich das auskommentiert habe. Später, bevor ich mit meiner Website live gehe, möchte ich vielleicht alle diese Kommentare entfernen, aber für jetzt, behalten Sie es in und entscheiden Sie später, ob ich meine Meinung zu dieser Fantasie ändern. Deshalb sind Kommentare wirklich gut. Sie können auch einige Kommentare für sich selbst am oberen Rand der Seite machen. Vielleicht möchten Sie Kommentare für Ihre Farbpalette hinterlassen. So können Sie etwas sagen wie- und denken Sie daran, dass Sie jede Formatierung tun können, die Sie wollen, also vielleicht möchte ich alle Kappen tun, damit es leicht zu sehen ist, und ich kann sagen, so etwas wie die schwarze Farbe, die wir verwenden, ist Nummer 27211f, die Korallenfarbe, die wir sind Verwendung ist dies: e96f4p. Dies könnte ein Weg für Menschen sein, die Farben leicht zu sehen. Auf diese Weise, wenn Sie Ihre Meinung ändern, können Sie auch hier oben aktualisieren, und es ist ein Ort, an dem Menschen schnell, greifen diese Werte und stecken Sie sie. Also das Blau, das wir verwenden, ist in unserem A. Lasst uns das auskopieren und es hier aufstellen. Das sind nur einige Notizen, die Sie für sich behalten können, wenn Sie daran interessiert sind , eine Farbpalette zu verwenden, und vielleicht möchten Sie sie später ändern, nur etwas schnell und einfach für Sie, um Ihr CSS organisiert zu halten. Lassen Sie uns über Browserunterstützung sprechen, eine Art Mist, aber etwas, über das wir in unserer nächsten Lektion sprechen können. 22. Browserunterstützung: Also, genau wie ein HTML, in dem wir unterschiedliche Spezifikationen haben, haben wir verschiedene Spezifikationen von CSS. Es gibt verschiedene Versionen und Entwürfe und Dokumente, die besagen, wie Browser CSS lesen sollten. Sie können sehen, dass es verschiedene Standards und Entwürfe von CSS gab, Dinge wie CSS Level 2 und Selectors Level 3, die die verschiedenen CSS-Eigenschaften definieren, mit denen wir arbeiten müssen. Selectors Level 3 wurde 2011 zu einer Empfehlung und hat einige hohe Unterstützung unter den meisten modernen Browsern, die wir verwenden werden. Allerdings ist nicht alles ein moderner Browser. Manchmal, wenn Sie sich die Analyse für Ihre Website, Sie werden sehen, dass die Menschen kommen auf Ihre Website von Art von älteren Browsern, vielleicht nicht die neueste Version von Chrome auf einem Mac oder Firefox unter Windows. Sie möchten sicherstellen, dass die CSS-Eigenschaften, die Sie verwenden, verwendet werden können und gut unterstützt werden. Caniuse.com ist eine großartige Website, die Ihnen die Kompatibilität für HTML5, CSS3, SVG und andere Dinge in Bezug darauf sagt , wie sie aussehen und reagieren in einem Browser. Wir können einen Blick auf die CSS-Spalte auf der linken Seite werfen. Wenn es hier eine Eigenschaft gibt, die Sie verwenden möchten, können Sie sehen, ob Sie sie verwenden können. Wir haben ein wenig über verschiedene Farbwerte gesprochen, wie HSL und RGB. Sie können aus diesem Diagramm sehen, dass es in den neuesten Versionen einer Menge Browser Unterstützung dafür gibt. Aber zurück in IE8, es unterstützt nicht alle diese CSS3-Farben. Dies ist wichtig zu wissen, wenn Ihre Website von vielen Leuten auf IE8 besucht wird, sollten Sie stattdessen Hexadezimalwerte verwenden. Wenn Sie in Ordnung mit den Menschen in IE bekommen eine Backup-Farbe oder Bereitstellung von zwei Werten, so dass Sie in der Hex-Farbe fahren und dann auf der nächsten Folie eine RGB-Farbe. Das ist ein anderer Weg, um dieses Problem anzugehen. Es ist ein wenig zusätzliche Arbeit, um sicherzustellen, dass die Leute in IE8 dies sehen und die Unterstützung erhalten können, aber das liegt an Ihnen und Ihrer Timeline für Ihr Projekt. Lassen Sie uns dies für jetzt auskommentieren und stattdessen den Hintergrund meiner Seite sagen, ich möchte, dass es RGBA ist und es war 255, 255, 255,1. Im Wesentlichen ist das weiß. Was wir stattdessen tun können, wenn wir ältere Browser unterstützen wollten, sagen Sie Hintergrundnummer fff. Was hier passiert, sind Browser, die dies verstehen, wie IE8, werden dies lesen. Dann, wenn sie zu dieser Linie kommen, ignorieren wir sie einfach komplett. Für Browser, die dies unterstützen oder dies lesen, wenden Sie es an, aber überschreiben Sie es dann mit diesem Wert. Das ist eine Möglichkeit, die ältere Kompatibilität zu umgehen. Wir haben einen Blick auf Hintergrundbilder früher und es gibt andere Arten von Hintergrund-Dinge, die wir in CSS3 hinzufügen können, wie zum Beispiel Hintergrund-Clip oder Hintergrundgröße, und wir können die verschiedenen Unterstützung für Dinge wie diese auch hier sehen. Wenn Sie mit neuen CSS-Eigenschaften spielen, was ich Sie sehr ermutige, nach dieser Klasse zu tun, stellen Sie einfach sicher, dass Sie sich auf Dinge wie caniuse.com beziehen , um zu sehen, welche Art von Browserunterstützung verfügbar ist. im nächsten Video einige der Dinge sehen, Lassen Sie unsim nächsten Video einige der Dinge sehen,die wir verwenden können, und schließen Sie das ein. 23. Nächste Schritte: Nun, das schließt unser Intro zu CSS ein. Ich hoffe, ihr hattet eine Menge Spaß. Das habe ich gewiss, Steve auch hier drüben. Vergessen Sie nicht, dass es viele weitere Eigenschaften gibt, die wir auf unserer Website hinzufügen können. Wenn ihr euch CSS3 Generator anschauen wollt, wird das euch einige Beispiele für Dinge geben. Wir betrachten einige Texteigenschaften, die wir steuern, aber wir können auch Dinge wie Textschatten steuern. Wenn wir also einen Blick auf so etwas werfen, können Sie hier ein Beispiel sehen, wie wir Textschatten auf unsere Seite anwenden würden. Also könnten wir diesen Text Bindestrich Schatten kopieren, fünf Pixel, fünf Pixel, zwei Pixel, und dann diesen X-Wert, und ihn auch auf einige unserer Stile anwenden. Also, vielleicht wollen wir das auf unsere Überschriften anwenden. Nun, wenn wir das tun, können Sie sehen, wow, das sieht nicht gut aus. Aber wie Sie sehen können, gibt es viel mehr Dinge, die wir mit CSS3 und anderen Eigenschaften hinzufügen können. Wir haben auch Dinge wie CSS-Verläufe. So, Sie können sehen, dass Sie hier spielen können, passen Sie Farben wie diese. Wenn Sie darauf doppelklicken, können Sie die Farbe ändern. Also, vielleicht wollen wir auch einige davon entfernen, vielleicht wollen wir einen Farbverlauf zu unserem Hintergrund unserer Seite hinzufügen und wir könnten das tun, wenn wir es wünschen. Also, sagen wir, ich hatte einen Gradienten wie diesen. Also, wenn ich diesen Farbverlauf hier hatte, kann ich auf „Kopieren“ klicken. Komm zu meinem CSS, gehe zu meinem Körper und anstatt diesen Hintergrund zu verwenden, lasst uns dies auskommentieren und den CSS generierten Code hier einfügen. Kommen Sie zurück zu meiner Website und jetzt können Sie sehen, der Hintergrund hat dieses Farbverlaufsbild. Natürlich werde ich sagen, dass es wichtig ist zu verstehen, was die CSS-Eigenschaften Sie tun, aber ich denke auch, es macht Spaß zu sehen, was Sie tun können und welche Art von verschiedenen Eigenschaften wir haben zu spielen. Also, ich denke, es ist wichtig, dass ihr wisst, was da draußen ist, dass es viele coole Dinge gibt, die wir mit CSS machen können , die über das hinausgehen, was wir gerade heute getan haben. Also, ich hoffe, dass Sie weiterhin einige dieser Regeln ausprobieren, Ihr CSS wieder aufräumen, Ihren HTML-Code bereinigen, sicherstellen, dass die Dinge effizient und lesbar aussehen und versuchen, Dinge zu wechseln. Versuchen Sie, Farben zu wechseln, versuchen Sie, Schriftgrößen zu wechseln, und sehen Sie die Kombination, die Sie für Ihren Lebenslauf verwenden möchten, und Stile, von denen Sie denken, dass sie Jon Arbuckle vielleicht anders passen würden als das, was wir heute hier getan haben. Ich hoffe, Sie alle in der nächsten Klasse zu sehen, wo wir über fortgeschrittenes CSS für Layout und Positionierung sprechen und ein wenig tiefer in das graben, was CSS tun kann. Bis dahin hoffe ich, dass Sie eine Menge Spaß beim Hinzufügen von vielen Farben und Schriftarten haben , um Jon Arbuckle, oder Ihre Portfolio-Website super genial zu machen . Bis dahin sehe ich dich das nächste Mal.