Grundlagen der Webentwicklung: HTML und CSS

1. Einführung: Hallo und willkommen bei Web Development Fundamentals, HTML und CSS. Ich bin Chris, ich selbst lehrte Web-Entwickler und der Schöpfer von zwei erfolgreichen Klassen hier auf Skillshare, Verständnis Web-Entwicklung und wie effizient erstellen WordPress-Websites mit Divi. In dieser Klasse werden wir etwas abdecken, das sehr grundlegend für den Aufbau für das Web ist, und das ist die Verwendung von HTML und CSS. HTML ist die Markup-Sprache, die Webseiten und Anwendungen im Web strukturiert , während CSS die Stylesheet-Sprache ist, die verwendet wird, um die Präsentation von HTML zu beschreiben. HTML und CSS arbeiteten sehr eng zusammen, um den visuellen Look und das Layout Ihrer Website oder Webanwendung zu erstellen . In dieser Klasse werden wir sie zusammen abdecken. Unabhängig davon, welchen spezifischen Pfad Sie als Webentwickler folgen, eines ist sicher, dass Sie einige Kenntnisse in HTML und CSS benötigen. Wenn Sie bereit sind, in die Grundlagen von HTML und CSS zu lernen , bleiben Sie zu beobachten und ich werde Sie im nächsten Video sehen. 2. Was du brauchst: Bevor wir anfangen, werden Sie einige notwendige Werkzeuge für die Webentwicklung benötigen, da wir nur Front-End-Webentwicklung durchführen, nur mit HTML und CSS. Alles, was wir brauchen, sind zwei Dinge, die beide kostenlos zur Verfügung stehen. Der erste ist, ein Web-Browser. Ich verwende Google Chrome. Ihr Web-Browser für diejenigen von Ihnen, die den Begriff noch nicht gehört haben, es ist nur das, was Sie verwenden, um im Internet zu surfen, aber Sie können es auch verwenden, um jede Webseite zu öffnen, auch wenn es nur auf Ihrem Computer in Textdatei geschrieben. Es interpretiert im Grunde, was wir heute bauen, HTML und CSS, und zeigt es an. Das ist sehr wichtig für das, was wir gerade tun werden. Die zweite Sache ist ein Code-Editor, und ich benutze ein Code-Atom. Es wurde von GitHub entwickelt und ist einer der beliebtesten, aber Sie können verwenden, was Sie für EVA wollen. In Bezug auf Browser, die meisten Menschen verwenden Firefox, Safari, Internet Explorer oder Edge, die tatsächlich deckt 90 Prozent der Internet-Nutzer. Firefox und Chrome, das ist die, die ich verwende, sind unter Windows verfügbar, und Safari ist auf Mac verfügbar, und ich bin ziemlich sicher, Internet Explorer oder Edge , Das ist eine neuere Version, ist nur Microsoft Ich denke, das ist nur PC, aber ich würde Chrome, Safari oder Firefox empfehlen. Ich habe diese alle auch auf meinem Computer installiert. Lassen Sie mich auch Firefox öffnen. Der Grund, warum ich diese drei empfehle, ist, dass sie alle mit Entwickler-Tools kommen. Was ich damit meine, ist, wenn ich in Google Chrome gehe, was mein bevorzugter Browser ist, und ich drücke Alt-Befehl I. Dies wird meine Entwicklerkonsole aufbringen, und Sie verstehen möglicherweise nicht, was in all diesen verschiedenen Registerkarten hier, aber es ist sehr mächtig, dies zu haben. Dies macht es viel einfacher, zu debuggen. Wir können unsere Website oder jede Webseite im laufenden Betrieb bearbeiten, um neue Dinge zu testen, können wir Stile sehen, die gelten. Es ist sehr gut, diese Tools zu haben, wenn Sie für das Web entwickeln. Safari, ich glaube, es ist, genannt Web Inspector. Webinspektor anzeigen. Ich denke, wir müssen zuerst auf eine eigentliche Seite gehen. Gehen wir einfach zu Google.com.au, zeigen Web Inspector, und wie Sie hier unten sehen können, haben wir eine ähnliche Schnittstelle, und auf Firefox, wie nennen sie es? Konsole. Ich benutze nur Chrom. Ich bin mir nicht sicher, wie man es nennt, aber wir werden es in einer Sekunde herausfinden. Man nennt es einfach den Inspektor. So können Sie gehen in, Tools, Web-Entwickler, und klicken Sie auf eine dieser, um eine ähnliche Schnittstelle zu erhalten. Sie werden den Inspektor sehen, wo Sie Elemente Konsole, Debugger überprüfen können. Wieder, lass dich nicht von all dem Zeug überwältigen. Ich lasse Sie nur wissen, in Bezug auf die Auswahl Ihres Browsers. Wenn Sie sich einfach an Chrome, Firefox oder Safari halten , werden Sie mehr als okay sein. Wenn Sie so genau wie möglich folgen möchten, Chrome ist auf jeden Fall eine gute Option. Das zweite, was Sie brauchen werden, ist ein Code-Editor. Ich benutze Atom seit einiger Zeit und ich mag es wirklich, aber es gibt andere Optionen für eine freie Option wie Sublime Text, Sie könnten Vim verwenden, oder Sie könnten eine andere namens Klammern verwenden. Alle diese sind mir sicher frei, und sie funktionieren alle in ähnlicher Weise. Wieder, wenn Sie so genau wie möglich mit dem, was ich tue, verfolgen möchten und Sie einfach keine Vorliebe gegenüber einem Code-Editor haben, können Sie einfach Atom wählen. Eine Sache, die ich sagen sollte, ist technisch gesehen, wenn Sie auf einem PC sind, können Sie Notepad verwenden, um Webseiten zu entwickeln. Ich bin mir ziemlich sicher auf Mac, ich könnte TextEdit theoretisch verwenden, um Web-Dokumente zu erstellen, aber Sie werden nicht alle speziellen Funktionen erhalten, die es einfacher machen, für das Web zu entwickeln , wie Sie es in einem Code-Editor wie Atom, Vim oder erhabenen Text. Ich würde dringend empfehlen, einen richtigen Code-Editor aufzunehmen und nicht über Notepad oder TextEdit zu entwickeln. Wieder, wenn Sie nicht wissen, wovon ich spreche, laden Sie einfach Atom oder Sublime Text oder Vim herunter, und Sie werden süß sein. Wenn Sie einen Code-Editor und einen Webbrowser haben, sind Sie ziemlich bereit zu gehen. Das sind die beiden Dinge, die du wirklich brauchst. Aber in Bezug auf das Wissen, wenn Sie von Grund auf neu beginnen, wenn dies Ihr erstes Mal ist, über Web-Entwicklung zu lernen, empfehle ich Ihnen definitiv, einen meiner vorherigen Kurse zu besuchen, so dass Sie einfach zu meinem Profil, und meinen vorherigen Kurs, das Verständnis von Web-Entwicklung, ein Anfänger Leitfaden für das Web. Dies wird Ihnen einen Überblick über die gesamte Webentwicklung geben, und daher empfehle ich jedem, der danach zu meinen Kursen kommt , nachher zurückzugehen und sich auf diesen zu beziehen. Wir sprechen über Konzepte, wie HTML und CSS, aber auch darüber, wie das in Back-End-Programmierung passt. Der Unterschied zwischen Front-End und Back-End, wie Sie Ihre Websites bereitstellen, einen Server erhalten, all diese verschiedenen Dinge. Ich gebe nur einen Überblick über die Webentwicklung in diesem Kurs, und daher empfehle ich, dass man zuerst. Nur damit Sie wissen, wo HTML und CSS in das Gesamtbild der Webentwicklung passen. Andernfalls, wenn Sie das Gefühl haben, ein gutes Verständnis der Webentwicklung zu haben oder Sie diesen Kurs bereits besucht haben. Wir sind so ziemlich bereit, direkt einzutauchen und mit etwas HTML zu beginnen. Ich freue mich sehr auf den Start und ich werde dich im nächsten Video sehen. 3. Was sind HTML und CSS: In diesem Video werden wir abdecken, was HTML und CSS ist. Wir haben tatsächlich diskutiert, wie HTML und CSS in einer meiner vorherigen Klassen, die Webentwicklung verstehen Wenn Sie also diese genommen haben, haben Sie wahrscheinlich bereits ein ziemlich gutes Verständnis davon, was HTML und CSS sind. Aber in diesem Video und in dieser Klasse im Allgemeinen werden wir ein wenig tiefer hineintauchen. Ein guter Ort, um HTML zu verstehen, ist die Einführung auf w3schools.com. Wenn ich zu w3schools.com gehe, klicke ich auf „HTML lernen“ und dann klicke ich auf „HTML-Einführung“, es spricht darüber, was HTML ist und gibt uns ein einfaches HTML-Dokument. Ich denke, sie machen einen ziemlich guten Job, HTML zusammenzufassen, es steht für Hyper Text Markup Language, und es beschreibt die Struktur von Webseiten mit Markups. Sie haben Elemente, die die Bausteine von HTML-Seiten bilden, Elemente werden durch Tags dargestellt, und innerhalb von Tags sind Inhaltsstücke. Eine wichtige Sache zu beachten ist, dass Browser nicht tatsächlich HTML anzeigen, aber sie verwenden sie, um den Inhalt der Seite zu rendern. Also im Grunde, was wir hier sehen, ist Code, der von unserem Browser interpretiert wird , um die Seite zu konstruieren und zu sehen, was Sie in Ihrem Browser sehen. Das ist ein bisschen Meta, aber wir sind gerade auf einer Webseite. Was wir uns ansehen, sind die Ergebnisse von HTML und CSS, die in unserem Browser zusammengestellt wurden, um eine Website zu erstellen. Aber wie wir zu diesem Punkt kommen, ist durch HTML. Nur um dieses Haus zu bohren, können wir zu jeder Webseite gehen, sagen wir zum Beispiel diese Webseite, und klicken Sie mit der rechten Maustaste darauf und klicken Sie auf „View Page Source“, und dann werden Sie sehen, was tatsächlich an den Browser zugeführt geben Ihnen das Ergebnis hier drüben. Dies ist ein ziemlich kompliziertes Beispiel, denke ich, Sie haben am Anfang viel CSS hier, das in die Seite eingebettet ist. Sie können nach unten scrollen und dort einige JavaScripts sehen. Ich würde dadurch nicht zu verwirrt werden, aber Sie können hier viel HTML mit Klassen und anderen Attributen sehen. Ich erwarte nicht, dass du vollständig verstehst, was hier vor sich geht, darum geht es in diesem Kurs. Aber ich wollte nur die Punkte machen, alles, was Sie in Ihrem Browser sehen, ist HTML und unter anderem wie CSS und JavaScript. Wie können Sie an HTML denken? Ich mag es als eine Struktur zu betrachten, aber auch definierende Elemente. Wie Sie in unserem Dokument hier unten sehen können, wir es, sobald wir ein Tag erstellen definierenwir es, sobald wir ein Tag erstellen, aber wo wir es innerhalb des Dokuments platzieren, definiert auch die Struktur. Wie Sie sehen können, ist dieses Absatz-Tag nach dieser Überschrift Tags also, wenn wir die Reihenfolge ändern würden, das würde die Struktur ändern, und wie Sie sehen, wie wir durch den Kurs gehen, können wir Tags innerhalb von Tags verschachteln und erstellt, Ich denke, eine Struktur von Elementen, die als Document Object Model oder DOM bekannt ist. Nochmals, machen Sie sich keine Sorgen darüber, wir werden das Document Object Model sehr lange abdecken. Das ist ein wenig darüber, wie HTML, was ist CSS? Nun, wir können zum CSS-Menüpunkt auf w3schools.com gehen und zur Einführungsseite davon gehen und wir bekommen ein bisschen einen Überblick. Grundsätzlich beschreibt CSS, wie HTML-Elemente auf Ihrem Bildschirm, auf Papier oder in anderen Medien angezeigt werden sollen , wie es hier heißt. Es steht für Cascading Style Sheets, und wir können unser CSS an verschiedenen Orten speichern, verschiedene Stile wiederverwenden, es macht einfach alles organisierter, wenn wir CSS in separaten Dateien speichern oder Regeln innerhalb des gleichen Dokuments wie das HTML definieren. Wieder, wir werden all das abdecken, also wirst du sehen, dass es direkt vor dir passiert. Aber wenn wir zurück zur Seitenquelle einer Website gehen, lassen Sie uns einfach diese Website machen, weil sie direkt vor uns ist, wir haben CSS hier, und das sind tatsächlich eingebettete CSS-Regeln in das Dokument. Aber wenn wir zu einem Element gehen, können wir vielleicht anfangen zu sehen, und ich sehe nicht, dass etwas sofort kommt, aber wir können Stil suchen, und wir können beginnen, ein HTML-Element mit einem Attribut des Stils zu sehen, , wo wir auch einige CSS definieren können. Sie können zu jeder Webseite gehen und Sie können CSS sehen und Sie können HTML sehen. Aber oft wird der CSS-Code in einem anderen Dokument gespeichert, auf das von diesem Dokument verwiesen wird. Das werden wir auch in Kürze sehen. In der Zwischenzeit, um den Unterschied zwischen CSS und HTML zu bohren, möchte ich Ihnen eine Webseite zeigen, die überhaupt kein CSS hat. Dafür brauche ich eine bestimmte Erweiterung. Sie müssen diese Erweiterung nicht herunterladen, ich habe sie nur für die Zwecke dieser Demonstration heruntergeladen, so dass Sie einfach folgen können. Aber wenn wir zu einer Website gehen, lassen Sie uns einfach zu Google.com gehen, und ich habe diese Erweiterung hier, die mir erlaubt, alle Stile zu deaktivieren. Ich kann in das CSS-Menü gehen, drücken Sie „Alle Styles deaktivieren“, und Sie können sehen, wie die Google-Homepage ohne CSS aussieht. Ich bin momentan eingeloggt, also gibt es dort einige meiner Informationen. Aber im Wesentlichen können Sie sehen, dass das Suchfeld dort ist, Sie bekommen die Vorschläge, ich denke, das wird angezeigt und Sie bekommen die Schaltflächen und die Bilder, aber es ist überall und es ist nicht schön gestylt. Wenn wir es wieder aktivieren, werden Sie beginnen zu sehen, dass alles angelegt ist, und Sie können beginnen, um die Bedeutung von CSS zu sehen weil diese Website hier ziemlich unbrauchbar ist. Aber um fair zu sein, ist das Internet heutzutage stark auf CSS und Styling angewiesen. Es gibt Beispiele, die ich aus den 90er Jahren oder so zeigen könnte, wo überhaupt kein CSS involviert ist. Eigentlich habe ich ein Beispiel, um es dir zu zeigen. Wenn ich zu www-cs gehe, fand ich diese Webseite, die anscheinend ohne CSS erstellt wird. Ich konnte reingehen und feststellen, dass es ein Stylesheet geladen hat, aber wir können einfach hineingehen und diesen Link löschen. Dies ist so ziemlich, wie eine Website ohne CSS aussieht. Wie Sie sehen können, sind die Links hier entweder lila oder dunkelbraun gefärbt, ich denke, man könnte das dunkelviolett, blau nennen , oder wenn man darauf klickt, kann man rot werden. Sie werden sehen, dass die Elemente wie übereinander gestapelt sind, es gibt keine Spalten, es sind im Grunde nur Bilder, Texte. Sie können Text fett formatieren, das ist darüber, Sie können einige chinesische Zeichen einfügen, die aussieht, Sie können Links einfügen, Sie können diese horizontale Regel einfügen, und Sie können Links übereinander stapeln, aber Sie sind ziemlich limitiert. Ich meine, in den 90er Jahren könnten Sie mit einer Website wie dieser ohne CSS davonkommen , aber in der heutigen Zeit brauchen Sie unbedingt CSS und es ist so wichtig, jede Art von Web-Dokument zu erstellen. Ich hoffe, dass Ihnen mitteilt, wie wichtig es ist, CSS neben Ihrem HTML zu haben, und wie sie zusammen grundlegend und kostenlos sind. Eine Sache, die ich über HTML und CSS erwähnen werde, ist, dass, wenn Sie anfangen, es im Web zu erforschen oder andere Kurse auszuchecken, Sie Leute hören oder Leute lesen, die sich auf HTML und HTML5 beziehen, als ob es sich um verschiedene Dinge handelt. Wie wenn ich HTML5 auf Google suche, bekomme ich offensichtlich eine Reihe von Artikeln mit HTML5, und wenn ich HTML suche, bekomme ich nur HTML. Es ist ein ähnlicher Typ, Websites wie w3schools.com, beide haben eine Seite auf HTML und HTML5. Es kann ziemlich verwirrend sein zu wissen, na ja, was lernt man in HTML oder HTML5? Wie Sie sehen können, ist HTML5 die neueste Version von HTML, und es ist seit fast drei Jahren oder etwa drei Jahren veröffentlicht. Es ist definitiv die neue Version von HTML, die es schon seit einiger Zeit gibt. Ich werde nur in dieser Klasse auf HTML und HTML5 als im Grunde dasselbe bezeichnen , weil wir in HTML5 entwickeln sollten, nicht HTML4, wenn wir die Webentwicklung heute im Jahr 2018 lernen, oder für immer, wenn Sie in den Jahren zuhören zu kommen. Das Gleiche mit CSS und CSS3. Wenn wir CSS eingeben, werden wir alle diese Links sehen, CSS3 und Sie haben ähnliche Webseiten, die sich von CSS zu CSS3 unterscheiden. Auch hier ist CSS3 nur die neueste Version von CSS und ich denke, wie HTML, es ist seit sehr langer Zeit raus. Ich beziehe mich nur auf CSS und CSS3 als im Grunde dasselbe in diesem Kurs. Das ist genug Theorie für den Moment. Ich weiß nicht, ob ich über CSS und CSS3 sprechen musste aber es ist etwas, das mich auch verwirrt hat, weil ich HTML hier und HTML5 gesehen habe. Die Leute bezeichnen sie oft als getrennte Dinge, aber am Ende des Tages lernen wir HTML und CSS im Jahr 2018 oder darüber hinaus. Wir können uns HTML und HTML5 nur als das Gleiche vorstellen. Das ist genug Theorie für den Moment. Im nächsten Video werden wir aufhören, über HTML und CSS zu sprechen und tatsächlich anfangen, einige zu entwickeln. Wir sehen uns im nächsten Video. 4. Erste Schritte mit HTML: Zuerst öffnen wir unseren Code-Editor. Für mich ist es Atom. Während das geladen wird, gehe ich zurück in unseren Browser und lass uns diese Seite von W3-Schulen erneut besuchen. Also gehe ich dorthin. Klicken Sie auf „HTML lernen“, klicken Sie auf „HTML-Einführung“. Also möchte ich, dass Sie nach unten scrollen, wo es Ihnen dieses einfache HTML-Dokument zeigt. Schauen wir uns mal an, was hier vor sich geht. Es gibt zwei Teile, und einer ist die Tags. Sie können die Tags von diesen Kleiner-als-Zeichen und Größer-als-Zeichen mit etwas Text dazwischen sehen. Dann gibt es Inhalt, der in diesem Fall nur Text ist. Sie haben Seitentitel, Meine erste Überschrift, Mein erster Absatz. Es ist hier eigentlich ziemlich schön formatiert und Ihr Code-Editor sollte dasselbe tun. Sie können diese verschiedenen Teile farblich codiert sehen. So können Sie sagen, dass dies ein Tag ist und Sie können sagen, dass dieser Text Teil dieses Tags aus der Farbe ist. Mit Tags haben Sie also öffnende und schließende Tags und Tags ohne Inhalt. Hier oben zum Beispiel ist dies ein Tag, das kein Öffnen oder Schließen hat. Sie müssen das nur einmal eintragen. Aber wenn Sie zum nächsten Tag schauen, haben wir HTML. Aber dann hier unten haben wir wieder, aber mit einem Schrägstrich vorne, und das bezeichnet das schließende Tag. Grundsätzlich macht alles, was zwischen dem öffnenden und schließenden Tag liegt, aus, was dieses Tag definiert. Das klingt abstrakt, aber wenn wir uns hier ein konkreteres Beispiel mit dem Titel ansehen, bedeutet dies, dass der Titel beginnt. Dann setzen wir den Titel ein und dann verwenden wir das schließende Tag, um zu sagen, dass wir den Titel abgeschlossen haben. Der Titel geht in den sogenannten Kopfbereich Ihres HTML-Dokuments, aber es gibt auch einen Hauptteil, der hier geöffnet und geschlossen wird. Wir gehen in nur einer Minute in Kopf und Körper, aber ich will hier rüber kommen, ist, dass wir Tags haben. Dies ist die Grundlage von HTML und was zwischen den Tags und was in dem Tag ist definiert hier das Element. In diesem Beispiel haben wir gerade Text, aber wir können alles hineinlegen, wir können andere Tags dort einfügen. Wir können Bilder dazwischen setzen, und im Grunde ist dies HTML. Dies ist unser Markup, es wird ein sehr einfaches Beispiel sein. Nun, was ich tun möchte, ist dieses ganze Beispiel zu nehmen und es in unseren Code-Editor zu verschieben. Also werde ich einfach alles auswählen. Drücken Sie „Befehl C“ auf einem Mac, um zu kopieren. Ich werde diese Willkommensbotschaften von Atom loswerden. Ich werde auf „Neue Datei“ klicken, und wir erhalten eine leere Datei. Jetzt gibt es noch keine Formatierung, weil es nicht weiß, um welche Art von Dokument es sich handelt. Was ich also tun werde, ist, dass ich auf „Datei“ klicke und diese sofort speichern werde. Was Sie jetzt tun müssen, ist zu navigieren, wo Sie es speichern möchten. Während wir uns während des Kurses bewegen, werden wir weitere Dateien hinzufügen, also sollten wir wirklich ein Projektverzeichnis einrichten. Ich gehe nur auf den Desktop und erstelle HTML- und CSS-Projekt. Ich werde es nur so nennen. Jetzt haben wir also einen Ordner, in dem unser Projekt untergebracht werden kann. Was ich das nennen werde, ist index.html. Sie müssen Ihre index.html nicht anrufen. Der wichtige Teil ist, dass Sie Punkt-HTML am Ende haben, weil das Ihrem Computer und alles andere, was versucht zu interpretieren, was diese Datei ist, sagen Sie es speziell, dass dies ein HTML-Dokument ist. Index ist ein gemeinsames Wort oder Name, um ein HTML-Dokument zu geben, das sich in der Mitte des Projekts befindet. Also denke ich, Index in diesem Fall ist dot HTML ein wirklich geeigneter Name. Wir klicken auf „Speichern“ und plötzlich werden Sie beginnen zu sehen die Farben kommen ähnlich wie wir hier hatten. So werden wir hier einige Formatierungen sehen und wir können deutlich sehen, was ein Tag ist und was ein Stück Text oder Inhalt innerhalb des Tags ist. Die andere tolle Sache über einen Code-Editor, das heißt, ich kann auf die Öffnung klicken und es wird das Schließen hervorheben , so dass Sie beginnen können zu sehen, wo es geschlossen wird. Wenn ich das einfach tun und den Abschluss loswerden würde, würde das mein Dokument brechen. Vielleicht wird es in diesem Fall immer noch auftauchen. Aber sobald Sie ein vollständiges Dokument haben, möchten Sie definitiv jederzeit schließen. Jetzt, nur um es ein bisschen einfacher zu machen, Verschachtelung zu zeigen, möchte ich den Titel einrücken, so dass Sie sehen können, dass er im Kopf sitzt, und ich möchte das einrücken, weil er im Körper sitzt. Wenn wir ein anderes Tag erstellen und es darunter legen würden, würde ich erwarten, dass ich auch Tab über. Sie werden dies viel in der Webentwicklung sehen, um Verschachtelungen zu zeigen, aber wir werden die Verschachtelung in einem zukünftigen Video behandeln. Im Moment wollte ich nur die Tags durchgehen, die wir hier hatten. Ich habe erwähnt, dass wir leere Tags haben, also gibt es keine Notwendigkeit für ein schließendes Tag, aber dann haben wir diese öffnenden und schließenden Tags. Ganz oben haben wir HTML, das definiert, dass es sich um ein HTML-Dokument handelt. Es gibt nicht viel mehr über dieses Tag zu sagen , außer dass versuchen, alles zwischen diesen beiden zu halten. Wir haben die Hauptabteilung. Der Kopfbereich ist, wo Sie Ihre Metadaten einfügen. Wir werden ein vollständiges Video auf HTML Kopf später in dieser Klasse machen. Aber für den Moment, eines der Dinge, die Sie auf Ihrer Webseite brauchen werden, ist ein Titel. So können wir den Titel zwischen die Kopf-Tags setzen. Wenn Sie also Ihr Dokument in einem Browser anzeigen, gehen wir vielleicht sofort hinein. Was ich tun kann, ist auf „Finder“ neues Finder-Fenster klicken. Ich kann dorthin navigieren, wo mein Projekt ist und ich kann diesen index.html schreiben buchstäblich in meinen Browser ziehen. Wie Sie hier sehen, ist dies keine Adresse im Internet, aber immer noch in der Lage, sie über unseren Browser zu interpretieren, weil es einfach HTML und Css und JavaScript ist , wenn wir es zu diesem Projekt hinzufügen. Wie Sie sehen können, sitzt der Seitentitel hier oben. Wenn ich zurück in den Code-Editor gehen und Seitentitel in HTML-Dokument ändern und auf „Speichern“ klicken, dann laden Sie diese Datei neu. Sie werden sehen, dass der Titel dieser Seite jetzt HTML-Dokument ist. So können Sie beginnen zu sehen, dass genau hier alles innerhalb des Fensters Ihres Dokuments der Körper ist. Dann ist alles, was im Kopf ist, wenn wir dorthin zurückkehren, wenn wir dorthin zurückkehren,Zeug, das das unterstützt. So haben Sie den Titel, der in geht, wenn Sie auf einem Tab auf Google Chrome suchen oder Sie öffnen ein Fenster, das auf dem Fenster selbst angezeigt wird. Sie können hier andere Dinge im Zusammenhang mit SEO setzen, Sie können externe Stylesheets in hier verknüpfen. Wieder werden wir später genauer in den Kopf gehen, aber das ist im Wesentlichen der Unterschied zwischen Kopf und Körper, was Sie hier sehen. Ich habe gesagt, dass wir die Verschachtelung in einem späteren Video abdecken würden, aber es ist ein einfaches Konzept, also werde ich es gerade jetzt abdecken. Ich werde Ihnen einige Elemente werfen, mit denen Sie vielleicht nicht bereits vertraut sind. Keine Sorge, wir decken sie später ab. Aber nur um die Verschachtelung zu demonstrieren, wenn ich dieses Absatz-Tag greifen sollte, setzen Sie es hier ein, nennen Sie diesen zweiten Absatz. Dann haben Sie hier ein anderes div-Tag. Divs sind im Grunde nur Blöcke in HTML. Dann kann ich in meinem dritten Absatz setzen, Sie können beginnen, zu sehen, Verschachtelung geschieht hier. Wie Sie sehen können, haben wir Körper und im Körper haben wir h1, P und div. Innerhalb dieses div haben wir P plus ein anderes div, und innerhalb dieses div haben wir ein P, das im Wesentlichen verschachtelt ist. Im Moment wird es nicht zu viel Sinn machen, bis wir mehr Elemente logisch auf der Seite präsentiert haben . Aber im Wesentlichen haben Sie dieses h1-Tag, ein P-Tag und dann ein div, das direkt danach geht. Wenn wir einige Stile für dieses div-Tag definieren würden, würde es sich auf alles in ihm auswirken. Diese werden als untergeordnete Elemente dieses Tags bezeichnet und dies wird als übergeordnetes Element bezeichnet. Aber wieder, ich werde hier ein bisschen technisch. Wir brauchen noch nicht so viel ins Detail zu gehen. Aber im Wesentlichen werden Sie das viel in HTML sehen und es heißt Verschachtelung. Ich werde diese Änderungen nur rückgängig machen , indem ich Control Z drücke. Das deckt so ziemlich das grundlegende Dokument ab, das wir im Beispiel hier gefunden haben. In diesem Video haben wir uns mit dem Titel vertraut gemacht, wir haben uns mit h1 und P vertraut gemacht, aber es gibt viel mehr Elemente in HTML zu verwenden. In den nächsten Videos werden wir einige der anderen Elemente abdecken, die Ihr HTML-Dokument ausmachen können. Also werde ich Sie im nächsten Video sehen. 5. Überschriften und Absätze: In diesem Video werden wir Überschriften und Absätze abdecken. Wir haben bereits eine Überschrift und einen Absatz in unserem Dokument, aber wir haben nicht wirklich erklärt, wie jedes dieser Elemente funktioniert. Mit Überschriften-Tags können wir zurück zu W3Schools gehen und beginnen, in Überschriften ein bisschen mehr zu graben. Aber wie Sie sehen können, haben sie hier ein großartiges Beispiel, wo sie sechs verschiedene Überschriften in sechs verschiedenen Größen erstellen. Aber in Wirklichkeit sind Überschriften wichtiger als nur die Größe. Suchmaschinen verwenden Überschriften, um die Struktur und den Inhalt Ihrer Webseite zu indizieren. Es gibt zwei wichtige Punkte, die hier zu den Rubriken zu erwähnen sind. Gehen wir zurück zu unserem Dokument hier und sehen, dass wir ein h1-Tag haben, warum haben wir ein h1-Tag? Nun, h1 soll die Überschrift der obersten Ebene sein. Wenn ich zu unserem Dokument zurückgehe, öffne ich eine neue Registerkarte und ziehe sie einfach wieder hinein, damit ich beide öffnen kann, und wenn das gesagt wurde, und wenn das gesagt wurde, ein Blog-Beitrag oder ein Dokument über die Seite oder was auch immer, sagen wir einfach, es ist eine über Seite, Sie würden h1 verwenden, um „Über uns“ zu sagen. Nur aus Gründen der Konsistenz werden wir hier einen Titel erstellen, der besagt: „Über uns“. Vergewissern Sie sich, dass Sie immer sparen. Ich benutze nur Control S, aber Sie können dort auch „Datei speichern“ gehen und zu Ihrem Dokument zurückkehren und wie Sie sehen können, handelt es sich um uns und die Überschrift der obersten Ebene, die durch h1 definiert wird, ist da. Vielleicht, wenn Sie ein Dokument machen würden, einen Beitrag über uns, würden Sie über uns haben, einen ersten kleinen Absatz, aber vielleicht wollen Sie auch einige Unterüberschriften. Die nächste Rubrik der Ebene wäre h2. Über unsere Geschichte, vielleicht, wenn dies wie ein Unternehmen oder ein Duo ist, wollen Sie vielleicht eine Unterebene Überschrift haben, und dann würden Sie vielleicht ein anderes Absatz-Tag einfügen und dann könnten wir mehrere h2's auf dieser Ebene haben, wenn das Sinn ergibt. Unsere Geschichte, unsere Werte, sagen wir mal, und ich könnte mehr Text in diese Absätze werfen, aber das ist offensichtlich nur Demonstrationszwecke. Wenn ich in unseren Browser zurückgehe und aktualisiere, können Sie sehen, dass unsere Top-Level-Überschrift über uns ist und unsere Geschichte und unsere Werte darunter fallen. Jetzt in HTML haben Sie bis zu sechs Ebenen, so dass Sie tiefer und tiefer gehen können, vielleicht gibt es zwei Überschriften in unserer Geschichte. Also würden Sie gehen und die nächste Zahl h3 verwenden um tiefer zu gehen und eine andere Unterebene Überschrift zu haben, aber wie wir kurz zuvor erwähnt haben, ist es auch wichtig, welche Überschriften Sie für SEO verwenden. Denken Sie nicht nur an h1's als die große Abneigung von h2 und denken Sie einfach an die Größe, wenn Sie Ihr HTML-Dokument schreiben, Sie möchten definitiv der Struktur folgen, in der Sie Ihre Überschrift der obersten Ebene haben, die h1 ist und dann alles unter es geht in Zahlen nach unten. Es geht nicht nur um die Größe der Überschrift, es geht auch darum, es für den Benutzer besser lesbar zu machen, sondern dann auch Suchmaschinen wie Google, die Struktur Ihrer Seite zu erzählen und das ist ein Tool, das Google verwendet herauszufinden, wie Sie Ihre Seite indizieren, aber dann auch, um herauszufinden, wie lesbar sie ist. Struktur ist wichtig für den Leser, es ist auch wichtig für Suchmaschinen und alles, was Sie wissen, ist, dass Sie eine Überschrift als oberste Ebene haben und dann von dort nach unten arbeiten müssen. Wenn wir eine Überschrift unter Überschrift eins haben, wird es h2 sein und dann unter h2 wäre h3 und so weiter und so weiter. Das andere, was Sie tun können, was nicht wirklich eine Überschrift ist, ist eine horizontale Regel. Es ist auch mit dem h definiert. Aber im Grunde, wenn wir eine Trennung zwischen diesen beiden Überschriften haben wollten, können wir ein h-Tag einfügen. Dies ist kein Leid, ein hr-Tag, dies ist ein selbstschließendes Tags, so dass Sie keinen Inhalt darin einfügen müssen. Sie müssen dies nicht tun, zum Beispiel können Sie einfach das Kleiner-als-Zeichen, hr, Größer-als-Zeichen einfügen. Gehen Sie zurück zu unserer Seite und Sie können sehen, dass es eine horizontale Regel gibt. Das nächste, was sind Absätze und ich werde mich auch auf W3Schools beziehen. Das Wichtigste, was Sie über HTML und Absätze beachten müssen, ist, dass Sie die Ausgabe nicht ändern können , indem Sie zusätzliche Leerzeichen oder zusätzliche Zeilen in Ihrem HTML-Code hinzufügen. Dies sollte definiert werden, indem Sie Absätze verwenden , indem Sie ausdrücklich sagen, dass Sie einen Zeilenumbruch haben möchten, und Sie müssen HTML-Entitäten und dergleichen einfügen, um mehr Leerraum zu erhalten. Nochmals, mach dir keine Sorgen darüber, wir werden das in einer zukünftigen Lektion behandeln, aber im Moment zeigen wir das einfach. Unser erster Absatz, und dann lass uns den Platz nehmen und Hallo sagen, auf Wiedersehen. Gehen wir zurück und Sie können sehen, dass der älteste weiße Raum, den wir erstellt haben, und Umrissbruch, es kommt nicht über. Absatz, wenn Sie eine Trennung von Zeilen haben wollten, können Sie dies tun, indem Sie dies in ein anderes p-Tag einfügen und das Ihrem Browser mitteilt, dass dies ein neuer Absatz ist, also haben Sie einige Abstände dazwischen. Wenn ich das wieder so machen will, wie es war, sagen Sie hallo, auf Wiedersehen. Jetzt sehen Sie, dass es sich in einer neuen Zeile befindet, da es sich um einen neuen Absatz handelt. Es ist in diesem neuen ein Absatz-Tag, aber wieder, der Leerraum dazwischen, ist nicht da. Eine Möglichkeit, das zu umgehen, besteht darin, das Pre-Tag zu verwenden. Wenn Sie das Pre-Tag verwenden, wird es mit einer festen Schriftart angezeigt und es behält sowohl Leerzeichen als auch Zeilenumbrüche bei. Wenn ich hier wieder rein gehe und wir einen Pre erschaffen. Eigentlich, lassen Sie uns einfach ändern, was wir bereits haben, ich werde hinzufügen und wieder in das. Nun, das Absatzelement, das Absatz-Tag ist jetzt Pre-Tag, und wie Sie sehen können, haben wir diese seltsame Schriftart, aber wir haben unseren Zeilenabstand. Ich weiß keine Situation, in der Sie Pre verwenden müssten. Manchmal kann es als Entwickler nützlich sein, Code anzuzeigen, weil Code, den Sie Einrückungen und ein wenig Formatierung anzeigen möchten , aber oft ist es am besten, Pre zu verwenden, wenn Sie möchten. Seltsame Menge an Leerraum zwischen Wörtern, es gibt Möglichkeiten, das zu tun, aber wenn Sie eine Trennung zwischen neuen Zeilen haben möchten, können Sie ein neues p-Tag wie dieses haben. Eine andere Möglichkeit, neue Zeilen zu haben, besteht auch darin, einen anderen leeren Tag-Code, br, zu verwenden. Wenn ich einfach zwischen diesen beiden Wörtern gehe und einen BR in, ziemlich sicher, dass das für Pause steht und du kannst hier rüber gehen und sehen, dass es jetzt einen Zeilenumbruch gibt. Es ist ein wenig getrennt, weil es zwischen diesen beiden Zeilen keine Polsterung oder Marge gibt. Wenn Sie nur die Zeile brechen wollten, können Sie dies tun, aber wenn Sie viele Absätze schreiben, würden Sie vielleicht, wenn Sie sie in verschiedene Absatz-Tags einfügen und es so strukturiert haben, wird es einfacher zu formatieren, da Sie definieren können, wie groß die Lücke zwischen den verschiedenen Absätzen sein soll. Dasselbe gilt für hier oben mit Überschrift eins in Ihren Stilen, die wir in CSS eingehen werden, wir können definieren, wie groß dieser Spielraum zwischen hier und unserem ersten Absatz ist. Das sind so ziemlich Überschriften und Absätze. Dies sind die einfachsten Bausteine Ihres Dokuments, aber im nächsten Video wir auf drei wirklich gängige gehen , die Sie ständig in HTML-Dokumenten sehen werden. Ich werde Sie im nächsten Video sehen. Lassen Sie uns das Erstellen unseres HTML-Dokuments im nächsten Video fortsetzen. 6. Links, Bilder und Schaltflächen: Wie ich im vorherigen Video erwähnt habe, sind Links, Bilder und Schaltflächen ziemlich häufig in HTML, und das ist, was wir als nächstes behandeln werden. Was jeder von ihnen tut, ist ziemlich selbsterklärend. Ich werde einfach direkt hineinspringen und einige Links, Buttons und Bilder in unsere Projekte einfügen. Ich werde zuerst ein Bild brauchen, und ich muss zugeben, dass ich noch kein Bild vorbereitet habe, also werde ich jetzt einfach eins finden und vorwärts zwingen. Ich habe dieses zufällige Bild hier bekommen, und was wir tun werden, ist es neben meinem HTML-Dokument in das Projektverzeichnis zu legen . Das ist ein verrückter Name. Ich werde dieses Foto nur der Einfachheit halber nennen. Dort haben wir ein Foto, das wir referenzieren und in unser Projekt bringen können. Ich gehe zurück zu meinem Code-Editor und ich werde nach dem headfirst head-Tag, dem H1-Tag, und ich werde ein Bild erstellen, das ziemlich einfach ist. Wir machen einfach so ein Bild. Nun, wenn ich dort nur ein Bild-Tag drücke, wird wirklich nichts passieren, weil wir dem Dokument nicht wirklich sagen, woher das Bild kommt. Es muss ein Attribut geben. Dies wird unser erster Blick auf Attribute sein, aber wir werden später tiefer in sie eingehen. Wenn wir nach dem Namen des Tags ein Leerzeichen machen und einen Text einfügen, werden wir das in Braun in meinem speziellen Fall sehen, weil ich Adam verwende. Was wir hier tun, ist die Zuweisung eines Attributs. Ich werde „Equals“ drücken und dann werde ich Klammern öffnen und schließen. Denn was wir hier drinnen setzen, nennt man eine Schnur. Eine Zeichenfolge ist nur ein technischer Begriff für einen Text. Aber die Anführungszeichen sagen im Grunde, nehmen Sie dieses Wort für Wort. Auch hier, mach dir keine allzu großen Sorgen um die Syntax. Wissen Sie nur, dass Sie etwas Text eingeben müssen, gleich, und dann ist ein Text auf der anderen Seite gleich in Anführungszeichen. Sie können auch einfache Anführungszeichen tun, wenn Sie es bevorzugen. Das werden wir später die Auswirkungen davon sehen. Alles, was ich hier reinlegen muss, ist, wenn wir hierher zurückgehen, der Name der Datei und wo sie gespeichert ist. Anscheinend ist es im selben Ordner wie unser HTML-Dokument, kann ich das einfach dort hineinlegen. Ich drücke „Speichern“. Gehen Sie zurück zu unserem HTML-Dokument und plötzlich sehen Sie das Bild dort. Aber was es tun wird, ist, dass es in die volle Höhe und Breite des Originalfotos sprengen wird. Was wir tun können, ist in einige andere Attribute hier setzen, Breite und Höhe. Sie können auch Breite und Höhe in CSS definieren. Aber weil Bilder seit den frühen Tagen von HTML existieren, können wir auch Breiten und Höhen von ihnen definieren. Was ich hier tun werde, ist, es auf 100 Pixel zu beschränken, und die Einheit für Pixel ist px. Stellen Sie keinen Raum dazwischen. Stellen Sie sicher, dass Sie es direkt neben der Ziffer haben. Dann werde ich auf „Speichern“ drücken. Ich werde wieder hierher kommen. Dann werden Sie sehen, dass es 100 mal 100 ist, aber leider war das Bild zunächst nicht quadratisch, also haben Sie hier etwas Stretching. Wenn ich gehe, sorry, ich habe das ein bisschen zu schnell gemacht, mit Chrome, Ich kann mit der rechten Maustaste hier klicken, klicken Sie auf „Inspect“. Ich kann unser HTML-Dokument interaktiv in unserem Browser sehen. Was ich gerade getan habe, war, dass ich dieses bestimmte Element inspiziere und es wird mir das Tag zeigen, das dieses Element erstellt. Was ich dann tat, ist, dass ich über Foto schwebte. JPEG. Ich kann hier die natürliche Art von Seitenverhältnis und Pixel sehen, die es ursprünglich war. Sie können hier sehen, dass diese beiden Zahlen gleich sind. Wenn ich es zu einem Quadrat mache, wird es etwas seltsam aussehen. Lassen Sie mich einige schnelle Berechnungen durchführen, um herauszufinden, wie wir diese Proportionen beibehalten können. Wir wollen, dass es 9,6 mal kleiner ist als es ursprünglich ist. Wir können die Höhe als 75 setzen. Ich gehe wieder hier rein und setze die Höhe als 75 ein. Das sollte uns ungefähr die gleichen Dimensionen geben, da gehst du. Da ist unser Bild. Wir können auch in einen Link setzen. Wir können das tun, indem wir ein Anker-Tag verwenden, und es ist sehr einfach. Es ist nur ein, und dann schließen Sie mit einem Tag und dann alles, was zwischen diesen ein Tags ist der Text, der verknüpft ist. Ich setze einfach ein, das ist ein Link, und wenn wir sparen, gehen Sie zurück. Wir können sehen, dass es dort einen Link gibt, aber er ist unvollständig. Das liegt daran, dass wir ihm kein wichtiges Attribut namens href gegeben haben. Wenn ich Leerzeichen, um ein Attribut hinzuzufügen, und ich setze href, und ich verwende die gleiche Konvention, gleich und dann doppelte Anführungszeichen. Ich kann es irgendwo verknüpfen. Jetzt haben wir keine weitere Seite, auf die wir verlinken können. Was ich gerade tun werde, ist hier einen Platzhalter zu setzen und ein gemeinsamer Platzhalter ist nur ein Hash oder ein Pfundzeichen, wenn Sie aus Amerika kommen. Ich drücke „Speichern“, und ich gehe hierher zurück. Dann plötzlich können wir sehen, dass der Link wie ein Link formatiert ist. Es ist nicht nur blau, und wenn ich darauf klicke, ist es rot. Dann, nachdem ich darauf geklickt habe, wird es zu dieser violetten Farbe. Es ist auch, Sie können sehen, wie sich mein Cursor ändert, wenn ich darüber gehe. Hier drüben habe ich diese Texte, Hervorhebungswerkzeug. Dann hier drüben habe ich einen Cursor, der anzeigt, dass ich darauf klicken kann. Wieder, es wird nichts tun, weil wir es mit nichts in Verbindung gebracht haben. Sagen wir einfach, wir hatten eine Seite, die Blog genannt wurde. Dann gehen wir zurück. Wenn ich darauf klicken sollte, erhalten Sie eine Datei nicht gefunden, weil wir das nicht haben. In der Tat habe ich dort einen Tippfehler gemacht. Ich will es nur so ausdrücken. Wenn wir dies drücken, werden wir einen Blog bekommen. Aber wir haben nichts in Blogs, also werden wir nichts sehen. Guter Platzhalter für jetzt, ist nur, um den Hash oder das Pfund zu haben, und wir erhalten immer noch die Formatierung eines Links und das Verhalten eines Links, es geht einfach nirgendwo hin. Jetzt war die letzte Sache ein Knopf. Ich denke, eine Schaltfläche funktioniert ähnlich, aber sie kommt mit bestimmten Attributen oder stilistischen Eigenschaften, die nur Standard sind. Wir können einen Button wie diesen definieren. Dann können wir zwischen den öffnenden und schließenden Tags den Text einfügen, der in der Schaltfläche erscheinen wird. Wir können sagen, das ist ein Knopf. Ich werde das speichern, gehen Sie zurück, und Sie können hier sehen, das ist ein Knopf. Wir können ein ähnliches Aussehen, Styling, ein Link-Tag erreichen . Aber ein Knopf gibt Ihnen nur einen Knopf direkt aus dem Tor. Wenn Sie nur eine Schaltfläche löschen möchten, kann es ihm etwas JavaScript zuweisen. Sie können es so haben, dass, wenn Sie auf diese „Schaltfläche“ klicken, lassen Sie uns dies mit einer zusätzlichen Eigenschaft namens on-click demonstrieren. Wir können einfach grundlegende Warnung tun, Button geklickt. Mach dir keine Sorgen um zu viel darüber. Dies ist alles JavaScript, das wir in diesem Kurs nicht abdecken. Aber wenn ich auf diese jetzt klicke, sagt die Seite Button geklickt. Das ist die Art und Weise, wie wir eine Interaktion mit Schaltflächen bekommen können. Aber im Wesentlichen werde ich oft feststellen, dass ich ein Link-Tag stilisiere , um es eher wie eine Schaltfläche aussehen zu lassen. Sie können ein ähnliches Aussehen und ein ähnliches Verhalten über eine Schaltfläche erhalten, wie Sie es von einem Link-Tag können. Dort haben Sie es, die Bausteine des grundlegenden HTML. Wir haben ein Bild, wir haben einen Link, der nirgendwo wirklich verbunden ist, und wir haben nur eine zufällige Schaltfläche, die uns eine Warnung gibt. Wie Sie bemerkt haben, sind wir in diesem Video ein wenig auf Attribute eingegangen. Wir haben nur die Tag-Namen erweitert, nur den Inhalt, aber jetzt auch Attribute zuweisen. Im nächsten Video werden wir tiefer in Attribute eintauchen, damit wir verstehen können, dass mehr Attribute in HTML sehr wichtig sind. Ich werde Sie im nächsten Video sehen. 7. HTML-Eigenschaften: In diesem kurzen Video wollte ich nur ein bisschen mehr über Attribute sprechen. Wie du im letzten Video gesehen hast, haben wir einige von ihnen benutzt, aber ich wollte hier nur ein bisschen theoretischer werden, damit du Attribute besser verstanden hast und wir sie öfter benutzen kannst , ohne dass es irgendwelche Verwirrung. Wenn wir zurück zu W3Schools gehen und wir auf den Menüpunkt für Attribute klicken, hier sind einige wirklich gängige. Das href-Attribut, das wir gerade verwendet haben. Wir geben die Link-Adresse eines Tags mit href. Auch hier sehen Sie dieses Format weiter. Wir haben den Attributnamen, wir haben das Gleichheitszeichen für die Zuweisung, und dann haben wir ein Stück Text in doppelten Anführungszeichen oder einfachen Anführungszeichen. Wieder haben wir src im letzten Video gemacht, so dass wir ein Bild-Tag geben können, die tatsächliche Adresse des Bildes, in dem wir anzeigen möchten. Wir können Breite und Höhe definieren. Ein weiteres wichtiges Attribut ist das alt-Tag. Das alt-Tag ist ein Attribut, das alternativen Text angibt, der verwendet werden soll, wenn ein Bild nicht angezeigt werden kann. Es ist im Grunde eine Art, das Bild zu beschreiben, weil der Titel dieses Bildes vielleicht nicht so beschreibend ist oder nicht wirklich bekannt ist, was das Bild ist, besonders wenn jemand eine Webseite anhört, dh eine blinde Person. Es gibt bestimmte Bildschirmlesegeräte, die Bilder tatsächlich lesen können, aber nur, wenn Sie ein ALT-Tag definieren. Wenn Sie ein Bild von einem Mädchen mit einer Jacke haben, sollten Sie dort ein Alt-Attribut einfügen , um mit dem Bildschirmlesegerät zu teilen, was das Bild tatsächlich ist. Die andere Sache, die man über alt beachten muss, ist es eine gute Idee für SEO-Zwecke. Damit Ihre Website regelmäßig in Google angezeigt wird, um ein Alt-Tag zu haben, weil Sie dann mehr Informationen an Google geben , um herauszufinden, ob Ihr Artikel relevant ist. Wenn Sie einen Artikel über Mädchen schreiben, die verschiedene Outfits tragen und Sie hatten jedes Ihrer Bild-Tags mit einem Mädchen mit einer Jacke, Mädchen mit einem Kleid, so weiter, so weiter, Sie zeigen Google, dass diese Bilder sind tatsächlich relevant für den Inhalt Ihrer Seite. Wir gehen nach unten und wir sehen ein anderes wirklich wichtiges Attribut, und das grenzt an CSS hier, ist das Style-Attribut. Wir müssen kein separates CSS-Dokument erstellen, um Stile für ein Element zu definieren. Wir können direkt in ein Element gehen, also zeige ich Ihnen hier und wir können einen Stil definieren. Gleiche Konvention, Stil entspricht offenen und schließenden Zitaten. Wir können Farbe in die amerikanische Rechtschreibung setzen. Sagen wir grün. Sie setzen das Semikolon dort, um zu sagen, dass dies das Ende dieses Stils ist , und wir klicken auf „Speichern“, gehen Sie zurück zu hier und wir können sehen, dass dieser Absatz grün ist und wir können sehen, dass es passiert über in unseren Entwickler-Tools. Das ist wirklich wichtig, wir werden in späteren Videos mehr darüber erfahren. Titel-Attribut, können wir zu p Tags hinzufügen, um eine QuickInfo anzuzeigen. Das ist ein cooles kleines Feature. Nie wirklich verwendet, obwohl, und wir haben einige Empfehlungen hier von W3Schools, die ich denke, sind ziemlich gute Empfehlungen. Es erfordert keine Kleinbuchstaben Attributnamen, aber sie empfehlen dringend, sie zu verwenden. Es ist einfach gut, eine Konvention zu haben. Wir könnten Stil wie diesen machen, aber es gibt wirklich keine Notwendigkeit. Halten Sie einfach die Dinge sauber und haben Sie es als Kleinbuchstaben. Wichtig ist auch, dass Sie sicherstellen, dass Sie Anführungszeichen verwenden. Anscheinend können Sie es umgehen. Offenbar erfordert HTML5 keine Anführungszeichen, aber es ist immer noch eine sehr gute Idee, sie zu haben, und wenn es ein Leerzeichen dazwischen wie in diesem Beispiel gibt, wird dies brechen, weil es nicht weiß wo das Attribut und seine -Wert endet. Wenn Sie nur ein Leerzeichen dort einfügen, könnte das ein neues Attribut sein. - Wir wissen es nicht. Verwenden Sie immer Anführungszeichen. Aber wir müssen keine doppelten Anführungszeichen machen, wir könnten auch einfache Anführungszeichen machen. Wir könnten zum Beispiel einfach hier hineingehen und anstelle von doppelten Anführungszeichen ein einzelnes Anführungszeichen einfügen, speichern Sie das, gehen Sie zurück zur Seite, wir erhalten das gleiche Ergebnis. Das spielt keine Rolle, so dass wir einfache Anführungszeichen oder doppelte Anführungszeichen verwenden können. Wenn wir dieses Beispiel hier machen und einen Titel auf einem der p setzen, könnten wir, mal sehen. Lassen Sie uns hier in den Titel gehen und sagen, dies ist der zweite Absatz genannt, und dann setzen wir in einem anderen doppelten Anführungszeichen, zweiten Absatz. Sehen Sie, wie wir es jetzt kaputt gemacht haben. Wir haben diese doppelten Anführungszeichen, um den Attributwert zu starten und zu beenden. Wie Sie aus der Färbung hier sehen können, sieht es wie für den Code-Editor und den Browser aus, dass wir diese Zeichenfolge beendet haben. Ich weiß nicht, was passieren wird. Wenn wir die Seite aktualisieren und wir gehen über zu unserem zweiten Absatz, werden wir sehen, dass es nach dem Aufruf endet, weil wir in ein neues Anführungszeichen setzen. Wenn wir uns das Element in unseren Entwicklertools ansehen, können wir sehen, dass der zweite und der Absatz gekommen sind und sie in einer anderen Farbe sind und es ist nur ein Chaos. Was wir tun können, um dies zu umgehen, ist einfach, indem Sie die Art der Anführungszeichen ändern. Wir können stattdessen einfache Anführungszeichen verwenden und dann können wir drücken „Speichern“ und dann, wenn wir den Mauszeiger über, können wir einen Teil des Textes haben, der in Anführungszeichen angezeigt wird. Aber wenn Sie es zum Beispiel doppelte Anführungszeichen wollten, müssen wir nur die Positionierung dieser ändern. Wir könnten, beginnend mit einfachen Anführungszeichen und endend mit einfachen Anführungszeichen, und dann hat dieses bestimmte Stück Text doppelte Anführungszeichen um ihn herum. Wenn wir mit dem Mauszeiger darüber fahren, können wir das sehen. Es ist nur wichtig, dass Sie, wenn Sie Anführungszeichen innerhalb Ihres tatsächlichen Textes in Ihrem Attribut möchten, das Gegenteil von dem, was Sie verwenden, die Alternative verwenden müssen. Wenn Sie es mit doppelten Anführungszeichen geöffnet haben, müssen Sie einfache Anführungszeichen innerhalb verwenden, und wenn Sie es mit einfachen Anführungszeichen geöffnet haben, müssen Sie umgekehrt tun. Das ist ein letztes Wort zu Attributen. Wenn du mehr nerdy und geeky darüber bekommen willst, schau dir diese Seite auf w3schools.com an. Aber das sind nur im Grunde die Dinge, die ich über Attribute erwähnen wollte. Jetzt habe ich das Gefühl, dass wir weitermachen und Attribute während unseres gesamten Projekts verwenden können. Im nächsten Video werden wir drei weitere wichtige Elemente in HTML abdecken. Wir werden Tabellen, Listen und Blöcke abdecken. Wir sehen uns in der nächsten. 8. Tabellen, Listen und Blöcke: In diesem Video werden wir Tabellen, Listen und Blöcke abdecken. Auch hier ist ein großartiger Ausgangspunkt auf w3schools.com Sie haben eine gute Referenz für Listen, Tabellen und Blöcke. Beginnend mit Listen gibt es zwei Arten von Listen. Grundsätzlich innerhalb von HTML, eine ungeordnete Liste, die wie Punktpunkte ist, und eine geordnete Liste, die Punkte ist, die eine Reihenfolge haben also bei 1, 2, 3, 4. Sie starten diese Listen auf zwei verschiedene Arten. UL, für eine ungeordnete Liste so wie diese und ol für eine geordnete Liste. Ich denke, wenn ich hier nach unten scrolle, da sind wir, ol. Das markiert das Öffnen einer Liste. Das markiert das Schließen einer Liste. Dann dazwischen werden Sie Ihre Listenelemente setzen, die die Tags li verwendet. Lasst uns das jetzt in unserem Projekt machen. Gehen wir zurück zu unserer Seite, navigieren Sie zu unserem Code-Editor. Anstatt hier einen Absatz zu haben, können wir eine ungeordnete Liste haben. Ich werde eine ungeordnete Liste öffnen und sie dann sofort schließen, damit ich es nicht vergesse , und dann werde ich in das hineingehen, einige Listenelemente einfügen. Sagen wir Integrität, sagen wir Ehrlichkeit. Ich erfinde hier nur Zeug, Ermächtigung. Wenn ich auf Speichern drücken, gehen Sie zurück in das Dokument, Sie können hier sehen, wir haben eine ungeordnete Liste. Um das in eine geordnete Liste zu ändern, muss ich nur zu den u und ul gehen und das in o für die geordnete Liste ändern. Ich kann zurückgehen und jetzt wird es eine inkrementierende Nummer für jeden von ihnen haben. Jetzt können Sie Listen weiter nehmen, indem Sie Typen haben. Sie können sie auf verschiedene Arten beschreiben. Sie können eine Beschreibung Listen tun. Ehrlich gesagt, ich mache dieses fortgeschrittene Zeug kaum mit Listen. Oft ist es nur eine ungeordnete Liste oder eine geordnete Liste und dann einige Punktpunkte. Auch hier können Sie auch in diesen verschachtelt werden. Wenn Sie einen Satz von Punktpunkten innerhalb eines Punktpunkts haben möchten, können Sie dies auch tun. Ich kann hier in eine ungeordnete Liste setzen und einen Sub-Punkt-Punkt setzen, Integrität für Kunden, Integrität für unsere Sachen. Speichern Sie das. Geh zurück zu hier. Jetzt können Sie sehen, dass es ein Unterpunkt dieses Punkts ist. Sie können geordnete Listen und ungeordnete Listen verschachteln. Ich kann das in bestellt ändern und jetzt können Sie sehen, dass Sie die beiden austauschen können. Wenn Sie mehr Details mit Listen erhalten möchten. Schauen Sie sich dies definitiv in der Referenz an. Aber ich denke, dass so ziemlich Listen auf einfache Weise abdeckt. Ich muss nicht viel fortgeschrittenes tun, um ehrlich zu sein. Das deckt ziemlich viel von dem ab, was Sie mit Listen tun müssen. Der nächste, den ich sagte, sind Tische. Ich werde hier auf HTML-Tabellen klicken und Sie können eine grundlegende Tabelle mit dem Tabellentag definieren. Dann können Sie eine Reihe von tr definieren. Sie können die erste Zeile zu einem th machen, was bedeutet, dass es dort Header-Zeile ist, und dann wird jede Zelle mit einem td definiert werden. Mal sehen, was hier Sinn macht, kann in einer Timeline hier mit der Tabelle gesetzt werden. Ich gehe zurück zu hier, und ich werde einen Tisch erstellen. Für die erste Zeile wird es eine Kopfzeile sein, also anstelle von regulären Tabellenzellen wie hier mit td, werden wir die erste Zeile th geben. Ich werde dies th, Januar 2016 nennen. Dann war ich noch ein anderer. Wieder, ich mache das alles nur für Demonstrationszwecke aus. Lass uns das einfach speichern und sehen, was wir bisher haben. Ok. Im Moment haben wir keinen Tabellenrahmen, so dass Sie den Umriss der Tabelle nicht sehen werden, aber wir werden in nur einer Sekunde darauf kommen. Wir können jetzt eine neue Zeile hinzufügen und einige Tabellenzellen einfügen, die, weil es nicht die erste Zeile ist, weil es kein Header ist, nur td verwenden wird. Dann gründeten wir unser Unternehmen. zurückgehen, können Sie jetzt sehen, dass es in Spalten ausgerichtet ist, aber Sie können den Umriss der Tabelle nicht sehen. Wenn Sie das tun wollten, können wir ein Attribut zu Tabelle für Grenze hinzufügen. Werfen wir einen Blick darauf, wie wir das machen. Wenn ich Grenze mache. Ich kann sehen, dass ich einige Stile anwenden kann, aber wir werden das noch nicht tun, weil wir diesen Teil des Kurses noch nicht erreicht haben. Dann ist eine alte Art, unserem Tisch eine Grenze zu geben, indem hier reingehen und in Grenze 1 tippen. Wenn wir das speichern, gehen Sie zurück. Jetzt bekommen wir diese alten Schulgrenzen, nur um zu sehen, dass wir tatsächlich einen Tisch haben. Denken Sie, die moderne Art, dies in diesen Tagen zu tun, besteht darin, eine Tabelle mit CSS zu formatieren. Aber wir sind noch nicht zu CSS gekommen, also werde ich das für ein wenig später speichern. Aber hier können Sie sehen, dass wir einen Tisch haben. Wenn wir nun eine weitere Zeile hinzufügen wollten, könnten wir dies leicht tun, indem wir ein weiteres tr-Tag hinzufügen und dann Tabellenzellen einfügen. Vielleicht können wir einige Kommentare zu diesen verschiedenen Zeitachsenpunkten machen. Speichern Sie diese Bewegung über und Sie können sehen, dass wir eine neue Zeile hinzugefügt haben. Nun, wenn Sie möchten, dass diese Zeilen und Spalten über mehrere Spalten und Zeilen erweitert werden, lassen Sie uns einfach zeigen, dass ich jetzt eine der Tabellenzellen löschen werde, also haben wir nur eine hier und sehen, was das tut. Sie haben den ganzen Tisch, aber wir können sehen, dass wir hier eine Zelle vermissen. Was passiert, wenn wir wollen, dass sich diese Zelle über den Tisch erstreckt? Nun, wir können das tun, indem wir dieser Tabellenzelle ein Attribut namens colspan geben. Ich werde 2 sagen, weil ich will, dass es zwei Spalten statt nur eine überspannt und da gehst du. Wir können alle Ausrichtung und Formatierung innerhalb dieser Tabellen durchführen, aber wir werden dies im Wesentlichen in CSS erreichen, wenn Sie dasselbe mit Zeilen tun wollten. Vielleicht fügen wir hier ein anderes hinzu, das wird es wahrscheinlich nicht sinnvoll machen, aber ich werde es trotzdem demonstrieren. Wir können vor diese Reihen-Spanne von drei setzen. Ich werde auf Speichern drücken. Sie können sehen, dass wir eine Spalte haben, die über drei Zeilen geht. Das sind im Wesentlichen Tabellen. Das macht nicht ganz Sinn, also werde ich diese Zeilen jetzt loswerden. Ich werde diese dritte Reihe loswerden, weil sie nichts wirklich hinzufügt. Da gehen wir. Wir haben ein wenig eine Geschichte, in die wir gehen könnten, andere Zeile erstellen, eine andere Spalte, indem wir eine neue Zelle in jeder dieser Zeilen einfügen. Da sind Tische. Eine Sache, die ich über Tabellen sagen werde, ist, dass Sie sich nicht auf sie verlassen, um Ihr HTML-Dokument zu strukturieren. Tabellen sollten nur für Tabellen verwendet werden. Wenn ich Zeitachse oder vielleicht einen Zeitplan oder etwas, das eine Tabelle benötigen würde präsentieren wollte. Ich würde eine Tabelle verwenden, aber um Spalten auf einer Seite zu haben und ein ansprechendes Design zu haben. Tabellen sind nicht die besten und dafür ist das, was großartig ist, Blöcke. Ich gehe zurück zu w3schools.com und klicke auf HTML-Blöcke. Das gebräuchlichste Element auf Blockebene, das Sie in HTML sehen werden, ist bei weitem das div-Tag. Sie werden divs absolut überall sehen und ein div wird standardmäßig immer auf einer neuen Zeile beginnen und die volle verfügbare Breite aufnehmen. Anstatt darüber zu reden, werde ich es jetzt einfach reinwerfen und Ihnen zeigen, was ein guter Ort ist, um es auszudrücken. Unser Projekt ist im Moment ein bisschen Chaos, aber was ich tun werde, ist in eine andere horizontale Linie zu setzen, in eine andere Überschrift zu setzen und sagen wir einfach Unsere Dienste. Ich werde unser div-Tag einfügen und innerhalb des div-Tags werde ich ein bisschen Text haben. Lass mich zu Lorem Ipsum gehen. Dies ist eine Website, auf der Sie Lorem Ipsum bekommen können. Es ist nur im Grunde Dummy-Text. Ich werde das hineinlegen und dann werde ich ein anderes div darunter erstellen und das Lorem Ipsum wieder einfügen. Ich werde das speichern, gehen Sie rüber, und Sie werden sehen, dass es in eine neue Zeile bricht. Aber im Gegensatz zu Absätzen gibt es keinen Abstand zwischen ihnen. Im Moment, ich denke, es macht nicht unbedingt Sinn, warum Sie ein div haben würden. Aber während wir unser Dokument mit CSS stylen und strukturieren, werden Sie sehen, wie flexibel ein div ist. Zum Beispiel, wenn ich das gerade jetzt gerade ändern wollte, kann ich dieses div hier sehen. Ich kann die Breite des div einschränken. Ich werde es auf 100 Pixel beschränken, und dann wird es jetzt nur mit einer Breite von 100 Pixeln angezeigt. Was ich tun kann, ist die Anzeige so zu ändern, dass sie inline angezeigt wird. Wieder, wir werden später darauf eingehen. Aber wenn ich sagte, dass für die beiden divs, width, 100px und Anzeige Inline-Block. Sie werden jetzt sehen, dass sie nebeneinander erscheinen. Das ist nur eines der Beispiele dafür, wie wir den Inhalt in einem div ändern können . Aber wieder, ich bin vor mir selbst oder wir müssen jetzt wissen, ist, dass divs gute Bausteine von HTML sind und Sie werden sie viel sehen, wenn Sie HTML und CSS entwickeln. Ich habe eine Blockebene Elemente in HTML enthalten diese. Dann haben Sie natürlich Inline-Elemente. Diese beginnen keine neue Linie und nehmen nur so viel Breite wie nötig ein. Einer der häufigsten, die Sie sehen werden, ist eine Spanne. Eine Spanne hilft Ihnen, genau das zu ändern, was drin ist. Es erzeugt keine neuen Polsterungen oder Abstände. Wieder, es ist am besten, dir zu zeigen, was ich meine, wenn ich das sage. Wenn wir wieder in unser Dokument gehen und ich sollte eine Spanne vor Dummy setzen und die Spanne danach schließen. Das gibt mir die Kontrolle über diesen Ein-Wort-Dummy. Ich kann Stil gehen und ich kann einige Stile hinzufügen. Ich könnte die Schriftgröße viel größer machen als alles andere in diesem Absatz. Ich kann es um 50 Prozent größer machen und jetzt können Sie sehen , dass das Wort 50 Prozent größer ist als alles andere in diesem div. Ich kann dies für andere Formatierungen verwenden. Ich kann verschiedene Teile fett machen. Ich kann verschiedene Teile anvisieren, eine Klasse auf sie setzen. Jedes Mal, wenn Sie ein Ziel oder eine Änderung wollen, nur ein Wort oder einen Satz, span ist eine gute Option. Auch wenn Sie sich auf das Dokument und w3schools.com beziehen, gibt es viele gute Informationen darin. Wie hier steht, wird das div-Element oft als Container für andere HTML-Elemente verwendet. Es hat keine erforderlichen Attribute, aber Sie werden oft sehen, dass es einen Stil, eine Klasse oder eine ID geben wird. Diese Methoden in der Lage sein, Inhalte zu adressieren und zu stylen. Sie können div fast als eine Gruppe von Inhalten anzeigen, aber Sie können auch tun, was Sie wollen. Es ist im Grunde ein HTML-Block, den Sie individuell anvisieren und in Spalten verwandeln können, es in ein Quadrat verwandeln, in das verwandeln, was Sie wollen. Sehr erweiterbar Eine Menge, die Sie mit div tun können, und ich denke, anstatt mehr darüber zu reden, denke ich, Sie werden anfangen, mehr darüber zu verstehen, warum div mächtig ist, während wir durchgehen. Vor allem, wenn wir in den CSS-Abschnitt kommen, werden wir viele divs stylen. Moment ist das alles, was Sie über divs wissen müssen. Wir werden tiefer hineinkommen, wenn wir gehen. Im nächsten Video werden wir behandeln, wie HTML-Layout-Elemente. Ich freue mich darauf, Sie auf der nächsten Seite zu sehen. 9. Layout-Elemente: Alles klar, in diesem kurzen Video wollte ich kurz über HTML5-semantische Elemente gehen. Wenn wir auf HTML-Layouts Seite auf w3schools.com gehen, können wir hier nach unten scrollen und sehen, dass HTML5 neue semantische Elemente bietet , die verschiedene Teile der Webseite definieren. Nur um das zu demonstrieren, gibt es hier ein Beispiel. Anstatt die verschiedenen Abschnitte als divs oder andere Elemente auf Blockebene zu beschriften, beschriften sie es mit diesen neuen Tags, Header, Nav, Abschnitt, Artikel, beiseite, Fußzeile, Details, Zusammenfassung. Grundsätzlich ist das einzige, was wirklich passiert, das hier anders ist, der Name, also funktionieren diese so ziemlich wie ein div, es ist einfach einfacher zu verstehen, wenn Sie ein HTML-Dokument erstellen , das Sie verstehen die Struktur und sehen, dass dieses Tag eine Kopfzeile ist, ist dieses Tag ein Abschnitt, dieses Tag ist eine Fußzeile. Nur um dieses Mal zu bringen, was ich tun möchte, ist eine neue Datei zu erstellen, also gehe ich zurück zu meinem Code-Editor, wo ich die index.html geöffnet habe. Ich werde eine neue Datei erstellen, und ich werde sie sofort speichern, damit wir wissen, dass wir mit einem HTML-Dokument arbeiten. Ich werde zu unserem Projektverzeichnis gehen und ich werde dies layout.html nennen. Denken Sie daran, den ersten Teil dieses Layouts, ist nicht allzu wichtig. Sie können es beschriften, was Sie wollen, aber Sie benötigen die Punkt-HTML-Erweiterung, damit Ihr Programm weiß, dass es HTML ist. Was ich tun werde, ist, diese Fenster nebeneinander zu stellen. Eigentlich, bevor ich das mache, werde ich mit der rechten Maustaste auf dieses Beispiel klicken und ich werde nur ihr Beispiel kopieren. Ich benutze den Inspektor hier in Google Chrome. Es ist eine ähnliche Funktion, ich bin sicher in Safari und Firefox, aber im Grunde müssen Sie hier nicht unbedingt folgen. Ich werde nur kopieren, was hier ist, und es in unser eigenes Dokument einfügen. Was ich tun werde, ist dieses Element zu finden, das all dies erfasst, und ich kann das von dem, was es hervorhebt, sehen. Wir gehen zu „Rechtsklick“, klicken Sie auf „Als HTML bearbeiten“. Drücken Sie „Befehl A“ auf einer Karte, um all das HTML zu kopieren, Tab über meine layout.html, und jetzt haben wir all diesen Code. Einige Dinge, die ich loswerden werde, sind die Klassen, irgendwelche Klassen, weil das in einem Stylesheet ziehen wird, das wir nicht haben. Das ist nur auf der Website der W3School. Wir haben auch diese Klassen, aber wir können sie für eine Sekunde verlassen. Was ich Ihnen in diesem Beispiel zeigen möchte, ist, dass, wenn wir hier eine neue Registerkarte öffnen und wir layout.html ziehen, es nicht so aussieht. Dies ist der Punkt, den ich hier hinüberkommen möchte, ist, dass nur durch die Verwendung dieser semantischen Elemente wir nur durch die Verwendung dieser semantischen Elementedas Seitenstyling nicht geben. Wir müssen immer noch CSS verwenden, um dieses Layout zu erhalten. Aber was wir tun, ist, wenn wir den Code lesen, können wir sehen: „Oh, das ist eine Kopfzeile, das ist ein Abschnitt, das ist ein Artikel, das ist eine Fußzeile.“ Dann können wir auch, anstatt basierend auf Klasse zu zielen, was wir hier haben, können wir nur auf den Elementnamen zielen. Aber wieder, ich gehe ein bisschen in CSS, das wir noch nicht tief eingetaucht sind. Sie werden beginnen, das zu sehen, sobald wir in den CSS Abschnitt kommen. Aber in diesem Video wollte ich nur diese semantischen Elemente mit Ihnen teilen , weil Sie sie oft in HTML sehen, und nur um Sie wissen zu lassen, dass sie ziemlich dasselbe sind wie ein Block-Level-Element wie div, sie sind nur ein bisschen beschreibender. Im nächsten Video werden wir zu HTML-Formularen übergehen. Formulare sind etwas, Sie werden wahrscheinlich auf eine Menge Entwicklung von Websites als auch kommen. Also sehe ich dich im nächsten Video. 10. HTML-Formulare: In Ordnung. In diesem Video über HTML-Formulare, werden wir noch einmal eine Referenz w3schools.com. Wenn Sie in diesem Menü nach unten scrollen, finden Sie HTML-Formulare. Ein Formular für diejenigen von Ihnen, die es nicht wissen, ich denke, Sie sollten sie viel online begegnen. Es sollte ziemlich offensichtlich sein, aber im Grunde ist es nur das, wo Sie Eingaben haben und dann haben Sie eine Schaltfläche, um diese Daten irgendwo zu senden und dann erhalten Sie ein bestimmtes Ergebnis. Sehr vage ich weiß, aber sobald Sie diese Daten irgendwo senden, können Sie sie so interpretieren, wie Sie möchten. Aber da wir gerade über HTML und CSS in diesem speziellen Kurs sprechen. Ich werde Ihnen nur zeigen, wie Sie tatsächlich ein Formular am Frontend einrichten. Diese Ressource auf W3Schools ist ziemlich gut darin, es zu erklären. Zuallererst werden Sie ein Formularelement benötigen und dann innerhalb, dass Sie verschiedene Eingaben eingeben werden. Dann wird der Typ der Eingabe durch dieses Attribut namens type bestimmt. Sie hatten ein paar Beispiele hier unten. Sie können Optionsfelder machen. Sie können eine Senden-Schaltfläche tun, die tatsächlich Ihr Formular absendet und so was das Senden Ihres Formulars tatsächlich tut, ist, dass es die Daten nimmt und es an eine bestimmte Seite oder eine bestimmte Adresse sendet. Das wird durch die Aktion auf dem Formular bestimmt. Wir können auch andere Attribute festlegen, die wir in nur einer Sekunde erhalten werden. Es wird ein wenig technisch hier mit GET und Post. Dies sind zwei Möglichkeiten, Daten zu senden. Dies wird ein bisschen mehr in das Back-End-Zeug, aber Sie sollten sich nicht zu sehr darum kümmern. Dies ist mehr darüber, wie Sie ein Formular in HTML einrichten. Was ich tun werde, ist tatsächlich ein Formular in unsere kleine Beispiel-Website zu bauen. Dies ist über uns Seite und es ist ziemlich chaotisch im Moment. Ich werde diese layout.html loswerden und ich werde tun, ist eine Kontaktieren Sie uns Seite erstellen. Ich werde „Neue Datei“ drücken und dann werde ich es sofort speichern, damit ich weiß, dass es eine HTML-Datei ist und dann werde ich in die Projekte gehen, wir nennen es contact.html. Nun, was ich tun kann, ist einfach aufzustellen, eigentlich werde ich ein paar von diesem Zeug von hier kopieren, ich werde diesen ersten Teil kopieren. Ich werde diesen letzten Teil kopieren. Also habe ich das nur getan, um etwas Zeit zu sparen, ich wusste, dass ich einen Titel und eine Top-Level-Überschrift brauchen würde. Ich kopiere das einfach rüber. Was ich tun werde, ist, ziehen Sie es direkt hinein, öffnen Sie zuerst eine neue Registerkarte und ziehen Sie es dann direkt in unseren Browser, damit wir anfangen können, damit zu arbeiten. Es ist nicht mehr über uns Seite, also werde ich das in Kontaktieren Sie uns ändern, und dann, was ich tun werde, ist ein div zu setzen und dann ein Formular zu erstellen. Hier beginne ich ein Formular und es ist sehr einfach, es ist nur Form. Wenn ich das hineinfüge, bin ich mir ziemlich sicher, dass wir nichts aus dem Formular sehen werden. Es gibt noch keine tatsächlichen Eingaben. Was wir tun können, ist, lassen Sie uns einfach einige Texteingaben eingeben. Wir haben dieses Spiel in einem Formular-Tag abgedeckt und jetzt können wir in Eingabetyp Text einfügen. Dann, was ich tun werde, ist, dass dreimal duplizieren, drücken Sie „Speichern“ und gehen Sie zurück auf die Seite und ich werde Ihnen zeigen, was wir haben. Ich habe diese drei Textfelder. Es gibt keine Etiketten. Es gibt keinen Hinweis darauf, was das ist. Es ist ziemlich nicht beschreibend, aber zumindest können wir einige Dinge in unserer Form sehen. Was wir tun müssen, ist, ihm etwas Formatierung zu geben, einige Labels zu geben, dann auch diese Eingaben zu benennen, so dass sie nicht nur für dasselbe sind. Der Name ist sehr wichtig, weil, wenn wir die Daten auf die nächste Seite oder an die Adresse senden , wird den Wert mit dem Namen dieses Feldes zu koppeln. Sie können tatsächlich feststellen, welcher Wert woher kommt. Was ich jetzt tun werde, ist, all diese einen Namen zu geben. Der erste, ich werde Vornamen machen. Zweiter, Nachname. Drittens, E-Mail, und eigentlich werde ich noch eine für die Nachricht tun. Natürlich, wenn wir das nur speichern, ist es nur ein Attribut. Es wird nicht wirklich auf der tatsächlichen Seite angezeigt. Was wir tun werden, ist nur ein paar rohen Text zu setzen. Ich tue, um Vornamen, Nachnamen, E-Mail-Adresse, Adresse und Ihre Nachricht zu tun . Das andere, was Sie bemerken werden, ist, dass alles auf der gleichen Linie steht. Also, wenn wir nur in diese Etiketten setzen wird alles auf der gleichen Linie sein. Ich werde ein paar Break-Tags eintragen. In Zukunft werden wir dies mit CSS formatieren und es wird viel schöner sein. Aber im Moment können wir einfach Break-Tags verwenden, um sie aufzuteilen. Wir drücken „Speichern“ und jetzt haben Sie eine sehr einfache, ziemlich hässlich aussehende Form. Aber wenigstens haben wir ein Formular auf unserer Seite. Jetzt wird dieses Formular nichts tun, natürlich haben wir noch keine Schaltfläche, um etwas zu senden. Das ist der nächste wichtige Schritt, und was ich dafür tun werde, ist, das zu kopieren. Stellen Sie sicher, dass sich das innerhalb der Formular-Tags befindet, alles für Ihr Formular muss innerhalb der Formular-Tags zum Öffnen und Schließen von Formular-Tags enthalten sein. Der Wert hier stellt dar, was auf der Schaltfläche sein wird. Wenn wir das speichern, gehen Sie zurück, es wird sagen, „auf den Button einreichen“. Stattdessen können wir sagen, was immer wir wollen, vielleicht schickst du eine Nachricht. Speichern, bewegen Sie sich und Sie werden sehen, dass es sich jetzt geändert hat. Wichtig ist, dass Sie den Typ senden anstelle von Text offensichtlich eingeben. Aber abgesehen davon, haben Sie fast eine Form und was ich damit meine, ist, dass Sie ein anderes Attribut brauchen, und das ist, eine Aktion auf das Formular zu setzen. Im Moment haben wir kein Back-End. Aber wenn wir ein Back-End hätten, würden wir diese Formulardaten an eine Seite, eine PHP-Seite oder was auch immer unser Back-End ist senden . Dieses Back-End nimmt diese Daten, validiert und legt sie dann in eine Datenbank oder startet den Prozess. Nach dem Absenden des Formulars ist eine Programmierung erforderlich, auf die wir in diesem Kurs nicht eingehen werden. Aber in Bezug auf HTML sieht das im Grunde so aus, wie ein Formular aussieht. Ich werde Ihnen hier nur ein Beispiel geben. Wenn wir eine Aktion zu diesem Formular geben und dies ist Kopie genau das, was sie hier haben, weil wir nirgends Seite haben. Wir werden das einfach kopieren, das speichern. Wir gehen zurück in Kontaktieren Sie uns, gehen vollständig zu erweitern, und ich werde nur ein paar Sachen hier einbringen. Ihre Nachricht, hallo, und dann drücke ich „Nachricht senden“ und sehen, was passiert. Sie werden hier sehen und so wird ein bisschen verwirrend für Leute, die neu in der Web-Entwicklung sind. Sie werden hier sehen, dass der erste Teil action_page.php ist. , wenn Sie sich erinnern, wir setzen als eine Aktion ein, und was es getan wird, ist ein Fragezeichen und dann die Schlüsselwertpaare gesendet. Denken Sie daran, als ich sagte, es ist wichtig, wenn Sie Ihre Felder benennen. Sie können hier sehen, dass unser Vornamenfeld ist, weil wir es so genannt haben, und dann haben wir gleich und die Eingabe, die wir in. Dies ist der Name und dann der Wert. Dann haben wir ein Ende, und dann geht es wieder. Wir haben Nachname gleich Dodd, E-Mail gleich, und so weiter, so weiter. Diese werden get-Parameter genannt und standardmäßig senden wir eine get-Anfrage. Auch hier wird es ziemlich technisch, aber hier unten können wir auch eine Post-Anfrage senden. Manchmal möchten Sie keine get-Anfrage verwenden da diese Entzündung in der URL gesendet wird. Das ist vielleicht ein gewisses Sicherheitsrisiko. Wenn Sie sensible oder persönliche Informationen senden Sie wahrscheinlich die Post-Methode verwenden und Post verwenden möchten, können Sie diese Daten senden und es geht nicht wirklich in die URL. Sie können hier auch Feldeinstellungen verwenden, um verwandte Daten in einem Formular zu gruppieren , das nützlich ist, wenn Sie eine Formatvorlage erstellen möchten. Sie können auch ein Tag namens Legende verwenden, das eine Beschriftung für diesen Feldsatz definiert. Aber wir werden später in dieser Klasse in Styling-Formen gehen. Für jetzt haben wir unsere Kontaktseite, es ist sehr einfach und hässlich, ich gebe zu, aber zumindest haben wir ein Formular auf. Hoffentlich bringt das nach Hause Formen ein bisschen für Sie. Im nächsten Video gehen wir über [unhörbare] Assets, Symbole und Entitäten. Dann sehen wir uns. 11. Charsets, Entitäten und Symbole: In diesem Video werden wir Entitäten, Symbole und Zeichensatz abdecken. Dies wird wahrscheinlich eine weitere kurze sein, da diese nicht oft bei der Entwicklung in HTML auftreten, zumindest für mich, aber es ist wichtig zu wissen, was das sind und wie man sie benutzt, wenn man sie braucht. Mit W3Schools werde ich auf HTML-Entitäten klicken. Sie werden hier sehen, dass es einige reservierte Zeichen in HTML gibt. Nun, was bedeutet das alles? Nun, schauen wir uns einfach unseren Code hier an. Einige dieser Zeichen, die wir verwenden, verwenden wir ein Kleiner-als-Zeichen und ein Größer-als-Zeichen, oft verwenden wir Anführungszeichen, wir verwenden Gleichheitszeichen. Diese werden verwendet, um HTML zu bilden. Das Problem, das Sie bei der Entwicklung von HTML feststellen können , ist manchmal, dass Sie nur das Zeichen „Weniger als“, „ Größer als“ auf dem Bildschirm angezeigt werden soll. Aber dann, wenn Sie es hier einfügen, könnte Ihre Software und der Browser es als HTML interpretieren oder dass Sie versuchen, HTML zu erstellen. Das Kleiner-als-, Größer-als-Beispiel ist wahrscheinlich das häufigste. Wie Sie hier sehen können, kann der Browser sie mit Tags vermischen. Wenn Sie ein Kleiner-als-Zeichen schreiben möchten, müssen wir eine HTML-Entität verwenden. Hier sagen sie dir, welche du benutzen kannst. Wenn wir zurück zur Seite Über uns gehen und vielleicht wollen wir in unseren Link setzen, zwei Zurückpfeile. Wir können hineinlegen, ich glaube, wir müssen danach ein Semikolon setzen, und dann drücken wir „Speichern“. Jetzt können wir sehen, dass wir zwei Pfeile oder zwei weniger als Zeichen haben. Zu diesem Zweck haben Sie auf der HTML-Seite diese seltsam aussehenden HTML-Entitäten, aber wenn es zum Browser kommt, können Sie sehen, dass es perfekt ist, was wir brauchen, zwei weniger als Zeichen. Das ist eine gängige HTML-Entität dort. Wenn wir in einen geschützten Raum hinuntergehen. Wenn Sie in HTML 10 Leerzeichen in Ihren Text schreiben, entfernt Ihr Browser alle mit Ausnahme eines. Um eine Trennung zwischen Wörtern zu erhalten, wird es eines erlauben, aber wenn Sie mehr Leerzeichen setzen würden, wird es es einfach abschneiden. Lassen Sie uns Ihnen ein Beispiel dafür zeigen. Eigentlich haben wir das Beispiel hier. Hallo, auf Wiedersehen. Wenn wir dieses br-Tag loswerden, so ist es in der gleichen Zeile. Sie können sehen, dass es auf nur ein Leerzeichen geschnitten ist. Es spielt keine Rolle, wie oft wir hier quer platzieren und Leerräume schaffen, es schneidet ihn auf einen Charakter von Leerraum ab. Wie können wir das umgehen? Wir können einen geschützten Raum benutzen. Ich kann diese kleine HTML-Entität kopieren und anstatt all diesen Platz zu haben, werden Sie einige geschützte Leerzeichen haben. Offensichtlich, wenn Sie eine Tonne Leerraum wollen, wird das ziemlich hässlich werden, aber vielleicht wollten Sie nur ein wenig Platz dazwischen. Es in ein paar Male zu setzen, ist wahrscheinlich nicht so groß. Da gehst du. Wir haben einige HTML-Entitäten, um dieses Verhalten zu überschreiben und unserem Browser zu sagen, hey, wir wollen einen Leerraum hier nicht auf nur ein Leerzeichen reduzieren. Wenn ich auf die Seite zurückgehe, wird es uns einige andere nützliche HTML-Zeichen-Entitäten mitteilen. Grundsätzlich müssen Sie jedes Mal, wenn Sie eines dieser Zeichen in Ihr Projekt einfügen möchten und feststellen, dass es einfach nicht funktioniert, wahrscheinlich eine HTML-Zeichenentität einfügen. Ich habe definitiv auf diese Seite oder andere Seiten im Internet verwiesen , um herauszufinden, was die geeignete Entität ist. Aber im Wesentlichen sind die wichtigsten der geschützte Raum und die Symbole, die bereits in HTML sind, meist kleiner als und größer als. Nur kurz jetzt werden wir in Symbole gehen, und Symbole, die in dem Sinne ähnlich sind dass wir diese seltsamen Codes verwenden, um ein Symbol zu setzen, aber nicht in Konflikt mit den Zeichen, die wir verwenden, um HTML zu erstellen. Einfach gesagt, wenn wir ein Eurozeichen anzeigen wollten, könnten wir eine HTML-Entität verwenden. Es sieht so aus, als ob Sie einen Namen verwenden können, Sie können hier eine Entitätsnummer, eine Dezimal- oder eine hexadezimale Referenz verwenden . Es gibt keinen Grund, sich an all diese zu erinnern. Es ist nur, wenn Sie in ein Euro-Zeichen oder ein Pfundzeichen oder ein seltsames Symbol setzen möchten, Sie müssten nur nachschlagen, was die Zahl, Entität oder Name ist und wie die Anzeige, dass. Normalerweise beginnen diese Entitäten und Symbole mit einem & -Zeichen. Wenn Sie ein & und dann einen Namen oder einen Code wie diesen sehen , suchen Sie wahrscheinlich ein Symbol oder eine Entität. Ja, wenn Sie ein Copyright-Zeichen oder irgendetwas einfügen müssen, irgendetwas, jedes Symbol, suchen Sie diese Referenzen nach Symbolen. Endlich, Zeichensatz. Zeichensatz ist etwas, das Sie in Ihr Meta-Tag einfügen. Wie Sie sehen können, wenn Sie nach unten scrollen, gibt es einige Unterschiede zwischen verschiedenen Zeichensätzen. Manchmal möchten Sie den Zeichensatz speziell festlegen und dann herausfinden, was der Unterschied in der Entität diesen Zeichensatz machen würde. Wenn Sie hier schauen, sind viele von ihnen ziemlich gleich. Sagen wir hier unten, weniger als Zeichen ist das Gleiche. Größer-als-Zeichen ist das Gleiche für alle. Es ist ein bisschen schwer, die Unterschiede tatsächlich zu erkennen, aber es gibt ein paar Unterschiede. Grundsätzlich müssen Sie manchmal Ihren Zeichensatz auswählen. Es ist nicht etwas, das Sie oft tun müssen, aber es verbindet sich gut mit Entitäten und Symbolen. Zeichensatz wird der Satz von Zeichen sein, dann Entitäten und Symbole ist, was Sie verwenden würden, um diese Symbole und Zeichen im gesamten Projekt zu erstellen. Ich hoffe, dass Ihnen etwas Klarheit gegeben hat, denn wenn Sie so etwas in HTML sehen, werden Sie wissen, dass dies wahrscheinlich ein Symbol oder eine Entität ist, und Sie können nachschlagen, was das ist oder es selbst ausprobieren und es in Ihre Projekte integrieren. Das deckt Zeichensatz, Entitäten und Symbole ab. Im nächsten Video werden wir über den HTML-Text sprechen, und wir werden ein paar andere Elemente, die Sie in Ihrem Projekt verwenden möchten, abdecken. Ich sehe dich in der nächsten. 12. Andere HTML-Body-Elemente: Dies ist das letzte Video, das ich tun werde, um die Körperelemente von HTML abzudecken. Wir haben eine ganze Reihe von Körperelementen behandelt, die Sie in HTML verwenden würden. Zumindest die wirklich gebräuchlichen wie Überschriften, Absätze, Schaltflächen, Bilder, Links, Tabellen. All dies sind ziemlich üblich und machen wahrscheinlich mehr als die Hälfte davon aus, wenn Sie HTML entwickeln werden, natürlich auch Dibs hier unten und Block-Level-Elemente. Aber in diesem Video wollte ich nur einige andere abdecken, auf die Sie stoßen können. Auch wenn es etwas gibt, das wir nicht behandelt haben, ist HTML ziemlich umfangreich, so fühlen Sie sich frei, auf diese Website oder eine andere Website und Referenz zurückzukommen. Ich werde nicht jedes einzelne HTML-Element erklären, das verfügbar ist, weil es den Kurs sehr groß machen würde und daher konzentriere ich mich nur auf die wichtigsten hier. In diesem Video wollte ich dir nur noch ein paar andere zeigen. Eins ist HTML Iframe. Wie Sie hier sehen können, haben wir so ziemlich ein Fenster in unserer Webseite. Wenn Sie dieses Tag „iframe“ sehen, können Sie im Grunde einfach die Website nehmen, die Sie wollen, die URL in diese SRC-Felder einfügen, und dann haben Sie sicherlich eine Website innerhalb Ihrer Website. Es ist nicht so häufig, weil es nicht viel Grund gibt, eine Website in eine Website zu setzen, aber Sie können es immer noch sehen. Es ist irgendwie eine alte Schule Sache, denke ich. Eine andere Sache, die in HTML5 neu ist, sind Medien. Sie haben also gesehen, dass Bilder eingebettet werden, aber jetzt können Sie Video einbetten. Bevor HTML5 herauskam, verließen sich viele Browser auf Flash, aber jetzt, wenn Sie ein YouTube-Video einbetten und tief genug darin graben, werden Sie sehen, dass es HTML5-Video verwendet. Möglicherweise sehen Sie ein Tag, das Video sagt, und Sie können die Breite und Höhe und die Steuerelemente festlegen, indem Sie diese Attribute setzen, um die Quelle zu erhalten. Ziemlich cooles Zeug. Es ist die neue Version des Web, unterstützt alle Arten von Medien und Sie können auch Audio als auch einbetten. Hier unten sehen Sie vielleicht ein Audio-Tag, funktioniert ziemlich ähnlich wie das Video-Tag und wenn Sie dann zu dieser Referenz auf YouTube gehen möchten, können Sie sehen, dass Sie ein YouTube-Video mit einem iFrame abspielen können. Einige fortgeschrittene Sachen, die Sie in HTML haben, können Sie Grafiken auf Ihrem Bildschirm mit HTML zeichnen, Sie können geolokalisieren, so dass Sie den Standort der Person mit Ihrer Website basierend auf ihrem Browser bestimmen können . Sie können Elemente, Webspeicher, Web-Worker ziehen und das geht ein bisschen in die kompliziertere Seite von HTML, und dann haben Sie all diese Referenz hier. Ich wollte es nur mit HTML-Body auslassen. Auch hier gibt es eine Menge Tiefe mit dir, und wenn du ein Tag siehst, das du nicht verstehst, wenn du so etwas siehst und nicht weißt, was ein Iframe ist, schau einfach nach, geh einfach in Google und sei wie Iframe, zum Beispiel HTML-Element, und dann werden Sie beginnen, alle diese Informationen zu erhalten. Im nächsten Video wollte ich den anderen Abschnitt von HTML abdecken, der den Kopfbereich ist. Ich seh dich in dem. 13. HTML-Kopf: In diesem Video werden wir den Kopfbereich unseres HTML-Dokuments abdecken. Auch hier werden wir auf W3Schools.com verweisen, weil sie einen ziemlich guten Artikel über die verschiedenen Elemente haben , die wir in einem Kopfbereich aufnehmen können. Es ist nur über dieses Menü hier zugänglich, Sie können auf HTML Kopf klicken und dann können Sie die verschiedenen Elemente überprüfen , die wir in unserem Kopfbereich setzen können. Natürlich gibt es hier einen Titel, den wir bereits in unser Projekt aufgenommen haben. Wenn wir den Titel vollständig entfernen und auf „Speichern“ klicken, gehen Sie zurück zu dieser Seite, schauen Sie sich an, was mit dem Titel passiert hier. Was passiert, ist, dass es sich an den Dateinamen ändert, der am häufigsten nicht der am besten geeignete Name sein wird. Es wird die Erweiterung haben, Index HTML ist keine sehr benutzerfreundliche Überschrift oder Titel für die Seite. Ich werde auf „Speichern“ drücken, um es zurück zu Über uns zu bringen. Der nächste Abschnitt ist das Style-Tag und während wir uns in CSS bewegen, werden wir das Style-Tag verwenden, um Styling auf einer bestimmten Webseite einzubetten , aber jetzt werde ich Ihnen nur zeigen, wie wir es sofort verwenden können. Ich werde dieses Beispiel hier kopieren, zu unserer Seite gehen, aber dann in unseren Code-Editor gehen. Ich werde ein bisschen Raum hier in unserem Kopfbereich eröffnen und ich werde unseren Stil einbringen. Eingerückt, drücken Sie „Speichern“, aktualisieren Sie und wir können sehen, dass unsere Überschrift der obersten Ebene rot ist und was definiert sie sonst? Überschrift der obersten Ebene ist rot, unsere Hintergrundfarbe ist puderblau und unsere Absatzfarbe ist blau. Dies ist nützlich, wenn Sie nur eine Seite haben, auf die Sie Stile anwenden möchten, aber sagen Sie zum Beispiel, dass Sie eine Website mit mehreren Seiten haben, die Sie Ihre Stile in einer separaten Datei einfügen möchten , die von den Seiten referenziert wird, die sie benötigen. Wenn wir uns das nächste Beispiel in diesem Dokument ansehen, können wir das Link-Element sehen, das genau das ist, was ich gerade beschrieben habe. Es zieht ein externes Dokument mit Ihren Formatvorlagen in Ihr Projekt. Wir werden dies im Abschnitt über CSS tun, also möchte ich jetzt eine ganze Datei erstellen und Ihnen das als Beispiel zeigen. Aber im Grunde nur um zu sehen, wie es aussieht, anstatt all diese Stile zu haben, hätten Sie nur einen Link zu einem externen Stylesheet und es würde im Grunde all diese Stile importieren. Ich werde beide für die loswerden, der nächste ist Meta. Die Meta-Beschreibung wird hauptsächlich von Suchmaschinen verwendet, sie wird von Browsern sowie zur Anzeige von Inhalten und anderen Webdiensten verwendet, aber der größte Grund, Meta-Schlüsselwörter, Beschreibungen und Titel zu verwenden , ist für die Suchmaschinen. Da die Suchmaschinen, wenn Sie etwas Zufälliges in Google eingeben, wie sagen wir HTML-Kurs, was hier in diesen Ergebnissen kommt, wird durch Ihre Meta-Informationen bestimmt , so SEO ist sehr wichtig und Sie möchten, dass optimiert haben. Wie Sie hier sehen können, können wir in eine Meta-Beschreibung setzen, Sie können in einigen Schlüsselwörtern, die ich gehört habe, ist nicht allzu relevant in der heutigen Zeit und Zeit mit SEO, weil Google ist viel anspruchsvoller, als nur geben Sie es Keywords, aber Sie können den Autor definieren und Sie können zufällige Dinge wie das Aktualisieren der Seite alle 30 Sekunden festlegen . Ich bin mir nicht sicher warum Sie das tun möchten, aber das ist auch eine Option. Ein gutes Beispiel hier ist es, einer Seite eine Beschreibung, Schlüsselwörter und Autor zu geben. Eine andere Sache, die Sie tun können, ist das Ansichtsfenster festzulegen. HTML 5 führte eine neue Methode ein, Webdesigner über das Meta-Tag die Kontrolle über das Ansichtsfenster übernehmen können. Im Grunde, was das bedeutet, ist, wenn Sie beginnen, dieses mobile responsive Design auf einer dieser Seiten zu erstellen, es kann nicht funktionieren, ohne in diesem kleinen Tag. Dies ist nur ein bisschen eine Voraussetzung für responsive Web-Design, aber wir werden darauf eingehen , wenn wir über responsive Design im CSS-Abschnitt sprechen. Die andere Sache, die Sie in den Kopf aufnehmen können, ist ein Skript-Tag. Genau wie wir im Beispiel zuvor gezeigt haben, können wir einige Stile einbetten, aber wir können auch Skripte einbetten. Anstatt das zu tun, kann ich das greifen und das wird nicht wirklich funktionieren, weil wir kein Element durch die ID der Demo haben , was es versucht, zu zielen, aber wir können HTML trotzdem einfügen und ich denke wir werden wahrscheinlich einen JavaScript-Fehler hier bekommen, wir senden eine Funktion. Eigentlich alles, was tut, ist das Senden einer Funktion, aber wieder decken wir JavaScript in diesem speziellen Kurs nicht ab, nur wissen, dass Sie JavaScript auf die gleiche Weise einfügen können , wie Sie ein Stylesheets so einfügen würden, Sie können ein externes JavaScript-Dokument verknüpfen, aber dann können Sie es auch so einbetten, wie wir es hier getan haben, so dass ihre Skripte nur auf dieser Seite ausgeführt werden. Dieses ist etwas, das ich nicht wirklich oft verwende, aber Sie können ein Basiselement angeben und es gibt ein Basisziel für alle relativen URLs auf der Seite. Sie können auch hier sehen, dass Sie HTML Kopf und Körper weglassen können, aber ich würde es wirklich nicht empfehlen und W3Schools empfiehlt es entweder nicht also stellen Sie sicher, dass Sie diese Elemente einschließen. Da gehst du, hier ist ein bisschen eine Zusammenfassung. Sie können einen Titel, eine Basisverknüpfung zu einem Dokument oder einer externen Ressource einfügen, Metadaten über dieses Dokument einfügen, JavaScript einschließen und einige Stilinformationen in den Kopf einfügen. Das deckt so ziemlich den Kopf ab, wir werden anfangen zu sehen, wie wir mit CSS entwickeln, wir werden einige Stile hier verknüpfen und setzen, damit das für immer lange kommen wird, aber im Moment reicht der Titel aus, um uns in den Kopf zu setzen. Im nächsten Video werde ich über HTML reden, indem ich darüber spreche , wie wir HTML ohne CSS formatieren können. Das wird einen guten Schritt in das Styling unseres Dokuments mit dem nächsten Thema und wirklich wichtigen CSS geben. Wir sehen uns im nächsten Video. 14. HTML-Formatierung: Um unseren Abschnitt über HTML zu beenden, werde ich HTML-Formatierung abdecken. Der Grund, warum ich das bis zum Ende gelassen habe, ist, weil ich dachte, es würde einen schönen Übergang in CSS bieten und Sie können beginnen zu sehen, was die Formatierungsoptionen in HTML sind, wie begrenzt sie sind und wie viel mehr Sie mit CSS erreichen können. Gehen wir zurück zu unserem guten Freund w3schools.com und gehen Sie zur HTML-Formatierung. Die wichtigsten Dinge, die Sie tun können, ist fett Text, kursiv , betonen, kleiner machen und tiefgestellt und hochgestellt. Wahrscheinlich sind die wichtigsten fett und kursiv. Sie können hier unten gehen und sehen, dass, wenn wir einen Text fett formatieren wollen, wir einfach ein B verwenden können, aber B ist ein Old-School-Tag zu verwenden. Oft in diesen Tagen, wenn Sie etwas fett oder etwas betonen wollen, würden Sie stark verwenden. Gehen wir einfach rein und zeigen uns im Moment stark in Aktion. uns auf unserer Seite „Über uns“ Lassen Sieuns auf unserer Seite „Über uns“einfach dieses „Hallo“ fett machen. Alles, was wir tun müssen, ist ein paar Tags umzuspielen und dann haben wir sicherlich stark. Sehr grundlegendes Zeug. Sobald wir zu HTML kursiv und EM gehen, ist es eine ähnliche Sache. Wir können I für kursiv verwenden oder wir können EM für betont verwenden, und wieder hat es semantische Bedeutung hinzugefügt und es ist häufiger in modernen HTML, EM anders als ich zu verwenden. Ich sehe mich in diesen Tagen ziemlich nie mehr. Ich würde auf jeden Fall empfehlen, wenn Sie kursiv sind, wählen Sie EM. Wir können Abschied in EM einschließen und dann haben wir sicherlich fett und kursiv Text. Sie können auch klein für verwenden, wenn Sie kleineren Text in einem Header-Element möchten. Wenn wir über uns haben, und vielleicht wollten wir in kleineren Text, unsere Geschichte und Werte setzen . Nur um vorzustellen, was kommen wird. Wenn ich das speichere, wirst du sehen, dass das, was wir in die kleinen Tags eingewickelt haben, kleiner, etwas kleiner ist. Auch wenn Ihnen nichts gefällt, wie dies gestylt wird, können wir alles in diesen Tags anvisieren. Wir können sagen, ich möchte, dass starke Elemente so handeln oder so aussehen. Ich möchte, dass EM-betonte Elemente so aussehen. Ich möchte, dass kleine Elemente so aussehen. Das ist alles, was wir mit CSS machen können. Wenn es nicht klein genug für Ihr Fehlen ist, verwenden Sie es immer noch, weil es Ihnen ein gutes Targeting und dann im CSS-Abschnitt folgen wird, weil wir Ihnen zeigen, wie Sie Dinge stylen, wie immer Sie wollen. Es ist eine andere für Mac, die ich glaube nicht, dass ich vorher benutzt habe. Sie können jedoch Teile des Textes hervorheben. Ich werde hier reingehen und dort ein Zeichen setzen. Sehr grundlegendes Zeug. Wir setzen nur Text ein und wir setzen Tags um ihn herum, um ihm etwas Styling zu geben. Es gibt eine ganze Reihe von anderen hier. Ich werde nicht gehen und sie alle in ein Projekt stecken. Sie sind ziemlich selbsterklärend. Aber ja, Sie können es hier unten referenzieren und sehen was Sie in HTML mit HTML-Formatierung tun können. Was ich zur HTML-Formatierung sagen werde, ist es ziemlich begrenzt und deshalb brauchen wir CSS, um diese schönen Webseiten zu machen. Das sieht derzeit schrecklich aus und wir können das ohne CSS nicht wirklich schön aussehen lassen. Aber diese Elemente werden Sie während Ihrer Zeit immer noch sehen, wenn Sie HTML betrachten, weil sie semantische Bedeutung definieren. Wenn ich einen Text einfügen und ihn dann als stark definieren sollte, gibt mir das ein Ziel, durch und in meinem Stylesheet zu gehen, sagen Sie, dass der ganze starke Text ein bestimmtes Styling oder Verhalten haben sollte. Das sehen Sie im CSS-Abschnitt, aber für die Strukturierung und die Möglichkeit, verschiedene Teile Ihrer Seite anzusprechen. Wenn Sie etwas Fett wollen, sollten Sie immer noch HTML-Formatierung wie stark verwenden und dann, wenn Sie diesen bestimmten Stil ändern möchten, können wir das mit CSS tun. Das ist alles, was ich auf HTML abdecken wollte. Sobald Sie Tags verstehen, wenn Sie den Unterschied zwischen Kopf und Körper verstehen und Attribute verstehen, sind Sie ziemlich mit HTML gesetzt, das den Großteil dessen abdeckt, was Sie über HTML wissen müssen. Im nächsten Video werden wir in CSS springen und damit beginnen, einige CSS zu lernen. Das wird das zweite Thema unseres Kurses hier sein. Wir sehen uns im nächsten Video. 15. Erste Schritte mit CSS: In diesem Video werden wir mit CSS beginnen und für diesen Abschnitt der Klasse werden wir wieder W3 Schulen referenzieren. jetzt zum CSS-Menü wechseln und auf „Einführung“ klicken, werden wir zurück zu dem Ort gebracht, an dem wir begonnen haben, als wir CSS erstmals eingeführt haben. Jetzt, um CSS in unser Projekt einzuführen, werde ich zu unserem Code-Editor wechseln. Wenn Sie hier sehen, haben wir bereits ein Beispiel von CSS in unserem Projekt. Genau hier haben wir ein P-Tag und wir haben ein Attribut darauf, Code-Stil. Stil ist ein Attribut, das es uns erlaubt, CSS auf ein bestimmtes Element anzuwenden. Sie können auf diesem speziellen P-Tag sehen, wir haben ein Attribut des Stils, und innerhalb dieses Attributs haben wir eine CSS-Regel, die die Farbe grün definiert. Also, wenn ich zurück zu dem Dokument, das wir geöffnet haben, können Sie sehen, dass der erste Absatz ist grün, genau dort, wo wir es hier setzen. Das nennt man einen Inline-Stil. Aber vielleicht wollten wir einen Stil haben, der auf alle p angewendet wurde. Also, was ich hier tun könnte, wenn ich es Inline-Stile tun würde, ist, das einfach zu kopieren und einzufügen und dann wäre mein zweiter Absatz auch die Farbe grün. Sehen wir uns das einfach an. Jetzt haben wir viel mehr Absätze und vielleicht wollten wir auch Stile auf Überschriften setzen . Auf unseren Divs. Es kann anfangen, ziemlich chaotisch zu werden, und wir können anfangen, uns einige Male zu wiederholen. Wenn wir wie 10 verschiedene P's und wir hatten alle von ihnen mit Stil, Farbe grün. Es ist besser, nur eine Regel zu definieren, dass alle p die Farbe grün haben. Das ist, wenn wir anfangen können, CSS-Selektoren zu verwenden. Jetzt gehen wir in die Syntax im nächsten Video. Aber im Moment zeige ich Ihnen den zweiten Weg, wie wir Stile in unser Projekt aufnehmen können , und wir haben es tatsächlich in der Lektion zuvor auf HTML-Kopf gesehen. Ich gehe hier zu meinem Kopfbereich, erstelle eine Zeile nach Titel und öffne einige Style-Tags. Sobald wir also diese öffnenden und schließenden Style-Tags haben, können wir anfangen, ein reines CSS einzugeben und die Syntax im nächsten Video zu machen. Also lassen Sie sich nicht allzu verfangen, was hier vor sich geht. Aber anstatt eine Farbe Grün auf jedes P mit einem Style-Attribut angewendet zu haben, werde ich das loswerden und diese Regel hier aufstellen. Wie ich das tun würde, ist drücken Sie „P“, um alle p zu zielen. Öffne einige geschweifte Klammern, um eine Regel zu definieren, die nur zu diesem Selektor gehen würde , und dann werde ich in den gleichen Stil wie zuvor setzen, Farbe grün. Wenn wir dies speichern, sollten wir hoffentlich alle Absätze oder die P-Tags die Farbe grün sehen. Da siehst du, es gibt eigentlich einen zweiten Absatz für „Hallo, auf Wiedersehen“. Das ist auch betroffen. Also haben wir ihm einen Selektor gegeben und dieser eine Regel gegeben. Wir gehen in die Syntax im nächsten Video. Was passiert, wenn wir die Farbe Grün auf jedes P anwenden wollen? Es ist nicht nur auf dieser Website, sondern auf allen unseren Webseiten auf unserer Website. Nun, der beste Weg, dies zu tun, wäre, ein externes Stylesheet zu erstellen, die Regeln in das externe Stylesheet zu legen und sie einfach mit unseren HTML-Dokumenten zu verknüpfen. Also wieder, wir haben das im HTML-Kopfbereich behandelt, aber ich werde nur zurückgehen und es Ihnen zeigen. Also lasst uns zurück in die W3-Schulen gehen. Ich werde HTML in einen neuen Abschnitt öffnen und zu „HTML Head“ gehen. Wir scrollen nach unten, Sie können sehen, ja, wir können Stile für eine einzelne HTML-Seite einfügen oder wir können eine Verknüpfung zu einem externen Stylesheet und dann kopieren Sie diese Stile über auf alle unsere Seiten. Ich werde dieses Beispiel kopieren, es dort einfügen, wo wir unsere Style-Tags hatten, und lassen Sie uns darüber reden, was hier vor sich geht. Dieses Link-Tag ist also ein selbstschließendes Tag, wir müssen kein schließendes Tag am Ende setzen. Wir haben zwei Attribute drauf. Die erste ist REL, und es definiert, welche Art von Datei es sich handelt. Es ist ein Stylesheet. Alles, was Sie tun müssen, ist es einfach ein Stylesheet im REL-Attribut zu nennen, dann definiert das zweite Attribut, wo sich das eigentliche Stylesheet befindet. Ich möchte meine style.css aufrufen, nicht meine style.css, und ich werde das speichern. Gehen wir zurück zu unserer Seite. Sie würden nichts anderes bemerken, abgesehen von den Stilen, die wir gerade entfernt haben. Es wird nicht Ihre Webseite oder irgendetwas in die Luft sprengen, aber wenn ich in meine Konsole gehe, können Sie sehen, dass es sagt, dass es Zeitdatei nicht gefunden hat und das liegt daran, dass wir die Datei noch nicht erstellt haben. Was ich also tun werde, ist in „Atom“ zu gehen, eine neue Datei zu erstellen und diese sofort als style.css zu speichern. Also lasst uns in style.css gehen. Dieselbe Regel gilt hier bei HTML. Wir brauchen definitiv den Punkt-HTML-Topf, aber im ersten Teil können wir ihn im Wesentlichen nennen, was auch immer Sie wollen. Ich werde auf „Speichern“ klicken und jetzt, wenn wir zurückgehen und die Seite neu laden, und dann überprüfe ich meine Konsole erneut, gibt es keine Fehler. Aber natürlich kommt nichts durch, weil wir noch keine Regeln festgelegt haben. Also werde ich die gleiche Regel setzen, die wir vorher hatten, P Farbe grün. Gehen wir zurück. [ unhörbar], sind alle Absätze jetzt grün, da wir dieses externe Stylesheet mit diesem Projekt verknüpft haben. Wir können auf dieses Stylesheet verweisen, das ist ein Stylesheet auf allen unseren Webseiten unseres Projekts. Wenn wir hier Kontakt aufnehmen wollten, könnten wir genau den gleichen Link einfügen und wir müssen unsere Styles nicht jedes Mal neu schreiben. Also, da gehst du hin. Das deckt die drei Möglichkeiten ab, CSS in ein Dokument einzugeben. Wir können es inline durch ein Style-Tag machen, wie wir es zuvor gezeigt haben. Wenn wir also nur einen Stil anvisieren wollten , der keinen Sinn macht, um eine Regel zu erstellen, können wir hier ein Style-Tag in einem Kopf erstellen und einfach alle P's mit der Farbe Grün definieren. Oder wir können das einfach loswerden und all diese Stile in ein Stylesheet einfügen, was der sauberste Weg ist, dies am häufigsten zu tun, besonders wenn Ihr Projekt größer wird, werden Sie Stile viel wiederverwenden. Definitiv eine gute Idee, ein Stylesheet zu haben und von nun an werden wir uns darauf konzentrieren, unsere Styles in seine eigenen Stylesheets zu setzen. Im nächsten Video werden wir in die Syntax gehen. Wie schreiben wir eigentlich all diese Regeln und wie funktioniert das? - Ja. Wir sehen uns auf dem nächsten Video. 16. Grundlegende Syntax und Selektoren: Also im letzten Video haben wir CSS in unser Projekt aufgenommen und wir begannen mit unserer individuellen Stilregel, die hier in Zeile auf dem p-Tag angewendet wurde, aber dann haben wir auch eine Regel auf dem Kopfteil definiert und dann haben wir jetzt ein externes Stylesheet zu arbeiten mit. Also, um mit Syntax zu beginnen, gehe ich wieder zurück, um diese Registerkarte zu schließen und gehe dann zurück zur Syntax-Seite auf w3schools. Hier können Sie eine schöne visuelle Darstellung eines CSS sehen. Also der erste Teil, den wir haben, ist ein Selektor, und dann haben wir den Deklarationsblock. Es ist also einfach in dem Sinne, dass es nur zwei Teile gibt. Wir haben diesen Selektor und den Deklarationsblock. Innerhalb des Deklarationsblocks haben wir diese verschiedenen Optionen definiert. Der erste Teil ist also die Eigenschaft und der zweite Teil ist der Wert. Also, wenn wir die Farbe auf grün setzen, setzten wir die Eigenschaft der Farbe auf den Wert von grün. Wir können Regeln hier mit einem Semikolon trennen. In der Tat sollten wir, und jede Regel eines Semikolons nur der Vollständigkeit willen. Das wird uns davor retten, wenn wir es ein neues setzen, wir werden nicht vergessen, das Semikolon zu setzen und es wird nicht brechen. Hier im Beispiel können Sie sehen, dass dies alle p-Elemente zentriert mit einer roten Textfarbe eingestellt wird . Dies ist also ein weiteres Attribut, das Sie verwenden können, um Text zentriert auszurichten. Sie können auch links oder rechts ausrichten, je nachdem, in was Sie diesen Wert ändern. Aber Sie können hier mit diesem Selektor sehen, es ist nur p, was bedeutet, dass alle Elemente mit diesem Namen in die Farbe Rot mit Text in der Mitte ausgerichtet geändert werden . Der erste Teil ist natürlich der Selektor, und es gibt verschiedene Selektoren, die wir verwenden können, um HTML-Elemente basierend auf dem Elementnamen, der ID, der Klasse, dem Attribut und so ziemlich allem auszuwählen . Solange Sie Attribute nach einem dieser Teile unterscheiden können, können Sie bestimmte Elemente oder Gruppen von Elementen anvisieren. Also der erste ist der Element-Selektor. Es wählt also alle Elemente basierend auf dem Elementnamen aus. Wir haben das gleiche Beispiel wieder. Wir wählen alle p-Tags aus. Der nächste ist der ID-Selektor. Das ist also, wenn wir ein bestimmtes Element auswählen wollten. Also denke ich, der beste Weg, dies zu zeigen, ist, direkt in den Code zu tauchen. Aber wie wir das tun, ist mit einem Hash. Also, was ich tun werde, gibt es zwei Teile davon. Ich gehe in meinen Editor, gehe zu meinem HTML. Sagen wir einfach, dass diese besondere Rubrik wir bewirken wollten. Also, was ich tue, ist, ihm das Attribut von id zu geben. Also werde ich es ID der zweiten Überschrift geben, sagen wir. Also, was ich jetzt getan habe, ist, dass ich diesem einen eindeutigen Bezeichner gegeben habe , den wir verwenden können, um es anzusprechen. Wenn ich also zurück in style.css gehe, kann ich den Hash verwenden. Erinnern Sie sich an Hash mit IDs und ich kann die zweite Überschrift machen und dann öffne ich eine geschweifte Klammern und welcher Stil sollte hier angewendet werden? Mal sehen. Wir haben bereits Farben gemacht, also vielleicht lassen Sie uns Textdekoration unterstreichen. Also, jetzt sagt es alles mit der ID der zweiten Überschrift, wir sollten nur eins sein, weil ID nur für ein Element auf der Seite gelten sollte. Wir werden es unterstreichen. Also gehen wir zurück auf unsere Seite und werfen einen Blick und los geht's. Unsere Überschrift, die wir mit der ID der zweiten Überschrift definiert haben hat jetzt die Textdekoration unterstrichen. Gehen Sie weiter durch die Selektoren. Der nächste ist der Klassenselektor, und der Klassenselektor funktioniert sehr ähnlich dem ID-Selektor, außer dass dies für die Auswahl mehrerer Elemente verwendet wird. Also zum Beispiel, wenn wir in unser Dokument gehen hier und vielleicht dieses div, und wir werden ein paar dieser div-s haben. Wir wollten ihm eine bestimmte Klasse geben, wir die Stile ändern werden. Also werde ich einfach direkt reinspringen und es tun, genau wie wir es mit id getan haben. Ich werde Klasse statt ID machen, und ich werde dieses spezielle div nennen. Also werde ich das speichern, gehen Sie in style.css und wie wir eine Klasse anvisieren können , anstatt einen Hash oder ein Pfundzeichen zu verwenden, werden wir einen Punkt verwenden. Also werde ich mit einem Punkt hineingehen und spezial-div sagen. Was sollen wir nun mit einem Special-div machen? Lassen Sie uns dieses Text-Align-Beispiel verwenden und wir werden es nach rechts ausrichten. Drücken Sie also auf „Speichern“. Jetzt haben wir die Regel, die auf diesem Selektor basiert. Wir haben auch die Klasse für das eigentliche HTML-Element definiert. Also jetzt, wenn wir dies drücken, sollten wir sehen, dass der erste Absatz oder dieses, aber zuerst div hier, alle Texte darin nach rechts ausgerichtet sind. Nun, wenn wir dies noch einmal tun wollten, würden wir nur ein anderes div mit der Klasse des speziellen div haben. Remember Klassen sollen auf mehrere Elemente gesetzt werden, während IDs nur für ein Element auf der Seite sind. Also, wenn wir hier zurück gehen, werden wir sehen, dass jedes div mit der Klasse des speziellen div die Regel des text-align direkt darauf haben wird. Während dieser nur ein div ist und keine Klasse oder spezielles div hat. Es hat also das Standardverhalten. Zurück zum Dokument hier können wir auch eine Kombination von Elementen und Klassenauswahl verwenden. Wie Sie hier sehen können, haben wir das P und wir haben ein Punktzentrum. Das besagt im Grunde, dass, wenn Sie ein p mit der Klasse des Zentrums haben, diese Regel anwenden. Sie müssen also zwei Dinge haben: Sie müssen die Klasse für dieses Element haben, das Sie zielen möchten, und es muss auch von diesem bestimmten Element sein. Also werde ich das jetzt tatsächlich kopieren und einfügen und das demonstrieren. Also habe ich das da drin kopiert, und jetzt werde ich einen Absatz finden. Lassen Sie uns meinen ersten Absatz machen und ihm die Klasse geben, was die Klasse war wieder? Mitte. Also geben wir ihm diese Klasse. Gehen Sie zurück, und jetzt können wir sehen, dass es rot und zentriert ist. Wir können auch mit id kombinieren. Vielleicht wollten wir also nur Rubrik zwei mit einer ID der zweiten Überschrift anvisieren. Vielleicht haben wir eine zweite Überschrift auf ein anderes Element gesetzt, das kein h2 war. Wir können es wirklich spezifisch machen und sagen, dass nur h2's mit einer ID der zweiten Überschrift, der Stil gilt. Also gehe ich einfach zurück und setze h2 dort vorne und wir werden das gleiche Ergebnis sehen. Wenn ich also speichere und übergehe, wirst du das gleiche Ergebnis sehen, wenn ich eine zweite Überschrift auf etwas setze, das kein h2 war. Also, vielleicht werde ich die zweite Überschrift hier oben setzen. Was übrigens keine gute Idee ist, weil wir bereits die Regel brechen , nur eine ID für jedes Element zu haben. Aber nur als Beispiel, wenn ich hier zurückgehe, werden Sie sehen, dass die Textdekoration von Unterstreichung nicht auf diese bestimmte Überschrift angewendet wird , weil sie nicht die gleichen Elemente und ID-Regel teilt. Also, wenn wir das Element Teil weggenommen und wir gehen zurück, werden Sie sehen, dass es unterstreicht. So hoffentlich ergibt das Sinn. Ich werde diese ID aus Überschrift 1 entfernen, weil wir nur einmal eine bestimmte ID in einem Dokument verwenden sollen . Also ja, versuchen Sie es zu behalten. Wenn Sie eine bestimmte ID haben, die ein Element definieren soll, wenn Sie mehrere Elemente beeinflussen möchten, die Sie definieren, können Sie Klasse verwenden. also wieder zu Syntax und Selektoren zurückkehren, können Sie auch Selektoren gruppieren , so dass Sie sich nicht immer und immer wieder wiederholen müssen. In diesem Beispiel sehen Sie, h1, h2 und p haben alle die gleichen CSS-Regeln. Was wir also tun können, ist, das zu minimieren, indem wir nur Kommas eingeben. Statt dessen können wir das tun. Eine andere Sache ist ein Kommentar, und dies wird verwendet, um Code zu erklären, und wir können dies tun, indem wir mit einem Schrägstrich und dann das Sternchen öffnen und dann mit einem Sternchen und Schrägstrich schließen. Kommentare geben Ihnen also nur die Möglichkeit Ihren Code zu kommentieren, um es einfacher zu verstehen, für jemanden zu lesen, lassen Sie uns einfach einen beliebigen Kommentar hier einfügen, und ich werde sagen, unterstreichen Sie alle zweiten Überschriften. Sie können sehen, dass meine Codebearbeitungssoftware weiß, dass dies ein Kommentar ist und es verblasst hat. Das sind also die grundlegenden Syntax-Selektoren. Es gibt einige fortgeschrittene, auf die wir in einem späteren Video gehen werden. Aber im Wesentlichen, was Sie haben, ist Ihr Element-Selektor, Sie haben ID-Selektoren, Sie haben Klasse, und Sie können sie auch kombinieren. Eigentlich können Sie alle drei in einem kombinieren. Sagen Sie zum Beispiel, Sie hatten ein p mit der ID der zweiten Überschrift und der Klasse des speziellen div, Sie könnten so etwas schreiben. So könnten Sie special-div, zweite Überschrift tun. Aber jetzt bist du einfach ein bisschen zu verrückt mit den Selektoren. Es gibt nicht oft einen Grund, warum man so etwas tun müsste. Alles klar, das deckt die grundlegende Syntax ab. Im nächsten Video werden wir die CSS-Hierarchie abdecken, und das ist, was CSS den Namen Cascading Stylesheets gibt , denn wie Sie im folgenden Video sehen werden, gibt es eine Hierarchie der Spezifität, die bestimmt, welche Regeln andere Regeln außer Kraft setzen. Dies ist der knifflige Teil von CSS und wir werden direkt in das nächste Video eintauchen. 17. CSS-Hierarchie: In diesem Video werden wir die Hierarchie der CSS-Regeln abdecken. Dafür habe ich zwei Dokumente offen. Ich werde nur zu einem neuen Fenster wechseln. Es gibt diese beiden Dokumente auf W3-Schulen, die darüber sprechen. Eins ist das allgemeine How-To und man geht um Spezifität. In dieser Anleitung haben wir bereits die drei Möglichkeiten gesehen, CSS einzufügen. Wir haben Inline-Stil und interne Stylesheet und ein externes Stylesheet gemacht. So haben Sie hier ein externes Stylesheet gesehen. Sie haben ein internes Stylesheet gesehen, indem Sie einfach ein Style-Tag in Ihren Kopf stecken und Sie haben einen Inline-Stil gesehen. Aber dann gibt es auch das Problem von mehreren Stylesheets. Sagen wir zum Beispiel, einige Eigenschaften wurden für denselben Selektor in verschiedenen Stylesheets definiert , welche tatsächlich Vorrang hat? Werfen wir einen Blick auf dieses Beispiel. Nehmen wir an, wir haben ein Stylesheet, das eine Regel für h1 der Farbe navy hat, aber dann gibt es ein anderes Stylesheet, das eine Regel für h1 der Farbe orange hat. Nun, was passiert hier? Welche Farbe wird dieser h1 eigentlich sein? Hier können Sie sehen, dass die Antwort ist der Wert des zuletzt gelesenen Stylesheets verwendet wird. Wenn wir hier nach unten gehen und wir haben einen Link-Tag referenzieren externe Stylesheet, und dann haben wir ein internes Stylesheet. Das interne Stylesheet wird nach definiert, so dass es nach diesem Link kommt. Daher überschreibt dieser Stil alle h1-Stile in diesem bestimmten Stylesheet. Aber leider müssen Sie sich nicht nur um mehrere Stylesheets kümmern, es gibt mehrere Möglichkeiten, wie Sie sich mit CSS überlappen können, und dort kommt die kaskadierende Reihenfolge ins Spiel. Es fragt hier, welcher Stil verwendet wird, wenn mehr als ein Stil für HTML-Element angegeben ist ? Was hier steht, ist, dass wir sagen können, dass alle Stile durch die folgenden Regeln in ein neues virtuelles Stylesheet kaskadieren, wobei Nummer eins die höchste Priorität hat. Wenn wir einen Inline-Stil haben, wird das ein externes und internes Stylesheet überschreiben. Das werde ich jetzt einfach demonstrieren. Wir haben diese Regel für alle Absätze sind grün, aber was passiert, wenn es nur einen Absatz gibt, den Sie nicht grün wollen? Nun, wir können reingehen und wir können zu diesem Absatz gehen und wir können ihm einen Inline-Stil geben, nennen es Farbe schwarz. Nun, wenn ich das speichere und diese Seite öffne, können wir sehen, dass dieser Absatz jetzt schwarz ist. Das liegt daran, wenn wir einen Inline-Stil einfügen, wird es die allgemeine Regel außer Kraft setzen. Dies verbindet sich mit Spezifität. Gründen der Spezifität, lasst uns jetzt in diesem Artikel auf W3-Schulen gehen. Was ist Spezifität? Nun, wenn es zwei oder mehr widersprüchliche CSS-Regeln gibt, die auf das gleiche Element verweisen, folgt der Browser einigen Regeln, um zu bestimmen, welche die spezifischste ist und daher gewinnt. Sie können sich Spezifität als Punktzahl vorstellen, die bestimmt, welche Stildeklarationen letztendlich auf ein Element angewendet werden. In unserem speziellen Fall ist dies eine ziemlich allgemeine Regel. Wir sagen, dass alle P-Tags grün sind. Das ist ziemlich allgemein. Sie sagen, dieses besondere p-Tag auf dieser speziellen Seite wollen wir schwarz ist sehr spezifisch. Es wird also von Ihrem Browser angenommen, dass Sie möchten, dass dies speziell schwarz ist und Sie möchten nicht, dass eine allgemeine Regel wie diese es überschreibt. Ziemlich sichere Annahme würde ich sagen. Aber das Problem ist nicht nur mit Inline-Stilen, sondern auch mit Regeln wie diesen. Wenn wir also zurück zum Dokument gehen und mehr über Spezifität lesen, können wir hier die Hierarchie betrachten. Inline-Stile werden immer überschreiben, was in Ihren Regeln ist, in den allgemeinen Regeln, ob seine Klasse oder ID. Es gibt eine Ausnahme, auf die wir ein wenig später in diesem Video eingehen werden. Aber Inline-Stile sind die spezifischsten. Dann haben wir einen Ausweis. ID ist natürlich eine eindeutige Kennung für ein Seitenelement auf einer bestimmten Seite. Dann gehen wir in Klassen, Attribute und Pseudo-Klassen. Wir sind nicht in das Targeting über Attribute oder Pseudo-Klassen gegangen. Aber das sind alle Arten allgemeiner, als nur auf ein bestimmtes Element zu zielen. Dann ist die meisten allgemeinen Targeting nach einer bestimmten Art von HTML-Element oder Pseudo-Elementen. Im Beispiel von p, wir zielen auf alle ein bestimmtes Element. Das ist die allgemeinste Regel, die Sie haben können. Wenn Sie die Spezifität quantifizieren möchten, können Sie das auch tun. Hier ist ein bisschen ein Leitfaden dazu. Eine andere Regel der Spezifität und ähnlich der, die wir hier mit den mehreren Stylesheets hatten, zählt die letzte Regel. Vielleicht hätten wir diese Regeln nicht nebeneinander, weil es ziemlich offensichtlich ist zu sehen, dass sie dasselbe Ziel haben, aber vielleicht weiter unten in einem großen Stylesheet haben Sie einen anderen Selektor, der auf h1 abzielt. Derjenige, der zuletzt geschrieben wurde, wird angewendet und überschreibt diesen. Eine andere Sache zu beachten ist, dass ID-Selektoren eine höhere Spezifität haben als Attributselektoren. Dies ist hier ein Attributselektor und wir haben noch keine Attributselektoren übergegangen, also erwarten Sie nicht, dass Sie das verstehen. Aber ID-Selektoren haben, wie Sie erwarten würden, als die zweite Spezifitätsstufe, als die zweite Spezifitätsstufe,mehr Gewicht als Attribute. Sie nach unten scrollen, um mehr Spezifitätsregeln zu sehen, heißt es, hier sind kontextbezogene Selektoren spezifischer als ein einzelner Elementselektor. Wenn Sie beispielsweise über ein externes Stylesheet und ein internes Stylesheet verfügen, liegt das interne Stylesheet näher am Dokument als das externe, daher würde dies in diesem Fall Vorrang vor diesem Stil haben. Das letzte Beispiel, das hier gibt, ist, dass ein Klassenselektor eine beliebige Anzahl von Elementselektoren ausschlägt. Wie hier oben steht, sind Klassen spezifischer als nur auf alle Elemente eines bestimmten Typs ausgerichtet. Sagen Sie zum Beispiel, Sie hatten eine h1 mit der Klasse des Intro, die die Farbe Gelb annehmen würde und dies außer Kraft setzen würde, weil dies nur ein Elementselektor ist. Ich hoffe, das hilft ein bisschen mit Spezifität. Auch hier gibt es eine Menge zu nehmen. Dies ist einer der schwierigsten Bereiche von CSS, also erwarte ich nicht, dass Sie es nach dieser speziellen Lektion gemeistert haben. Aber Sie werden sehen, wie wir tiefer in CSS gehen, mehr darüber, warum es Cascading Stylesheets genannt wird, und wir werden sehen, wie diese Hierarchie vor unseren Augen funktioniert. Es gibt tatsächlich mehr Selektoren, die wir verwenden können, aber wir werden die erweiterten Selektoren in einem späteren Video abdecken. Eine Sache, die ich erwähnen werde, bevor wir hier einschließen, ist, dass wir dieses Verhalten der Spezifität außer Kraft setzen können. Wir tun das, indem wir ein wenig von einem Cheat-Code wichtig. Nehmen wir zum Beispiel an, mit dieser zweiten Überschrift möchte ich es wirklich ändern, um eine unterstrichene zu haben, aber vielleicht gibt es einen bestimmten Stil hier, wo es Textdekoration sagt. Welche Möglichkeiten stehen uns zur Verfügung? Sagen wir einfach keine. Wenn ich gehe und auf „Speichern“ klicke und dann zurück zu dieser Seite gehe, wird es unsere ID-Regel hier oben der Unterstreichung außer Kraft setzen, weil es ein Inline-Stil ist. Denken Sie daran, dass Inline spezifischer ist, als hier eine ID-Regel zu erstellen. Was passiert, wenn wir in einer bestimmten Situation sind, in der wir dieses bestimmte Dokument nicht wirklich ändern können, vielleicht ist es gesperrt HTML. Es gibt einige Situationen, in denen wir keinen Zugriff haben , um das HTML zu ändern oder es wird von einem Backend generiert, und es hat diesen festen Stil. Nun, es gibt einen Cheat, den wir verwenden können und es ist nicht gerade die beste Lösung, die beste Lösung wäre, dieses Style-Tag loszuwerden. Aber unter der Annahme, dass wir das buchstäblich nicht tun können, ist ein Hack, den wir tun können, diesem Stil etwas geben, das Bedeutung genannt wird. Wir werden mit einem Ausrufezeichen beginnen und dann wichtig setzen. Sie können sehen, dass mein Code-Editor weiß, dass dies ein wichtiges Schlüsselwort ist, es hebt das in lila hervor. Wenn ich hierher zurückgehe, wirst du sehen, dass dies jetzt unterstrichen ist, obwohl hier ein Stil drauf ist. Dies ist spezifischer als eine ID-Regel. Aber ich bin in der Lage, das immer noch zu bekommen, indem ich wichtige. Nun, die Sache mit Wichtigem ist, dass Sie es nicht ständig benutzen wollen. Also lasst uns einfach Google eintippen. Risiko der Verwendung wichtig. Sie werden sehen, selbst wenn Sie es nur auf Google recherchieren, werden Sie herausfinden, warum wichtig ist schlechte Praxis in einigen Situationen. Es ist daher wahrscheinlich, dass unerwünschte Effekte weiter unten auf der Linie verursachen. Wenn Sie es wirklich verwenden müssen, können Sie, aber es überschreibt das übliche Verhalten von CSS. Die Herausforderung kommt wirklich, wenn ich zum Beispiel das überschreiben wollte. Nun, es gibt keine Gelegenheit, das jetzt zu überschreiben, weil ich es wichtig gemacht habe. Also sagen wir zum Beispiel, wir haben die gegenteilige Situation davor, wo wir keinen Zugriff auf diese HTML-Datei hatten. Vielleicht hatten wir Zugriff auf diese HTML-Datei und wir hatten keinen Zugriff auf diese Datei. Wenn jemand hier wichtig ist, dann gibt es keine Möglichkeit, das zu überschreiben. Wir können in einen Stil setzen und es ist super spezifisch, aber es wird immer noch nicht zu schlagen wichtig. Das ist, ich denke, eines der Risiken, wichtig zu verwenden. Sie werden es mehrmals sehen, wenn Sie tief in CSS eindringen, dass wichtige Probleme verursacht, daher sollte es nur als letztes Szenario verwendet werden. Es macht im Moment vielleicht keinen vollkommenen Sinn, warum das so ist, aber vertrauen Sie mir, wenn ich sage, dass Sie diese Spezifitäthierarchie zuerst verwenden möchten. Wenn Sie also für ein bestimmtes Element spezifisch werden möchten, geben Sie ihm einen Inline-Stil, zielen Sie auf seine ID ab und geben Sie es nicht unbedingt wichtig, es sei denn, Sie müssen wirklich und Sie haben das Gefühl, dass dies die einzige Option ist. Aber wenn wir tiefer in CSS einsteigen, werden Sie lernen, wann es wichtig ist, wichtig zu verwenden, und das ist, wo ich Wichtigkeit für jetzt überlasse. Jetzt haben wir Spezifität behandelt und Syntax behandelt. Es gibt ein Konzept, allgemeines Konzept, das ich als Box-Modell im nächsten Video abdecken möchte. Dann werden wir auf alle verschiedenen Optionen gehen, die uns zur Verfügung stehen. Wahrscheinlich nicht alle von ihnen, aber der Großteil von ihnen, und zeigen Sie, was Sie in CSS tun können. Ich werde Sie im nächsten Video sehen, um über Box-Modell zu sprechen. 18. Das Box-Modell: Bevor wir in die verschiedenen Styling-Optionen eintauchen, wollte ich noch eine Sache abdecken, die das Box-Modell genannt wird. Also, wenn Sie in W3Schools gehen wollen, und wählen Sie CSS das Box-Modell, können wir beginnen, ein wenig darüber zu lernen. Ich werde die Registerkarte aus der vorherigen Lektion schließen, und schauen wir uns das Box-Modell an. Am Anfang, wie HTML-Elemente wie etwas etwas abstraktes klingen könnten. Aber ein Weg, wie wir sie denken können, ist als Boxen. In CSS wird dieser Begriff Box-Modell verwendet, wenn über Design und Layout gesprochen wird. Das CSS-Box-Modell ist im Wesentlichen eine Box, die um jedes HTML-Element umschließt. Es besteht aus Rändern, Rändern, Padding und dem tatsächlichen Inhalt. Sie können in diesem Bild unten eine Abbildung des Box-Modells sehen. Was wir in den verschiedenen Teilen haben, ist Inhalt, Polsterung, Rahmen und Rand. Auch hier denke ich, dass der beste Weg, um Ihnen dies zu zeigen, in der Praxis ist. Wir haben hier ein Beispiel, aber sie zeigen Ihnen kein HTML-Beispiel. Gehen wir noch einmal in unser Dokument. Ich werde einige Registerkarten hier schließen, um es zu bereinigen, und hier ist eine klar aussehende Seite noch. Ich werde hier gehen, über die index.html wechseln, und was ich tun möchte, ist nur eine zufällige Box zu erstellen. Was ich tun werde, ist in eine horizontale Regel zu setzen, wieder eine Division zu erstellen, und ich werde ein div einfügen. Dann in diesem div, setzen Sie ein anderes div, und dieses div wird unsere Box sein. Um dieses spezielle div zu stylen, werde ich ihm eine Klasse von Box geben. Wenn wir wieder in unser HTML-Dokument gehen, können Sie sehen, dass die horizontale Linie aufgetaucht ist, aber Sie können nicht wirklich etwas darunter sehen. Im Moment liegt das daran, dass wir ein div haben, das im Grunde ziemlich nur ein leeres Stück nichts ist . Wenn ich hier in den Inspektor gehe und mir tatsächlich anschaue, was los ist. Sie können hier sehen, dass es das div gibt, das im HTML definiert ist, aber es hat keine Höhe. Das übergeordnete div und div mit der Klassenbox drauf ist im Grunde nichts im Moment. Jetzt können wir das div tatsächlich sehen und tatsächlich in etwas erstellt werden, besteht darin in unsere style.css zu gehen und einen Stil für Box zu erstellen. Ich werde alle Elemente mit der Klasse von Box anvisieren, indem ich .box mache, und ich werde die Stile aus dem Beispiel hier kopieren. Ich gebe ihm eine Breite von 300, einen Rand von 25, solide grün, Polsterung von 25 und Rand von 25, also werde ich das speichern. Wenn wir dann in unser Dokument gehen, können wir anfangen, diese grüne Box zu sehen. Nun, was mit Google Chrome großartig ist und ich denke, in anderen Browsern ist, dass Sie rechten Maustaste auf dieses Element klicken können und Sie tatsächlich das Box-Modell sehen können. Hier habe ich eine tatsächliche Darstellung des Box-Modells hier. Jetzt sehen Sie, dass der eigentliche Inhaltsteil keine Höhe hat. Sie sehen 300, das ist die Breite, die wir definiert haben, aber keine Höhe dort. Aber man kann tatsächlich sehen, dass ein etwas Höhe hat und das liegt daran, dass wir eine Menge Polsterung, viel Rand und etwas Marge haben. Ich werde ihm nur eine gewisse Höhe geben. Ich werde ihm eine Höhe von 200 Pixeln geben. Speichern Sie das, gehen Sie zurück. Jetzt haben wir auch eine Box mit einer Höhe, und Sie können in unserer visuellen Darstellung des Box-Modells hier sehen , dass wir 300 mal 200 haben. Wir können tatsächlich sehen, dass ein bestimmter Teil der Box hervorgehoben wird, wenn wir das tun. Denk dran, ich werde das nur auskommentieren. Was ich dort getan habe, ist das in einen Kommentar verwandelt, so dass es nicht wirklich zutrifft, wenn sich jemand fragt. Wenn ich hierher zurückgehe und versuche, mit dem Mauszeiger über den Inhalt, den mittleren Abschnitt, wird hier nichts hervorgehoben. Siehst du, wie ich darüber schwebte. Nichts ist da drüben, weil es keine Höhe hat. Wenn gibt die Höhe zurück, und jetzt können Sie sehen, dass es einen Inhaltsbereich hat. Jetzt gibt es eine Ebene außerhalb dieses sogenannten Padding. Jetzt ist das Padding ich denke, nur der Bereich zwischen dem Inhalt und der Grenze. Wenn du das Hellgrün siehst, kann ich nicht gleichzeitig über beide schweben. Aber wenn Sie sehen, dass hellgrün jetzt auftaucht, ist das der Polsterbereich. Dann natürlich die Grenze, wir haben die Grenze auf ein solides Grün gesetzt, und bei 25 Pixel gegeben, so dass Sie deutlich sehen können, die Grenze, und das gibt es eine zusätzliche 25. Dann außerhalb der Grenze ist Rand. Wenn ich zwei dieser Kisten zusammenstellen sollte, dann machen wir das jetzt. Ich muss tun, ist kopieren und einfügen. Jetzt habe ich zwei dieser Boxen, jetzt können Sie Marge sehen, denn wenn ich keinen Spielraum hatte, kann ich ihn hier abschalten. Die Boxen würden sich nur miteinander verbinden, weil es keinen Rand zwischen ihnen gibt. Auch hier ist der Rand das, was auf der Außenseite der Grenze ist. Nun, eine andere Sache, die ich tun kann, um dieses Haus zu bringen, ist , etwas Inhalt in eine dieser Boxen zu stecken. Ich werde Box 1 und Box 2 setzen. Wir werden das retten, gehen Sie zurück. Hier können Sie sehen, dass wir Inhalte darin haben, und es ist nicht richtig gegen die Grenzen, weil wir 25 Pixel Polsterung haben, die wir deutlich sehen können, indem wir dort drüben schweben. Wir könnten auch mehr Styling tun, um den Text in der Mitte auszurichten. Aber wenn wir diese Polsterung nicht haben würden, würde der Inhalt direkt gegen die Grenze drücken. Ich hoffe, das Box-Modell fängt an, ein bisschen Sinn für Sie zu machen. Wenn wir hier zum Inhalt zurückkehren, sehen Sie nur eine Warnung, wie Sie die volle Breite und Höhe einer Box berechnen können. Sie müssen anerkennen, dass es nicht nur der Inhalt ist, sondern auch das Padding, der Rand und der Rand , der den vollen Bereich ausmacht wie viel dieser Inhalt einnimmt oder dieses bestimmte Element. Wenn wir all das loswerden sollten, denken Sie daran, Es ist im Grunde ein leeres div, das nur so groß ist wie der Inhalt darin. Denken Sie daran, dass es vorher keinen Inhalt darin gab, also sahen wir gar nichts. Jetzt sehen wir tatsächlich den Inhalt, aber es gibt kein Box-Modell um ihn herum. Gerade jetzt, wenn wir ihm nur einen Rahmen mit einem Pixel geben würden, damit wir die Ränder davon sehen können. Es wird die volle Breite verlängern. Es gibt keinen Rand zwischen ihnen, und es gibt nur so viel Höhe, wie es braucht, um den Text zu haben. Mit all diesen anderen Attributen, die wir anwenden, können wir ein gestyltes div haben. Sie werden in einem späteren Video sehen, wir können diese nebeneinander angezeigt werden. Das ist, wo wir beginnen können, Spalten und viel schöneres, reaktionsfähigeres Design zu sehen. Das ist nur ein bisschen auf dem Box-Modell. Nur ein bisschen Extra-Theorie, die ich dachte, ich würde mit euch teilen bevor wir in mehr Styling-Optionen kommen. Ich hoffe, das hilft zu visualisieren, was wirklich passiert, wenn Sie ein div oder ein Element erstellen. Im nächsten Video werden wir direkt in einige Styling-Optionen springen. Wir beginnen mit Farben, Hintergründen und Deckkraft. 19. Farben, Hintergrund und Deckkraft: In diesem Video werden wir beginnen, verschiedene Optionen zu durchlaufen , die Sie für das Styling in CSS haben. Wir beginnen mit Farben, Hintergründen und Deckkraft. Wenn ich zu CSS-Farben gehe, haben wir bereits Farben in unserem Dokument definiert. Wir haben Farbe hier, wir haben Farbe dort, wir verwenden Farbe an ziemlich zufälligen Stellen. Wie Sie aus unseren Dokumenten sehen können, haben wir hier nur eine Unübereinstimmung der Farben. In all diesen Beispielen ist das, was wir getan haben, nur ein Wort verwendet, um die Farbe zu definieren. Wenn wir feste Farben wie Schwarz, Rot und Grün verwenden , können wir diese einfach hineinwerfen und CSS wird wissen, was zu tun ist. Aber es gibt auch andere Möglichkeiten, Farben zu definieren. Wenn ich hier zu Farbwerten gehe, wenn ich nur rot eintippe, bekomme ich eine ganz bestimmte Farbe. Aber was ich tun kann, ist eine bestimmte Farbe basierend auf RGB-Werten, Hex-Werten, HSL, RGBA-Werten und HSLA-Werten zu definieren . Lassen Sie sich davon nicht zu überwältigen. Die meiste Zeit verwende ich HEX-Werte. Genau hier ist ein RGB-Wert, und genau hier ist ein HEX-Wert. Sie haben das vielleicht schon früher gesehen, tatsächlich haben sie einen Hash, und dann gibt es ein paar hexadezimale Zeichen. Es können sie englische römische Alphabet-Zeichen hier sein, und einige Ziffern als auch. Wir können dies tatsächlich auf jeder Webseite sehen. Eigentlich können wir dies auf dieser speziellen Webseite überprüfen. Wir können mit der rechten Maustaste klicken und unseren Inspector hier verwenden, wenn Sie auf Google Chrome sind, und wir können hier sehen, dass wir einen Farbcode direkt hier haben. Wir können tatsächlich, in Chrome, sehen Sie den hexadezimalen Wert dieser Farbe und wo es auf das Farbspektrum passt. Wir können darauf klicken und es in einen RGBA-Wert ändern. Wir können dies ändern und ändern Sie es in einen HSLA-Wert und dann zurück zu HEX. Wenn wir dies ändern, können wir beginnen, sowohl die Änderung dort drüben zu sehen, aber dann ändert sich auch der hexadezimale Wert hier unten. Ich werde nur entkommen, um das umzukehren. Wir könnten einfach anstelle eines hexadezimalen Werts einfügen, also gehe ich einfach wieder zu diesem bestimmten Element zurück. Anstatt einen hexadezimalen Wert zu haben, könnten wir nur das Wort grün haben, aber dann erhalten wir ein generisches Grün. Das ist im Grunde dasselbe wie dieser hexadezimale Wert. Wenn Sie eine bestimmte Mischung möchten, können Sie eine beliebige Mischung erhalten, indem Sie Hexadezimalwerte oder HSL oder alle anderen Werte verwenden. Ich habe nur Control Z und ich habe es zu dieser bestimmten Farbe zurückgebracht , die mit diesem hexadezimalen Wert dargestellt wird. Eine andere Sache, die Sie mit RGBA und HSLA tun können, ist etwas Transparenz sowie eine bestimmte Farbe zu geben. Wieder, wenn ich zurückging, um die Farbe dieser Schaltfläche zu ändern und ich wollte es ein wenig transparenter machen, kann ich darauf klicken, dies RGBA konvertieren, und Sie werden sehen, dass auf der endgültigen Eigenschaft, wir haben eine, die ist im Grunde eine 100-prozentige Deckkraft. Wenn ich hierher ging und ich es auf 50 Prozent änderte, können Sie sehen, dass es ein wenig verblasst in seinen Hintergrund, was eine graue Farbe ist. Ich kann das auf 0,1 ändern, um 10 Prozent Deckkraft anzuzeigen, oder 0,9, um 90 Prozent Deckkraft anzuzeigen. Aber ja, Sie können die Deckkraft und die Farbe ändern damit Sie sie in den Hintergrund einblenden können. Das ist ziemlich cool. Wir haben über RGB gesprochen, wir haben über HEX-Werte gesprochen, wir haben über HSL gesprochen. Eine Sache, die ich nicht erwähnt habe, ist, wenn Sie möchten, dass es vollständig transparent ist, können Sie einen Nullwert eingeben. Im Wesentlichen können Sie, was Sie wollen, in diese ersten drei Werte einfügen, weil es sowieso komplett transparent sein wird. Aber dann können Sie sich natürlich bis zu 20 Prozent Deckkraft arbeiten, 40 Prozent, genau wie ich es im Beispiel gezeigt habe. bis zum Anfang der Seite scrollen, gibt es ein paar Stellen, an denen wir eine Farbe einfügen können, und es ist nicht besonders offensichtlich wenn wir uns ein HTML-Element ansehen und das Wort Farbe sehen, welche Farbe tatsächlich beeinflusst, und tatsächlich Wenn wir nur das Wort Farbe verwenden, ohne Hintergrundfarbe zu sagen , wird es zum Beispiel den Text beeinflussen. Sie können sich Farbe als Textfarbe vorstellen, und Sie können hier Hash ffffff sehen, das ist im Grunde weiß, also könnten wir einfach hier einfach in Weiß setzen und wir würden das gleiche Ergebnis erhalten. Wenn Sie Farbe definieren, denken Sie daran, dass es sich um Textfarbe handelt. Aber dann auch auf diesem bestimmten Link, können wir eine Hintergrundfarbe definieren, und so ist das der Hintergrund dieser bestimmten Verbindung wird dieser Farbton von Grün sein. Gehen wir zurück auf die Seite, können wir es jetzt sehen, wir können die Hintergrundfarbe für jedes HTML-Element mit dieser bestimmten Eigenschaft, und das ist Hintergrund, Bindestrich Farbe. Wie ich schon sagte, Textfarbe ist nur Farbe. Wir müssen nicht Schriftfarbe, Textfarbe sagen, nur die Wortfarbe selbst ist die Eigenschaft für Textfarbe. Die dritte Farbe, die ich noch nicht gezeigt habe, ist die Rahmenfarbe. Es gibt ein paar Möglichkeiten, das zu tun. Sie können die Eigenschaft des Rahmens verwenden, in der Sie eine Breite des Rahmens definieren können, unabhängig davon, ob es sich um einen Volumenkörper oder gepunktet oder gestrichelt handelt, und dann die Farbe dieses Rahmens. Die zweite Möglichkeit, dies zu tun, besteht darin, ein Attribut namens Randstrich Farbe zu verwenden. Zum Beispiel, wenn ich ironisch die Titelrandfarbe machen wollte, geben Sie ihm tatsächlich einen Rahmen mit einer Farbe. Ich könnte hier auf den Elementstil gehen und Rahmenfarbe blau machen. Aber natürlich gibt es noch keine Grenze, also muss ich einen definieren, und ich werde nur einen px solid machen. Sie können die Farbe in ein anderes Attribut trennen, indem Sie die Rahmenstrichfarbe verwenden. Aber ich könnte auch, wenn ich das einfach deaktivieren und ich das auf die gleiche Zeile setzen möchte, könnte ich blau direkt nach dem Wort solide machen, und da gehen wir. Wir werden die Grenze im nächsten Video abdecken. Wenn es um feste Größe und gestrichelt oder gepunktet geht, werden wir darüber im nächsten Video sprechen. Ich habe schon lange mit Farbe verbracht. Aber schließlich können wir mehrere Dinge über den Hintergrund beeinflussen, nicht nur die Farbe. Wir können ihm ein Bild geben und auch die Position dieses Bildes steuern. Hier können wir ein Beispiel für Hintergrundfarbe sehen, aber wir können auch mit dieser Eigenschaft verknüpfen, und der Wert dafür muss diese Konvention der URL folgen, offene Klammern, offene, doppelte Anführungszeichen, Paper dot gif oder was auch immer der Name der Datei ist, auf die Sie verweisen. Genau wie bei SRC haben wir mit Bildern angefangen. Wenn du willst, dass das ein Hintergrundbild ist, könnten wir es. Lass es uns jetzt einfach machen. Geh hier zu unserer Kiste. Geben Sie ihm einen Stil und geben Sie ihm eine Hintergrundbild-URL, und lassen Sie uns die photo.jpg einfügen. Lassen Sie uns das für die Größe ausprobieren und sehen, wie es aussieht. Da ist die Box und was wir tun können, ist auch die Positionierung zu ändern, also Position x, wir können es zentrieren. Wir können es links ausrichten, rechts ausrichten, weil das Bild tatsächlich größer ist als die Box. Wir bekommen hier etwas Ernte, die wir auch positionieren können. Wir können den Hintergrund zu wiederholen, mit diesem können wir auf der Y-Achse oder der X-Achse wiederholen. Sie werden nichts sehen, weil es schon viel größer ist als die eigentliche Box selbst. Aber vielleicht, wenn wir diese Box wirklich groß machen. Lasst uns nicht Breite machen, lasst uns Höhen von 1000 px machen. Sie beginnen zu sehen, dass es sich auf einer Y-Achse wiederholt. Wenn wir das Gegenteil machen und es mit der Breite tun, könnten wir das auf 1000 Pixel bringen, und wenn ich das schließe, werden Sie sehen, dass es auf der horizontalen Achse beginnt sich zu wiederholen. diese Weise können wir ein Hintergrundbild in unser Dokument einfügen. Auch wenn Sie mehr über das Einfügen von Hintergründen in CSS wissen möchten, gibt es hier in diesem Dokument viele Informationen. Dieses Video wird ein bisschen lang, also werde ich es dort lassen. Das sind im Grunde Farben und Hintergründe und in Bezug auf die Deckkraft haben wir es hier mit dem Endwert von HSLA und RGBA abgedeckt. Wir können die Deckkraft genau so einstellen. Also, das sind Farben und Hintergründe. Im nächsten Video werden wir ein wenig tiefer in einige der Optionen gehen , die wir in Box-Modell abgedeckt. Ich spreche von Rändern, Rändern, Polsterungen, Höhe und Breite. Wir sehen uns im nächsten Video. 21. Textformatierung, Schriftarten und Symbole: In diesem Video werden wir über Textformatierung Schriftarten und Symbole sprechen. Dazu müssen wir nur einen Schritt nach unten im Menü gehen und auf CSS-Text klicken. Die erste Eigenschaft, mit der wir bereits gearbeitet haben, ist Farbe. Ich werde das einfach überwältigen. Wir haben gelernt, wie man die Farbe mithilfe der Farbeigenschaft einstellt. Die nächste Sache ist die Textausrichtung. Die text align Eigenschaft wird verwendet, um die horizontale Ausrichtung von Text festzulegen. Ich habe das in einem der vorherigen Videos verwendet, wenn Sie sich erinnern. Wir haben es tatsächlich in zwei verschiedenen Gelegenheiten verwendet. Ich habe es verwendet, um diese Box zu zentrieren, wenn sie sich im Inline-Block befindet. Ich habe es auch hier auf spezielles div verwendet, um rechts auszurichten. Wir können auch Text ausrichten und was das tut, ist jede Zeile gestreckt zu machen , so dass jede Zeile die gleiche Breite hat und dass der linke und rechte Rand gerade sind. Vielleicht haben Sie das in Zeitschriften oder Zeitungen oder Büchern gesehen. Ich werde es jetzt nur für dich demonstrieren. Wenn wir spezielle div ändern würden, um zu rechtfertigen, drücken Sie Speichern und jetzt werden Sie sehen, dass der Text immer direkt am Rand endet. Cool. Zurück zu hier, eine andere Sache ist die Textdekoration. Denken Sie daran, ich verwende Textdekoration, um eine Unterstreichung in der zweiten Überschrift zu geben. haben wir schon hier gesehen, aber es wurde überschrieben. Ich werde nur diesen Stil loswerden, der ihn überschreibt. Drücken Sie Speichern, da gehen wir. Es gibt ein Beispiel für Textdekoration, aber unterstreichen ist nicht das einzige, was wir tun können. Wir können eine Linie durch sie setzen, wir können auch eine Überleitung tun. Wir können auch den Text transformieren. Mit der Text-Bindestrich Transformationseigenschaft können wir Groß- und Kleinbuchstaben im Text angeben. Es verwandelt alles in Groß- oder Kleinbuchstaben, oder es wird den ersten Buchstaben jedes Wortes groß geschrieben. Hier unten sehen wir Texteinzug, so dass wir die erste Textzeile in einem Absatz einrücken können. Lassen Sie uns das wirklich schnell demonstrieren. In meinen Regeln für das p-Tag gebe ich ihm einen Texteinzug von 10 Pixeln. Drücken Sie auf Speichern, und Sie werden sehen, dass dies tatsächlich Absätze hier unten sind. Aber Sie werden sehen, dass hier ein Gedankenstrich ist. Wenn wir einige richtige Absätze in diese Absätze setzen würden, anstatt nur zufälligen Text. wirst du sehen. Zunächst einmal ist die erste Mittellinie, also werde ich das einfach loswerden. Aber Sie werden hier sehen, dass die erste Zeile um etwa 10 Pixel eingerückt ist. Das ist das. Wir können auch den Buchstabenabstand ändern. Schauen wir uns das mal an. Ich gehe hier auf Seite 1. Anstatt die Regeln zu ändern, werde ich nur einen Inline-Stil einfügen und den Buchstabenabstand festlegen. Abstand zu 10 Pixel und sehen, was das tut. Da gehst du. Du hast da einen wirklich wilden Buchstabenabstand. Was sind noch andere Optionen? Höhe der Linie. Die Zeilenhöhe wird verwendet, um den Abstand zwischen den Linien anzugeben. Text-Richtung, können wir die Richtung des Textes ändern, um umzukehren. habe ich nie getan, um ehrlich zu sein. Da wir hier viele Optionen haben, die Sie in die Liste gehen können und je nachdem, was Sie mit Ihrer Textformatierung wollen, sind dies alles die verschiedenen Dinge, die Sie tun können, um es zu ändern. Dort können Sie fast alles in CSS tun. Sie können auch den Abstand zwischen Wörtern ändern. Wenn Sie alles sehen möchten, was Sie tun können, kommen Sie auf jeden Fall auf diese Seite und überprüfen Sie einige der Attribute. Gehen wir weiter, schauen wir uns Schriftarten an. Eines der häufigsten Dinge, die Sie sehen werden, ist die Schriftfamilie Eigenschaft. In dieser besonderen Eigenschaft können wir die Schriftfamilie Times New Roman, Arial, Courier New, dieses Ding einstellen. Was wir tun können, ist ein Komma hinzuzufügen und dann AVA Fallback-Schriftarten hier zu setzen. Was Sie tun sollten, ist mit der Schriftart zu beginnen, die Sie wirklich wollen. Aber wenn der Browser, den der Benutzer verwendet, diese Schriftart nicht hat, wird er darauf zurückgreifen und dann wird es darauf zurückgreifen. Oftmals haben Sie eine ganz spezifische Schriftart auf der Vorderseite und dann auf der Rückseite, Sie werden einfach definieren, ob es Serif oder SANS-Serif ist. Hier können Sie über den Unterschied zwischen SANS-Serif und Serif nachlesen. Hier sind einige Beispiele für Serif- und SANS-Serifen- und Monospace-Schriften. Schriftart ermöglicht es Ihnen, Ihren Text kursiv zu formatieren und ihn auch schräg zu machen, was kursiv ist. Noch nie wirklich schräg benutzt, also glaube ich nicht, dass es sich lohnt, viel Zeit damit zu verbringen. Schriftgröße ist eine gemeinsame Schriftgröße. Auch hier können Sie Pixel als Einheit verwenden, aber Sie können auch etwas namens EM verwenden. Ein EM ist gleich der aktuellen Schriftgröße. Wenn Sie EM verwenden möchten, hier sind die groben Berechnungen hier unten. Es basiert auf einer Standardschriftgröße von 16 Pixeln. Wenn Sie zum Beispiel möchten, dass ein Text 50 Prozent größer ist als der Text, der ihn umgibt, können Sie die Schriftgröße ändern, indem Sie hier eine relative Einheit verwenden, dh ein Prozentzeichen. Gehen wir einfach zurück zu hier und sagen, zum Beispiel, ich wollte, dass der Dummy-Text 50 Prozent größer ist als der Rest des Textes, der ihn umgibt. Nun, ich habe es schon hier gemacht. Sie können hier eine relative Schriftgröße sehen. Ich kann hineingehen und das Gegenteil tun und es kleiner machen als der andere Text, der ihn umgibt. Sie können dort sehen, dass es drei Viertel der Größe des umgebenden Textes ist. Ich werde es auf 150 zurücksetzen. Sie können auch die Schriftstärke ändern. Schriftgewicht ist im Grunde, wie fett die Schriftart ist. Eine andere Sache, die Sie tun können, ist, das Gerät auf VW zu setzen. Ich habe das noch nicht gemacht, aber Sie können hier sehen, wo ist es hin? Die Schriftgröße ändert sich tatsächlich basierend auf der Größe des Bildschirms. Das ist ziemlich cool. Die VW-Einheit stellt ein Prozent der Breite des Ansichtsportes dar. Wenn der View-Port 50 Zentimeter breit ist, was der View-Port ist im Grunde der Bildschirm, auf dem Sie es sehen, ein VW etwa 0,5 Zentimeter. Als Nächstes gibt eine Schriftvariante an, ob Text in Kleinbuchstaben angezeigt werden soll. Auch hier verwende ich diesen nicht oft, aber wieder ist es eine andere Option, die in Schriftarten verfügbar ist. Ich werde das wieder auf volle Breite bringen. Hier sind alle CSS-Schriftarteigenschaften, die Sie verwenden können. Auf jeden Fall, kommen Sie zurück auf diese als Referenz. Aber im Moment werden wir schnell auf Symbole zu bewegen. Wenn ich die Seite für Symbole aufrufe, was wir tun können, ist eine Symbolschriftart zu verwenden, um einige Symbole einzufügen und diese Symbole so zu behandeln, als ob sie eine Schriftart oder einen Text in sich selbst wären. Jetzt müssen Sie das vielleicht in Aktion sehen. Eine gemeinsame Symbolschriftbibliothek ist die Schriftart Awesome. Sie können hier nach Schriftart Awesome suchen. Es ist einer der bekanntesten, die Sie verwenden können. Es hat eine Reihe von Schriftarten, auf denen sie ständig erweitern, und genau hier können Sie eine ganze Reihe von verschiedenen Logos und Symbolen sehen und sie haben sogar diejenigen, die verschiedene Apps und Dienste repräsentieren. Wenn wir zurück zu hier gehen, können wir sehen, dass wir Schriftart Awesome in unser Projekt aufnehmen können , indem wir es mit rel Stylesheet verknüpfen. Was ich tun werde, ist das zu kopieren, es in unser Projekt einzufügen, damit wir sehen können, wie wir Symbolschriftarten verwenden können. Wir haben den Link und das bedeutet, dass wir ihn benutzen können. Was Sie hier tun können, ist ein I-Tag zu erstellen. Ich werde hier drüben tauschen. Vielleicht gründeten wir unsere Firma, bevor wir sie einlegen. Wir werden ein I-Tag einfügen und die Klasse auf dem I-Tag wird unserem Dokument mitteilen, welches Symbol tatsächlich verwendet werden soll. Ich werde das nur speichern, das hineinlegen und du wirst sehen, dass wir vor jeder dieser Zeilen eine Wolke haben. Der Grund, warum wir eine Cloud haben, ist, weil wir den Code FA Cloud verwenden. Um eine beliebige Anzahl dieser Symbole zu verwenden, haben wir den Klassennamen hier. Scrollen wir einfach nach unten, und sagen wir, wir wollten ein Apfel-Symbol verwenden. Wir könnten in unseren Code gehen und anstelle von FA Cloud, können wir FA Apfel setzen. Stellen Sie sicher, dass Sie zuerst die FA-Klasse und dann die spezifische FA-Klasse für das tatsächliche Symbol, das Sie verwenden möchten, setzen. Zurück zu hier, sehen wir jetzt, dass das Symbol Apfel ist. In diesem Fall ergibt das Symbol für Apple keinen Sinn. Also werde ich ein weiteres Beispiel laden. Nehmen wir an, wir wollen Pfeil, Kreis rechts. Wieder einmal werde ich meinen Code-Editor öffnen und Apple in Pfeilkreis rechts ändern. Denken Sie daran, mit dem FA Armaturenbrett dort. Da gehen wir. Jetzt haben wir die Symbolschriftart aufgenommen und wir referenzieren diese Symbolschriftart mit einem I-Element, und wir sind in der Lage, unserem Dokument mitzuteilen, welches Symbol wir verwenden möchten, indem wir Klassen verwenden. Sehr cool. Wenn wir hier von W-3-Schulen auf unsere Seite zurückgehen, können wir sehen, dass wir auch Bootstrap-Symbole verwenden können. Bootstrap ist ein Front-End-Framework, das wir gegen Ende dieser Skill-Share-Klasse lernen werden. Sie haben auch ihre eigenen Icon-Schriftarten, so dass Sie einige dieser Symbole als auch erhalten können. Google hat eine eigene Icon-Schriftart, Sie können eine Reihe von Icon-Schriftarten online finden. Aber im Wesentlichen, wie Symbole funktionieren, ist, dass Sie sie in fast wie eine Schriftart laden müssen. Ob Sie eine Schriftart verwenden, die Ihnen englische Zeichen gibt, oder eine Schriftart, die Ihnen Symbole gibt, wird im Wesentlichen in HTML viel gleich behandelt. Lassen Sie mich das kurz demonstrieren, bevor wir diese Lektion abschließen und zur nächsten weitergehen. Ich werde einen bestimmten Absatz setzen. Lassen Sie uns dieses für die Schriftfamilie wählen. Eigentlich, lassen Sie uns unser gesamtes Dokument aufstellen. Eine Möglichkeit, das zu tun, besteht darin, eine Styling-Regel auf Elementebene hinzuzufügen und den gesamten Körper als Zielelement zu verwenden , und dann können wir den Schriftstil oder die Schriftfamilie des gesamten Körpers des Dokuments auswählen . Ich habe keine Vorliebe für Schriftarten, also gehe ich zurück zur Lektion über Schriftarten hier und kopiere einfach dieses Beispiel. Gehen Sie zu gehen, kopieren Sie das in, und dann werden Sie hier sehen, dass die Schriftart leicht in Times New Roman geändert wurde. Lass uns das in Arial ändern. Ich möchte, dass es ein bisschen anders wird. Nun, wir haben Schriftfamilie Arial. Was ich jetzt tun werde, ist meinen Inspektor zu öffnen, und Sie können hier sehen, dass es standardmäßig Körper ist und ich kann meine Schriftfamilie von Arial dort sehen. Wenn ich das entferne, geht es zurück auf die Standardschriftart. Wenn ich hier runtergehe, wo sich das Symbol befindet, wirst du sehen, dass es in einer Schriftart selbst zieht. Durch die Verwendung dieser Klasse FA, gibt es eine Schriftart von der Schriftart Awesome, die die Symbolschrift ist. Wenn ich das entfernen sollte, werden Sie sehen, dass es nur als quadratische Kiste auftaucht. Aber jetzt, wenn ich es anschalte, wirst du sehen, dass wir im Wesentlichen dasselbe tun, wie wir es hier oben tun. Wir verwenden eine Schriftart, um das Aussehen des Textes zu geben, und wir verwenden auch eine Schriftart hier, um dieses Symbol-Tag zu nehmen und es in ein bestimmtes Element mit unseren Klassennamen zu verwandeln . Wenn Sie hier nach unten scrollen, können Sie hier ein Pseudo-Element sehen, diesen Inhalt und diesen kleinen Code hier, der Schriftart Awesome mitteilt, welche man laden soll. Aber für Sie müssen nur den Klassennamen verwenden, indem Sie diesen beschreibenden Namen verwenden, um auf diesen bestimmten Inhalt zu zielen. Das ist alles, was auf dem Back-End von Font Awesome funktioniert. Aber im Wesentlichen, Wetter, das Sie laden, Times New Roman oder Schriftart Awesome. Du ladest eine Schriftart. Das umfaßt Textformatierung, Schriftarten und Symbole. Im nächsten Video werden wir darüber gehen, wie drei der häufigsten HTML-Elemente, über die wir im HTML-Abschnitt gesprochen haben, zu formatieren, die Bilder, Links, Listen und Tabellen. Wir sehen uns im nächsten. 22. Styling von Bildern, Links, Listen und Tabellen: In diesem Video werden wir behandeln, wie einige gängige HTML-Elemente wie Bilder, Listen, Links und Tabellen formatiert werden. Wir haben bereits ein wenig Bilder gemacht, aber wenn wir hier nach unten zu diesem speziellen Link in w3schools.com scrollen, können wir beginnen zu sehen, dass wir einige Styling-Optionen für uns in CSS haben , um Bilder zu stylen. Wir können das Bild auch reaktionsschnell machen und mit CSS nach oben und unten skalieren. Lassen Sie uns das jetzt mit dem Bild versuchen, das wir bereits in unserem Dokument haben. Ich werde umschalten, das ist unser Bild dort. Was ich dann tun werde, ist zu unserem Code-Editor zu gehen und ich werde eine Regel für alle Bilder setzen. Ich benutze einen Selektor auf Elementebene und ich werde dem Beispiel hier folgen. Ich werde ihm eine Breite von 100 und eine Höhe von auto geben. Wenn ich zurück zu meinem Code-Editor gehe, werde ich das speichern. Jetzt werden Sie sehen, dass es die volle Breite des Bildschirms erweitert. Wenn also dies schließen sollte, verlängert es die absolute volle Breite des Bildschirms und das Seitenverhältnis ist unabhängig von der Bildschirmgröße gleich. Das sind die Höhen, die für uns da sind. Die Breite 100 Prozent bedeutet, dass das Bild 100 Prozent des übergeordneten Elements sein soll. In diesem Fall, wenn wir uns das Dokument betrachten, ist das übergeordnete Element body. Es wird also nur 100 Prozent des Hauptteils des Dokuments sein, das Fenster in diesem Fall. Es gibt ein wenig Code, den wir leicht unsere Proportionen in Ordnung bringen und reagieren lassen können. jetzt auf die Webseite zurückgehen, können wir auch eine maximale Breite festlegen, wie ich zuvor gezeigt habe, aber auf einem anderen Element. Die andere Möglichkeit, Bilder einzubeziehen, besteht darin, sie als Hintergrund zu verwenden. Manchmal möchten Sie ein Bild als Hintergrund anstelle einer tatsächlichen Bilddatei wie diese einfügen. Ein Beispiel wäre, wenn Sieein Bild wie dieses auf die volle Breite eines Inhaltsbereichs dehnen oder dasBild auf eine reaktionsfähigere Weise zuschneidenmöchten ein Bild wie dieses auf die volle Breite eines Inhaltsbereichs dehnen oder das Bild auf eine reaktionsfähigere Weise zuschneiden basierend auf der Größe des Inhalts, für den es der Hintergrund ist. Was Sie auch tun können, ist das Hintergrundbild basierend auf verschiedenen Bildschirmgrößen zu ändern. Hier sehen wir eine Medienabfrage, und wir sind noch nicht in Medienabfragen gegangen, aber Medienabfragen erlauben es uns, Stile auf Bildschirmen mit bestimmten Breiten zu definieren. Wir werden in einem späteren Video darauf eingehen. Aber für jetzt, nur wissen, dass wir das Bild basierend auf der Bildschirmgröße ändern können. Es gibt auch ein neues Element in HTML5, das Bildelement genannt wird. Ich musste das Bildelement nie verwenden, erlaubt Ihnen aber, mehr als ein Bild zu definieren. Ich habe das Gefühl, wir könnten hier viel Zeit mit Bildern verbringen, aber es gibt noch ein paar andere Dinge, die wir abdecken müssen. Wenn Sie mehr über Bilder erfahren müssen, kommen Sie auf jeden Fall sofort auf diese Seite zurück, gehen Sie zu Links, Listen und Tabellen. Links und Listen sollten ziemlich einfach sein, aber wie Sie in Tabellen sehen werden, gibt es einige verschiedene Styling-Optionen basierend auf den verschiedenen Teilen der Tabelle. Im Abschnitt CSS-Links auf w3schools können wir sehen, dass wir die Farbe eines Links ändern können, wir können auch die Text-Dekoration-Eigenschaft ändern und das wird hauptsächlich verwendet, um die Unterstreichungen von Links zu entfernen. Das Standardverhalten mit dem Link ist, diese Unterstriche und diese verschiedenen Farben zu haben , und das ist der Weg seit Anfang von HTML. Es ist nicht das Schönste und es ist jetzt veraltet. Sie werden dies oft sehen, wo die Unterstreichung mit Textdekoration keine entfernt wird. Selbstverständlich können Sie auch die Hintergrundfarbe einstellen. Was Sie beachten sollten, wenn Sie durch dieses Dokument schauen , ist, dass Sie anfangen können, etwas anderes zu sehen, und das ist dieser Doppelpunkt mit einem anderen Wort. Dies sind Pseudo-Klassen, und es erlaubt uns die Verbindung basierend auf dem Zustand zu gestalten, in dem sie sich befindet. Zum Beispiel haben wir diesen Selektor a:link , der es uns erlaubt, einen normalen nicht besuchten Link zu zielen, aber wenn der Link besucht wurde, können wir den Stil dessen ändern. Eine gemeinsame, die wir wirklich oft verwenden werden, ist Hover. Wenn Ihre Maus über einen Link bewegt, dann können wir den Stil ändern und aktiv ist der Moment, in dem ein Link geklickt wird. Wenn wir hier für „Probieren Sie es selbst“ klicken, können wir hier sehen, dass unser Link rot sein wird, aber sobald er besucht wird, wird es grün sein und wenn ich den Mauszeiger darüber führe, wird es rosa sein, und wenn er aktiv ist, wird es blau sein. Testen wir es. Sie können jetzt sehen, wenn mein Cursor über den Link geht, es wird zu Hot Pink. Das basiert auf dieser Pseudo-Klasse hier , die besagt, dass, wenn der Zustand auf diesen Link schwebt, dann färben Sie es hot pink. Mal sehen, was passiert, wenn ich darauf klicke. Sie können kurz sehen, dass es blau wurde und das ist, weil es aktiv war, aber dann natürlich, wir haben die neue Seite geladen, so dass verschwunden. Jetzt, wo es besucht wurde, ist es grün. Sie können beginnen, hier die volle Ausdehnung der verschiedenen Zustände und diesen Link durch verschiedene Stile zu sehen. Auch hier verwende ich nicht wirklich aktiv, besucht und verlinken sehr oft, aber eine sehr häufige ist schweben, denn oft möchten Sie, dass der Link auffallen und indem Sie die Farbe ändern oder den Stil ändern, wenn Sie den Mauszeiger über eine Link, das ist etwas, das ziemlich üblich ist. Zurück zu unserer w3schools-Referenz hier, werde ich zu Listen übergehen. Wenn Sie sich von unserem Abschnitt über HTML5-Listen erinnern, haben wir zwei Arten unsortiert und bestellt. Eine Bestellung bedeutet nur eine nummerierte Liste. Wenn wir nach unten scrollen können wir die erste Eigenschaft list-style-type sehen und das gibt den Typ eines Listenelements Marker. Wir können es von hier oben ändern, von was auch immer dies ist, zu einem Kreis, einem Quadrat und anderen verschiedenen Listentypen. Wenn Sie hier auf „Probieren Sie es selbst“ klicken, können wir beginnen, das zu sehen. Hier können wir diese erste ungeordnete Liste sehen. Wir sind in einer Klasse von a gegangen und hier wird die ungeordnete Liste mit einer Klasse von a den List-Stil-Typ des Kreises haben. Hier in dieser Liste haben wir es b gegeben, und dafür haben wir Quadrat, diese oberen römischen und unteren Alpha. Sie können die Sache ändern, die vor den verschiedenen Listenelementen steht. zur Referenz zurückkehren, können Sie die Listenelementmarkierung auch auf ein Bild setzen, das Sie selbst auswählen. In diesem Fall haben wir dieses quadratisch-violette GIF-Bild, und wir können das als Listenmarkierung setzen. Sie können alles festlegen, was Sie als Listenmarkierung verwenden möchten, wenn Sie es als Bild haben. nach unten scrollen, können Sie auch die Listenstilposition ändern. So können Sie den Aufzählungspunkt außerhalb des Inhalts oder innerhalb machen. Auch hier bringe ich nur durch, weil es viele verschiedene Möglichkeiten gibt. Viele dieser, die ich nicht unbedingt regelmäßig benutze, also wenn das etwas ist, das Sie tun möchten, kommen Sie definitiv zurück und überprüfen Sie dies. der Zeit willen, werde ich den Rest davon durchziehen. nach unten scrollen, haben Sie die Zusammenfassung der verschiedenen Eigenschaften, auf die Sie mit der Liste zugreifen können. Gehen wir zu den Tischen. Tabellen sind etwas, das mit CSS sehr offensichtlich verbessert werden kann. Scrollen wir einfach nach unten und schauen uns unseren Tisch hier an, es ist sehr alte Schule. Tabellen können definitiv mit einem besseren Blick mit CSS tun, und wie Sie hier sehen können, ist dies ein bisschen wie ein Old-School-Beispiel, das unserem ähnelt. Wir setzen den Rahmen mit HTML Wenn Sie also zu unserem Dokument zurückkehren und unsere Tabelle hier finden, konnten wir ein Attribut auf dieses Element durch den Namen der Grenze setzen und ihm einen Wert von eins geben. Wenn wir diesen Wert in zwei ändern würden, gehen Sie zurück, dann wird er etwas größer, aber wir müssen nicht die Grenze für das eigentliche Element mit diesem Attribut geben, wir können es in CSS tun. Was ich tun werde, ist auf Speichern drücken, jetzt gibt es keine Grenzen, aber ich werde sie mit CSS hinzufügen. Was Sie tun müssen, ist hier zurück zu gehen, und wir müssen Grenzen für die Tabelle, die Tabellenüberschriften und die Tabellenzellen angeben . Ich werde nur diesen ganzen Bit einen Code schnappen. Eigentlich werde ich aus Gründen der Konsistenz alle meine Elementselektoren nach oben setzen. Ich werde auf „Speichern“ drücken, hierher kommen und wir haben das Gleiche. Der Unterschied ist, dass wir viel mehr Flexibilität in CSS haben und wir diesen Stil über mehrere Tabellen kopieren können. Zurück zu der Referenz hier, eine Sache, die Old School in diesem Design ist, ist, dass es zwei Linien für die Grenze hat. Oft wollen wir nur einen einzigen Rahmen, also können wir dies auf Border-Collapse setzen, indem wir diesen Stil auf den ganzen Tisch selbst setzen. Ich werde das nur über das hinstellen, was wir dort haben, und jetzt haben wir vielleicht ein erwartetes Verhalten von unserem Tisch. Sie können auch den Rahmen um die Tabelle selbst festlegen, also ist dies der Unterschied zwischen dem Festlegen des Rahmens auf der Tabelle im Vergleich zu den Zellen, das Festlegen auf dem Tisch wird es um die gesamte Tabelle und dann einen Rahmen auf den Zellen ist um die Zellen herum. Nach unten können wir die Tabelle auf eine volle Breite einstellen, und wir können die Überschriften so einstellen, dass sie eine feste Höhe von 50 Pixel haben. Was ich tun werde, ist durch dieses Dokument zu gehen und dann können wir tatsächlich einige davon auf unseren Tisch anwenden , weil es sicher ein besseres Styling braucht. zur horizontalen Ausrichtung hinuntergehen, können wir den Inhalt innerhalb der Zellen nach links, rechts oder Mitte ausrichten. Wir können auch die vertikale Ausrichtung ändern. In diesem Fall haben wir den Inhalt der Zellen so eingestellt, dass er unten ist. Wir können es auch oben aufstellen. Wir können Padding erstellen, zwischen dem Inhalt und den Rändern der Zelle. Wir können auch Rahmen basierend auf unten, oben, links und rechts erstellen . Dies ist ein ziemlich schönes Design, wir haben nur Grenzen auf der Unterseite für diese nette kleine Liste. Wir können auch das Styling einer Zeile ändern , indem wir diese Pseudo-Klasse verwenden, die wir zuvor gesehen haben, als wir mit Links arbeiteten und Hover aufrufen. Wenn die Maus über diese verschiedenen Zeilen schwebt, werden wir die Hintergrundfarbe in diese bestimmte Farbe ändern. Kann gestreifte Tabellen mit einer anderen Pseudo-Klasse namens nth-child ausführen. Dies ist ein bisschen fortgeschrittener, aber im Grunde, was es tut, ist jede gerade nummerierte Zeile, die wir ihm eine Hintergrundfarbe geben. Natürlich wäre es eine gemeinsame, die Farbe bestimmter Zeilen und bestimmter Zellen zu ändern , und dann können Sie ein schönes Design wie dieses bekommen. Der schwierigste Teil mit Tischen, denke ich, ist es reaktionsschnell zu bekommen. Wenn wir uns dieses Beispiel ansehen, und wir ändern unsere Fenstergröße, können wir sehen, dass die Tabelle reagiert, aber auch immer noch kommt es zu einem bestimmten Punkt, wo Sie immer noch nach links und rechts scrollen müssen, um alle Inhalt. Das ist das Problem viel Zeit mit Tabellen und warum Sie sie nicht verwenden sollten, um Ihre Webseite zu strukturieren, wie wir bereits erwähnt haben, weil diese Tabellen ein festes Layoutelement haben, aber natürlich gibt es Möglichkeiten, sie reaktionsschnell zu bekommen, und wir werden mehr darüber vielleicht in den Videos über responsive Design sprechen. Hier sind einige unserer Optionen hier für eine CSS-Tabelle. Was ich jetzt tun werde, um das alles nach Hause zu bringen, ist, unseren Tisch hier zu stylen. Mit einigen der Dinge, die wir in diesem speziellen Dokument gelernt haben, möchte ich Inhalt meiner Tabelle horizontal ausrichten und vertikal ausrichten. Ich werde meinen Code-Editor und mein Dokument öffnen, und was ich tun werde, ist einen Stil zu erstellen meine Kopfzeilenzellen und meine regulären Zellen abzielt, und ich werde eine vertikale Ausrichtung der Mitte und einer horizontalen Ausrichtung des Zentrums geben. Jetzt sitzt er direkt gegen die Grenze, also sehen wir das vielleicht nicht. Was ich tun werde, sowie geben Sie es etwas Polsterung. Ich werde 20 Pixel Polsterung machen. Mal sehen, wie das jetzt aussieht. Dort können Sie mit etwas Polsterung und etwas Ausrichtung sehen, Sie können sehen, dass wir ein bisschen schöner von einer Tabelle haben. Ich möchte die Kopfzeile zu einem anderen Stil machen, also werde ich die Kopfzeilenstile separat ansprechen, und ich werde ihr eine Hintergrundfarbe von hellgrün geben . Drücken Sie auf „Speichern“ und jetzt können Sie sehen, dass die oberste Reihe ein hellgrün ist. Was können wir hier sonst noch tun? Wir haben das Polstern erledigt. Wir haben gestreift. Vielleicht wollen wir diese hier verwenden und wir können machen, ich denke, wir haben hier nicht so viele Zeilen, aber wenn wir eine neue Zeile beginnen würden, könnten wir diesen Stil in jedem noch Kind setzen würde eine Hintergrundfarbe davon besondere Farbe. Wenn wir diese Zeile nur als Beispiel duplizieren wollen, kopieren und einfügen, werden Sie sehen, dass die erste grau ist mit Hintergrundfarbe, die wir für Kinder angegeben haben, und diese ist nicht, weil sie nicht ein gleichmäßiges Kind, also wenn wir in ein drittes setzen, werden Sie sehen, es wechselt zwischen den beiden. Lassen Sie uns das noch einmal duplizieren, und dann sehen Sie es. Es gibt viele Styling-Optionen in Tabellen, definitiv, ich ermutige Sie, mit ihnen zu experimentieren. Wir werden CSS-Frameworks verwenden, die viel davon für uns in einem zukünftigen Video tun, so dass Sie nicht unbedingt alles über Styling-Tabellen wissen müssen, aber es ist auch eine gute Sache zu wissen. Das deckt im Grunde Styling-Links, Tabellen, Listen und Bilder ab. Ich gebe zu, wir sind ein wenig durchgeeilt, weil es nur so viel Inhalt zu decken gibt , aber natürlich können Sie immer auf diese Seiten zurückgehen, um zu verweisen und der beste Weg, den Sie lernen werden, ist und der beste Weg, den Sie lernen werden, ist, Legen Sie definitiv eine Tabelle in Ihr Dokument und beginnen Sie dann zu googeln, wenn Sie nicht wissen, wie Sie etwas tun sollen. Diese Referenz ist ziemlich gut und dies deckt viele der Optionen ab, die Sie tun möchten, aber vielleicht möchten Sie etwas Extra mit Ihrem Tisch machen. Es gibt so viele Optionen in CSS und wir könnten für immer dafür ausgeben, aber es gibt viel mehr Inhalte zu decken. Im nächsten Video werden wir die Anzeigeeigenschaften abdecken. Ich habe Ihnen ein wenig Anzeige in einem früheren Video gezeigt, aber wir werden tiefer in diese Layout-Eigenschaften eingehen, in CSS sehr grundlegend sind, aber ein bisschen knifflig, also freue ich mich darauf, Sie auf dem nächsten Video zu sehen. 23. CSS-Layout – Eigenschaft anzeigen: In diesem Video werden wir ein CSS-Layout abdecken und wir werden auf die Display-Eigenschaft innerhalb von CSS konzentrieren. Ich meine, es ist nur eine Eigenschaft, aber es ist so wichtig und grundlegend in CSS und vielleicht ein wenig schwer zu verstehen. Lasst uns sofort eingraben. Es ist der nächste Link in unserer Speisekarte hier. Wie Sie sehen, ist die display-Eigenschaft die wichtigste CSS-Eigenschaft für die Steuerung des Layouts. Die display-Eigenschaft gibt an, ob und wie ein Element angezeigt wird. Jedes HTML-Element hat einen Standardanzeigewert, je nachdem, welcher Elementtyp ist. Der Standardanzeigewert für die meisten Elemente ist Block oder Inline. Denken Sie daran, als wir diese Block-Level-Elemente hatten, also dieses div hier, sie sind Block-Level-Elemente und standardmäßig haben sie einen Anzeigewert von Block. Aber hier mit einer Klassenbox konnten wir dieses spezielle div in eine Anzeige des Inline-Blocks ändern. Das war eine kleine Vorschau dessen, was wir in diesem Video abdecken werden. Wenn wir nach unten scrollen, um mehr über Block-Level-Elemente zu lesen, beginnt ein Block-Level-Element immer auf einer neuen Zeile und nimmt die volle verfügbare Breite ein. Denken Sie daran, als wir diesen Block hier hatten, wenn wir den Inline-Block entfernen, werde ich das einfach tun, indem ich diesen Kommentar mache, damit er nicht mehr gilt. Ich erfrische das. Es ist jetzt ein Block-Level-Element, also wird es nur die volle Breite der Seite einnehmen. Hier sehen Sie einige Beispiele für Elemente auf Blockebene. Dies sind grundsätzlich Anzeigeblock standardmäßig, also div, Sie haben die Überschriften-Tags, p-Form, Kopfzeile, Fußzeile und Abschnitt. Es gibt auch Inline-Elemente, die standardmäßig inline anzeigen. Ein Inline-Element beginnt nicht auf einer neuen Zeile und nimmt nur so viel Breite wie nötig ein. Ein häufiges Beispiel dafür ist das span Element, das wir verwendet haben, nicht sicher, ob wir es noch in unserem Projekt haben. Wenn ich nach Spanne suchen gehe. Ja, das tun wir immer noch. Denken Sie daran, dass wir ein bestimmtes Wort in unserem Absatz geändert haben und es um 50 Prozent größer als die anderen Wörter gemacht haben. Wenn wir hier reingehen , erfolgt diese Veränderung inline. Dieses Stück Inhalt, dieses Wort wird nicht in eine neue Zeile aufgeteilt oder nimmt die volle Breite der Seite wie ein Blockelement würde. Es ist inline gemacht. Das sind die zwei verschiedenen Haupttypen. Die andere, die wir verwenden können, ist Anzeige: keine. Wenn wir wollten, dass dies überhaupt nicht angezeigt wird, könnten wir hineingehen und „display: none“ tun. Wenn ich darauf speichere, wird es nicht angezeigt. Aber wenn wir auf unserer Webseite inspizieren und nach unten gehen, können wir tatsächlich sehen, dass das div immer noch da ist. Es wird einfach nicht angezeigt und wir können diese Anzeigeeigenschaft tatsächlich ein- und ausschalten. Da gehst du. Ich überprüfe das Kästchen und es wird angezeigt. Warum sollten Sie ein Element auf der Seite haben, aber nicht angezeigt werden? Nun, wir können die Anzeigeeigenschaft tatsächlich umschalten , wie wir es hier tun, aber mit JavaScript. Das ist ein fortgeschritteneres Konzept und das bewegt sich in JavaScript, das wir in diesem Kurs nicht behandeln. Aber wissen Sie nur, dass, wenn Sie ein Element sehen, das angezeigt wird: keines, die Chancen sind, es wird etwas im Code geben, das es erlaubt, dass dieses Element in bestimmten Situationen angezeigt wird. Mit Anzeige: keine auf einem Element, wenn die Seite geladen erlaubt es, ausgeblendet zu beginnen und dann können wir es später anzeigen. Das ist Anzeige: keine. Ich werde aktualisieren, um diese Änderungen zu entfernen und unsere Anzeige loszuwerden: keine hier, speichern Sie das und wir sind wieder da, wo wir vorher waren. Zurück zu der Referenz, können wir den Standardanzeigewert überschreiben, indem wir diese Eigenschaft namens display verwenden, was genau das ist, was wir hier getan haben, indem die Box in Linie anstatt Anzeigeblock. Zurück zur Referenz. Wir können tatsächlich das Standardverhalten eines Inline-Elements zu blockieren ändern, was wir auf beide Arten tun können; wir können ein Block-Level-Element ändern, um inline anzuzeigen, aber wir können auch ein Inline-Element ändern, um in einem Block anzuzeigen. Hier können wir diese Spanne machen und zu einem Block-Level-Element werden. Was das tut, ist einen Zeilenumbruch zu erstellen. Wenn ich diesen Stil entfernen und ihn dann ausführen sollte, wird es zu einem Inline-Element, und wenn ich das wieder einfügen soll, wird es sie aufteilen, weil das Element auf Blockebene die volle Breite der Seite einnimmt. Wenn wir nach unten scrollen, werden wir einen kleinen Punkt der Verwirrung mit der Anzeige sehen: keine. Es gibt eine andere Eigenschaft namens Sichtbarkeit. Was ist der Unterschied zwischen display: none und visibility: hidden? Nun, der große Unterschied ist, dass das Element immer noch den gleichen Platz wie zuvor einnimmt. Es wird ausgeblendet, aber es wirkt sich immer noch auf das Layout aus. Lasst uns das jetzt versuchen. Lassen Sie uns dieses Bild unsichtbar machen, also nicht anzeigen: keine, sondern unsichtbar. Sichtbarkeit; wir können auf unsichtbar setzen. Ich denke, versteckt ist der Begriff nicht unsichtbar. Ich werde das dort setzen, Sichtbarkeit: versteckt. Sie werden sehen, dass es immer noch den Platz auf der Seite beansprucht , wenn es sichtbar war, aber jetzt ist es nur ausgeblendet. Kontrastiert das mit Display: keine, wenn ich angezeigt habe: none, plötzlich erscheint das Element nicht und es nimmt auch keinen Platz auf der Seite ein. Keiner von denen ist zwei praktisch, also werde ich das loswerden, drücken Sie „Speichern“ und gehen Sie zurück zu der Art, wie es vorher war. Cool. Eine Sache, die in dieser speziellen Referenz nicht wirklich behandelt wurde, ist die Anzeige Inline-Block. Wie Sie sehen, haben wir es hier unten, aber auf W3Schools ist eigentlich eine separate Lektion. Ich werde hier auf Anzeige Inline-Block klicken. Lasst uns ein bisschen mehr darüber lernen. Hier können wir mehr über Anzeige Inline-Block lesen. Es gibt ein paar Unterschiede, über die Sie hier lesen können, aber der Hauptunterschied ist, wenn wir eine Liste von Elementen horizontal anstelle vertikal anzeigen möchten , müssten wir Inline-Block verwenden. Zum Beispiel, im Fall der Erstellung von Navigationslinks wie hier oben, würden wir Inline-Block benötigen, weil das Standardverhalten von HTML-Elementen darin besteht, einfach übereinander zu stapeln wie wir vorher gezeigt haben, als wir nicht einmal bekam dieses CSS. Ich werde hier auf „Probieren Sie es selbst“ klicken. Sie können sehen, dass diese Inline-Block anzeigen. Wenn Sie diesen Stil entfernen und ausführen, werden Sie sehen, dass sie übereinander stapeln. Das ist das Standardverhalten, aber wenn wir Inline-Block hier anzeigen, werden sie in einer Zeile angezeigt. Inline-Block ist eine wirklich häufige, die Sie vor allem mit Navigationslinks sehen werden , wie in diesem Beispiel. Wenn Sie mehr darüber wissen möchten, was die spezifischen Unterschiede sind, können Sie hier darüber lesen, aber Sie werden sehen, dass Inline-Block viel auftaucht. Ich bin ein bisschen vorsichtig, wenn dieses Video rauszieht, also werde ich es dort beenden. Dies ist ein sehr wichtiges Konzept zu verstehen, die Anzeigeeigenschaft und es ist im Wesentlichen eine Möglichkeit, dass Elemente Blockebene anzeigen, also gestapelt nacheinander inline oder eine Kombination, die beide nutzt. Das ist die Anzeigeeigenschaft. Im nächsten Video werden wir über die Positionierung gehen. Wir sehen uns in der nächsten. 24. CSS-Eigenschaft Position: In diesem Video werden wir über die Position Eigenschaft in CSS gehen. Dies ist ein Roman, ziemlich beinhaltet Eigentum in CSS, so dass es seine eigene Lektion verdient. Ich werde zur CSS Position auf W3Schools gehen. Hier können wir die fünf verschiedenen Positionswerte sehen: statisch, relativ, fest, absolut und klebrig. Durch die Verwendung einiger dieser Elemente sind Sie in der Lage, Elemente absolut überall auf der Seite an einem bestimmten Ort zu positionieren. Sie können sie oben, unten links und rechts von bestimmten Elementen relativ zu ihnen positionieren, aber dies funktioniert nicht es sei denn, Sie verwenden die position -Eigenschaft und legen sie zuerst rechts fest. Die Abdeckung des ersten ist also die Position statisch. HTML-Elemente sind standardmäßig statisch. Wenn Sie also eine Eigenschaft von oben, unten, links und rechts einfügen , wird es nicht wirklich funktionieren, es wird überhaupt nicht von diesen Eigenschaften betroffen sein. Wie hier steht, ist ein Element mit der statischen Position nicht in besonderer Weise positioniert, es wird immer entsprechend dem normalen Ablauf der Seite positioniert. Es ist also nur das Standardverhalten. Das Scrollen nach unten ist die Position relativ. Ein Element mit relativer Position wird relativ zu seiner Normalposition positioniert. Jetzt können Sie mit Position relativ zu den Eigenschaften von oben, rechts, unten und links ein Element relativ positionieren , das von seiner Normalposition entfernt ist. Jetzt weiß ich, dass das wahrscheinlich keinen Sinn macht, nur darüber zu reden, also schauen wir uns ein tatsächliches Beispiel an. Ich werde auf „Probieren Sie es selbst“ klicken. Sie können hier sehen, ob wir Position relativ zu entfernen, was uns erlaubt, es zu beginnen und wir bewegten die linke Eigenschaft und klicken Sie auf Ausführen. Moment ist das das Standardverhalten dieses bestimmten div und Sie können die Grenze des div sehen , weil wir ihm hier einen Rahmen gegeben haben. Wenn ich in Position relativ setze, kann ich dieses Element jetzt 30 Pixel links von der Position erscheinen lassen , wo es ursprünglich positioniert werden sollte. So können wir hier ein anderes hinzufügen und wir können es Top 50 machen. Jetzt sind es 30 Pixel nach links und 50 Pixel von oben in einer anderen Position als wo es sonst wäre. Wir können hier das Gegenteil tun. Wir können stattdessen richtig verwenden, und wir können es 100 Pixel rechts davon positionieren, wo es sein sollte. Jetzt können Sie sehen, dass es jetzt außerhalb der linken Begrenzung des Fensters geht. Also nicht sehr praktisch, aber manchmal müssen Sie das tun. Ich werde dieses Beispiel und das vorherige und auch diese Symbole schließen , weil wir sie nicht mehr brauchen. Eine weitere Option auf Position ist fixiert. Ein Element mit einer festen Position wird relativ zum Ansichtsfenster positioniert, was bedeutet, dass es immer an der gleichen Stelle bleibt, selbst wenn die Seite gescrollt wird. Also, wenn Sie diese Menüs oder solche Dinge sehen , die auf einem bestimmten Teil des Fensters bleiben und sich nie bewegen, wird das mit Position fixiert gestylt. Werfen wir einen Blick auf unser Beispiel. Wir können hier nicht wirklich scrollen, weil es nicht genug Inhalt gibt, aber hier können Sie ein Element sehen, das rechts unten fixiert ist. Es ist wahrscheinlich besser, auf dieser Seite zu schauen, da wir tatsächlich sehen können, wie wir scrollen, das scheint auf dem Inhalt zu sitzen, weil es fixiert ist, egal wo Sie sich im Dokument bewegen. So können Sie die Position auf fixiert setzen. Wie Sie hier sehen, sind es 0 Pixel von unten und 0 Pixel von rechts, was bedeutet, dass es sich in der unteren rechten Ecke befindet. Wir haben eine Breite darauf und einen Rahmen gesetzt, um ihm diesen Stil zu geben, und das wird dort bleiben, es sei denn, wir würden diese positionierte Eigenschaft ändern. wir nach unten gehen, können wir die Position absolut betrachten und absolute Position relativ zum nächstgelegenen positionierten Vorfahren statt relativ zum Ansichtsfenster wie fixiert positioniert ist relativ zum nächstgelegenen positionierten Vorfahren . Das machte wahrscheinlich keinen Sinn, aber schauen wir uns hier ein Beispiel an. Ich werde auf „Probieren Sie es selbst“ klicken und Sie können hier sehen , dass wir eine Kombination hier haben. Eins ist ein div, das relativ ist, M1 ist ein div, das absolut positioniert ist. also das absolute div hier betrachten, wenn wir dieses Attribut oder diese Eigenschaft entfernen und es ausführen, geht es zurück auf das Standardverhalten von HTML, das Elemente sind, die übereinander stapeln. Aber wenn wir ihm eine absolute Position geben wollen, sind wir in der Lage, seine Position innerhalb dieser Box zu wählen. Also, jetzt wird es 80 Pixel an den oberen Rand dieses Feldes und 0 Pixel rechts von diesem Feld sitzen . So können Sie sehen, dass es hier direkt gegen den Rand steht. Das liegt daran, dass wir hier auf 0 sind und es 80 Pixel von oben sind. Wir können das immer ändern, wir können es ein bisschen von rechts kommen lassen, also kann ich es dort 10 Pixel geben. Plötzlich kommt es ein wenig von der Kante. Ich kann auch anstelle von rechts die Linke beeinflussen und es so viel von der Kante herauskommen, wie es vorher war, aber auf der linken Seite. Da gehst du. Das ist die absolute Position. Die nächste ist die Position klebrig und es basiert auf der Scrollposition des Benutzers. Es schaltet also tatsächlich zwischen relativ und fest basierend auf der Bildlaufposition und wird relativ positioniert bis eine gegebene Versatzposition im Ansichtsfenster erreicht wird. Auch hier klingt wahrscheinlich nach technischem Kauderwelsch, aber um Ihnen ein Beispiel zu geben, bewegt sich dieses spezielle div tatsächlich, wenn ich scrolle, aber sobald ich es traf, wird es plötzlich klebrig. Also wieder, ich gehe zu Probieren Sie es selbst hier und Sie können sehen, wie wir scrollen, es bleibt dort oben. Während das Standardverhalten, wenn wir Position klebrig entfernen würden, wäre, bei der Seite zu bleiben, aber wenn ich klebrig hineinlege, sobald es diese Position trifft, wird es Position oben 0 gehen. So wird es ganz oben bleiben. Ich kann das ändern, wenn es behoben wird und vielleicht bei 10 Pixeln von oben positioniert wird. Schauen wir uns das mal an. Jetzt können Sie sehen, dass zwischen der Oberseite des Fensters oder dem Rahmen hier und dem tatsächlichen div eine Lücke von 10 Pixeln besteht. So gehen wir zurück, können wir auch überlappende Elemente mit absoluten haben. Also schauen wir uns das einfach an. Wir haben ein Bild und eine Überschrift, die sich überlappen und wir sind in der Lage, das zu erreichen, indem wir das Bild absolut haben. Wieder, wenn wir die Position absolut entfernen, ist das, was es aussehen würde. Das Bild würde unter der Überschrift sitzen, wie das Standardverhalten in HTML. Weiter können wir sehen, wie wir Text über einem Bild positionieren können , und es gibt viele weitere Beispiele hier. Sie können sich mit Übungen testen. Das ist wahrscheinlich eine andere gute Sache zu erwähnen. Aber dann können Sie die Zusammenfassung der Positionierungseigenschaften hier sehen. Ich weiß, dass das eine Menge zu decken ist und vielleicht im Moment keinen vollkommenen Sinn ergibt, aber wenn Sie anfangen, sich mit der Positionseigenschaft zu entwickeln, werden Sie anfangen, die Unterschiede besser zu verstehen. Aber ich denke, die wirklich gebräuchlichen Beispiele, die Sie mit der Position Eigenschaft sehen werden , sind; Nummer 1, diese Position fixiert, wie dieses Element einfach bei Ihnen bleibt, unabhängig davon, wo Sie scrollen. Das ist eigentlich etwas, was wir hier mit diesem Menü sehen können. Das Menü erreicht eine bestimmte Bildlaufstufe. Es klebt da oben und lasst uns reingehen und das überprüfen. Lassen Sie uns untersuchen, versuchen, die Elemente zu finden und sich tatsächlich von relativ zu fest zu wechseln. Es verwendet also nicht wirklich klebrig. Aber Sie können hier die Position sehen, während wir scrollen, ist fixiert und hier oben ist relativ. So klebrig und Position fixiert sind gut, um feste Menüs zu erstellen, die Ihnen folgen, während Sie scrollen. Dies könnte auch fixiert werden, oder einfach nur in einem anderen Rahmen. Absolute, wir sind in der Lage, Dinge irgendwo auf der Seite zu positionieren, und relativ, wir sind in der Lage, verschiedene Elemente herumschieben basierend auf der Position, die sie ursprünglich sein sollten. Ich hoffe, das gibt Ihnen einen guten Überblick über die Positionseigenschaft. Wieder, wenn wir mehr entwickeln, werden Sie beginnen, die Position Eigenschaft und Aktion zu sehen und beginnen, es mehr zu verinnerlichen. Im nächsten Video werden wir Überlauf und Schwimmer abdecken. 25. CSS: Überlauf und Float: In diesem Video werden wir Überlauf und Schwimmer abdecken. Dies wird über die verschiedenen Eigenschaften in CSS sprechen, und dann werden wir einige fortgeschrittenere Sachen abdecken. Lass uns einfach direkt eintauchen und überlaufen. Die CSS-Überlaufeigenschaft steuert, was mit dem Inhalt passiert, der zu groß ist, um in einen Bereich zu passen. Wie Sie hier sehen können, hat dieser Inhaltsblock wahrscheinlich nur eine feste Höhe, aber er hat mehr Texte, als tatsächlich in diesen Block passen könnte. Wir können steuern, wie der Inhalt im Inneren wird mit CSS-Überlaufeigenschaft verhalten. Die Überlaufeigenschaft gibt im Grunde an, ob Inhalt zu schneiden oder Bildlaufleisten hinzuzufügen, wenn der Inhalt eines Elements zu groß ist, um in einen bestimmten Bereich passen. Die erste, die Sie sehen werden, ist Überlauf sichtbar. Es bedeutet, dass der Überlaufinhalt nicht abgeschnitten wird und außerhalb des Feldes des Elements gerendert wird. Wie Sie hier sehen können, haben wir ein div mit einer festen Breite und Höhe, aber wir haben einfach zu viel Text, um tatsächlich in diese Box zu passen. Eine Möglichkeit, dies zu beheben, ist, indem wir die Schriftgröße kleiner haben, aber vielleicht brauchten wir diese bestimmte Schriftgröße oder wir haben keine Kontrolle darüber, so dass eine Sache, die wir tun können, ist, dass der Überlauf sichtbar ist. Dies ist eigentlich das Standardverhalten, und wenn wir auf klicken, versuchen Sie es aus, wir können tatsächlich entfernen Überlauf sichtbar klicken „Ausführen“, und wir werden genau das gleiche sehen. Sie werden wahrscheinlich keinen Überlauf verwenden sichtbar ist, da dies das Standardverhalten ist. Eine Sache, die Sie verwenden könnten, ist Überlauf versteckt. Überlauf versteckt ist, ist es offensichtlich, was es tut, es wird einfach den ganzen Überlauf verstecken. Es schneidet tatsächlich den Rest des Inhalts ab und stellt sicher , dass der Inhalt den angegebenen Dimensionen entspricht. Wenn wir auf „Probieren Sie es selbst“ klicken, werden wir sehen, dass wir angegeben haben, dass das div hier 200 Pixel breit und 50 Pixel hoch sein soll , und wenn es irgendwelche Texte gibt, die es überdauern werden, wir es einfach abschneiden. Wenn wir das entfernen und ausführen würden, würde es wieder zum Überlauf sichtbar gehen. Dann gibt es auch einen Überlauf-Scroll, was wir oben gesehen haben, es erlaubt uns, die Größe der Box zu behalten, es erlaubt uns, die Größe der Box zu behalten, aber nur eine Bildlaufleiste erscheint, so dass wir durch den Inhalt dieses bestimmten div blättern können . nächste ist Überlauf automatisch, und es ist ähnlich wie beim Scrollen, aber es fügt Bildlaufleisten nur hinzu, wenn nötig. In diesem Fall ist es notwendig, aber wenn wir in Try it Yourself gehen und wir das ein bisschen größer gemacht haben, dann brauchen wir nicht wirklich die Scrollbalken. Zurück zum Dokument können wir den Überlauf auf bestimmten Achsen beeinflussen wo auch immer wir ihn horizontal oder vertikal wollen. Überlauf x gibt an, was zu tun ist, wenn der linke und rechte Rand des Inhalts und des Überlaufs y angeben, was mit den oberen, unteren Rändern des Inhalts zu tun ist. Das ist Überlauf, im Grunde nicht zu kompliziert. Wenn Sie Inhalte haben, die außerhalb eines bestimmten div überlaufen, müssen Sie nur entscheiden, was Sie tun möchten, wenn es. Dies ist wahrscheinlich nicht ideal, vielleicht möchten Sie es verstecken oder vielleicht möchten Sie es scrollen lassen. Andernfalls haben Sie möglicherweise eine Situation, in der Sie die Schriftgröße so ändern , dass tatsächlich auf verschiedene Bildschirmgrößen passt, aber dies sind die verschiedenen Optionen, die im Überlauf verfügbar sind. Der nächste, den ich in diesem Video abdecken wollte, ist Float. Float ist sehr häufig. Sie werden in CSS sehen, es gibt zwei Eigenschaften hier. Einer ist Schwimmer, und einer ist klar. Die flow -Eigenschaft wird für die Positionierung und das Layout auf einer Webseite verwendet, und die flow -Eigenschaft kann einen der folgenden Werte haben. Links, wenn nach links, rechts schwebt, schwebt es nach rechts, keine, es schwebt einfach nicht und erbt bedeutet, dass es den Float-Wert des übergeordneten Elements erbt. In ihrer einfachsten Verwendung kann die Float-Eigenschaft verwendet werden, um Text um Bilder zu wickeln. Wenn wir das betrachten und das Bild rechts schweben lassen, wird es rechts vom Text schweben. Dies ist der Vorteil von Float, es wird um Ihre vorhandenen Inhalte wickeln. Probieren wir es selbst aus. Sie können hier sehen, dass wir das Bild Float richtig haben. Wenn ich das löschen würde, führen wir das aus, wir werden sehen, dass das Bild genau dort erscheint, wo es innerhalb des HTML positioniert ist. Sie können diesen Absatz sehen, das endet, dieses Bild beginnt, und es wird den Anfang dieses Absatzes bilden. Wenn wir wieder reingehen und es nach rechts schweben lassen, und es wird um den Text gehen. Wir können es auch nach links schweben, wie solche, und es wird nach links schweben. Wir können auch Rand hinzufügen, um es ein bisschen schöner zu machen, so dass es nicht direkt gegen den Text geht, so dass es uns erlaubt, ein fließenderes Layout zu erstellen, was wirklich wichtig ist. Wir haben Float links gesehen, kein Float wird es nur so machen, wie es vorher war, wobei das Bild nur in Übereinstimmung mit dem Text auftaucht, und was wir haben, ist die klare Eigenschaft. Die clear Eigenschaft gibt an, welche Elemente neben dem gelöschten Element schweben können und auf welcher Seite. Die gelöschte Eigenschaft kann so ziemlich die gleichen Werte haben, außer sie hat auch einen Code, Buff. Der gebräuchlichste Weg, um die clear Eigenschaft zu verwenden, ist, nachdem Sie float-Eigenschaft für ein Element verwendet haben und Sie den float löschen möchten. Hier ist ein Beispiel, das hoffentlich mit uns teilen wird, wie es funktioniert. Wie Sie sehen können, kann Float einige Probleme verursachen. Sie können hier sehen, dass die beiden Divis um den Raum konkurrieren, während sie hier gelöscht werden, das liegt an der klaren Eigenschaft. Ich denke, der beste Weg für Sie, klar zu verstehen, ist, wenn wir wieder in unser Projekt eintauchen und dies tatsächlich demonstrieren. Nehmen wir einfach unser Bild hier, und machen wir es 25 Prozent, damit es nicht so viel Platz in Anspruch nimmt, und dann werde ich das Bild direkt in den Absatz setzen. Ich werde das packen und es hier in diesen ersten Absatz setzen. Im Moment wird es nur inline mit dem Text angezeigt, aber wenn ich ihm eine Eigenschaft von Floats links und speichern gebe, dann wird es mit dem Inhalt auf der Seite schweben. Wir geben ihm einen gewissen Rand rechts und unten , so dass es nicht direkt gegen diesen Text kommt, und dann haben Sie dieses Bild. Nun, in Bezug auf die klare Eigenschaft, wird es hauptsächlich verwendet, um die schwebende Funktionalität zu löschen , wenn Sie mehrere Dinge haben, die herumschweben. Ich werde das Bild kopieren und es nebeneinander hier setzen. Wir haben zwei schwebende Bilder und vielleicht wollen wir, dass das zweite Bild klar wird, also werde ich es hier in Zeile setzen. Ich ziele nur auf das eine Element, und ich werde klares beides einbringen. Jetzt können Sie sehen, dass diese übereinander stapeln, weil es alle schwebenden Elemente nach links und rechts löscht. Wenn wir links löschen wollten, würde es wahrscheinlich das gleiche Verhalten haben. Wenn wir richtig erstellt haben, werden Sie sehen, dass es wieder da ist, wo wir vorher waren, weil es keine schwebenden Elemente auf seiner rechten Seite gibt . Nur um das wieder zu klären, kein Wortspiel beabsichtigt, werde ich diesen Stil loswerden, und schauen wir uns das Standardverhalten an. Was wir haben, sind zwei Bilder, die links schweben, aber vielleicht wollen wir, dass dies auf eine neue Linie kommt. Wir müssen es auf der linken Seite seines schwimmenden Elements löschen, damit wir klar links oder klar setzen würden , dass beide in diesem Fall auch funktionieren würden. Da hast du es. Wenn wir diesem einen Schwimmer von rechts geben würden, können wir beide nach links klären und nach rechts schweben. Dann haben Sie einige Variation mit dem Floating der Bilder. So können Sie Floating-Elemente übereinander oder auf neuen Linien erscheinen, anstatt sie nebeneinander zu haben, selbst wenn sie die gleiche schwebende Eigenschaft von links oder rechts haben . Zurück zum Dokument, es gibt noch eine andere Sache, die hier zu behandeln ist, und das ist der Clear-Fix-Hack. Was passiert, wenn ein Element größer ist als das Element, das es enthält und es schwebt? Was passieren wird, ist, dass es so außerhalb des Containers überläuft. Eine Sache, die wir tun können, ist die Überlaufreihenfolge zu verwenden, um dieses Problem zu beheben, und das verbindet sich gut mit dem, was wir kurz zuvor mit Überlauf bedeckt haben. Um dies zu demonstrieren, werde ich wieder in unser Projekt springen. Ich werde die Seite aufrufen, in unseren Code-Editor gehen. Ich werde diesen Vollbildmodus machen, weil wir jetzt viel mehr Inhalte auf der Seite haben. Das erste, was ich tun muss, ist dieses Bild-Tag in den Absatz zu verschieben , der neben ist. Wie Sie hier sehen können, sieht es so aus, als wäre dieses Bild wahrscheinlich mehr in diesem Absatz als in diesem Absatz, aber tatsächlich sitzt es genau hier oben. Ich werde es in den Absatz verschieben, drücken Sie „Speichern“, und jetzt können Sie sehen, dass der Text ein bisschen mehr um ihn herum umschließt aber was ich tun werde, ist diese festen Höhen und Breiten loszuwerden , die ich als HTML-Attribute festgelegt und in eine Höhe von 200 Pixeln, so dass sie größer als der Inhalt im Absatz-Tag ist. Dann gehst du, du kannst sehen, dass es sich dehnt. Um die tatsächlichen Einschränkungen dieses Absatz-Tags zu sehen, werde ich ihm einen Rahmen geben, damit wir tatsächlich die Kanten dieses Elements sehen können. Ich werde dem einen festen schwarzen Rand geben, das speichern. Jetzt können Sie das Beispiel sehen, das wir auf W-3 Schulen hatten. Das Bild befindet sich außerhalb der Einschränkungen des übergeordneten Elements. Ich werde hierher zurückgehen, und was ich tun kann, ist wie im Beispiel, setzen Sie diesen Absatz auf Überlaufreihenfolge. Speichern Sie das. Und jetzt plötzlich der Inhalt dieses Absatz-Tags und jetzt entspricht diesem Bild-Tag. Also wieder, der Unterschied ist zwischen diesem und diesem. Das ist eine Gelegenheit, wenn Sie clear and float verwenden , um dieses kleine Problem zu beheben, das Sie möglicherweise erleben. In unserem Fall ist das Bild nicht wirklich 200 Pixel hoch, also muss es nicht so groß sein, aber nur für den Fall, dass Sie diese Option verfügbar haben und Sie hier sogar in einer kleineren Höhe sehen können , überläuft es immer noch. So können wir gehen Überlauf Auto wieder und sehen, dass jetzt können wir es haben , so dass es immer ein Teil dieser besonderen Elemente ist , die in diesem Fall ein Absatz-Tag ist. Das deckt Überlauf und Schwimmer, da einige andere Dinge hier drin, die Sie mehr über und mehr darüber erfahren können , wie Float in der realen Welt verwendet wird. Ich werde das einfach überwältigen und Sie zu allen CSS-Flugeigenschaften als Referenz führen, und im nächsten Video werden wir mehr CSS-Selektoren abdecken, bevor wir diesen CSS-Abschnitt einschließen und Sie begann mit der Implementierung von Bootstrap und den Einstieg in Ihr Klassenprojekt. Wir kommen gegen Ende jetzt, sehr aufregende Zeiten, ich hoffe, Sie auf dem nächsten Video zu sehen. 26. Weiterführende Syntax und Selektoren: In diesem Video werden wir erweiterte Selektoren abdecken. Wenn Sie sich in der Episode über Syntax und Selektoren erinnern, haben wir einige grundlegende Themen behandelt, einschließlich der Element-ID und Klassen-Selektor. Jetzt habe ich ein paar Tabs geöffnet von w3schools , so dass wir in einige der erweiterten Auswahloptionen gehen können. Der erste ist CSS Combinators und Sie können das im Menü hier finden. Ein CSS-Kombinator ist etwas, das die Beziehung zwischen den Selektoren erklärt. Es gibt vier verschiedene, die wir verwenden können. Eins ist eine abhängige Auswahl, ein untergeordneter Selektor und benachbarter gleichgeordneter Selektor und ein allgemeiner gleichgeordneter Selektor. Das ergibt wahrscheinlich keinen Sinn, bis wir reingehen und diese in Aktion sehen. Die gebräuchlichste ist ein Descendant Selektor. Der Selektor „Nachkommen“ entspricht allen Elementen, die Nachkommen eines bestimmten Elements sind. Das folgende Beispiel, das wir hier sehen, werden alle, p, Elemente innerhalb, div, Elemente auswählen . Nun, das ist ziemlich breit, aber lassen Sie uns versuchen, ein Beispiel in unserem aktuellen Projekt zu nennen. Ich habe das Projekt hier drüben in unserem Browser, und ich habe den Code hier zu mir. Sagen wir einfach zum Beispiel, wir haben diese Absätze, und innerhalb des Absatzes haben wir Bilder. Was wir tun können, ist, alle Bilder innerhalb von Absätzen auszuwählen, indem wir eine Regel wie diese einfügen. Beginnen Sie mit p, dann setzen wir ein Leerzeichen und wir setzen Bild. Jetzt wird jede Regel, die wir hier einfügen, auf Bilder angewendet werden , die innerhalb von p sind. Es deckt alle Nachkommen ab, auch wenn wir ein p hatten und dann innerhalb, dass wir ein div hatten, und dann hatten wir ein Bild, das es immer noch auswählen würde. Jedes Bild mit einem Elternteil, ob das sofort oder anderweitig ist, jedes Bild mit einem Elternteil von p. Lassen Sie uns das jetzt tun. Lassen Sie uns richtig schweben. Ich werde das retten. Ich werde den Code nach rechts verschieben. Öffne das und du wirst sehen, dass unsere Bilder nach rechts schweben. Jetzt denken Sie vielleicht, wir haben Float auf der linken Seite bereits Auswirkungen auf alle Bilder, aber denken Sie daran, Spezifität und Hierarchie. Wir sind hier spezifischer zu sagen, dass jedes Bild innerhalb eines Absatzes, wird rechts schweben. Das ist Spezifität, die für uns da arbeitet. Wenn Sie nicht klar sind, was ich damit meine, gehen Sie vielleicht zurück und überprüfen Sie die Lektion über Hierarchie. Aber hier ist eine Möglichkeit, den Descendant Selektor mit zwei Elementselektoren zu verwenden. Wir können auch Elemente Selektoren und ID-Selektoren und div Selektoren kombinieren. Wenn ich nach unten scrolle, um ein Beispiel zu finden, sagen wir zum Beispiel, dass wir alle Spends innerhalb eines Elements auswählen wollten, das spezielles div als Klasse hatte. Wir könnten das tun, indem wir hier in unser Stylesheet gehen und unter spezielles div, werde ich einen Descendant Selektor erstellen. Ich werde spezielles div als ersten Teil des Selektors haben, und dann werde ich Spanne setzen. Jetzt wählt dies jede Spanne innerhalb eines übergeordneten Elements aus, das diese Klasse hat. Was können wir mit diesen Spannweiten machen? Lasst uns vielleicht einfach die Farbe ändern. Wir ändern die Farbe in Grün. Jetzt wird jede Spanne innerhalb eines übergeordneten Elements, das spezielle div hat, in diesem Fall werden es diese divs hier und wir sollten beginnen, die Spanne zu grün zu sehen. Da gehst du. Wenn wir dies in dieses spezielle div ohne die Klasse darauf setzen, drücken Sie Speichern und schauen Sie sich das an. Wir werden sehen, dass dieser Text-Dummy nicht grün weil er kein übergeordnetes Element hat, das diese Klasse hat. Wenn Sie hier sehen, haben wir eine Spanne, wenn Sie zu seinem Elternteil gehen, hat es eine Klasse von speziellen div. Wenn Sie hier gehen und sich das übergeordnete Element ansehen, hat es keine Klasse spezieller div. Das sind einige Möglichkeiten, wie wir eine Klasse erstellen und dann Elemente innerhalb des Elements anvisieren können , das diese Klasse hat. Weiter, wir haben den Child Selector. Der untergeordnete Selektor ist dem Selektor „Nachkommen“ sehr ähnlich, außer dass er alle unmittelbaren untergeordneten Elemente eines angegebenen Elements auswählt. Denken Sie daran, ich sagte hier, dass dies jedes Bild auswählen wird , das ein Elternteil von p hat und es nicht das unmittelbare Elternteil sein muss, es kann weiter oben in der Kette sein. zurück zu unserem Stylesheet gehen, haben wir kein klares Beispiel, aber ich werde Ihnen hier zeigen, ist, dass ich einen weiteren Abschnitt einrichten werde. Lassen Sie uns ein div hier haben, und dann innerhalb dieses div werden wir ein anderes div haben und dann innerhalb dieses div werden wir ein Bild von src, photo dot jpg haben . Jetzt haben wir ein Bild, das ein übergeordnetes und unmittelbares Elternteil von div und dann ein anderes Elternteil weiter oben in der Kette hat . Was wir tun könnten, um diesen mit einem Descendant Selektor zu zielen , und dies wird uns erlauben, den Unterschied zwischen Nachkommen und Kind zu sehen , ist, indem wir hier eine Regel einfügen, div image. Jedes Bild, das ein div hat, als Elternteil sollten wir ihm einen Rahmen von zwei Pixeln geben, einfarbig grün. Wenn wir nun die Seite aktualisieren, haben diese Bilder kein Elternteil von div, aber wenn wir nach unten scrollen, können wir sehen, dass dieses Bild, das ein Elternteil von div hat, jetzt mit zwei Pixeln durchgehend grün erscheint Grenze. Genau hier haben wir unser Bild in einer Box, aber das heißt, wenn Sie sich erinnern, nur ein div mit einem Hintergrundbild. Zum Beispiel, wenn ich diesen Rahmen hier für dieses bestimmte div entfernen würde, hätten wir keinen grünen Rand, da dies tatsächlich ein div-Element mit einem Hintergrundbild ist, kein tatsächliches Bildelement. Ich werde das rückgängig machen und zurück hierher gehen. Was ich tun werde, ist hier etwas spezifischer, weil dieses Bild hier ein Elternteil von div hat, aber auch ein Elternteil von div weiter unten in der Zeile. Ich möchte hier spezifischer sein und dieses übergeordnete Div anstelle des Elementselektors für div machen . Wenn wir die Seite aktualisieren, sehen Sie das gleiche Ergebnis. Lassen Sie uns nun einen Blick darauf werfen, was passieren würde, wenn wir einen Child Selektor verwenden. Denken Sie daran, dass der Child Selektor alle Elemente selektiert , die unmittelbar untergeordnete Elemente des angegebenen Elements sind. Ich gehe zurück zu meinem Code-Editor und rufe mein Dokument im Browser auf. Ich werde ein größeres als-Zeichen zwischen diesen beiden setzen. Das bedeutet, dass wir nur unmittelbare Kinder ins Visier nehmen wollen. Ich werde auf Speichern drücken und dann die Seite aktualisieren. Plötzlich ist die Grenze von unserem Bild verschwunden, und der Grund dafür ist, dass, wenn wir uns die unmittelbaren Kinder dieses Eltern-div ansehen, die einzigen unmittelbaren Kinder, die es hat, es nur ein Kind hat und das ist ein anderes div. Wir zielen nicht mehr auf dieses Bild-Tag , da es kein unmittelbares Kind dieses übergeordneten div ist. Wenn wir zum Beispieldiese stapeln würden, diese stapeln würden, was wir in CSS tun können, sollte dies jetzt funktionieren, weil wir auf ein Bild abzielen, das in einem div-Tag enthalten ist, das in einem Element mit einem KlassenElternteil enthalten ist div. Wir können diese verschiedenen Kombinatoren auch kombinieren. Ich werde das auf das zurücksetzen, was es vorher war. Gehen wir zum nächsten Selektor. Der nächste ist der benachbarte Geschwister-Selektor. Wie der Name schon sagt, wählt der benachbarte Geschwisterselektor alle Elemente aus, die die benachbarten Geschwister eines angegebenen Elements sind . Was benachbarte bedeutet, folgt sofort. Im folgenden Beispiel werden zum Beispiel alle p-Elemente ausgewählt , die unmittelbar nach div-Elementen platziert werden. Anstatt das in unseren Code zu setzen, werde ich das Beispiel hier ausführen. Im Moment zielen wir auf alle p-Elemente ab, die nach einem div kommen, und wir geben ihnen eine Hintergrundfarbe von gelb. Wie Sie hier sehen können, haben wir ein div mit zwei Kindern, eines ist ein p und das zweite ist auch ein p. Aber diese kommen nicht wirklich nach einem div, sie sind tatsächlich Kinder dieses div, so dass sie in dieser CSS-Regel nicht zielgerichtet sind. Sobald wir hier runter gehen, kommt dieses p nach diesem div, so dass tatsächlich durch diese Regel ausgelöst wird. Wenn wir dies zum Beispiel in einen Child Selektor ändern, diese Kinder plötzlich mit einer Hintergrundfarbe von Gelb angezeigt. Dies richtet sich nur an die unmittelbaren Kinder von div. Zum Beispiel, wenn ich hier eine andere Art von Element einfügen wollte, vielleicht einen Abschnitt, und ich begann diesen Abschnitt und im Inneren hatte ich einen Absatz. Jetzt werde ich das ausführen und sehen, was passiert. Nur der erste Absatz hat die Hintergrundfarbe gelb. Das liegt daran, dass dieses p nicht mehr ein unmittelbares Kind von div ist, es ist ein sofortiges Kind des Abschnitts und Abschnitt ein unmittelbares Kind von div ist. Aber dieses p ist kein unmittelbares Kind des div. Wenn ich dies ändere und den unmittelbaren untergeordneten Selektor losgeworden und ihn einfach in einen abhängigen Selektor änderte und auf „Ausführen“ klicke. Jetzt ist es zurück darauf, beide hervorzuheben, weil p ein Elternteil von div hat , selbst wenn es sich um unmittelbares Elternteil handelt. Ich kombiniere dort drei Beispiele. Hoffentlich macht das jetzt Sinn für euch oder beginnt Sinn zu machen. Wieder, wenn Sie mehr Erfahrung mit diesem sammeln, wird es beginnen, ein wenig mehr zu verfestigen. Der letzte im Abschnitt „CSS-Kombinatoren“ ist der allgemeine Geschwisterselektor. Der allgemeine Geschwisterselektor wählt alle Elemente, die Geschwister eines angegebenen Elements sind. Eltern und Kinder sind wahrscheinlich ein neues Konzept für Sie in dieser Klasse. Aber im Wesentlichen, wenn Sie Eltern und Kinder verstehen, sollten Sie verstehen, was ein Geschwister ist. Es sind die anderen untergeordneten Elemente eines bestimmten Elternteils. Anstatt einen neuen Abschnitt in unserem Dokument zu erstellen, werde ich einfach auf „Probieren Sie es selbst“ klicken. Wie Sie hier sehen können, haben wir hier einen allgemeinen Geschwisterselektor. Was uns das sagt, ist, dass jeden p, der div auf der gleichen Ebene folgt, wir jeden p, der div auf der gleichen Ebene folgt,auch diesen speziellen Stil anwenden wollen, der Hintergrundfarbe gelb ist. Eines der verwirrenden Dinge an dieser bestimmten Regel ist, ja, es zielt auf Geschwister, aber nur Geschwister, die nach diesem ersten Teil des Selektors kommen, also in diesem Fall das div. Dieser Absatz 1 zum Beispiel ist nicht ausgewählt, weil er nicht nach diesem div kommt. Wenn ich das schneiden und das hier setzen würde, wäre es hervorgehoben. Das ist einer der kleinen Tricks dieses speziellen Selektors. Aber wie Sie diesen zweiten Absatz sehen können, das ist eigentlich ein Kind dieses div bekommt nicht den Stil der Hintergrundfarbe gelb. Das liegt daran, dass es kein Geschwister ist, sondern ein Kind ist. Das deckt diese Kombinatoren Selektoren ab. Natürlich habe ich erwähnt, dass dies einige der fortgeschritteneren Selektoren sind. Also erwarte ich nicht, dass du sie in diesem Video beherrschst, aber auf jeden Fall ausprobierst, experimentierst und du wirst anfangen, sie viel besser zu verstehen. Ein weiterer erweiterter Selektor ist eine Pseudo-Klasse. Denken Sie daran, dass wir ein Beispiel für eine Pseudo-Klasse verwendet haben. Wir haben den Hover-Zustand für einen Link verwendet. Sie können hier sehen, dass das erste Beispiel ist. Das ist wahrscheinlich das häufigste Beispiel für eine Pseudo-Klasse. Aber Sie können hier einen Blick auf die Syntax werfen. Wir haben im Grunde den Selektor, den wir sowieso haben werden, aber dann, um den Zustand auf diesem bestimmten Selektor zu zielen, können wir einen Doppelpunkt haben und dann die Pseudo-Klasse setzen. Wir haben diejenigen für Link-Tags früher in dieser Klasse gesehen. Wie Sie hier sehen können, diese Rollen, Pseudo-Klassen. Pseudo-Klassen kommen am häufigsten auf Links, da es verschiedene Zustände zu Links gibt und Links natürlich ein gemeinsames Element in HTML sind. Aber Sie können hier einige Beispiele sehen, wie wir einen Hover-Zustand über ein div oder ein anderes Element machen könnten . Das ist wahrscheinlich die häufigste Verwendung von Pseudo-Klassen für den Zielzustand. Aber wir können es auch verwenden, um das erste Kind oder eine beliebige Anzahl von Kindern aus einem bestimmten Element zu finden . Hier können wir das erste Kind eines p nehmen, so dass es jedes p-Element übereinstimmt, das das erste Kind eines Elements ist und hier können wir auch einen Nachfolger Selektor oder eine beliebige Anzahl von Selektoren mit diesem Pseudo- Klasse des ersten Kindes. Wie Sie sehen können, wird es jetzt etwas kompliziert. Wir verwenden einige der Kombinationsselektoren, über die wir kurz zuvor gelernt haben, und jetzt kombinieren wir es mit einer Pseudo-Klasse, so dass Sie einen ziemlich langen Selektor in CSS zusammenfassen können. Sie können sie auch in einer anderen Reihenfolge verwenden, sodass Sie auf alle Symbol-Tags abzielen können, die ein übergeordnetes Element haben , das das erste untergeordnete Element eines anderen Elements ist. Sie können eine beliebige Anzahl von Kombinationen durchführen. Sie können auch die Lang Pseudo-Klasse verwenden , mit der ich keine Erfahrung habe, also werde ich einfach darüber hinwegziehen. Es gibt viele Beispiele für Pseudo-Klassen hier, wenn Sie dies also als Referenz verwenden möchten. Die wichtigsten sind diejenigen, die Sie verwendet haben, um den Zustand einer Verknüpfung zu bestimmen oder zu bestimmen, ob Sie über etwas bewegen oder nicht, und die anderen gemeinsamen sind die Auswahl eines untergeordneten Elements oder einer Position eines Kindes. Zum Beispiel, dieses eine n-th-child, wird dies alle ps auswählen, die das zweite Kind ihrer Eltern sind. Sie können ein bestimmtes untergeordnetes Element innerhalb eines übergeordneten Elements ausrichten. weiter gehen, werden wir in Pseudo-Elemente gehen. Pseudo-Elemente sind wie Pseudo-Klassen akzeptieren, wir verwenden einen anderen Doppelpunkt. Um ehrlich zu sein, ich verwende nicht so viel Pseudo-Elemente. Aber ein paar Dinge, die wir mit Pseudoelementen tun können, ist das Ziel der ersten Zeile eines Absatzes, und wir können den ersten Buchstaben eines Wortes oder Absatzes. Wir können das mit Klassen kombinieren, wie wir in der Pseudoklassen-Lektion gesehen haben, und wir können den ersten Buchstaben und die erste Zeile von ps im gleichen CSS-Dokument anvisieren. Wahrscheinlich ist das häufigste Pseudoelement davor oder danach. Mit, bevor wir in der Lage sind, einige Inhalte vor dem tatsächlichen Inhalt des Elements einfügen. In diesem Beispiel können wir ein Bild direkt vor einem bestimmten Element einfügen. Dann ist hier das Gegenteil, wir können einige Inhalte nach dem Inhalt von h1s einfügen. Es gibt auch das Auswahl-Pseudo-Element, das mit dem Teil des Elements übereinstimmt , der vom Benutzer ausgewählt wird. Ich habe das noch nicht benutzt, aber wir können uns das Beispiel hier ansehen. Wenn wir einen Inhalt auf der Seite auswählen, können wir sehen, dass unsere Auswahl jetzt mit diesem Pseudo-Element gestylt wird. Das ist ein ziemlich cooler Trick. Ich wusste nicht mal, dass du das schaffst, bevor ich anfing, diesen Kurs vorzubereiten. Hier ist eine vollständige Liste der Pseudo-Elemente und auch eine vollständige Liste von Pseudo-Klassen, die Sie verwenden können. Schließlich, und das wird zu einer ziemlich großen Lektion, also vielleicht möchten Sie danach aktualisieren, indem Sie zurückgehen und überprüfen. Aber der letzte Selektor, über den ich sprechen wollte, ist ein Attributselektor. Der Attributselektor ermöglicht es uns, Elemente mit einem bestimmten Attribut auszuwählen. Genau hier, wenn wir ein Attribut und Wert von Ziel gleich Unterstrich leer hätten, würden wir einen Stil auf dieses spezifische Element anwenden , das dieses spezifische Attribut und Wert hat. Klicken wir einfach auf das erste „Probieren Sie es selbst“ und schauen Sie sich das an. Grundsätzlich gilt dies für jedes Link-Tag, das unabhängig vom Wert dieses Attributs ein Attribut von target hat . Sie können hier sehen, diese beiden haben ein Zielattribut und egal, was der Wert dieses Zielattributs ist, es kümmert sich nur darum, ob dieses Attribut existiert. Aber wir können genauer sein und sagen, dass wir nur Link-Tags zielen wollen , die dieses Attribut haben und einen bestimmten Wert haben. Wir können hineingehen und sagen, dass wir nur Link-Tags zielen wollen , die ein Attribut des Ziels mit dem Wert von leer haben. Wenn ich das ausführe, werden Sie sehen, dass nur dieser ausgewählt ist. Zurück hier zu diesem, der einen Titel verwendet, wird dieser spezielle Selektor verwendet, um Elemente mit einem Attributwert auszuwählen , der ein spezifiziertes Wort enthält. Wir können innerhalb des Attributwert für dieses bestimmte Wort suchen, und wenn es einem Teil des Wertes entspricht, wird dieser bestimmte Stil ausgelöst werden. Ich werde dieses schließen und einfach neu mit diesem Beispiel beginnen. Sie können hier sehen, dass der Titel Blume in diesen beiden gutartigen, diesem. Sie können sehen, dass diese beiden den angegebenen Stil haben, der Rahmen ist, 5px durchgehend gelb. Eine andere Möglichkeit, diese Selektoren mit Pipe gleich zu verwenden, und das wird verwendet, um Elemente mit einem angegebenen Attribut auszuwählen, beginnend mit einem angegebenen Wert. Lassen Sie uns einfach direkt in das Beispiel eintauchen. Sie werden hier sehen, dass alles, was mit dem Wort beginnt, das wir hier angegeben haben und dann durch einen Bindestrich gebrochen wird, ausgewählt wird, aber nicht besonders dieses. Das ist nur eine Regel, dass Sie eine Notiz sehen können, sie wird nur auf ein ganzes Wort zielen, entweder allein so oder mit einem Bindestrich. Dies ist ein bisschen seltsam Selektor. Ich glaube nicht, dass ich das jemals benutzt habe, aber das ist ein fortgeschrittenes Zeug. Es gibt all diese verschiedenen speziellen Operatoren, die Sie verwenden können. Ich werde nicht zu lange damit verbringen. Wenn Sie das kreativ mit Ihren Selektoren machen möchten, kommen Sie definitiv zurück und sehen Sie sich dies an. Aber im Wesentlichen die wichtigsten Dinge, die ich in diesem Video erfahren wollte , sind die erweiterten Selektoren wie Kombinatoren und Pseudo-Klassen und viele der häufigsten Beispiele, die ich bereits in unser Projekt eingefügt habe. Wir haben den unmittelbaren Kind-Selektor, und ich glaube, wir haben hier oben den Nachkommen-Selektor benutzt. Das sind die häufigsten. Mach dir keine Sorgen, wenn du die erweiterten Attributselektoren hier nicht vollständig erfasst hast. Definitiv möchten Sie dieses verstehen, damit Sie Elemente mit einem bestimmten Attribut und Wert anvisieren können , den ich sehr praktisch finde. Aber diese, die ich ehrlich gesagt noch nie benutzen musste, also lassen Sie sich nicht allzu mit ihnen verfangen. Die wichtigsten, die ich wirklich möchte, dass Sie wissen, sind diese hier, die Kombinatoren, weil Sie diese definitiv irgendwann verwenden müssen. Sie werden definitiv diesen sehen, auch den untergeordneten Selektor. Pseudo-Klassen auch für Staat, besonders auf einem Link, und besonders für Hover, aber dann haben Sie natürlich all diese verrückten Pseudoelemente, um erste Zeile, ersten Buchstaben, viele Optionen in CSS, aber es ist nicht notwendig, absolut alles zu wissen. Sie haben diese Website immer als Referenz. Ich hoffe, das Video war nicht zu lang und du bist nicht total überwältigt. Im nächsten Video werden wir die erweiterten Optionen in CSS einschließen. Dann werden wir beginnen, mit Ihnen ein Framework zu teilen , das all dies so viel einfacher macht und Ihnen so viel Zeit sparen wird. Wir sehen uns im nächsten Video. 27. Fortgeschrittenes CSS – Medien-Abfragen: Im letzten Video sagte ich, wir würden einige der fortgeschritteneren Themen in CSS abdecken , aber wenn wir uns dieses Menü hier ansehen, gibt es eine Menge verschiedener Optionen zur Verfügung. Wir können uns die erweiterten Optionen für abgerundete Ecken ansehen. Wir können Bilder als Rahmen verwenden. Wir können Gradienten Hintergründe erstellen. Wir können verschiedene Teile unseres Dokumentes Schatten geben. Wir können Schatten anwenden, um DIVs oder zu unseren Textelementen hinzuzufügen. Es gibt so viel, was wir in CSS tun können und es ist zu viel, um in diesem Kurs abzudecken, das ist wahrscheinlich schon ziemlich lang. Wenn Sie möchten, dass ich einen fortgeschritteneren CSS-Kurs erstelle, bin ich definitiv offen dafür, aber im Moment möchte ich über etwas sprechen, das in CSS sehr wichtig ist und Media Queries ist. In CSS2 wurden Media Queries eingeführt und was sie taten war es möglich, verschiedene Stilregeln für verschiedene Medientypen zu definieren. Aber jetzt in CSS3, sie am häufigsten verwendet, um die Fähigkeit des Geräts zu betrachten. Überall dort, wo die Breite und Höhe des Ansichtsfensters oder des Geräts betrachtet werden, die Ausrichtung, ob Querformat oder Hochformat, und die Auflösung. Medienabfragen, wie es hier heißt, sind beliebte Technik für die Bereitstellung eines maßgeschneiderten Stylesheets für Desktops, Laptops, Tablets und Mobiltelefone. Media Queries super wichtig für Responsive Web Design und Entwicklung. Wenn wir nach unten scrollen, können wir die Media Query Syntax sehen und das macht vielleicht nicht viel Sinn hier in dieser Art von Übersicht, aber wenn wir hier nach unten gehen, können wir beginnen, einige Beispiele zu sehen. Die Art und Weise, wie Sie eine Medienabfrage starten, ist mit @media dann der erste kleine Wert hier Bildschirm. Bildschirm, wie Sie hier sehen können, wird für Computer-Bildschirme, Tablets, Smartphones, etc. verwendet Wenn wir reaktionsschnelle Web-Design, Bildschirm ist derjenige, den wir verwenden möchten. Dann haben wir ein Ende zu sagen, dass wir eine neue Bedingung definieren und dann setzen wir in min-width oder max-Breite oder beides. Wir können diese speziellen Stile, die wir innerhalb der geschweiften Klammern dieser Medienabfrage definieren, auf eine Bildschirmgröße von mehr als 480 Pixeln beschränken . Die Beispiele hier fehlen ein bisschen, also werde ich hier in die nächste Lektion gehen und mir einige weitere Beispiele ansehen. Ein gutes Beispiel hier, wenn ich nach unten scrollen, ist dieses Beispiel hier, denke ich, ist einfach genug, um zu verstehen. Hier haben wir unsere Standardstile für jede Bildschirmgröße, und dann haben wir unsere Medienanfragen. Dieser sagt: Wenden Sie alle diese Stile an, wenn die Breite des Bildschirms mindestens 600 Pixel beträgt. Es sagt, dass jedes DIV mit der Klasse des Beispiels, wir wollen die Schriftgröße auf 80 Pixel setzen. Jetzt spricht dieser hier über das Gegenteil. Wenn die Bildschirmgröße weniger als 600 Pixel beträgt, möchten wir, dass jedes DIV mit der Klasse des Beispiels eine Schriftgröße von 30 hat. Jetzt können wir den Effekt davon sehen, wenn wir anfangen, die Größe des Browserfensters zu ändern. Genau hier wird es uns sagen, wie breit dieses Fenster ist. Wenn wir unser eigenes Fenster nach unten ziehen, bis es weniger als 600 erreicht, werden wir beginnen, eine Änderung zu sehen. Hier gehen wir, wir sind knapp über 600 und dann, sobald wir 600 überqueren, geht die Schriftgröße davon ab. Das liegt daran, dass wir es so spezifiziert haben. Aber wir können hier reingehen und angeben, was Sie wollen. Wir könnten die Farbe auf Grün ändern. Wir könnten die Schriftfamilie ändern. Ich werde auf Ausführen klicken und dann zeigen Sie, dass jetzt. Sehen Sie, wenn es auf weniger als 600 Pixel, wir haben Schriftgröße 30 Pixel und Farbe grün. Eine andere Sache, die ich Ihnen hier zeigen möchte, dass es Ihnen nicht zeigt, ist Sie Max-Breite, Max-Höhe kombinieren können. Sagen Sie zum Beispiel, ich wollte eine andere Ebene innerhalb dieser erstellen, ich werde diese maximale Breite tatsächlich behalten. Was ich tun werde, ist ein anderes und, und genau hier, werde ich in eine Min-Breite setzen. Zwischen den Breiten von 400 Pixeln und 600 Pixeln, lassen Sie uns die Schriftgröße 10 machen. Es wird nicht gut aussehen, aber ich drücke Speichern nur aus einer Gewohnheitskraft. Es wird nicht gut aussehen, aber zumindest wird es in diesem Beispiel demonstrieren. Ich werde für hier eine maximale Breite von 400 setzen und das noch kleiner machen. Was jetzt passieren wird, ist standardmäßig, unsere Bildschirmgröße ist 825, die größer als 600 ist, also werden wir eine Schriftgröße von 80 haben. Aber wenn wir es dann auf 600 Pixel und 400 Pixel reduzieren, erhalten wir eine Schriftgröße von 10 Pixeln und eine Farbe von Rot. Dann weniger als 400, werden wir eine Schriftgröße von fünf und eine Farbe von Grün zu bekommen. Mal sehen, ob das funktioniert. Jetzt gehen wir runter, jetzt sind wir unter 600, aber über 400. Wir haben hier eine 10-Pixel-Rote Flut. Nun, wenn wir weiter nach unten gehen und unter 400 gehen, mal sehen, was passiert. Plötzlich haben wir ein noch kleineres Stück Text und die Farbe ist grün. Auch hier nicht das praktischste Beispiel, aber Sie können sehen, dass wir verschiedene definieren können, denke ich, Stylesheets oder es ist wirklich das gleiche Stylesheet, aber verschiedene Abschnitte des Stylesheets und definieren Stile für bestimmte Bildschirmbreiten. Das ist sehr wichtig in CSS und Sie können hier nach zusätzlichen Beispielen suchen. Wir können auch die Orientierung anvisieren. Wir können zielen, ob es im Querformat oder Hochformat ist, und dann ist das Beispiel hier mit max-Breite und min-Breite, so dass wir zwischen bestimmten Bildschirmbreiten zielen können, um bestimmte Stile zu tun. Die Media Query und Responsive Web Design sind etwas, das wir ein wenig später sehen werden , jetzt werden wir in die Implementierung von Bootstrap in unserem Projekt bekommen. Wir werden dieses riesige Chaos in etwas Schöneres verwandeln und noch ein paar Seiten aufbauen. Danach werden wir Ihnen den Einstieg in Ihr Klassenprojekt bringen. Vielen Dank, dass Sie mit mir durch diese ziemlich beteiligte Klasse auf HTML und CSS. In den nächsten Videos werden wir anfangen, tatsächlich etwas zu bauen , das hoffentlich ziemlich schön aussehen wird. Wir sehen uns im nächsten Video. 29. Neuaufbau unserer Webseite mit Bootstrap: Moment, wenn Sie ein bisschen ein Selbststarter sind, können Sie das Wissen, das Sie in dieser Klasse gelernt haben, mit HTML und CSS und der Dokumentation hier auf Bootstrap verwenden und damit beginnen, Ihre Webseite oder Website zu erstellen. Aber für diejenigen von Ihnen, die ein wenig mehr Anleitung benötigen, bleiben Sie hier, denn in diesem Video werde ich unsere Seite mit Bootstrap neu erstellen. Es gibt eine Menge Arbeit, die mit unserer aktuellen Webseite gehen muss , ist ziemlich schrecklich, ich werde nicht lügen. Das liegt daran, dass wir versucht haben, all diese verschiedenen Beispiele und Elemente einzubeziehen . Was ich zuerst tun werde, ist es vollständig zurückzuziehen und es mit Bootstrap neu zu bauen. Die Dinge, die ich loswerden werde, um das fertig zu werden, ist, dass ich einige dieser Stile nicht brauche, also werde ich sie entfernen. Ich werde diese zufälligen Links und Buttons loswerden. Ich werde den ersten Absatz ihm mit dem Foto überlassen. Ich werde unsere Geschichte die zweite Überschrift haben, aber ich brauche den Ausweis nicht mehr. Ich werde diesen zweiten Absatz loswerden. Ich werde den Tisch als Zeitlinie behalten. Ich werde unsere Werte als dunklen Punkt und unsere Dienste behalten, ich werde als ein div ohne eine bestimmte Klasse verlassen. Ich werde sicherstellen, dass ich nicht zu viele div gelöscht habe. Nein, es sieht so aus, als wären wir gut. Mal sehen, wo wir jetzt sind. Ich sage es. Cool. Ich werde auch die Stile in meiner styles.css löschen. Sie müssen dies nicht selbst tun, wenn Sie viel Zeit damit verbracht haben und Sie tatsächlich diese Stile mögen, dies ist nur ein komplettes Chaos als gut. Ich werde alle meine Stile löschen und komplett von Grund auf neu beginnen. Hier geht's. Sie haben eine Webseite mit einer Reihe von Elementen und so ziemlich kein Styling abgesehen davon, was ich hier loswerden werde, wir brauchen nicht wirklich und die Stile, die automatisch von Bootstrap angewendet werden. Das erste, was wir tun wollen, ist, all dies in einen Behälter zu legen. Wenn wir über Container lernen wollen, denke ich, dass es hier im Layout ist. Ich werde nur nach Container suchen. Sie können im Layout sehen, können wir Container verwenden, um das Gittersystem zu erstellen. Was es auch tut, ist, dass es eine maximale Breite an verschiedenen Haltepunkten erstellt. Welche Haltepunkte, für diejenigen von Ihnen, die nicht mit der Idee eines Breakpoints vertraut sind, es ist das, was wir vorher hatten, als wir die Medienabfragen, die wir gesetzt haben, und maximale Peitschen. Als es dann diesen Bruchpunkt erreicht hat , begannen wir, den Inhalt der Seite zu ändern. Aber Sie werden es jetzt sehen, wenn ich zurück zu hier gehe und ich ein div erstelle, ihm eine Klasse von Containern nahe geben, dass ich all dies in ein wenig setzen werde und dann das schließende div-Tag setzen werde. Jetzt sollten wir anfangen zu sehen, wie das aufgeräumt wird. Ich werde die Seite aktualisieren. Jetzt bei einer größeren Bildschirmbreite, können wir sehen, dass es nur genug braucht, was es besser lesbar macht. Aber wenn wir die Größe davon reduzieren wollen, ändert sich die maximale Breite des Containers. Wenn wir wirklich eng werden, geht es einfach in voller Breite. Sie können hier Breakpoints sehen. Sie sehen, wie es die Breite des Containers basierend auf verschiedenen Bildschirmgrößen ändert. Dies ist wirklich ein leistungsfähiges Feature von Bootstrap und wir bekommen Responsive Web-Design direkt aus dem Gate. Die Implementierung des Containers ist einer der einfachsten Gewinne, die wir in Bootstrap haben können. Schauen wir uns an, was wir sonst noch in Bootstrap beheben können. Eine Gelegenheit, die ich hier sehen kann, abgesehen davon , dass ich diesen Titel loswerden muss. Lassen Sie mich das einfach reparieren. Eine Sache, die wir hier reparieren können, ist dieser Tisch. Wenn ich zur Bootstrap-Dokumentation zurückkehren möchte, geben Sie Tabellen ein und schauen wir uns an, wie wir Tabellen mit Bootstrap auf eine nette Art und Weise gestalten können. Das erste, was wir tun müssen, ist der Tabelle eine Klasse von Tabelle zu geben. Auch wenn wir die Klassen in Bootstrap nutzen, können wir einfach eine Klasse einfügen und sofort einige Stile bekommen. Lassen Sie uns der Tabelle einfach eine Klasse von Tabelle geben. Dann haben wir plötzlich einen gestylten Tisch. Wie großartig ist das. Wir haben hier noch ein paar Möglichkeiten. Wir können den Kopf in eine andere Farbe machen. Vielleicht benutzen wir einen Teekopf auf unserem Tisch, damit wir auf den Kopf gehen können. Wir haben eine Thead Klasse, Feed Doc. Dann würden wir das hineinsetzen und dann das schließende Tag einfügen. Lassen Sie uns das speichern und schauen Sie sich an, wie das aussieht. Ja, jetzt haben wir eine Dock-Überschriftenzeile, und jetzt wurde die Schriftart in die Farbe Weiß geändert. Vielleicht wollen wir für unsere Dienstleistungen ein paar Karten. Gehen wir und tippen Sie Karten ein. Ich erinnere mich, dass ich vorher einen Code als Beispiel eingefügt habe. Ich werde nur das auswählen. Ich werde hier einen Abschnitt erstellen, in dem ich einige Karten hineinlege. Das ist die erste Karte. Ich kann eine zweite Karte einlegen. Ich werde auf „Speichern“ drücken und sehen, was passiert. Diese werden übereinander angezeigt. Anzeigeblock, wenn Sie sich erinnern. Was wir tun können, ist in unsere style.css gehen und es so haben, dass unsere Karten inline angezeigt werden. Wir können den Stil ändern, der bereits in Bootstrap existiert. Wir können Inline-Block anzeigen, Speichern drücken, und dann plötzlich werden sie inline angezeigt. Jetzt möchte ich ihm etwas Marge geben, also werde ich ihm eine gewisse Marge wie diese geben. Ich werde es 10 Pixel machen. Dann haben wir plötzlich eine Karte mit etwas Marge. Ich werde das duplizieren. Was Sie hier sehen können, ist, dass wir Bootstrap nutzen, aber dann sind wir auch in der Lage, Urne und Stile hinzuzufügen und darüber zu modifizieren. Bootstrap nimmt eine Menge der Grundarbeiten aus ihm heraus. Dann können wir kommen und unsere eigenen Stile verwenden und nur auf die Klassen verweisen, die sie erstellen, aber dann auch die Klassen ändern, die sie erstellen, um etwas zu erhalten, das wir wollen. Für unsere Dienstleistungen, vielleicht setzen wir Geschäft, vielleicht setzen wir Design. Ich erfinde das nur hier. Drucken und Beratung, Design, Druck eine falsche Rechtschreibberatung dort. Dann finden wir ein Bild für jede dieser Karten. Ich denke nicht, dass es sich lohnt, zu gehen und Sourcing und neues Bild nur für dieses Beispiel. Ich werde nur für den SRC jedes Bild-Tags verwenden, ich werde nur in Foto setzen. Drücken Sie auf „Speichern“. Jetzt können Sie sehen, dass wir drei Karten haben und sagen, zum Beispiel, das war unsere über Seite. Du bist zu Diensten gegangen. Sie könnten auf diese Schaltflächen klicken und plötzlich zu dieser Seite weitergeleitet werden. Im Moment müssen wir nur für einen Platzhalter hash, aber Sie könnten dies einfach hier aktualisieren. All dies ist nur ein Link-Tag, aber es wird mit Bootstrap so gestaltet, dass es wie eine Schaltfläche aussieht. Wir können auch den Text auf diesen ändern, so könnten wir sagen, Beratungsdienste. Dann aktualisieren Sie das für das Design hier oben. Schauen Sie sich unsere Design-Services an. Wir haben diese Vorlage bereits eingerichtet und wir können einfach eingehen und sie ändern. Das ist die Macht von Bootstrap. Ich hoffe, Sie haben genug, um einen weiterzumachen. Im nächsten Video werde ich mit Ihnen Ihr Klassenprojekt teilen. 30. Bonus: Styling von Kontakt und Layout der Seite: Das letzte Video sollte das letzte Video in dieser Klasse sein, aber ich erinnerte mich nur daran, dass ich euch versprochen habe, dass wir ein Formular stylen würden, also füge ich dieses Video als Bonusvideo ein, und wir haben hier die Möglichkeit, die anderen beiden HTML-Seiten, die wir in unserem Projekt haben. Ich spreche über contact.html und layout.html, und in contact.html haben wir ein Formular, also ist das eine gute Gelegenheit, Ihnen zu zeigen, wie wir ein Formular mit Bootstrap stylen können. Ich werde eine neue Registerkarte öffnen, damit wir die Bootstrap-Dokumentation offen halten können, und genau wie zuvor werde ich contact.html ziehen, damit das in unserem Browser geöffnet ist. Hier ist unsere schlecht gestylte Form. Aber was ich tun werde, ist das mit Bootstrap zu modifizieren und es wird hoffentlich viel schöner aussehen. Um zur Dokumentation zurückzukehren, werde ich auf „Formulare“ klicken und wie wir hier sehen können, wird unser Formular so aussehen. Haben schöne Etiketten und Polsterung, und schöne Buttons sowie, und hier können wir den Code sehen, der dieses Formular hier generiert. Aber zuerst in unserem neuen Dokument müssen wir Bootstrap enthalten, also was ich tun werde, ist meinen Code-Editor zu öffnen, und Sie können hier in index.html sehen, das Tag, das wir verwenden, um Bootstrap in den Index aufzunehmen. html. Wir müssen das in contact.html kopieren, um Bootstrap auch in dieses Dokument aufzunehmen. Alles, was ich tun werde, ist das zu kopieren, zu contact.html zu wechseln, und unter dem Titel-Tag fügen Sie das einfach ein. Ich werde auf „Speichern“ drücken und dann hier rüber gehen, und jetzt sollten wir anfangen, unser Formular ein wenig ändern zu sehen , indem wir Bootstrap einschließen. Da gehst du. Die Schaltfläche hat sich geändert, der Rand hat sich geändert, die Schriftart hat sich geändert, aber es sieht immer noch nicht so toll aus. Was ich tun werde, ist zurück zu hier zu gehen und zu verweisen, was hier in Bootstrap ist. Ich werde das auf eine Seite des Bildschirms verschieben, und so können wir ausschließlich damit arbeiten. Das erste, was Sie bemerken werden, ist, dass es offensichtlich ein Formularelement gibt, das wir haben, und dann gibt es verschiedene divs mit der Klasse der form-group, und in diesen divs haben Sie all die verschiedenen Dinge , die diesen Teil des Formulars ausmachen. Sie haben das Label, die Eingabe und einen Text, falls ein Validierungsfehler vorliegt. Hier unten haben Sie die gleiche Sache, Etikett und Eingabe, hier unten, Label-Eingabe. In diesem Fall haben Sie die Beschriftung unter der Eingabe. Dann schließlich haben Sie eine Schaltfläche vom Typ submit anstelle einer Eingabe vom Typ submit, sehr ähnliche Sache, aber nur ein anderes Element. Das erste, was wir tun müssen, ist, jeden Teil des Formulars in Formulargruppe zu wickeln, und das wird uns das Styling geben, das es über mehrere Zeilen aufteilt, also was wir tun können, ist, diese br-Tags loszuwerden, wir brauchen sie nicht mehr, und jetzt, sobald das fertig ist, werde ich ein div öffnen, ihm die Klasse der Formulargruppe geben, und dann werde ich das einrücken, das div-Tag schließen, und ich werde dies für den Rest der Felder tun, also werde ich das schnell durchlaufen. Wir haben jeden von ihnen in eine Formulargruppe eingewickelt, aber die andere Sache, die Sie bemerken werden, ist, dass unser Label nur dort sitzt , ohne dass irgendwelche HTML-Tags umwickeln. Was wir verwenden können, ist dieses HTML-Element namens label, um dies ein bisschen schöner zu machen, also was ich tun werde, ist alles über Labels mit dem Element des Labels zu wickeln. Lasst uns das jetzt machen. Jetzt werden Sie feststellen, dass es ein Attribut gibt, das wir noch nicht haben, es heißt das for-Attribut, und was das tut, ist, nachdem Sie eine ID für die Eingabe festgelegt haben, können Sie diese ID in das fore-Attribut einfügen, und das wird geben an, dass diese Beschriftung vor dieser bestimmten Eingabe ist. Nicht zu 100 Prozent notwendig, aber lassen Sie uns wie ein Beispiel folgen und ein Vorderattribut einfügen. Nun gibt der zweite Teil davon tatsächlich die gleiche ID für die Eingabe. Aber vorher gibt es noch eine andere Sache, die wir auf unsere Eingabe setzen müssen, und das ist die Klasse der Formularsteuerung. Genau wie hier werde ich diese Eingabe auf eine andere Zeile verschieben, und ich werde vor dem Namen. Eigentlich spielt es keine Rolle, wo es sich in der Position der Eingabe befindet. Ich werde es einfach die Endklassen-Formular-Steuerung setzen. Jetzt kann ich die ID des Vornamen-Feldes einfügen, und das sollte eine der Formulargruppen ausfüllen. Ich werde jetzt durchgehen und diese Änderungen für den Rest der Formulargruppen vornehmen. Das ist fast alles, was wir brauchen, um dieses Formular schön scharf zu bekommen, die letzte Sache ist, diese Eingabe des Typs zu senden, um die Schaltfläche des Typs zu ändern, und die Hauptunterschiede zwischen einer Eingabe vom Typ submit ist der Wert, ist, was wird auf der Schaltfläche angezeigt, geht in das Wertefeld einer Eingabe, aber auf einer Schaltfläche geht es zwischen diesen beiden Schaltflächen-Tags. Zuerst werde ich dies in Schaltfläche ändern, und anstelle des Wertes hier werde ich den Anfang des Tags erstellen und dann das schließende Tag einfügen. Der letzte Schritt dafür ist, in die Klasse zu setzen, also wird es alle Stile einer Schaltfläche in Bootstrap aufnehmen, also btn und dann btn primär. Speichern Sie das, und jetzt, wenn wir zu unserem Kontaktformular gehen, sollte es ein bisschen anders erscheinen. Hoffen wir, dass es viel besser aussieht. Da gehen wir, wir können sehen, dass es jetzt alles auf zwei verschiedenen Zeilen gebrochen ist, und der Knopf sieht ein bisschen anders aus. Aber das größte Problem dabei ist natürlich die Polsterung und die Marge, so dass wir gerade jetzt etwas Marge haben. Speichern Sie das, und jetzt haben Sie ein schöneres formatiertes Formular. Ich werde es dort für Formulare lassen. Es gibt noch viel mehr, was Sie tun können, damit Ihr Formular anders aussieht. Sie können verschiedene Eingaben hinzufügen, also schauen Sie sich die Referenz hier für Styling-Formulare an. Ich werde jetzt in layout.html gehen und Ihnen zeigen, wie wir ein ähnliches Layout erhalten können , wie wir in diesem Beispiel gesehen haben, das wir kopiert haben. Was ich tun werde, ist unsere layout.html zu schnappen, legen Sie sie hier und dann werde ich zurück zu W3-Schulen gehen, und denken Sie daran, dass wir das auf der HTML-Layout-Seite gefunden haben. Was ich tun werde, ist, wie Sie sehen können, dass dieser erste Abschnittskopf die volle Breite erweitert und dann haben Sie Abschnitte und Asides, glaube ich. Aber lassen Sie uns einfach reingehen und diese Datei öffnen, also gehe ich in HTML und öffne layout.html. Wie Sie hier sehen können, haben wir ein Header-Element mit einer Klasse von Header, ein Abschnittelement mit einer Klasse von Abschnitt und Artikelelement mit einer Klasse von Artikel und schließlich ein Fußzeilenelement mit einer Klasse von Fußzeile. Wir haben alle Elemente zum Ziel und alle Stile dort , um einen bestimmten Stil zu erstellen, also was ich tun werde, ist, anstatt ein ganz neues Stylesheet zu erstellen. Ich werde nur ein Style-Tag hinzufügen, damit wir einige Stile einbetten können. Style-Opening-Tag, Style-Close-Tag und eine Sache, die im Kurs nicht wirklich erwähnt wurde , ist , dass wir Style-Tags überall in unserem Dokument einfügen können, es muss nicht im Kopf sein, aber es wird empfohlen, im Kopf, wenn Sie einen Kopfbereich, dieses spezielle Dokument haben, haben wir eigentlich keinen Kopfabschnitt, und für dieses spezielle Beispiel müssen wir wirklich keinen einrichten. Aber in der Regel würden Sie natürlich einen Kopfteil haben. Zuerst werde ich darauf verweisen, geben Sie der Kopfzeile eine Hintergrundfarbe von Grau und eine Textfarbe von Weiß. Ich werde dann Text ausrichten Mitte, und mal sehen, was wir jetzt bekommen. Cool. Genau hier haben wir eine Menge Polsterung, also werde ich jetzt etwas Padding hinzufügen, ich habe Polsterung von 30 Pixeln. Da gehen wir. In Ordnung, das ist also unsere Kopfzeile. Der nächste Abschnitt ist dieser nav Abschnitt hier unten. Ich sollte den Wortabschnitt nicht verwenden, da Sie möglicherweise mit diesem tatsächlichen Abschnittelement verwechselt werden. Aber das nächste Block-Level-Element, das wir stylen können, ist dieses nav Element hier. Was ich tun werde, ist hier nav zu gehen, geben Sie ihm eine Hintergrundfarbe von hellgrau. Ich werde es etwas Polsterung geben und mal sehen, was passiert. Da ist es, aber natürlich nimmt es die volle Breite ein, weil es ein Element auf Blockebene ist. Was ich tun werde, ist für nav und das benachbarte Element, das Artikel ist, setzen Sie diese auf Inline-Block. Ich werde Inline-Block anzeigen. Sie können hier sehen, dass es tatsächlich zu einer neuen Linie bricht. Aber wenn wir den Bildschirm erweitern, werden Sie sehen, dass er zusammen auftaucht. Was wir brauchen, um das zu beheben, ist nur die Breite des Artikelabschnitts einzuschränken. Ich werde es auf die Breite von 500 Pixeln beschränken, gehen Sie zurück zu hier, und jetzt können Sie das nebeneinander sehen. Wie Sie hier sehen können, ist dieser Abschnitt nicht vertikal nach oben ausgerichtet, also werde ich die nächste vertikale Linie reparieren, oben. Speichern Sie das. Jetzt ist es hier oben. Ich werde dem Artikel einen gewissen Spielraum geben, damit er nicht so weit oben gegen die Grenze steht. H_1 war in diesem Beispiel etwas größer. Ich werde Artikel mit einem abhängigen Selektor hier, Artikel H_1, geben. Dies wird alle H_1's Inside Artikel auswählen, und ich werde die Schriftgröße doppelt so groß machen. Da gehen wir. Der letzte Abschnitt ist die Fußzeile und es hat einen ähnlichen Stil wie Header, also werde ich nur Header Wort für Wort kopieren. Ich werde es hier runterlegen und das in Fußzeile ändern. Wie Sie hier sehen können, verwenden wir Element-Level-Selektoren den ganzen Weg durch, aber wir haben hier auch Klassen. Wir könnten auch über Klassen anvisieren. Anstelle von Header könnten wir Punkt-Header verwenden, da wir eine Klasse von Header haben. Wir könnten eine Klasse von nav anstelle des nav Element Selektors verwenden. Das würde uns erlauben, ein anderes Navi zu erstellen, das diese Klasse nicht unbedingt hatte und diese Regeln nicht betroffen haben. Ich werde das speichern, sehen, wie das aussieht und jetzt haben wir diese Fußzeile. Das nächste, was Sie bemerken, ist, dass sich dieses Element nicht bis zur Fußzeile erstreckt. Was wir dafür tun müssen, ist, dem Abschnitt eine bestimmte Höhe zu geben und dann beide dieser Elemente einer 100-prozentigen Höhe seines übergeordneten Elements entsprechen. Was ich tun werde, ist nur hier, ich werde eine Regel für die Ausrichtung auf den Abschnitt setzen. Ich werde dem Abschnitt eine Höhe von 500 Pixeln geben. Was ich tun werde, ist, dass diese eine Höhe von 100 Prozent haben. Das wird 100 Prozent des scheinbaren Elements sein, das Abschnitt ist. Speichern Sie die Seite und laden Sie sie neu. Leider haben wir hier einige Überlappungen, und das liegt daran, dass wir Polsterung haben. Um das zu beheben, werde ich die Polsterung aus dem Navi selbst entfernen. Jetzt können Sie sehen, dass es sich aufstellt, aber es gibt keine Polsterung darauf. Was ich tun kann, ist die ul Polsterung geben, nicht das nav. Ich werde ul Polsterung zehn Pixel nav. Sie können sehen, dass beginnt, ein bisschen schöner zu erscheinen. Die Punktpunkte gehen zur Seite, aber wir werden sie sowieso nicht verwenden, weil wir das Beispiel hier erstellen. Eigentlich, wenn wir es mehr Polsterung geben, kommt es wieder. Wir können das leicht erreichen, indem wir in einem Listenstil, Typ von keiner, um diese Punktpunkte loszuwerden. Also, jetzt sieht es sehr ähnlich aus wie wir hier haben. Wenn wir das Fenster erweitern, können wir sehen, dass diese Abschnitte auf einen bestimmten Punkt reagieren. Dann, wenn es hier ankommt, hört es auf. Wir werden einige reaktionsfähigere Stile brauchen. Also, um diesen Stil auf einer kleineren Bildschirmgröße zu beheben, haben Sie es erraten, ich werde ein Media-Tag verwenden, also werde ich es an die Spitze stellen. Der Grund, warum ich es zu einem Top setze, ist, dass es eine kleine Sache ist. Aber im Wesentlichen, wenn ich diese Seite in einem langsamen Netzwerk auf Mobilgeräten laden sollte, werden die Stile von oben nach unten geladen. Diese würden alle zuerst geladen. Wenn ich dann Medien unten hätte, würde es die mobilen Stile zuletzt laden. Es kann diese Art von Verzögerung geben, wo es die Desktop-Stile anzeigt und dann, wenn es die mobilen Stile lädt , ist es eine sehr kleine Sache, über die ich mich keine Sorgen machen würde, aber deshalb setze ich es an die Spitze und ich werde die Haltepunkt hier. Wenn wir diese volle Breite öffnen und den Inspektor öffnen, gibt uns der Inspektor tatsächlich die Breite des Fensters. Ich werde das runterziehen, bis es kaputt ist. Es gibt eine kleine Verzögerung, aber der Haltepunkt scheint um 640 zu liegen. Was ich tun werde, schließen Sie das, gehen Sie zurück und sagen Sie maximale Breite, 640 Pixel. Mal sehen, was hier los ist. Wenn ich die Breite des Fensters reduziere, wie Sie hier sehen können, klopft dieser Artikelabschnitt nach unten. Was ich jetzt wirklich gerne mache, wenn ich Code debugge, ist, den Inspektor zu verwenden. Ich empfehle definitiv, wenn Sie mit ihm vertraut sind, verwenden Sie es auf jeden Fall. Ich werde Alt-Befehl I auf Mac mit Chrome drücken. Was ich tun kann, ist mit der rechten Maustaste auf diesen Text zu klicken, der die Seite hinuntergegangen ist und das Element inspiziert. Ich inspiziere den Artikel hier und ich kann sehen, dass eine Breite von 500 Pixeln gilt. Wir haben jetzt eine Bildschirmgröße von unter 500 Pixeln. Es wird einige Probleme bei dieser Bildschirmgröße verursachen. Was ich tun werde, ist anstelle von 500 Pixeln, ändern Sie dies auf 250 Pixel. Sehen Sie, ob das funktioniert, auch wenn Sie eine kleinere Bildschirmgröße nach unten hinzufügen. Es bricht immer noch bei einer kleineren Bildschirmgröße. Vielleicht werde ich es zu 150 Pixeln machen. Dies geschieht alles nur in unserem Browser. Wenn ich also die Seite aktualisiere, diese Änderungen nicht dauerhaft. Aber wenn ich hier reingehe und eine Regel für Artikel erstelle, also unter der Breite von 640 Pixeln, die Breite der Artikel jetzt 150 Pixel sein. Nun, Sie möchten wahrscheinlich mehr relative Begriffe hier verwenden. Aber in diesem einfachen Beispiel werde ich nur einen festen Wert eingeben. Eine weitere Sache, die wir müssen sicherstellen, dass dies überschreibt, was hier unten in dieser Regel Dekoration ist das wichtige Tag. In diesem Fall ist es in Ordnung, wichtig zu verwenden. Denken Sie daran, Sie müssen vorsichtig sein mit wichtigen, aber wir wollen wirklich, dass die Breite sinkt. Die Alternative wäre, dies zu ändern und dies eher zu einem relativen Begriff zu machen. Aber für dieses Beispiel werde ich nur wichtige werfen. Ich werde die Seite aktualisieren und Sie werden sehen, dass es noch keinen Unterschied gibt. Aber wenn ich die Breite des Fensters verkleinere und es zu diesem Bruchpunkt von 640 Pixeln kommt, wird der Text kleiner. Dort können Sie sogar bei einer winzigen Bildschirmgröße sehen, es ist immer noch in Ordnung. Jetzt stört es mich ein bisschen, dass es, wenn es hier angekommen ist, einfach zu klein ist. Also werde ich versuchen, das mit einer relativen Breite zu erstellen. Ich werde das zurücklegen, und ich werde das auf eine relative Breite von 55 Prozent ändern. Speichern Sie das und noch einmal werden Sie keine Änderungen sehen, bis wir tatsächlich diesen Haltepunkt von 640 Pixeln erreichen. Aber wenn ich weiter nach unten gehe, werden Sie sehen, dass es diesen Haltepunkt erreicht und dann eine relative Breite hat. Wenn wir den ganzen Weg runter gehen, wird es immer noch funktionieren. Ordnung, das ist so weit, wie ich in diesem Bonus-Video gehen wollte, Sie können jetzt sehen, wie ich durch eine Styling-Herausforderung mit CSS arbeiten. Ich hoffe, dass das zeigt, dass es Herausforderungen auf dem Weg mit CSS gibt, Sie werfen einige Stile hinein, Sie erkennen, dass es andere Elemente auf der Seite betrifft. Dann ändern Sie verschiedene Attribute, ändern Sie manchmal auch die Struktur von HTML, um das Aussehen zu erstellen, das Sie suchen, und stellen sicher, dass es auf jeder Bildschirmgröße funktioniert. Ich hoffe, dass dieses Video eine gute Ergänzung zu Ihrem Lernen in dieser Klasse war. Im nächsten Video werden wir alles zusammenfassen und Ihnen den Einstieg in Ihr Klassenprojekt bringen. Also sehe ich dich in der nächsten. 31. Schlußbemerkung und Kursprojekt: In Ordnung, also hoffe ich jetzt, dass Sie bereit sind, den Rest Ihrer statischen Content-basierten Website mit HTML und CSS auszubauen . Denken Sie daran, Jungs, wenn Sie irgendwelche Tipps oder Anleitungen benötigen, achten Sie darauf, Ihren Kommentar in das Diskussionsfeld unten zu hinterlassen, und ich werde mein Bestes tun, um Sie in die richtige Richtung zu zeigen. Was die Bereitstellung Ihrer Website betrifft, die sie live ins Internet bringt, habe ich das zuvor in meiner Klasse behandelt und die Webentwicklung verstanden. Gehen Sie also einfach zum ersten Video über die Bereitstellung in dieser Klasse und Sie haben Ihre Website in kürzester Zeit einsatzbereit, wenn Sie das wollen. Das schließt also diese Klasse auf HTML und CSS ab. Offensichtlich gibt es, obwohl sie tief in diese beiden Sprachen eingehen, viel mehr im Web als nur Struktur und Styling. Also bleib dran. Ich plane, weitere Kurse für Sie zu veröffentlichen, um Ihr Wissen über Web-Entwicklung in den kommenden Monaten aufzubauen . Also danke fürs Ansehen und ich hoffe, Sie in einigen meiner anderen Klassen zu sehen.