Einführung in HTML und CSS

1. Einführung: Hallo, alle. Das ist Arthur. Und heute geben Sie sogar ein Intro in HTML und CSS 40 Tage Klasse. Wir werden lernen, welche Software wir brauchen, um loszulegen, einschließlich Chrome liefert Texte und die Service-Leute behaupteten, dass ich so Host-Website bekommen . Wir werden auch darüber lernen, wie ich eine Website richtig ausfüllen kann. Was das bedeutet, ist mein Gelerntes, welches Problem mellitus seine Struktur und seine Attribute. Wir werden ein tatsächliches Vorhof aufbauen, aber Seiteninhalte, über die wir testen werden, aber tatsächlich bauen eine schnelle Verhaftung Sie zusammen danach waren auch Millard über CSS. Was sehen ist, ist, wie Sie CSS schreiben und wie Sie Stile auf die Seite einfügen. Und am Ende werden wir ein wirklich solides Ass Portfolio haben, das wir verwenden können, um einige Arbeit zu präsentieren, die wir in der heutigen Klasse getan haben und im Laufe der Zeit zu entwickeln, wie Sie mehr über Freunde erfahren Element, Lassen Sie uns leid 2. Lass UNS Anfang beginnen: Ok, großartig. Lasst uns anfangen. Also zuerst, wir hätten keinen großen Statustrack. Wir werden sicherstellen, dass wir alle Werkzeuge haben, die wir brauchen, um in dieser Klasse produktiv zu sein. Wir stellen sicher, dass wir einige blinde Texte haben, die unsere Code-Editor-Krone ist, die ein bevorzugter Browser zu verwenden ist und Papier Ebene dot io. Und das wird uns erlauben, unsere Website online zu hosten, nachdem sie als nächstes. Wir haben auch einen Spaziergang durch die asiatische L-Anfrage gemacht, und schließlich werden wir einen Blick auf die Dateistruktur Trans Verceles werfen und Sie sicherstellen, dass Sie sich wohl fühlen ein Web-Entwicklungsprojekt zu sitzen. Werfen wir einen Blick auf die Werkzeuge, die wir brauchen. Also hier drüben werden wir sicherstellen, dass wir Chrome Browser-Wahl herunterladen. Es gibt andere Gründe dafür, wie Sie alle vor der Entwicklung haben, Chrome ist wirklich einfach, Ihnen zu helfen, eine Menge der Probleme zu debuggen, die Sie haben würden. Zweitens gingen wir die erhabenen Texte herunter und was das ist, wie Sie da drin schön sehen können, nur um alles zusammenzufassen. Es ist ein Code-Editor, und damit können Sie Dinge erstellen, wie Sie weiter gehen. Also nicht nur jeder Mensch. Es sieht uns, aber Sie können hier anfangen, andere Programmiersprachen zu bauen. Ich reise Skript-Python-Knoten. Die Welt ist deine Auster Letzte. Zumindest wollen wir uns für Papierflugzeug Dot io anmelden Jetzt ist es kostenlos zu versuchen und ich kann es sogar in meinem Konto jetzt anmelden. Sie können hier sehen, dass ich eine Reihe von Websites habe, an denen ich tatsächlich für mich selbst und für verschiedene Unternehmen gearbeitet habe, mit denen ich gearbeitet habe. So könnten Sie leicht Ihre eigene Website von Papierflugzeug gehostet haben und Sie können dort fit arbeiten . Er ist Sie wissen, wenn Sie tatsächlich mit Papier gearbeitet haben, es einfach nur über ein Dropbox-Konto verbunden. Eine andere Sache, die Sie einrichten möchten, ist Ihr eigenes Dropbox-Konto. Und wenn Sie es nicht wissen , dann gehen Sie einfach zu Dropbox No. Kommen Sie und richten Sie dies auch kostenlos ein. So erhalten Sie kostenlose Unterkunft für alles, was Sie brauchen, wenn Sie loslegen. Also, jetzt, wo wir haben erhabene Chrom und wir auf einem Vieh Leute plain io und Dropbox, wenn Sie nicht haben, dass bereits, lassen Sie uns darüber reden, was passiert, wie wir durch die Natur gehen, meine Bitte gehen ihre Nation auf Anfrage. Was passiert also, wenn wir das www google dot com in unsere Omelett-Bar oder Kleiderscheune in unseren Browsern eingeben ? Der Browser hat keine Ahnung, was Google bedeutet. Was, So sucht es nach der I-P-Adresse, und was das bedeutet, ist, es sieht nach vorne. Das Domänennamensystem. Es ist im Wesentlichen ein Telefonbuch. So verbinden wir den Domain-Namen, die Tom mit einer I. P-Adresse, die eine Reihe von Zahlen ist und die aus dem Browser als Hypertext-Übertragungsprotokoll festgelegt wird . Oder http-Anfrage hat ihr Google dot com im Grunde nach HMO gefragt. Wir erhalten, dass Antwort zurück, liest empfangenen Browser und es entscheidet, was Anzeige heruntergeladen? Was auch immer. Wir haben noch einige, die uns helfen. Und Boof Yeah, wir haben eine Webseite. Vielleicht sind die anderen nicht wirklich da, aber du weißt, dass du es schaffst. Und der Grund, warum wir, bevor wir mit einer Dateistruktur und Übertragungen gehen, ist dies der Grund, warum wir darüber sprechen, äh, zu wissen, welche Anforderungsantworten, weil Sie nicht verstehen, dass der Browser selbst ist was übersetzt Ihr Mantel für Sie. Also, warum Sie diese Anfrage im Internet machen und geht in die wilde blaue Yonder. Der Browser ist, was tatsächlich hier hilft, und was er erhält, ist das. Also all die Ideeninformationen in diesen Dateien Text und all diese Texas schauten sich Ordner Jungs an , sollte ich sagen, und diese Dateien sind in Ordnern gespeichert. Das ist also die größte Idee, die ich finde, dass viele Leute nicht verstehen, was Entwicklung buchstäblich nur eine vollständige Umstrukturierung ist. Jede Website, auf die Sie gehen, enthält sehr spezifische Dateien, aber sie sind nur ein Ordner, und Sie können ihn jederzeit auf Ihrem Computer haben. Das war's. Jeder bezahlte, den Sie jemals im Internet besucht haben, ist eine Reihe von Steuern, die in einer bestimmten Weise auf einem Computer organisiert werden. Die Bedeutung des Aufbaus dieser Website wird mit den Induktionen beginnen, also haben wir das bereits gesehen. Also sind wir zu einer Domäne gegangen und Sie haben nur einen Domain-Namen oder Sie haben die Nerven Mittel Versteck über Daddy Shima. Sie sehen in der Regel die Leiter, nachdem Sie auf diese Menüpunkte und Website klicken. Aber wenn Sie das erstere sehen, sind Sie auf der Startseite beiseite gelandet. Jetzt ist die Induktion Sandy Chanel die Fehlerdatei für die Homepage. Also beginnen wir heute, unsere Sehenswürdigkeiten zu bauen, einschließlich der Cookie Rest Me und Folio Sight. Unsere Homepage wird Indexpunkt Aoshima genannt, also sollte es immer den Namen Ihres Hauses geben . Wir denken auch darüber nach, unsere Standorte zu bauen. Wir wollen sicherstellen, dass wir die Ordnerstruktur verstehen. Also haben wir alles zusammengefügt. Würden Sie sicherstellen, dass wir eine Top-Datei haben? Hier sind meine awesome Assets Website dort. Wir haben dann einen Asset-Ordner, der Bilder, okkulte Geräusche, Dinge, die wir für so lange brauchen. Wir werden keinen Style-Ordner haben und das wird unser CSS halten. Also, ob es unsere Mittel sind, ja, Asir, was hast du, das da sein wird? Und schließlich können wir einen Job-Skript-Ordner haben und das ist irgendwie die nächste Ebene. Einführung von Tosun Erfolg, die andere Front und den Code hinaus würden Sie darüber nachdenken, dass es sich um JavaScript-Code handelt und diese Art von bietet eine Herd-Funktionalität für unsere Websites und Sie bekommen, darüber später in einer separaten Klasse zu lernen. Und dann haben wir endlich unsere html fünf. Also haben wir unseren Index, unsere Werte, menschliches Kontaktproblem. Offensichtlich müssen Sie nicht auf eines dieser Dinge bauen, Aber denken Sie daran, dass jede Ausgabe von Valley Build wird mit einem Punkt-HTML enden und denken Sie daran, dass Ihre Homepage immer eine Indexierung sein sollte. Einige Notizen über Struktur und gehen durch oben und unten Ihre Dateistruktur Transfer sel. So waren angeblich in unserer Dokumentenmappe auf unserem Computer. Wir haben hier ein paar Ordner, einschließlich unserer Website. Wenn ich selbst auf meine Hände zugreifen möchte, fiel der PNG in meinem wahrscheinlich eine Auswahl. Nehmen wir an, dass das Bild aus meinen Dokumenten überschritten wird, würde ich so etwas wie meine einige Website-Assets tun, meine Hände selbst, die P und G. Die Schrägstriche sind die gleiche Sache, wie Sie in vier Monate klicken, so einfach. Aber was ist, wenn wir HTML oder CSS erstellen und auf etwas im Wasser zugreifen wollen? Also was? Ich will in meine Zellen gehen. Sie sind so, und ich will mein Bild von dort bekommen. In diesem Fall würde ich tatsächlich über diesen Schrägstrich Vermögenswerte Geld schreiben, mein schneidiges Aussehen, als wüsste ich, dass es in meinem Haus selbst ist, aber, wissen Sie, ich habe so viele Dateien von meinem schönen Selbst. Sehr bescheiden. Wenn Sie in diesem Fall die Punkte erkennen können Ashraf bedeutet, auf Ebene zu gehen und dann in und andere Ordner gehen . In diesem Fall gehen wir ein Level hoch und gehen in Florida mit feinen. Wo das nach ihr verlangt. Es bekommt diese Bild-Assets. Ich werde diesen Punkt jetzt nicht zu sehr übergehen, aber Sie denken immer noch daran. So fangen wir an, Bilder oder CSS-Dateien Geschichten zu verbinden. Schade dich aus. Wir müssen es bequem sein, dies tatsächlich in den Code selbst zu setzen, damit wir sie verbinden und miteinander verbinden können . Also, jetzt haben wir ein paar Start-Stücke durchgegangen. Lassen Sie uns tatsächlich in den Aufbau der Versicherung CSS selbst. 3. HTML-GRUNDLAGEN: Okay, also fangen wir mit einem Problem an, mein Basic. Also geben wir unsere Inhaltsstruktur. Wir denken über die Grundlage von Freund und Entwicklung oder Web-Entwicklung. A. Sie männlich ist unsere Holznägel unseres Hauses und CSS. Wir werden lernen, als nächstes ist mehr von uns gesagt. Es ist in unserem Stil. Also, was ist ein Shima? Asian L steht für Hypertext-Markup-Sprache. Es ist eine Sprache, die verwendet wird, um Inhalte Texte, Bilder, Tabellen anzuzeigen Bilder, . Links würden dich haben. Es ist auch Sprache, um wieder Struktur für Ihre Website zu geben. Wird das auch da drinnen noch brauchen? Es ist auch eine Front-End-Websprache, so dass es von Ihrem Browser interpretiert wird. Der Unterschied zwischen Friendly, die nicht unterstützt Sprachen, ist, dass der Browser auf Ihrem Computer Chrome Firefox Safari hätte. Sie nehmen diese Informationen und zeigen sie an, laden sie herunter, übersetzen sie für Sie, um leicht zu verstehen, warum auf der Rückseite im Inneren, das wird von einem Server übersetzt und an Sie weitergegeben werden. Der Browser hat nichts zu tun. Also die Sache über die Struktur für zusätzliche Zahl und er wird ein Codebeispiel in einer Sekunde erhalten sowie wir schauen uns die Struktur Freizeitgestaltung an, die meisten HTML-Tags werden offenes Tag und ein schließendes Tag haben . Also, wo Sie sehen, dass Klammern und Tag-Namen und Klammern und Tagging wieder, aber ein kleiner Schrägstrich davor, das ist unsere Elemente. Also Ted Name, andere Tag-Namen und dazwischen sind Content-Leben. Ich meine, Tag oder Element zu sagen. Also könnte ich sagen, entweder, weil sie dasselbe bedeuten. In welcher Entwicklung? Ein paar Proben Krawatten. Wir werfen einen Blick auf hier mit der Titelzeit, die die Informationen in der tatsächlichen Browser-Titel des Alters gibt wir in jedem Tag, die Sand für die Überschrift Haar ass ist, was ziemlich sinnvoll macht ziemlich offensichtlich. Das sind sie. Wir haben eine Link-Steuer, wenn wir Bilder auf der Seite Rollout zwei verknüpfen. Wir waren eine andere Nation. Ich sollte sagen, dass Sie dafür eine Link-Steuer verwenden. Werfen wir einen Blick auf einen Code und sehen, wie eine Schande tatsächlich aussieht. Verschwinde hier. Wir betrachten eine sehr einfache, beispielbasierte E-Mail, damit wir alle diese anderen Teile hier loswerden können . Und, äh, nur für den Fall, dass du neugierig bist, wenn ich gerade anschaue, ist weniger. Ich rief Coop en dot io an. Ich benutze es oft, um Beispiele für Code vor Ort zu zeigen, und es ist eine andere Möglichkeit, dass sie Conan alleine spielen, ohne notwendigerweise codierten Bereichscomputer zu benötigen, obwohl ich vorschlage, diesen erhabenen Text für die Projekte zu erhalten, die wir jemals. Jedes Tag hier, und das ist ein Header-Element, und Header werden verwendet, um sicherzustellen, dass Sie semantische Informationen für jeden Abschnitt der Website haben . Wir haben also vor uns, und wir können auch einen Absatz haben. Also haben wir hier einen kleinen Absatz, der Absatzinformationen und einen Link enthält, und Sie werden hier sehen, dass dieser Link jede Ruhe hat. Wofür steht das? Das steht für Hyperlink-Referenz und sagt ihm, wohin es geht. In diesem Fall habe ich nicht auf Google-Konto direkt zurück ändern. Ich mag alles innerhalb dieser Anführungszeichen für jetzt, sagen willkommen Intro Pretty Straightforward. Also lasst uns ein paar andere Tags holen und über Haus nachdenken. Wir konzertieren mit einem Shima, bevor wir in zusätzliche Tags kommen. Ich wollte über ein paar der eigentlich gehen, so dass Sie finden Athleten können Sie bestimmte Eigenschaften über Angriff definieren. Also kommen wieder Straßen sind, die treff sein, dass wir nach einem Stilattribut gesucht haben, das wir darüber sprechen können. Wir reden ein bisschen. Wir bekommen CSS und Klasse und ich d, über die wir auch sprechen werden. Wir werden uns einige schnelle Beispiele sehen, die Sie hier sehen können Unsere Bild-Registerkarten, die brauchen, um in einer Quelle zu nehmen, sollte unser Foto sein, das wir tatsächlich auf Alter wieder angezeigt werden, sind verlinkt Tag unten, die wir kümmern uns um. Google, wie Sie unseren Absatz in sehen können und jeder hat hier verschiedene. Also haben wir eine Klasse, die externe Stile für Absatz fein wird. Und wir haben einen Stil Tiger Norwich eine, in dem wollen interne Stile innerhalb der Seiten aus finden und was genau definiert wurde, was interne und externe Fleisch Ich glaube nicht, dass ich tun will, ist auf dieser Seite. Ist das das in der Bildquelle, wo das Bild-Tag, sollte ich sagen, kein schließendes Tag hat? Es ist eine Handvoll Tags in HTML, aber es muss kein schließendes Tag-Bild sein, das einer von ihnen ist. So, wie Sie das lernen. Stellen Sie sicher, dass Sie auf Websites wie W drei Schulen überprüfen. Ob Sie HTML sind, braucht ein schließendes Tag oder nicht, es ist besser, die Einsparungen liegen in der Nähe. Ähm, es wird keine Probleme verursachen, aber diese haben nicht so dass wir über diese HTML-Tags sprechen, und die zusätzlichen, wie wir hier haben, einige der grundlegenden, die wir brauchen, um loszulegen, sind genau hier. HC Männlich, Kopf und Körper haben alle Abschlusssteuer, und sie definieren unsere Seite. Also, wenn wir anfangen, kann Ihr Arzt. Jetzt wollen wir jedes Team oben wollen, gefolgt von allen voraus und dann zum Körperangriff gehen. Wir haben Dinge wie das Navigations-Tag, und Mata lässt uns Navigationslinks oder Element definieren, das Navigationsrouten darin halten wird . Und wir haben Dinge wie Dave oder Abschnitte, und beide sind verschiedene Tabs mit. Sie definieren einen Abschnitt mit Dokumenten bis jung, dass wir einige zusätzliche Steuer geben Ethiker, oder Farbe und Bilder auf Ihrer Seite hinzufügen. So haben Sie Dinge wie die horizontale wird nicht Tag war nur eine kleine Pause, eine kleine Grenze zwischen der Bild-Site, die wir das Formular gesehen können wir sehen, dass jeder erfordert ein Attribut der Quelle, so dass wir nie Bild. Wir kriegen das Metronom. Was? Amy? Für die Anzeige der starken und AM-Tag, die beide Bolden ist ein Text oder betont, dass kursiv und die Pause lange und Bremsbelag-Regel . Also enthüllen wir Tag, das jeden Inhalt Schaden selbst bricht. Spielen Sie um diese Tags herum, während Sie lernen, wie Sie programmieren und sehen, was sie mit Ihren Inhalten tun . Bevor wir also tatsächlich unser Cookie-Rezept aufbauen, reden wir über etwas anderes. Wir werden bei einer anderen Steuer im Hinterkopf behalten. Wir werden über HTML-Verschachtelung sprechen. Also, was ist Verschachtelung? HTML es mit Elementen innerhalb von Elementen. Betrachten Sie es also als eine übergeordnete und untergeordnete Art der Beziehung. Und denken Sie daran, dass wie von Ihren Eltern, aber suchen Verhalten zu einigen der großen wird, um die Kinder geerbt werden. Eine gute Möglichkeit, über das Verschachteln nachzudenken, ist in zwei Formen. Listen und Tabellen. Jetzt sind wir heute in der Mantle Street mit unserer Crew hier, sprechen und sind auf unserer Profilseite. Aber Sie können auch eine Runde Tische in diesem Element Listen spielen. Werden wir entweder in zwei verschiedenen Tags entweder geordnete Listen oder unbewässerte Liste in jedem dieser Haltelistenelemente beginnen ? Diese kleine L eine Steuer. Also werden wir uns dieses Beispiel in der zweiten Sekunde ansehen, aber stellen Sie sicher, dass Sie denken, dass es in Ordnung ist. Diese Mauer war Nummer, wenn du sie in einem Shimao siehst und ich befehle. Das war mit Aufzählungspunkten und jeder dieser Aufzählungspunkte oder erinnerte werden Listenelemente selbst signalisieren, dass Sie jetzt Tabellen haben. Tabellen werden nicht oft in einem Stream verwendet, im Code voran geht, aber sie sind sehr nützlich für Dinge wie das Starten eines Lebenslaufs. Vielleicht brauchen Sie exakte Tabellen und Zellen zusammen. Und wieder würde diese Luft durch die Haupttabelle, die Straße in der Tabelle und die Spalten von in ihren eigenen angeordnet werden. Werfen wir einen Blick auf ein Problem, keine Verschachtelungsbeispiele, und hier sind wir. Also haben wir ein paar Beispiele waren hier. Also zuerst, lassen Sie uns ein paar Dinge bemerken. Ich habe ein bisschen hier, um einen Abschnitt über das Alter selbst zu finden. Es hat ein Kind. Man hat dazu beigetragen, Absatz. sind also Kinder in diesem div, das wieder offensichtlich ist, ein Nest muss es keine Lister-Tabelle sein. Es kann ein beliebiges Element der Seite sein. Wir sehen uns das hier bestellte lys an. Sie können sehen, dass wir jeden einzelnen haben und ich versuche auch keinen Schrei. Aber einheimisch unter Kind drei haben wir eine andere, um aufzulisten und das können unsere Enkelkinder sein. Und ich sagte zu Zweig von Herman, du solltest dort Enkelkinder sagen. Endlich ist es eine erfrischende Frau. Also, das ist etwas im Sinn. Nichts. Er geht viel tiefer krank über Ihr Kind. Du hast ein Enkelkind, du hast dein Urenkelkind. Selbst auf eine Sache, einen Blick auf hier zu nehmen ist wieder diese unerwünschten weniger Sie bemerkt es gibt Aufzählungspunkte. Wenn ich sein Tag ändern, um Sie wissen, gut ausländische bestellt Lis, Sie bemerken jetzt, ich habe 12 und drei für die oben ohne. Und weil das Stein auf bestellt ist, entlockt einen Punkt, der noch darunter liegt. Also wieder, ich denke, wenn Sie die Struktur Ihrer Website einrichten, wenn Sie tun müssen, um Verschachtelung sollte ein Automobil weniger wichtig sein dies, wie viele der Statham's brauchen Sie? Und wenn du Nessen bist, willst du, dass es dieses Styling erbt. Das ist etwas später, wenn wir über CSS sprechen. Also jetzt unser nächstes Stück hier macht das für dich groß. Wir werden sehr schnell über Best Practices reden, und wir werden ein Labor machen. Also werden wir anfangen, zusammen Keksrezept auszubauen. Also zuerst, Best Practice kommentieren. Kommentieren Sie immer Ihren Code und Haus. Du könntest hier sehen. So erstellen Sie einen Kommentar. In jeder E-Mail haben wir eine kleine Karotte Erklärung, Teil zwei Bindestriche. Und Sie setzen Ihren Kommentar dort und dann zwei Striche umschließen Karotte. Alles im Kommentar wird von Browsern ignoriert. Sie machen sich keine Sorgen darüber, dass es in Ihrem Code angezeigt wird, aber es hilft Ihnen und anderen Leuten, mit denen Sie arbeiten, Ihren Mantel zu verstehen. Es ist eine Best Practice und ich sage Ihnen, auf jeden Fall Sie es als Ihre Gebäude aus. Also gehen wir zusammen zu unserer ersten Seite. Wir werden den Cookie-Rezept-Ordner öffnen und das Projekt in Sublime in einigen relevanten Steuern Inhalt gestartet machen es wie das einschließlich Bild, das ich Ihnen in einer Sekunde zeigen könnte. Sie machen keine Minute Pause. Nur ihr geht weg und bekommt Kaffee Stretch. Fühlen Sie sich gut. Machen Sie ein Top. Werfen wir einen Blick auf unser letztes Beispiel. Hier. Sieh dir das an. Wir können dieses tolle Lebkuchenmann-Rezept bauen. Mach dir noch keine Sorgen um das Styling. Wir werden nur die östliche Mühle ausbauen. Von da geht es nicht. Wie öffnen wir uns? Das ist der Kontext. Was ist zuerst? Lassen Sie einen erhabenen Text geöffnet. Tja, Testen Sie weiß, dass Sie hier sehen, und es ist Azizi. Hilft. Geh hier rüber. Ja. Weißt du, wieder, wieder, die Lösung mich und schnappen Sie sich unseren angefangenen Code, die Rezeptdatei und wollte es direkt hier ziehen und ablegen. Und ich habe nicht erhabene gesehen. haben wir. Ich bin mir nicht sicher. Wir müssen uns verbinden. Und wir haben unsere eingehenden Studien. Schimmel hat sich schon für uns eingerichtet. Nun, wir werden das Keksrezept für einen Opa bauen. Und er hat alles für uns in der Nation geschrieben. Schon eine Menge. Also zuerst werde ich wenigstens dafür sorgen, dass wir uns das ansehen und eine Vorstellung davon bekommen, was wir tun. Also erinnern wir uns daran, worüber wir vorher gesprochen haben. Externes Dokument wird gestartet. Wir müssen tatsächlich einige Grundsteuer. Also brauchen wir zuerst ein Michel-Paket. Wir brauchen ein Head-Tag. Ich warne Sie, Schließen, dass Tag hatte, weil es in schließt. Wir brauchen eine Leichenmarke. Oh, nein. Schließen Sie diese Cheveldae bekommen Ihre Körper, die es nur halten wird all den Inhalt, wir dort hineinlegen wollen. Und wir wollen im ostdeutschen Angriff, um es am Ende zu schließen. Ein paar Dinge, die wir hier machen. Eine Sache, über die wir nachdenken möchten, ist ein Dock-Typ-Tag und was das ist, es ist nur sagt dem Computer, Hey, diese Datei als ein Gebäude ist eine Schande aus. Das ist alles. Hat es dir nur gesagt, Peter, worauf übersetzt? Und wir können einen der Typen einfügen, die wir über den Titeltrack gesprochen haben. Sie werden nicht nennen, dass es „Pause Cookies“ ausgeführt wird. Stellen Sie sicher, dass Kleidung. Also haben wir diesen Inhalt bereits von Opa. Siehst du das? Er schrieb ein wenig HTML-Inhalt. Lasst uns all diese Informationen schnappen. Nun, hier unten gibt es ein bisschen CSS, aber noch mehr darüber. Koppett, hier drüben. Nur ein nettes kleines Exemplar. Wer hat es schon geschnitten? Ich habe es gerade kopiert. Das ist gut. Nur für den Fall, dass wir es wieder brauchen, greifen Sie alles, vielleicht tippen Sie einfach darauf. Es ist also viel sauberer und jetzt denken wir nicht darüber nach. Wenn ich also über das Hinzufügen von Religions-Tags spreche, lassen Sie uns über das Bild nachdenken, das wir haben. So sehen wir die Lösung selbst. Siehst du ein paar Wochen, die wir nicht haben. Wir haben eine Kopfzeile. Lebkuchenmänner, wir haben ein Bild. Wir können sehen, dass die Rezepte von Opa und Sie sehen, dass dies in einem Talent ist, so dass Sie sehen können , dass in der Größe gewesen. Wir sehen auch, dass es hier zusätzliche Schlagzeilen gibt, aber sie sind kleiner als diese und etwas, über das wir nicht gesprochen haben. Aber im Auge zu behalten ist, dass jeder für Kopf Angriff. Es gibt verschiedene Ebenen von Headern, also gibt es jede zu jeder sechs, so dass Sie Dinge wie immer definieren können, Kopfzeilen bis zum Ende der Seite. In diesem Fall könnte ich sagen, dass diese Luft höchstwahrscheinlich alle zwei, da ihre Sub-Header von Marine Ashore sprechen. Schließlich konnten wir hier sehen, dass wir die Zutaten in einer unveränderten Liste haben und die Anweisungen, wissen Sie, bei uns haben. Wir haben hier ein weiteres Stück hervorgehobener Text für die Ernährungsinformationen. Also denke ich, wir sind gut zu gehen. Also gehen wir zurück zu unserem Code. Denk darüber nach, wie wir uns bauen werden. Also zuerst sagten wir, das hätte sie offensichtlich, und wir wussten, dass dies betont wurde. Wenn wir zurückgehen, schauen Sie sich das Bild an. Die beiden sehen gut aus. Okay? Größe Aber ich wusste, dass ich das hier reingesteckt habe. Aber wie soll ich es testen? Hier kommt Chrom ins Spiel. Wenn Sie Ihre Steuer, Ihr HTML und Ihr CFS testen , brauchen Sie keine speziellen, wo Sie Chrome haben. Haben Sie einen Browser? Also, wenn ich zu meiner Akte gehe, öffnen Sie sie. Oh, ich kann sehen, dass Junior Birdman als Header hinzugefügt wurde und ich sehe das Rezept. Bagram, seine Betonung sieht jetzt nicht sehr gut aus. Aber wenn jemand da ist, vergaß ich das Missus-Bild. Es ist zwischen Opa. Das Rezept von Hunderten, jemand Wir hatten das Bild da drin. Gehen wir zurück zur Versorgungsleitung und der Zug greift mich an. Denken Sie daran, das ist ein Bild da hinten und unsere Quelle ist, dass diese Cookies sind, die PNG Das ist alles, was wir brauchen. Wir müssen nichts schließen, und das Bild sollte auf der Website sein. Jetzt gehen wir zu den besten Keksen frisch. Oh, also gibt es kein Unrecht. Werfen wir einen Blick hier. Nein, ich sehe, was ich getan habe. Stellen Sie also sicher, dass wir tatsächlich darauf achten, dass sie in ihrem J peg gefunden wurden, nicht P und G fünf. Wenn Sie also ein Bild einfügen, möchten Sie sicherstellen, dass Sie nicht nur den Bildnamen eingeben, sondern auch welche Art von Datei ist in diesem Fall? Und J. Peg geht hierher zurück. Omas Kekse. Aktualisieren Sie die Seite. Oh, wir haben den Reichtum, aber er ist massiv. Alles klar , was machen wir dafür? Nun, eines der Dinge, über die wir gesprochen haben, ist, ein wenig wird einführen. CSS ist das Stil-Interview, und wir können es direkt zum Angriff hinzufügen. Jetzt ist es keine Best Practice. Sie setzen einen Stil direkt auf eine Seite, aber Sie tun dies in diesem Fall, sagen wir, der Aufzug verkleinert auch die Höhe des Bildes. Es sind 400 Pixel. Sag schlecht, frisch, viel besser. Brauche diese Nachricht nicht, um richtig zu kommen, also haben wir noch ein paar Dinge, die wir tun können. Lasst uns diese Jungs in Absätze setzen, seit ihre separaten Informationen. Nun, eine Sache mit diesen Absätzen Steuer ist, dass es sich immer aussperrt. Sie werden also volle Textblöcke sein, die nach unten gehen, wie Sie einen Absatz auf Seite setzen würden. Denken Sie daran, wir bauen ein sie Männchen. Ursprünglich wurde es an einen Mord gedacht. Wie Sie Zeitschriften oder andere Papiermaterialien aufbauen. Also immer noch ein bisschen wie Papierdokument. Aber denken Sie nicht daran, dass es das Gleiche als Nächstes ist, in dem wir waren. Denk an Alles klar, lass uns den Kopf. So bekommen wir viele von denen jeder wählen die Zutaten, braucht das, Leute. Es kühlt da drin. Und jetzt haben wir unsere erste Liste. Also denken Sie daran, wir haben Liste eingerichtet und in diesem Fall ist ein Nord lis. Wollen Sie, sagen wir, noch weniger, oder Sie... wir haben nicht dafür gesorgt, dass wir das für Sie schließen. Und dann, wenn Sie sicherstellen, dass jeder dieser Elemente oder in einer Liste hag kopieren Stücke den ganzen Weg hinunter das Brett. Und das Schöne an Erhabenheit, es lässt mich Dinge wie diese machen. Also halte ich meine Befehlstaste für Windows. Glauben Sie, es ist Kontrolle für PC ist Amy setzen diese kleinen Marker nur noch einmal, und das kann all diesen Code auf einmal erstellen. Einer der Gründe, warum es nur von einem Text ist, dass es diese kleinen praktischen Tricks hat, um Ihre Codierung schneller zu machen. Also hat er in einem Moment Listen aufgestellt. Gehen wir zurück zu Omas Keksen. Aktualisieren Sie es. Ah, wir sehen wirklich gut aus. Leiden Sie einen leichter. Und ich merke diesen Sommer von euch, aber die Atemschutz-Proben waren neben dem Bild. Was ist der Unterschied hier? Äh, warum wir den Text betonen. Ist es nicht. Es ist ein Block. Es gibt nur einen anderen Stil. Also ist es Opa in einen Absatz gesetzt. Nun, wer sollte es schließen? Ja, wir sehen ziemlich gut aus. Also werde ich hier anhalten. Es liegt an dir, uns fertig zu stellen. Das nächste Stück ist, diese Richtungen in Ed weniger bestellt, stellen Sie sicher, dass Sie geben wieder diejenigen, die jeder lehren, die jeweils eine Kopfzeile für jeden dieser Stücke ist . Betonen Sie dies und wir werden über das Styling in ein wenig zu sprechen, wenn Sie fertig sind Hinzufügen alles, was sie Mel, stellen Sie sicher, dass alle diese zusätzlichen entfernen. Kopieren Sie, Sie reden nicht über die CSS Frieden und ein wenig ihren Schoß. Bevor wir also einen SAS sehen, reden wir über ein Projekt. Also, Mr. Ransom asiatische Wähler jetzt für das Rezept und wir werden bauen ist dann das von einem Projekt hier, das einfach ist, Portfolio Seite B Index seiner Portfolio-Site hier ist ein wenig über mich gekleidet , Also stellen Sie sicher, dass wir in unserem Namen hinzufügen. Es hat ein bisschen über uns hier hinzugefügt. Und keine Sorge, ich habe das eine Kopie für euch zu benutzen. Aber, wissen Sie, Hersteller Bill, verwenden Sie Ihre Heim-Worte hier, um unser eigenes Bild zu setzen. In diesem Fall, siehst du, meine schöne habe es schwer, 100 mal 100 zu sein. Großer Platz. Ich denke, das sieht richtig aus und natürlich Links zu allen sozialen Medien. Auf einer anderen Seite Portfolio, ein Stuhl. Sie sehen, dass wir unsere Erfahrung haben und gerade einen kleinen Pavillon hier beginnen, einschließlich unserer Web-Entwicklung für die Landing Page für Opa dot com. Lieblingsrezepte. Arjun, Deutsch und auch unsere Ausbildung hier draußen Eine kleine Liste dessen, was wir ausgebildet haben, einschließlich unseres Intro, um wieder auf CSS auszugeben. League Quellen, Medien. Also werden wir das alles zusammen bauen. sofort Wenn Siesofortloslegen möchten, finden Sie einen Startcode in der Starter-Projektdatei unter dem endgültigen Projekt. Und Sie finden dort auch Beispieltexte, die Sie hier haben, und eine Indexpunkt-HTML-Datei, die nichts als die bloßen Grundlagen enthält . Du musst anfangen. Ich werfe es mir jetzt für Sie ansehen. In Ordnung, gehen wir rüber zu den blinden Typen. Sehen Sie unsere endgültige Projektakte hier sofort. Öffne unseren Serco zum Beispiel, Texan. Und hier ist unser Index über ein sie Männchen. Erinnern Sie sich an die relevanten Steuern, während Sie das aufbauen ? Also hatten wir, bevor Sie in der Bilddatei hier bei zwei Bildern des endgültigen Projekts selbst zu finden. Also seien Sie über mich lieferbar und die Portfolio-Seite lieferbar. Es gibt Ihnen also eine Vorstellung davon, was Sie aufbauen werden und die Relevanten wieder haben. Sieh dir das immer mal an. Okay, was wird ein Link sein? Was wird ein Header sein? Was wird ein Absatz sein und was auch immer in diesem Körper in diesem Dokument zusammenstellen wird. Und wieder haben Sie ein grundlegendes HTML-Paging, das nur auf die Untersuchung aufbaut. Geruch. Denken Sie daran, Sie müssen eine 2. 1 Sie rufen nur Profil, dass HTML sie in diesem Link werden wir über die Verknüpfung zu einer Seite erzählen, wenn die Dinge uns noch einmal, wir waren angedockt Typ für jedes weibliche Tag. Stellen Sie sicher, dass wir wissen, dass es HTML ist und Sie vielleicht ein paar andere Tags hier bemerken. Jetzt, eins. Sie bemerken ein paar Angriffe getroffen hier und alle Meta-Tags sind nützliche Informationen für CEO, so kann ich in der Beschreibung meiner Website setzen. Er arbeitet um es herum, und ich kann diesen Zeichensatz nicht erzählen helfen, den Browser mit Charakteren zu verkaufen, die übersetzt werden werden. Okay, einer der, nachdem Sie vielleicht bemerken, dass das nach Ihnen im eigentlichen Dokument liegt. Wenn Sie also Mel die Fähigkeit haben, in verschiedenen Sprachen zu sein und in diesem Fall sage ich es, ins Englische zu übersetzen, spielen Sie mit fünf verschiedenen Ling Bittwerte herum, Sie finden sie online. Okay, bevor wir in CSS einsteigen, stellen Sie sicher, dass wir bereit sind, alles miteinander zu verknüpfen . Also sprachen wir über eine Steuer vor ihren Club-Anker-Tags. Lassen Sie mich sicherstellen, dass das klar ist, und sie verankern Sie in anderen Teilen Ihrer Website. Wir sind außerhalb von dir. In diesem Fall, wenn ich sage, ich will ein, Ich denke, Portfolio weiblich und hier ist Typ es Portfolio Showplace sprach richtig. Ich habe nie einen Link zu Portfolio-Seite, also wenn wir Seiten miteinander verknüpfen, ist es eine einfache ist oben. Wir werden es wieder verankert usar einen Entwurf zu denken, um einen Verweis auf diese Seite zu wissen , wo zu suchen. Und wir haben uns veröffentlicht, wir sparen, um zu sehen, dass dies keine Altersverbindung hat, die zu diesem Zeitalter geht . So kommt man zu einer Seite, wenn man vor Ort an eine andere bezahlt, um diese Akre-Angriffe zu verklagen. Lassen Sie uns über CSS gehen, und dann werden wir zu unserem streichelten mich zurückkommen und ein wenig von einem endgültigen Projekt beginnen bevor wir und alles 4. CSS BASIS: Also reden Sie über CSS. Wir werden wissen, was der Dom ist und was ist mit dem, was das bedeutet? Und noch einmal die erste. Was ist CSS CS, das für Cascading Stylesheets steht? Es ist eine Sprache, die verwendet wird, um das Aussehen einer schiitischen Elemente oder Steuer zu ändern und ermöglicht die Wiederverwendung. Wenn wir also über Aspekte des Aussehens nachdenken, können wir zuerst die Schriftabdeckung Polsterung und Ränder um Elemente oder innerhalb von Elementen Hintergründe, Layouts, Rahmen ändern Elementen Hintergründe, Layouts, , Zutaten würden Sie alles, was sie können individuell in Stil-Form. Das ist, was CSS für. Wir reden darüber, dass du wiederverwendest. Wir haben gesehen, dass ich diese kleine Süd-Hag in einen HTML-Tiger gesteckt habe und diese Bild-Check zu ihr ist die mit. Aber was, wenn wir das überall nutzen wollten? Es wäre wirklich schwer zu programmieren. Jedes einzelne Etikett. Die textilen gut CSS ermöglicht es uns zu tun, ist nicht nur Stil auf Angriff selbst. Also auf der obersten Ebene Seite im Header-Bereich, aber noch wichtiger, und was wir tun werden für unser endgültiges Projekt und für Cookie, äh, Rezept Israelis, externe Stylesheets und das erlaubt uns Erstellen Sie Stile einmal und verknüpfen Sie sie mit so vielen Webseiten, wie wir wollen, und das ist wirklich ermöglichen Walzen und machen unser Leben viel einfacher. Was ist der Lauf? Nancy Assessing Wie funktioniert es? Es ist also im Grunde eine aufwändige Art, Nishi zu durchsuchen, Mo. Wir reden darüber, was das Dom ist. Schauen Sie sich die Syntax an, die wir über grundlegende Selektoren lernen werden, wie in der Lage sind, CSS-Striations aus Klassen, IDs und Tags zu verbinden . Wir werden auch über Spezifität und Vererbung reden, und Sie sind die SS. Und das ist die Idee. Wie erhält ein untergeordnetes Element etwas Styling von einem Elternteil? Und ich kann nicht einmal sehr genau, als das, was wir auf unserer Seite abhalten. Lasst uns zuerst das Syntex überprüfen. Also werfen Sie zuerst einen Blick auf das Thema Mormonen. Also nochmal einen Shammo sehen? Wir haben unser Tag, aber jetzt haben wir diese Klasse Attribute gleich. Aber wir haben immer noch das verarbeitete Fleisch vorher, und wir geben ihm nur einen Nachnamen. Nun, was ist, wenn wir etwas Extremes mit diesem Faszination stylen wollen? Dafür ist CSS. Also werfen wir einen Blick darauf, wie CSS gebaut wird. Sie sehen, dass wir einen Klassennamen haben, aber dieser Punkt ist, dass CSS sagt, dass ich einen Klassennamen mache, was auch immer. Und dann geben wir ihm Eigenschaften. Und diese Eigenschaft ist ein Teil unseres Stylings. Einige kommende Eigenschaften umfassen Gedanke warten auf Abdeckung Hintergrundfarbe, Tech Schatten, Was haben Sie So können Sie alle diese Eigenschaften aufbauen und ihnen verschiedene Werte geben? Und wir schauen uns an, was diese Ideen sind. Eine andere Sache, über die Sie nachdenken müssen, ist, dass mehrere Klassen in direktionaler Richtung verwendet werden. Warum können wir eine Klasse haben, die eine Reihe von verschiedenen Werten von Eigenschaften darauf hat. Wir können eine andere Klasse haben, die sehr spezifisch zu sprechen ist, eine Sache zu ändern, eine gute Idee wäre Hey, ich möchte sicherstellen, dass alle Links auf meiner Website ja, nebeneinander in einer Reihe angezeigt und ich möchte Modell. Nennen Sie es blau und ich will sicherstellen, dass sie alle alt sind. Was ist, wenn ich sage, dass ich eins will? Besonders CSI Evidenz sah betonen. Also möchte ich ihm in diesem Fall unsere Talente geben. Nun könnte ich ein M-Tag verwenden, um ihm automatisch den Text hervorzuheben. Ich sprach Blick, aber der beste Weg zu Ihnen wäre CSS zu verwenden und Sie fügen nur eine andere Klasse zu diesem ein Bit eines Shimo hinzu. Dann nennen wir es einfach The Classic könnte besonders kursiv sein, aber das gibt Ihnen nur eine Idee. Sie können beginnen, Klassen zusammen zu kombinieren, wenn Sie einen sehr spezifischen Stil mit ein paar anderen Optionen erstellen möchten. die Tommy und Hamlets, die mit unserem HTML-CSS arbeiten, während der Dollar für das Dokumentobjektmodell steht . Und es ist die A P I oder Anwendungsprogrammierschnittstelle für seine, wissen Sie, mit den dummen Programmierer, Ingenieure, Entwickler können Dokumente erstellen, navigieren Sie in der Struktur und hinzufügen oder ändern und löschen -Elemente in ihrem Inhalt. Wie sieht es aus? Das ist, weißt du, Lasst uns durchlaufen. Wir werden Chrome-Entwickler-Tools dafür verwenden. Dies ist einer der anderen Gründe, warum wir Chrome für diese Klasse verwenden wollten. Was sind die Entwickler-Tools? Nun, sie haben für viele Dinge verwendet, wie die Kontrolle der Dominanten, eine Idee, was es ist im laufenden Betrieb. Weißt du, Caesar, dafür, dass du mich stylen unseren Code später auch im laufenden Betrieb verwackelt hast. All das werden wir in Zukunft erreichen. Aber zuerst schauen wir uns die Bombe an. Also, aber Ausgang aus diesem wird zu unserem Cookie-Rezept gehen. Wo? Frühere Kekse. Hier sind wir. Und um den Inspektor zu öffnen. Sie haben ein paar Optionen. Aber gehen wir einfach und schlagen den Verdächtigen wegen ihm hier. Und das öffnet unseren Kräheninspektor und wir wollen uns die Dinge ansehen. Öffne es und was du gerade hier in diesem Fenster ansiehst, ist der Dumme. So könnten Sie gut gehen, das wird HTML nehmen. Nun, du hast recht. Der Dom sieht nicht wie ein Männchen aus. Und das liegt daran, dass es HTML übersetzt und für Sie aufbaut. Der Unterschied ist der Wohnsitz lebende Artikel. Also später mit CSS und die ich skripte. Wir verändern Elemente in der Domino-Rendering lebendig, so dass der Dumm nicht wollen oder Innovation Metal ist . Du solltest wissen, dass es statisch sein wird, die Domizildynamik. Sie und Sie benutzen es bereits. Das ist vertraut. Gürtel baute das Dom, und als wir anfangen, Styling aufzuwachsen, wird das auch bekommen, dass gibt Ihnen eine Idee, mehr über das Dokument von Ihrem Modell zu erfahren . Schauen Sie sich einen der Links unten, die einige Ressource hatte, ist für Sie, um mehr darüber zu lesen. Also, jetzt haben wir eine Vorstellung davon, was das Dom bedeutet. Und dann ist es durch dynamische Version unserer Inhalte oder eine Seite, die sie sich im laufenden Betrieb geändert haben. Und wie CSS Lynam bezieht, ist es tatsächlich auf das Dom zu sagen, Oh, Oh, werde ich irgendeine Art von Styling für verschiedene Selektoren auf der Seite tun, die verbunden ist, um Stream zu machen ? Und wie das geht, ist es. Es sucht es von einem CSS-Selektoren nach oben. Ja, es gibt drei Arten von Selektoren in CSS eine sehr verwendet, und das ist nur jedes HTML-Tag. Also in diesem Fall, wenn ich sage, ich möchte Stil alles hat ein P-Tag, das alle Elemente der Seite verkauft. Es gibt Absätze, aber dann habe ich Klasse und ich ds so Klassen und wir lassen noch vor Beginn als einen Punkt in meinem Klassennamen in der A setzen , den sie männlich als Klasse gleich Anführungszeichen auf dem Klassiker selbst definiert hat . Keine Periode. Wir setzen das dort, und es ist Stile alle Elemente dieser Klasse, so dass Klassen mehrere Male auf einer Seite verwendet werden können. Die Ideen waren ein bisschen anders. Ideen wurden zuerst in CSS mit einem Hash-Zeichen klassifiziert, aber in deinem mächtigen Namen, was auch immer es ist. Und dann in Nation Mel, werden wir wieder die i d gleich Anführungszeichen im Namen Ihres I D in der Mitte . Verzeih mir, dass ich keine schlechte Asche da drin habe, aber du verstehst es. Aber der große Teil über Ideen sind nur ein i d ist auf das Alter der gleichen Elemente erlaubt. Also, wenn ich einen habe, nannte ich meinen auch Avatar. Das werde ich nur auf einer Seite auf einmal haben. So könnte es auf meiner Index-Seite sein und es könnte auf meiner über diese HTML-Seite sein und es könnte auf meiner Profilseite Portfolio-Seite sein, aber es kann nur dort sein. Wir einmal. Also sollte er wirklich für sehr spezifische Elemente verwendet werden, Seemann und einmal auf einer Seite verwendet werden, die eine Navigation davon sein könnte. Das könnte ein Bildelement sein, das vielleicht sogar ein Schieberegler oder so etwas wie ein Movil sein könnte , der auftaucht. Aber du nur einer, der er so ist, will einige grundlegende Eigenschaften von CSS. So ist es wahrscheinlich eine Basis. Wir haben von der Wette, wir waren Farbe Schriftgröße Familie. Warten Sie Hintergrundfarbe Tappings, Aufträge , Ränder , Texte, meine gehen zu vertiefen, gehen zu jedem dieser Werte wieder. Du erhältst sowohl die Folien als auch einige zusätzliche Links unter diesem Video. Aber denken Sie daran, wenn wir dies tun, müssen wir sicherstellen, dass wir einen Eigenschaftswert für die Eigenschaft benennen. Und wir können einige der Beschreibung hier jetzt auf Dinge schauen, die sie ausgeben, besonders oder nach unten. Das Hatting im Marschbereich-Padding ist umgeben Raum innerhalb Ihrer CSS-Elemente und marschiert und sieht außerhalb des Raumes. Also, wenn Sie Dinge bewegen, um sicherzustellen, dass die Dinge ausgeglichen sind, denken Sie daran, Patting bringt Dinge näher es von innen, und Rand schiebt die Dinge heraus. möchte nur sicherstellen, dass ich liebe, dass in ihrem Kopf nach dem Start, ihre Seiten zu legen. Werfen wir einen Blick auf einige CSS jetzt und bekommen eine Vorstellung davon, was Sie gehen werden? Also zuerst, lassen Sie uns einen Blick auf dieses grundlegende Beispiel werfen, bevor Sie daran denken, dass, bevor wir dieses hatten, willkommen zum Eingang Stern CSS. Html Beispiel. Wir sind wieder hier sagt Willkommenskurs wieder, aber jetzt hat er einige CSS mit ihm verbunden und sagen Willkommen, Teoh Thean Reise noch einmal dort gehen wir. Und das CSS macht ein paar Tage Also werfen wir einen Blick hier zuerst haben wir eine Vorstellung von meinem Header. Jetzt weiß ich, dass mein Kopf nur einmal lokalisiert sein wird Es ist sehr wichtig, also benutze ich mein Telefon gestylt Machen Sie es wieder kursiv Wir haben unsere Klammern Wir haben unsere Eigenschaft Namen Ihren Wert und den Namen von Al Sie werden durch Doppelpunkt und Ende getrennt werden Immer ein zynischer Weiter haben wir unseren Absatz hier nur Information, dass Floß ein kleiner Klassenname ist und wieder Klassen mehrmals verwendet werden könnten Also, wenn ich einen anderen Kopf wickeln klassisch gleich Informationen machen wollte Absatz sollte dies richtig buchstabieren Und er ist zu mehreren Malen und gehen ein dort, Verlieren Sie es jetzt unter dem Absatz mit dieser roten Farbe, die Sie sehen, dass Farbe und rote Eigenschaft Wert für, dass Wenn für jeden Absatz den Text lesen Last but not least in diesem Hintergrund Farbe fast Ankerelement. Es ist mir, dass Fonds Gelber Hintergrund Hier geht es los. Typisch. Das sind also einige grundlegende Ideen. Äh, CSS Lassen Sie uns auf das 5. CSS STYLING: Lassen Sie uns also über das Styling dieser Cookie-Website sprechen und wie wir die Stile zusammen machen werden. So haben Sie drei verschiedene Arten und Stil. Ihre Website. Sie haben in Linienstilen, interne Stylesheets und zusätzliche Stylesheets. Wir haben bereits in Linienstilen verwendet, so dass mit Element, das wir in einem Stil Attribute auf diesem Bildtyp für unser Cookie setzen . Anfangs war dieses Cookie-Rezept zunächst ein Inline-Stil. Das machst du nicht. Normalerweise ist das Singling Indien. Es verwendet interne Stoppblätter und sie leben innerhalb von Style-Tags, in der Regel Gesundheit im Head-Tag Ihrer Website. Es wird nicht empfohlen, das zu tun, aber wir werden es trotzdem benutzen. Warum wir lernen, weil es großartig für einen Prototyp ist. Also, bevor wir tatsächlich auf die nächste Seite zu gehen war über extra Süd Blätter schwimmen, mal sehen, was interessiert alles, was sie ist wie auf der Seite. Also verlassen wir hier raus. Gehen wir zu unseren erhabenen Texten. Was? Wir brauchen diese Indexierung nicht, wirklich? Wo ist wer hier? Gehen wir zurück zu unserem Cookie-Rezept gestartet Code. Nun, ich habe alles loswerden, was schon anfängt. Nun, lasst uns wieder hierher gehen. Wir wollen sicherstellen, dass wir jedes Weibchen haben. Tad, unser Head-Tag in unserem Körper hatte nur im Halterinhalt. Liz schnappt sich unseren Kontinent hier. Wir werden das erste Stück hier beschreiben. Es sind meine Schlüssel. Wir werden uns im Moment um nichts anderes sorgen. Hier setzen Sie das Style-Tag ein. Jetzt sehen Sie sich selbst hatte Gaslights und tatsächlich lassen Sie wissen, dass Sie eine Ausgabe CSS-Datei erstellen und er jemals ein Anfang war, diese Dinge herauszubringen. Also sagen wir, wir haben jeweils für Lebkuchenmann und wir werden sagen, Tun Sie ein Paar wo es zuerst nach Tag zu tun und sagen, alle haben eine Farbe gelesen. Ich glaube, es ist nur Oh, ja, du gehst. Nun, was ist das von Omi? Also ein paar Möglichkeiten, wie Sie Farben in CSS stylen können, ist durch Hex-Code durch spezialisierte Webnamen oder Deckungsmittel in unserem TV A oder RGB. Also haben Sie ein paar Verschwendung und Farbe Dank mir werde ich Sie gerade mit Hex-Code für jetzt arbeiten . Es wird einfacher sein. Und Sie finden alle Informationen über Hüte Code auf der Abdeckung Kombination für sie online. Schauen Sie einfach nach CSS Exco. Sagen wir das und sehen, wie diese Bücher gehen wir hierher. Wir kriegen dieses heiße Rot, das gelb ist, weißt du, nicht perfekt. Erinnern Sie sich an alle meine Schulfarben, aber Sie haben die Idee. Das bedeutet also, dass jedes einzelne Tag, das ich gerade habe, diese gelbe Farbe haben wird. Was ist, wenn ich etwas genauer sein will? Nun, lassen Sie uns diesen Klassennamen wieder verwenden. Also sagen wir, rote Farbe in dieser Zeit von gequetscht bedeckt rot und wir gehen nach Rezept von Opa, geben ihm eine Klasse Attribute und dann wird die Wahrheit gelesen Farbe hier zurück. Das ist eine hier hinten. Aktualisieren Sie es. Hey, es ist die Farbe Rot. Also nur ein paar Grundlagen. Hier benutzten wir Internet-Stylesheets. Wir setzen einen Style-Angriff oben in den Header, der rechts CSS beginnt, wie wir es normalerweise wieder tun würden . Es ist Klammern Eigenschaftsname, Doppelpunkt Eigenschaftswert, Zynisch. Stellen Sie sicher, dass wir dieses Style-Tag in der Kopfzeile schließen. Und dann könnten wir CSS verbinden, wie wir zuvor gesehen haben. Entweder tun Tags Klassen oder, wenn Sie wollen, dass ich ds wieder auf meiner tieferen Seite zurück und sagen meine i d gut so Farbe in dieser Zeit wird ein blaues Sie geben diesem ein Diagramm. Die 90 entspricht meinem I d. Okay, alles schließen, Pflege frisch und wir haben es blau. Das ist also ein bisschen ein Eindringling. Wie man mit CS uns anfänglich arbeitet. Jetzt reden wir darüber. Also extra Stylesheets. Also gehen wir zurück zu erhaben. Ja, mach Schritte zurück. Wir gehen zurück in der Zeit und tun all dies, so dass Sie eine schöne saubere Gewicht Start haben. Aber jetzt gehen wir hier rüber. Also, was sind externe Anschlagblätter? Es sind also Journal-Stylesheets. Sind all diese Stilelemente mit einer separaten Datei verknüpft? Und wie machst du das? Ist das Linkangriff? Also sucht der Link-Tag nach diesem Trog und dass wieder eine Falle ist, dass das tatsächlich ein Euro wird, um woanders zu gehen. In diesem Fall ist der Euro Ihres Stils. Blätter bis das Link-Tag wird in den Kopf gelegt, genau wie die Stilangriffe, die vor Ort sind, und es ist die beste Praxis für Live-oder produktionsfähige Websites oder Anwendungen. Sie haben keine internen Stile oder in Linienstilen in Ihren Live ready to go Websites Also verstehen wir was? Unser Keksrezept. Also werden wir wieder öffnen, Ordner in unserem angefangenen Projekt foul halten und es schon ein bisschen haben. Aber, hey, weißt du, aber es ist hoch. Und wir können einen Ordner namens CSS erstellen und einen Stil machen, dass CSS-Datei. Und lassen Sie uns einige Stile nach Beeinträchtigungen Wünsche hinzufügen, die auch in dieser Datei enthalten sind. Und schließlich werde ich das Stylesheet mit der Frage des Alters verknüpfen. Also lasst uns hier verschwinden. So kommt Ihr Salon in unseren schönen Start. Ein Mantel. Gehen wir dazu. Klicken Sie auf Ihre sprechen krank. Wir werden einen neuen Ordner namens CSS erstellen. Und in diesem neuen CSS Wasser machen wir die Datei. Sie sehen das Foul als Stil CSS. Und jetzt können wir unser CSS hier machen. Also schulten wir den ganzen Weg runter. Wir sehen, wir haben eine nette NCS uns Frieden und einen Opa, offenbar als Grafikdesigner. Also gab er uns, ähm, leider so. CSS, das er will, ist ziemlich Senator Standard. Es war eine Badezimmerfarbe die gesamte Seite irgendwann einmal eine Abdeckung der Texte für Ernährungsinformationen gelöscht werden 87 und Sie sehen einen Bonus. Wenn er möchte, dass eine Grenze um das ganze Alter und das Bild diese Farbe hat, lasst uns zuerst ein paar Dinge machen. Legen wir ein paar Tags in den Käfig. Wir werden geradeaus weitermachen. Du warst tolle Sachen hier, die sich darauf konzentrieren, das Bild in extra geradeaus an der Grenze zu spielen . Wir sorgen dafür, dass wir die Nährstoffinformationen bekommen, die ich nicht zeigen kann. Ihr müsst alles tun, was ihr herumspielen könnt. Das bist du selbst. Also macht das für ein wenig jeden hier drin wer? Stellen wir sicher, dass wir tatsächlich alle Tags verbinden, wie wir es für richtig halten. Und der Grund, warum ich das immer und immer wieder mache. Es ist nur betonen, dass wir sicherstellen wollen, dass wir unsere Elemente immer zusammen haben. Wer ist derjenige, der hier oben vermasselt wurde. Head-Tag ist auf sich allein gestellt. Das sind alle. Los geht's. Lassen Sie uns diesen Kerl hier geben. Also, wissen Sie, Ernährungsinformationen wurden betont. Ja, es hat einen guten Anfang. Bohnenkraut Shimon Place. Also zurück ihre Farbe der Seite, während die gesamten Seiten, entweder der Körper oder die Frage der aktiven es Standard Lee, Sie werden in der Regel tun Körper Ihre Abdeckung. Der gesamte Hintergrund. Das bedeutet also, dass ich im ganzen Körper die Hintergrundfarbe sagen werde. Es wird weiß. Das ist der Erste. Zweitens, die Farbe der Textur. Ernährungsinformationen sollten gleich 87 Nun, es gibt nichts, was den Text identifiziert, etwas Besonderes, als es in einem Absatz betont wird. Aber wir wissen, dass es eine andere betonte Steuer geben wird, weil das Rezept von Opa auch so schnell ist. Außerdem sollten wir eine Klasse in hier setzen se Klasse gleich spezielle. Ich denke, es ist etwas Besonderes, aber es gab etwas Besonderes, so kann sprechen, äh, besorgt seine eigenen. Nennen Sie es schöne Texte für ausgefallene Farbtexte. Und machen wir es als ein Wort, das es kommt. Wir gehen zurück zu ihrem Stil, denken Punkt, um sicherzugehen, Mrs. Class und wir werden die Farbe 887 verdoppeln. Und schließlich, die letzten Stücke, die Bonus. Also, wenn ein Problem Rahmen auf der Seite und um das Bild. Aber weißt du, was wir mit dem Bild gemacht haben, dass du Ingenieur spielst? Ihr seid Bilder. Quelle entspricht Cookies. Geh, pflücken und wir wissen, dass die ganze Seite meinen Körper hielt. Also, wenn wir Reihenfolge verwenden und wir sagen, es ist ein Fünf-Pixel-Rand solide, und die Abdeckung für den Rand wäre dies. Es ist eine andere geschnitten. Der Rahmen ist eine spezielle CSS-Rolle, da Sie sehen können, dass er drei verschiedene Werte benötigt. Geben Sie es mit Ihnen. Geben Sie ihm, welche Art von Bestellung es ist. Es gibt, ähm, aus Exporteuren wie ein durchgezogener Strich, der wahrscheinlich ein paar andere ist, dann die Farbe der Grenze selbst. Also, das alles in einem Recht zu setzen? Und schließlich, lasst uns eine Sache machen, die wir vorher gemacht haben. Also hatten wir vorher ein Style-Tag. Das war's. Die Breite dieses Bildes 2 40 Pixel. Übersetzen wir das in den Stil, äh, älter dort. Also vermisse ich Krebs. Wir überprüfen nicht einmal, ob das einzige Bild auf der Seite ist. Und im Augenblick, um es zu sagen, genau das gleiche, was das Bild mit für Pixel sein wird. Ich kann das hier entfernen. Wir sollten gut gehen. So nahm man die Regeln des Grand House. Sieht hier ist es jetzt ein frischer, der ziemlich pfiffig aussieht. Ja, die Raketen-CSS ist da drin, du sagst, weil das Bild sehr groß ist. Also, obwohl wir das Bild da drin haben, sieht alles ziemlich gut aus. Die Farben haben sich nicht wirklich verändert. Neu, die seine Bildgröße Was tun wir nicht? Nun, ich habe keine Verbindung hergestellt. Segen Siehst du, ist das Sierra? wir sicher, dass wir das jetzt tun. So fügen Sie Inhalations-Tag hinzu. Und wieder sagt das Link-Tag es. ISS Villa Vince ist, dass es ein Stylesheet ist. Es wird eine CSS-Datei sein, und es wird in unserem Cookie und unserem CSS-Halter sein. Also haben Sie CSS. Denken Sie daran, dass File Transfer Social Peace CSS in die Datei Schrägstrich Stil Punkt CS hat. Gehen wir wieder frisch, groß und ja, groß und ja, sieh dir das an. Wen Wir haben jetzt eine Grenze im Käfig. Wir haben das Bild nach unten und wir haben die Nährstoffinformationen leicht gefärbt, so dass es in ein wenig viel Farbe betont wird. Stellen Sie sicher, mit dieser Style-Seite in behandeln Dinge spielen, wie Sie sehen, ändern, Hintergrund, Farbe, grenzüberschreitend und nachschlagen einige andere CSS-Eigenschaften und Werte, die Sie hier spielen können. Also jetzt lasst uns über Spezifität sprechen 6. SPEZIFISCHE INHERiTANCE und DIG: UK. Lassen Sie uns also über Spezifität, Vererbung und Sie eso Spezifität sprechen. Ich werde jetzt nicht in die Knie fallen, damit du in den Himmel schreien kannst, aber es ist eines der wichtigsten Dinge, die du in CSS verstehen musst und daher dein Nemesis sein kannst . Spezifität bestimmt, welche CSS-Rolle angewendet wird. Brian, der Browser und diese vier verschiedenen Kategorien definiert zuerst die Spezifität eines bestimmten Selektors in Lifestyles I DS Klassen und die Elemente selbst. Was bedeutet das? Ist das Publikum hier? Ich weiß, es ist eine Menge zu bekommen, aber wir wollen darüber nachdenken, ist die Reihenfolge der spezifischsten, um spezifisch in dem, was vom CSS angewendet wird, freizugeben . Das Spezifischste ist also der Stil von ST, so dass Yngling einen Leckerbissen für jedes andere Element auf Ihrer Seite jeden anderen internen oder externen Süden überschreibt. Sie ist, sagten wir, es nur normal benutzen, aber es wird alles andere Ideen außer Kraft setzen. Ihre zweite Klasse an der dritten und die geringste spezifische Sache sind Elemente oder Steuern, weil sie so verteilt sind. Mit anderen Worten, wenn Sie darüber nachdenken, in Bezug auf Punkte, wenn Element im Linienstil hat, und es ging automatisch zu erhalten 2000 Punkte Für jede Idee. Ply erhält 100 Punkte, sehr Klasse oder Pseudo-Klasse. Wir sorgen uns darum, dass diese noch 10 Punkte bekommen und für jede Elementreferenz bekommt es nur einen Punkt. Du denkst also darüber nach, sehr spezifisch zu sein. Du kannst den Teenager hoch oder das Team runter gehen. Sieht sie gefüttert? Ich persönlich habe viele Dinge in Klassen gebaut, weil ich weiß, wann Sie die gleiche Statistiklinie grenzüberschreitend auf verschiedenen Seiten auf meiner Website verwenden . Aber wenn ich sehr spezifisch über etwas darüber sein möchte, könnte ich eine Klasse haben und ein I. D. Sie setzen beide Elemente darauf und seien, als ob ich dies ein bisschen von diesem Klassenstil beginne , und diese Idee ist sehr spezifisch für dieses Element. Damit klären Sie es ab. Nehmen wir also ein lebendiges Beispiel. Also sind wir auf einem anderen suchen, es sei denn, mit dem I d der Sommergetränke, und ich habe diese große Lieblings-Art von hören eine Klasse ein Favorit, der meine Lieblings-Rot und Gold spricht . Also mein Favorit war wirklich Ganging, trüb mir einen Drink. Es ist entspannend. Nun, was ist, wenn wir hier reingehen und das Ich selbst ändern? Also, was? Wir gehen hierher und sagen, Hey, ich will Teoh. Nutzen Sie die Idee. Sommergetränke und alle Verbündeten sind das Element, das die Aussagen abbaut, einige Getränke in die Farbe blau statt rot. Nun, warte, was ist gerade passiert? Wir sehen, dass unser Favorit immer noch den Klassenstein dort arbeitet, weil die Familie Schimmel ist , also ist es immer noch verschraubt. Aber jetzt wurde diese rote Farbe überschrieben. Und das liegt daran, dass Sommergetränke, die Sie hier sehen, das I D verwenden was größer ist als eine Klasse, und es verwendet den Tag-Namen oben drauf. Also, für diese Klassen, 10 Punkte, wissen Sie, haben ah 101 Punkte oder huh 101 Punkte, einfach weil das System jemals hatte. Wenn wir darüber nachdenken, werden wir sicherstellen, dass wir so spezifisch wie möglich sind und die Dinge nicht darüber hinwegkommen lassen. Eine andere Möglichkeit, Spezifität und Vererbung zu betrachten. Es ist hier drüben, also haben wir wieder unser Mitgefühl. Teilflüge sind ein wenig winzig obdachlos. Wir können sehen, dass wir es haben. Sie zielen auf eine Lüge ab. Wir sehen auch, dass wir eine andere haben, die Ass Ban Limit Spannen sind ähnlich wie Absätze, aber sie sind nur in der Linie, so dass sie in der Regel für eine Textzeile und nicht hoffnungsvoll Walk von Texten verwenden, so dass wir sehen können, dass wir Erben noch von unserem i d Und jedes dieses Element ist lila. Jede Schriftgröße beträgt 12 Outfront Lee ist normal. Vielleicht bekommen Sie 18 Millionen leichter sehen? Und wir können sehen, dass wir zusätzliche Spezifität hinzufügen können. Also erben wir davon, dass jedes Element diese Vererbung hat. Aber jetzt ist die Spanne selbst Die Idee von yum hat den Kursivschriftstil und wir können diesen Aufruf sogar ein bisschen mehr machen . Vielleicht denken Sie etwas darüber nach, Weizen. Oh, los geht's. Also wieder haben wir eine Vererbung machen diese lila Ändern der Schriftgröße Sie dachten Warten und dann haben wir Spezifität hier, Geben Sie ihm dies ist, dass Artikel ihre Talente und die fett. Denken Sie also über die Oberflächenvererbung nach. Wir wollen darüber nachdenken, wann wir unser Styling aufgebaut haben, was wir den Kindern besonders erben wollen . Wir machen jede Art von Verschachtelung wie diese Listen und wir wollen auch darüber nachdenken, wie wir sehr spezifisch mit unseren Stilen sein können . Sie daran, wenn Sie mit der Arbeit an Ihrem Projekt beginnen. Lassen Sie uns also einen kleinen Überblick über alles machen, was wir zusammen gemacht haben. Und wir arbeiten gemeinsam ein wenig auf den Druck, bevor wir sagen, dass ich es tue. Also, was haben Sie gelernt? Nun, das ist Sears hat spezifische Closius s. Wir wissen, dass CSS erwartet stilvolle E-Mail und es Gerüche sind Struktur unserer Website. Wir haben einige Grundlagen in Texteigenschaften. Also haben wir gesehen, wie Sie unsere Eigenschaftswerte Klammern brauchten. Diese sind durch Doppelpunkt und in Aceh Michelman getrennt, wie sie zu einem Stylesheet und Seiten in diesem Link-Tag verlinken. Wie wir Selektoren, Ideen, Klassen, Steuereinziehern verwenden Ideen, Klassen, , um die Elemente auf Interesse, dass sie männlich zu Stil in sich selbst und wie Spezifität und Vererbung gilt für unsere CSS-Vererbung, so dass wir erben Stile zu jedem unserer Kinder geben. Elemente in echten Männern sind Seite und Spezifität könnte sicher schwächen Targeting genau das was wir ändern wollen. Nur vorsichtig zu sein, wie wir es benutzen. Denken Sie daran, dass CSS wichtig und genial ist, und es stellt sicher, dass es feine Details des Aussehens von unserer grundlegenden Anzeige unserer Inhalte trennt oder ist sie Mao? Und das macht unser Leben viel einfacher. Die andere Sache über CSS ist, dass ein Stylesheet sofortige Menge an HTML-Seiten klingen könnte . Deswegen würde es nicht extern machen. Es macht das Leben viel einfacher. Wir ändern nur einen Stil, einmal auf dem Brett bedeutet. Das machst du mit dem Pavillon. Schließlich, wenn wir über diese Menge an HTML-Seiten sprechen, die es wert sind, über das Branding einer ganzen Website zu sprechen, und das ist, was CSS ist. Vier. Sie können CSS-Partys zu einem neuen Stil auf Ihrer Seite hinzufügen. Jedes Mal, wenn ich hier ein echtes Lebensbeispiel sehe, machen wir das eine Sekunde außerhalb unserer Portfolio-Website. Aber nur um dir eine Idee zu geben, wie gehst du zusammen? 7. Abschlussprojekt: Alles klar. Schließlich für Ihren endgültigen Vertrag, Ihr mich, die Anfänge über Ihr eigenes Portfolio außerhalb zu erstellen. Also nimm das, was du heute aus der Klasse gelernt hast, und besser von einer Seite. Sie finden den Startcode in Ihrer Starter-Projektdatei im Starter Coat, Sie haben grundlegende HTM online für Ihre Indexdatei sowie im CSS-Ordner. Sie finden eine grundlegende Gliederung für die Stile, alle Seiten und den Hinweis auf einfach HTML-Text, den Sie im Bilderhalter verwenden sollten. Sie werden auch erfahren, wie Ihr endgültiges Projekt bei CNN aussehen soll. Wir werden das jetzt für ein paar Minuten zusammen machen und dann überlasse ich es dir. Ich hoffe, du hattest eine gute Zeit während des Unterrichts. Also lasst uns hier verschwinden. Geh wieder zu unserem erhabenen zurück. Wir haben einen Projektordner. Wir haben unseren Index Begeisterung Willen zum Kopieren, und wir haben diese Ergebnisse. Also, wie werden wir am Ende aussehen? Also eine Sache, die ich bitten möchte, sofort im Auge zu behalten, ist, dass wir immer sicherstellen wollen , dass wir noch diese Bilder laufen und sicherstellen, dass Sie über sie getrennt bekommen, um eine von einer Minute Build zu erhalten . Wir wissen also, dass wir zwei Links unseres Namens haben. Wir haben ein paar Grenzen dazwischen, und diese Grenzen sind interessant. Sie regieren nur dazwischen. Also vielleicht schauen Sie sich das ihre horizontale dort an. Und wir sehen, dass wir auch zusätzliche Links mit wenig Papier haben. Dazwischen benennen diese Pipes spezielle Legis, aber Pipe-Zeichen auf der Seite. Lasst uns dieses Navigationsteil aufbauen und sicherstellen, dass der Grund für dich zuerst zu unserem Portfolio des Alters verlinkt wird, nicht wahr? Wer? Lassen Sie uns eigentlich jede Datei öffnen. Du wirst es als Port Julio Shima sehen. Vielleicht gehen Sie hier rüber. Kopieren Sie das. Verkörpern Sie in der Lage, Portfolio für jetzt sagen. Wir wissen also, dass wir hier eine andere Seite haben. Großartig. Nun denken wir an die Navigation, die wir nie zuvor gedacht haben. Wir haben nur unser Navigations-Tag hier drin. Unsere erste Seite. Wir sehen uns das an, hier geht es um mich. Also ist es Pedro im Radio über mich. Sieht aus, als ob es denken ist, und es wird direkt zu unserem Indexpunkt html verlinken Jetzt in diesem Pipe-Zeichen wissen, dass genau hier diese kleine Pipe ist. Also behalten Sie sich selbst. Und jetzt wollen wir einen Link zu diesem Portfolio Alter Portfolio. Alle, richtig, im Namen des Links, ist es so okay oder vollständig? Das war's. Also lasst uns diesen Weg dort öffnen, Ihr Finderbereich. Wo hast du das hingestellt? Hörst du das? Lassen Sie uns die Lösung öffnen. Öffnen wir uns für Star. Und da gehen wir hin. So entlasten sie es als Portfolio. Eigentlich ist es hier oben. Über sind wir wissen, dass wir nur in der nächsten Seite Forderungslinks hier in unserer Pfeife sind. Aber wenn du auf dieses Portfolio klickst, alles klar, wir sind gut. Wir können diese Seiten miteinander verlinken. Also denken Sie daran, Sie wissen, stellen Sie sicher, dass Sie sich das Bild selbst ansehen. Wir sorgen dafür, dass wir uns daran erinnern, wie wir den Markt dort ausbauen können. Wirklich? Für unsere Kopfzeilen. Absätze sind Verknüpfungen in diesem Bild. Und stellen Sie sicher, dass sie diese Typen nur zusammen suchen. Wir machen hier noch eine Akte, Felicia Male. Und stellen Sie sicher, dass zusammen mit unseren Wut Tags in grün den Link direkt hier gesendet. Ich hoffe, ihr habt wieder Spaß an der traditionellen CSS-Klasse. Sie finden alle Dateien, über die wir gesprochen haben und einschließlich der PDFs des Kinos durch Liebe gegangen in der Lage, heruntergeladen werden. Und ich werde auch Lösungscode für das Cookie-Rezept und die Board-Polio einfügen, damit Sie einen Blick darauf werfen können , dass es im Code selbst gemacht wird. Versuchen Sie, es zuerst selbst auszubauen. Es macht wirklich Spaß. Sie haben den Kurs wieder genossen. Wir haben einen guten Tag. Weißt du noch, Kontrolle? Glauben Sie an sich selbst, nach freigegeben werden.