CSS für modernes responsives Webdesign erstellen Websites von Grund auf HTML5 CSS3

1. 0 CSS Einführung in die Einführung: Hey, willkommen im QuickStart-Leitfaden zur Anwendung von CSS. Stylen Sie Ihre Webseiten für Anfänger. Mein Name ist Lawrence. Ich werde dein Instruktor für diesen Kurs sein. Ich komme mit langjähriger Erfahrung in der Webentwicklung zu mir. Ich habe es sehr genossen, mit CSS zu arbeiten, weil es Ihnen wirklich die Möglichkeit gibt, Ihre Webseiten zu entwerfen und zum Leben zu erwecken. Wir werden die gesamte gängige Syntax von CSS abdecken. So fügen Sie CSS hinzu und erstellen ein Stylesheet zu Ihrer HTML-Seite, wählen Sie Seitenelemente aus und wenden dann verschiedene Styling-Eigenschaften auf diese Seitenelemente an. Festlegen von Hintergründen von Farben, Hintergrundbildern, was das Box-Modell ist, Einrichten der verschiedenen Ränder, Polsterungen und Rahmen für die von Ihnen ausgewählten Seitenelemente , wie Sie den Text aktualisieren können und bekämpfte Stile, einschließlich verschiedener Schriftfamilien Google Fonts verwenden und Schriftarten von externen Websites mithilfe der Anzeigeeigenschaft importieren externen Websites mithilfe der Anzeigeeigenschaft und wie Sie die Seitenelemente und positionierten Seitenelemente anzeigen können , schweben Sie die Seitenelemente, Pseudoklassen Arbeits - und Pseudoelemente und wie Sie diese in Ihrem Design anwenden können. Wir werden auch erläutern, wie Sie grundlegende Website-Vorlagen mit CSS-Floats, CSS Flexbox sowie CSS Grid erstellen können grundlegende Website-Vorlagen mit CSS-Floats, . Also alle modernen Techniken, die Sie kennen müssen, um Websites von Grund auf neu zu erstellen. Das kommt alles in den kommenden Lektionen. Es gibt auch einen herunterladbaren Ressourcenleitfaden, der den Quellcode sowie Handy-Links, Tipps und Ressourcen enthält , die Ihnen beim Durchlaufen der Lektionen des Kurses helfen . Eine der besten Möglichkeiten, um zu lernen, besteht darin, den Code selbst auszuprobieren. Hab keine Angst davor, es zu versuchen. Probieren Sie es in Ihrem eigenen Editor aus und sehen Sie, was passiert. Ich weiß, dass du dich freust , loszulegen. Fangen wir in der nächsten Lektion mit CSS an. 2. 1 CSS zur Seite hinzufügen: Es wird beschrieben, wie Sie CSS-Styling zu Ihrer HTML-Seite hinzufügen können. Wie können Sie auch Elemente auswählen und einige einfache Eigenschaftswerte auf diese Elemente anwenden einige einfache Eigenschaftswerte auf , damit sie sie auf der Webseite wiedergeben können. Css ist keine Programmiersprache wie JavaScript und es ist keine Markup-Sprache wie HTML. Css ist eine Stylesheet-Sprache und der Zweck von CSS besteht darin, eine einfache strukturierte HTML-Seite zu erstellen, die Seitenelemente auszuwählen und Styling auf die Elemente anzuwenden. Ich habe eine einfache HTML-Seite und wir werden den Seitenelementen etwas Styling hinzufügen. Es gibt verschiedene Möglichkeiten, wie Sie der Seite Styling hinzufügen können , sodass Sie es direkt innerhalb der Style-Tags hinzufügen können. Wählen Sie das Element mit einem Header-Tag aus. Ich würde das Element zuerst angeben. Dies ist also die Auswahl des Elements, auf das wir das Styling anwenden wollten . Wenden Sie dann die Styling-Eigenschaften an, für die wir die Farbe des Textes innerhalb des Header-Elements festlegen wollten , wir geben die Farbe auf Rot an. Dann erfüllen wir einen Wert , der ein Wert von Rot sein wird. Was das getan hat, ist, dass transformierter Text innerhalb der Kopfzeile ihn rot gemacht hat. Styling kann auch direkt innerhalb des Elements innerhalb des Style-Attributs angewendet werden , wobei das Stilattribut angegeben wird. Und hier werden wir einen Hintergrund setzen. Farbe. Styling-Eigenschaften werden gleich sein und dann weisen wir ihm einfach einen Wert zu. Also weise ich den Styling-Eigenschaften einen Wert von Schwarz zu. Wir legen also für dieses Element die Stileigenschaft der Hintergrundfarbe Schwarz fest. Was das bedeutet, ist, dass die Hintergrundfarbe in Schwarz umgewandelt wird. Was sind die Hauptnachteile beim Platzieren in Ihrem HTML , ist, dass es schwer zu finden, schwer zu aktualisieren ist und Sie die Elemente durchgehen müssen . Und was passiert ist, wenn Sie es als Stilattribut festlegen, wird dies tatsächlich die anderen Styling-Eigenschaften außer Kraft setzen, da dies zum nächsten Teil von das Element, da es sich direkt innerhalb des Attributs befindet. Wenn wir dies also auf Schwarz aktualisieren würden, passiert es tatsächlich, dass der Style-Header tatsächlich überschrieben wird , wenn wir dies ändern. Es spielt keine Rolle, weil wir eine weitere Stileigenschaft hinzufügen es Um es direkt innerhalb der Seitenelemente hinzuzufügen , sollten Sie es vermeiden, es als Style-Attribut direkt innerhalb des Seitenelements hinzuzufügen Style-Attribut direkt innerhalb und eine Auswahl damit zu treffen, entweder mit innerhalb der Style-Tags oder innerhalb des Stylesheets, was die Best Practices ist wenn Sie es mit dem Stylesheet hinzufügen. Es gibt viele Vorteile es wirklich einfach zu aktualisieren, dasselbe Styling auf mehreren HTML-Seiten zu teilen und was für ein Stylesheet, eine separate Datei, die das Styling enthalten wird für die HTML-Seite. Und dies ist eine Datei , mit der aus dem HTML-Text verlinkt wird . Wir haben ein Link-Tag eingerichtet und dann das HRF verwendet, es mit dem Ort des Stylesheets zu verknüpfen. Und dann wird die Verwendung des REL-Attributs zur Unterstützung ein Stylesheet sein. Lass uns weitermachen und wir werden eine brandneue Datei erstellen . Ich behalte es im selben Verzeichnis. Und dort wenden wir die Stylesheets und die Stileigenschaften auf die Seitenelemente der HTML-Datei an. Ich habe es als Style-CSS gespeichert. Und dann verlinken wir mit diesem CSS den gleichen Header. Und dann wenden wir eine Farbe auf diesen Header an. Aktualisieren wir das also und legen Sie die Farbe auf den zu lesenden Text fest. Nachdem wir nun das mit dem Stylesheet angewendete Element ausgewählt haben , aktualisieren wir das Seitenelement mit einem Header-Tag. Und das ändert es in Rot weil wir am Stylesheet arbeiten werden. Und das wird die separate Datei sein , die das gesamte CSS enthalten wird. Wenn wir eine zweite HTML-Datei erstellen würden, können wir mit demselben Stylesheet verknüpfen. Wenn wir eine zweite erstellen , die Index zwei heißt, gehen wir zur zweiten Seite. Ich werde ein Update machen, damit man zwei sagt und der ursprüngliche immer noch eins sagt. Wenn wir nun den Header auf beiden Seiten auswählen und aktualisieren möchten , müssen wir nur ein Update des Stylesheets vornehmen , mit dem beide verknüpft werden. Und jetzt wird die blaue Farbe auf beide Überschriften auf beiden Seiten angewendet die blaue Farbe auf beide , da beide mit demselben Stylesheet verknüpft sind. Das ist der Vorteil der Verwendung eines separaten Stylesheets , um Aktualisierungen des Stylings vorzunehmen , das Sie wirklich einfach damit verknüpfen können , und Aktualisierungen vornehmen, was sich auf alle -Dateien, die alle HTML-Dateien enthalten, die mit dieser bestimmten CSS-Datei verknüpft sind. Das CSS beginnt mit dem Einrichten eines Selektors. Dies ist also das Element und das Element, auf das Sie diese bestimmte Regel anwenden möchten. Dies kann auch für mehrere Elemente gelten , so dass das Gleiche ist. Wenn wir also alle Elemente auswählen , die Listenelemente sind, wird dies auf alle Listenelemente angewendet. Wenn wir das Listenelement auswählen, sehen wir, dass die Aufzählungspunkte für alle Listenelemente jetzt alle blau sind . Sie können es auch auf alle Anker-Tags anwenden. Und jetzt wird der Text auf beiden Dateien aktualisiert , um für die Anker-Tags blau zu sein. Und das ist der Selektor. Die Auswahl verarbeitet den sogenannten Selektor. Und sobald Sie die Auswahl getroffen haben, wählen Sie als Nächstes die Eigenschaft aus, die Sie verwenden möchten. In diesem Fall verwenden wir die Eigenschaft color und setzen den Eigenschaftswert auf blau. also den Eigenschaftswert ändern, wird ein anderer Wert auf diese Farbeigenschaft angewendet . Und beide zusammen werden die sogenannte Deklaration sein. Wir deklarieren, dass die color-Eigenschaft innerhalb der Anker-Tags, die aus der HTML-Datei der Webseite ausgewählt wurden, als rot innerhalb der Anker-Tags, die aus der HTML-Datei der Webseite ausgewählt wurden, Sie können mehrere Eigenschaftswerte in den Regelsatz innerhalb der Auswahl hinzufügen in den Regelsatz innerhalb der Auswahl innerhalb der geschweiften Klammern. nur eine zweite Zeile hinzufüge, ich nur eine zweite Zeile hinzufüge, stelle ich die Hintergrundfarbe ein und aktualisiere die Hintergrundfarbe dieser auf Schwarz. Es wird auf alle übereinstimmenden Elemente angewendet , die dieser Auswahl entsprechen, bei denen wir die Semikolons verwenden, um eine Trennung dieser verschiedenen Aussagen vorzunehmen . Selbst wenn wir keine separaten Zeilen haben würden, wird dies immer noch funktionieren, solange wir das Semikolon haben, das diese Eigenschaftswerte trennt, um es zu trennen. Daher ist es in der CSS-Datei lesbarer , wo wir es auf eine neue Zeile setzen, die CSS-Eigenschaft, der Name und der Wert durch den Doppelpunkt getrennt sind. Also mach weiter und erstelle eine HTML-Datei. Sie können eine Reihe von HTML-Elementen hinzufügen. Wenden Sie das Styling an, erstellen Sie eine neue CSS-Datei, wählen Sie einige Elemente auf der Seite aus und wenden Sie etwas Styling auf diese Elemente an, und Sie machen sich bereit, mit der nächsten Lektion fortzufahren. 3. 2-Element-Auswahl: Es würde untersuchen, wie wir eine Auswahl treffen können. Auswahl ist also der Schlüssel zum Auswählen des Seitenelements, auf das Sie das Styling anwenden möchten. Sie können entweder die Tags, die Klassen der ID verwenden. Sie können auch eine Kombination ausführen, bei der Sie die Elemente mit der Angabe des Klassenselektors beendet haben . Es gibt auch einen Platzhalter, daher wird dies auf alle Seitenelemente angewendet. Sie können den Auswahlprozess auch gruppieren , indem Sie mehrere Seitenelemente, verschiedene Selektoren und ein Komma auswählen, das die Selektoren trennt. Um das Styling anzuwenden, müssen Sie eine Auswahl der Elemente treffen. Wir haben eine Reihe verschiedener Seitenelemente auf der Seite, und wir werden eine Auswahl dieser Elemente treffen. Zunächst können Sie es also mit dem Tag auswählen. Egal ob es sich um das div, die Kopfzeile, das Navi, die ungeordnete Liste oder das Listenelement handelt. Wir können es mit dem Tag auswählen, und dadurch werden alle Seitenelemente ausgewählt, die dieser Auswahl entsprechen. Wenn wir zum Beispiel das Navi auswählen möchten, wir weiter und arbeiten daran, eine Auswahl zu treffen und dann die Eigenschaften darauf anzuwenden. Ich werde die Eigenschaft der Hintergrundfarbe der Seitenelemente aktualisieren, die ein Navigationsgerät haben. Und wir setzen den Hintergrund auf gelb. Im visuellen Bereich der Webseite, HTML-Seite, können wir sehen, dass der Hintergrund gelb zum Navi wird. Wählen wir die Listenelemente aus und wir wenden auch eine Hintergrundfarbe auf die Listenelemente an. Ich wähle es aus und setze es auf einen blauen Hintergrund. Was wir hier sehen können , ist , dass der Regler, der das übergeordnete Element der ungeordneten Liste ist , sowie die Listenelemente einen gelben Hintergrund erhalten. Aber weil wir den Hintergrund speziell auf die Listenelemente angewendet haben , die innerhalb des übergeordneten Elements verschachtelt sind. Wir sehen, dass ein blauer Hintergrund auf diese Elemente angewendet wird. Sie können Elemente auch mit ihren IDs auswählen. Also lasst uns weitermachen und wir fügen eine ID hinzu. Wir haben mehrere Divs auf der Seite. Und dies ist eine andere Möglichkeit, Codeblock zu unterscheiden, wir anwenden möchten, um eine ID von einem zu wünschen. Wir können dieses Element also mit dem Hash auswählen und den ID-Namen angeben. Und ich werde auch eine Hintergrundfarbe auf diese anwenden . Und wir setzen diesen auf rot. Wir sehen, dass dieses bestimmte div jetzt die Eigenschaft hat, dass Hintergrundfarbe gelesen wird und darauf angewendet wird. Wenn wir alle Divs auswählen und eine Hintergrundfarbe von Bij auf alle Divs anwenden würden. Derjenige, der die Auswahl des Elements mit der ID eines Elements hat , ist immer noch rot. Wenn wir diese Eigenschaft nach unten verschieben, sehen wir, dass sie immer noch rot ist, weil wir spezifischer den IED sind und die Hintergrundfarbe von Rot anwenden. Und wenn wir dieses div entfernen würden bekommt auch eine Hintergrundfarbe von Beige, die darauf angewendet wird. Eine andere Möglichkeit, eine Auswahl zu treffen, ist die Verwendung der Klasse. Wir haben ein Div mit einer Klasse von Wrapper. Wenn wir dieses Element mit einer Wrapper-Klasse auswählen und eine Hintergrundfarbe für dieses Element festlegen möchten. Und das wird das Elternteil aller Elemente sein. Wählen Sie dies aus und stellen Sie es auf lila ein. Jetzt werden alle Elemente eine Hintergrundfarbe von Violett erhalten. Diejenigen, die im Wrapper verschachtelt sind, werden eine andere Styling-Hintergrundfarbe haben auf sie angewendet wird. Und das wird zu dieser Art von Effekt führen , bei dem die Eltern die ursprüngliche Farbe bekommen , die Kinder darin, auch verschiedene Farben für sie festlegen. Und das wirkt sich darauf aus, wie es ausgegeben wird. Sie sollten nur ein Element mit einer bestimmten ID haben. Dies ist also eine einzigartige Möglichkeit, eine Auswahl des Seitenelements zu treffen . Wenn Sie es mit Klassen oder den Tags auswählen, besteht die Möglichkeit, dass mehr als ein Element dargestellt wird. Wenn Sie mit dem Seitenelement wirklich spezifisch sein möchten, können Sie es mithilfe seiner Eigenschaften auswählen. Und wir haben eine ungeordnete Liste mit den Listenelementen, und sie haben alle Anker-Tags drin. Wenn wir uns also auf das Element konzentrieren und auflisten möchten, gebe ich ihm eine Klasse von Highlights, und ich gebe dem zweiten auch eine Highlight-Klasse. Wir möchten alle Listenelemente auswählen, indem die Highlight-Klasse hinzufügen, damit wir die Auswahl der Elemente treffen können , die wir tun können, wenn wir die Listenelemente auswählen sie zusammen mit eine Klasse von Highlights. Stellen Sie die Hintergrundfarbe für diese legen Sie die Hintergrundfarbe auf grün fest. Jetzt haben wir diese Seitenelemente ausgewählt und wenden uns auf eine grüne Hintergrundfarbe an. Dies sind also die Listenelemente mit der Klasse der Hervorhebung dieses Styling auf 0 in diesen Elementen und wenden das Styling darauf an. Wir können auch mit dem Platzhalter auswählen. Und das wird etwas sein, das auf alle Seitenelemente angewendet werden kann . Wenn wir eine Farbe von Rosa für den Text festlegen möchten, wählt der Platzhalter alle Seitenelemente aus. Darüber hinaus können wir Auswahlen durch Kommas gruppieren . Also lasst uns weitermachen und wir werden wieder eingehen und mehrere verschiedene IDs hinzufügen, und wir fügen ein weiteres Element mit einer ID von drei hinzu. Und wenn wir alle diese übereinstimmenden Elemente auf der Seite auswählen möchten , können wir durch Kommas getrennt werden. Wählen Sie also das Element mit einer ID von eins, ID von zwei, ID von drei. Und dann wählen wir auch das Element mit einer Highlight-Klasse aus. Alle übereinstimmenden Elemente werden diese Eigenschaft darauf angewendet. So können Sie die Auswahl, ausgewählte Elemente mit einer ID von 123 und auch die Elemente mit einer Highlight-Klasse gruppieren ausgewählte Elemente mit einer ID von 123 und eine rote Farbe auf diese Elemente anwenden. Seele der passenden hat jetzt eine Farbe von Rot. Der Rest von ihnen ist rosa. Und ich werde das tatsächlich aktualisieren, um weiß zu sein , weil wir Hintergrundfarben für alle haben. Und so können Sie den Auswahlprozess gruppieren, mehrere Seitenelemente auswählen und die Eigenschaften auf alle anwenden. Versuchen Sie also, Ihren HTML-Code zu erstellen und eine Auswahl mit den Tags, den IDs und den Klassen zu treffen. Und Sie können bereit sein, mit der nächsten Lektion fortzufahren. 4. 3 Farben und Hintergründe mit CSS: In dieser Lektion dreht sich alles um Farben und die verschiedenen Farbeinheiten , die wir dem Hintergrund hinzufügen können. Und das ist der Hintergrund des Seitenelements, das wir ausgewählt haben, sowie die Farbe, die sich auf die Textfarbe des ausgewählten Seitenelements auswirkt . Und wie können Sie dann Bilder zum Hintergrund hinzufügen, die Kurzschrift für die Bilder und dann die verschiedenen Arten von Farbwerten, und dann die verschiedenen Arten von die wir verwenden können, wie den RGB, den Hexadezimalwert, den RGBA, oder nur die benannten Werte für die Farben. Das kommt alles in dieser Lektion. Lassen Sie uns fortfahren und einige der Seitenelemente auswählen. Also wählen wir das Element mit dem Tag des Artikels innerhalb der Auswahl aus und wenden dann einige Eigenschaften auf dieses Element an. wir also das Element auswählen, für das wir eine Hintergrundfarbe anwenden möchten, um eine Hintergrundfarbe festzulegen, verwenden wir die Hintergrundfarbe der Eigenschaft. Dann können wir von dort aus die verschiedenen Farben auswählen. Farben können unter Verwendung der Farbnamen und der meisten typischen Farbnamen hinzugefügt werden. Also werde ich einfach im Editor aufgeführt. Und dies sind die häufig verwendeten Farbnamen, und Sie können den Hintergrund mit dem Farbnamen angeben. Wählen wir eine andere Seite aus, Elemente und wir wählen das Element mit der ID von drei aus. Und es gibt viele verschiedene Möglichkeiten die Farbwerte einzustellen. Sie können die RGB-Werte verwenden, also sind das die roten, grünen und blauen Werte. Dies geschieht durch Angabe des RGB. Dann würden die Klammern, die einen Wert von 0 bis 2550 als Seite 0 festlegen 2550 als Seite , den Betrag der Farbe darstellen , die wir anwenden möchten. 0 ist also der niedrigste. Wenn wir so viel wie möglich auf den roten RGB anwenden möchten, würden wir ihn auf 255 einstellen, was das Maximum ist. Wir setzen 0 grün und 0 blau auf das Element mit dem Hintergrund, mit der ID von drei. Dies führt zu einer roten Farbe wie dem Element mit einer ID von eins. Und mach eine Hintergrundfarbe, verwende einen Hex-Farbwert. Hexadezimalwerte sind also sechs Zeichenwerte innerhalb eines Hex-Formats, die mit dem Hash angegeben werden, um den Hexadezimalwert anzugeben , den wir verwenden werden. Ähnlich wie das, was wir bei RGB gesehen haben. Die ersten beiden Zeichen im Teufel werden die Menge an Rot darstellen. Beginnend mit einem Wert von 0 ist 0, was der niedrigste wäre. Und endet mit einem Wert von ff , der der höchste Wert für das Hex wäre. Wir werden dasselbe tun, da wir 0 Grün und 0 Blau auf die Hintergrundfarbe antworten , was auch zu der roten Hintergrundfarbe führt . Es gibt auch eine Option für eine RGBA. Rgba ermöglicht es uns, eine transparente Farbe einzustellen. Ich habe ein anderes Element mit der ID von vier erstellt. Und wir wählen das aus wenden Hintergrundfarbe auf das Element mit der ID von vier an. Und dieses Mal wird anstelle des RGB die RGBA verwenden. Und das wird bei RGBA angezeigt. Und der letzte Wert innerhalb der RGBA-Klammern zeigt an, wie viel Transparenz wir darauf anwenden werden. 0 würde also 0 dieser Farbe anwenden, das Element. Wir sehen, dass dies das Element mit der ID von vier ist. Es gibt also keine Farbe, die wir sichtbar sehen, die darauf angewendet wird. Wir können den ganzen Weg von 0 zu eins gehen. Wenn wir eine 0,5 machen, sind das 50% des Inhalts, der auf das Alpha des Farbblocks angewendet wird . Und da bekommen wir diesen helleren Rotton. Und das wird tatsächlich um 50% transparent sein. Wenn wir also ein Element oder einen Inhalt darunter hätten, würden wir feststellen, dass dieser Wert angezeigt wird. Wenn wir eine Hintergrundfarbe für den Körper festlegen würden, stelle ich die Hintergrundfarbe auf Blau ein. Die Ergebnisse für den RGBA werden zu einer violetten Farbe führen da die 50% der Farbe unter Verwendung des blauen Hintergrunds und 50% der RGB-Farbe schattiert Farbe unter Verwendung des blauen Hintergrunds und werden, was ist rot. Und das wird zu einem violetten Farbton führen. Wenn Sie den RGB a21 aktualisieren, wird das keine Transparenz sein, und das wird der volle Farbwert sein. Und dort erhalten wir einen Wert von Rot, der darauf angewendet wird. Wenn Sie also die RGBA verwenden, was darunter und die Farben darunter liegen, wird es wichtig sein, was die Farben sind , die verwendet werden. Dort können wir auch die Farbe der Schriftart einstellen. Wählen wir also die Farbe der Schriftart mit der color-Eigenschaft aus. Dafür können wir auch einen Farbwert darauf anwenden. Dies können entweder die benannten Farbwerte RGB, RGBA, eine Ergänzung zu den Hexadezimalwerten für die Farben sein. Es gibt auch eine Eigenschaft , mit der Sie dem Seitenelement Deckkraft hinzufügen können. Ähnlich wie das, was wir bei RGBA gesehen haben, wo dies alles innerhalb der einen Anweisung liegt und dafür einen Wert setzt. Und wenn wir den Opazitätswert für das Element festlegen, ist passiert, dass wir die Deckkraft erhalten haben, jedoch sowohl auf die Schriftart als auch auf die Hintergrundfarbe angewendet wurde . Dort wird die Schrift also sein. Etwas blau, da auf die Schriftart auch die Deckkraft von 0,5 angewendet wird, da den Hintergrund der 0,5 OPC angewendet wurde. Das wird jetzt mit dem übereinstimmen , was wir mit RGBA haben. Sie können also die Deckkraft verwenden , um die Deckkraft auf den Hintergrund anzuwenden. Für Hintergründe können Sie auch Bilder hinzufügen und verwenden. Und dann müssen wir die URL des Bildes in den Klammern angeben , in denen ein Bild direkt im selben Ordner liegt. Und dieses Bild wird als lokaler Ein-Punkt JPEG bezeichnet. Und wenn wir das Hintergrundbild anwenden, sehen wir, dass jetzt im Hintergrund des Körpers das Bild enthalten ist. Weil das Bild kleiner sein wird, dann müssen wir den vollständigen Hintergrund abdecken. Dort erhalten wir diesen Effekt, bei dem wir sowohl die Vertikale als auch die Horizontale wiederholen . Wenn Sie ein Bild festlegen, wird das transparent sein. Dies ist also eine transparente Version des Bildes. Wir sehen, dass jetzt der Hintergrund angezeigt wird , weil das Bild oben platziert wird und wir immer noch die Hintergrundfarbe von Blau darunter sehen. Wenn wir also Aktualisierungen an der Hintergrundfarbe vornehmen würden , wird die Einstellung auf eine gräuliche Farbe dazu führen wird , dass der Hintergrund immer noch angezeigt wird. Aber weil wir eine PNG-Datei verwenden, wird das transparent sein und wir können das Bild in den Hintergrund schauen. Sie können auch den Hintergrund für die Wiederholung des Hintergrundbildes steuern , wenn Sie keine Wiederholung oder ein Gefühl wünschen, das Sie in der Horizontalen oder Vertikalen wiederholen möchten . Verkleinern wir unsere Ansicht auf 100. Und auf diese Weise können wir die Wiederholung im Anzeigebereich sehen . Anhand der Hintergrundwiederholung haben wir die Möglichkeit festzulegen, wie es wiederholt werden soll. Wir können es also so einstellen, dass x wiederholt wird. Und was das tun wird, ist, dass es auf der X-Achse wiederholt wird. Wenn wir es so einstellen, dass es wiederholt wird, warum? Das wird es nur auf der Y-Achse wiederholen. Also hast du nur das eine Bild und das wird ganz unten innerhalb des Seitenelements wiederholt . Es gibt eine Reihe anderer Optionen für die Wiederholung, so dass als Wiederholung und das der Standardwert ist, wo wir sie einstellen und es wiederholt sich über die gesamte Seite. Nein, wiederhole es. Das wird es also nicht sowohl auf der vertikalen noch auf der x-Achse, der Horizontalen oder der X-Achse wiederholen . Es wird also nur das eine Bild angezeigt. Nehmen wir an, Sie können steuern, wie sich das Bild im Hintergrund wiederholt. Wenn Sie nur die eine verwenden, können Sie auch eine Hintergrundposition festlegen. Und die Hintergrundposition ist eine Eigenschaft, die verwendet wird, um die Position festzulegen , an der das Hintergrundbild festgelegt wird. So können wir das von links positionieren. Wir können es auch links machen, unten. Es gibt auch rechts und oben. Das wird unten links positioniert sein. Das wird es nach rechts unten bewegen und dann ist es rechts oben. Und weil wir da nicht viel Inhalt haben und das Top gleich sein wird, wenn wir es größer machen. Und wenn wir das nach unten bewegen, werden wir in der Lage sein, die tatsächliche Positionierung des Bodens zu sehen . Jetzt ist es im unteren Teil der Seite positioniert. Es legt also die Ausgangsposition fest, wo wir dieses Bild einstellen. Es gibt auch einen Anhangswert. Wenn wir es also oben auf der Seite einrichten, der Hintergrundanhang und was dies tun wird, die Eigenschaft festlegen , die ob das Bild scrollen soll oder sein soll fixiert. Das ist also der Anhang und es gibt eine feste oder eine Scrollposition. Nach dem festen Testament wird es also repariert. Selbst wenn wir scrollen, wird das Hintergrundbild an derselben Stelle bleiben. Es wird also nicht scrollen wo wir mit dem Seiteninhalt scrollen. Wenn wir es auf Scroll setzen, ist dies die andere Option. Wenn wir jetzt scrollen, wird das Bild nach oben gehen, da wir weniger Platz auf der Seite haben. Und wenn ich es noch kleiner machen würde, würde ich sehen, dass sich das Bild beim Herunterscrollen mit der Bildlaufleiste bewegt. Für all das gibt es auch ein Kurzformat , das herauskommt, wenn wir all diese einzeln einstellen können, aber wir können dies auch als Gruppe festlegen. Und was ich tun werde, ist, dass ich die Eigenschaften hier kommentiere und entferne. Und Sie können Kommentare in Stylesheets abgeben, indem Sie die Schrägstriche des Betriebssystems verwenden. Und wenn Sie den Kommentar abgeschlossen haben, machen Sie einfach die Sternchen und den Schrägstrich , und das wird wieder in den Kommentar einbrechen und daraus ausbrechen. Gehen wir also zurück zu den Hintergründen. Und wir werden dies alles innerhalb des Kurzformates festlegen und die Farbe, das Bild, die Wiederholung, den Anhang und die Position einrichten. Dies geschieht alles innerhalb der Eigenschaft „ One background“. Sie können auch nur den Hintergrund verwenden und eine Hintergrundfarbe festlegen. Das wird auch funktionieren. Sie müssen nicht alle anderen Eigenschaftswerte hinzufügen. Wenn Sie nur eine Hintergrundfarbe wünschen, können Sie die Kurzschrift verwenden, anstatt Hintergrundfarbe auszuschreiben. Von hier aus können Sie zusätzliche Werte in diese Eigenschaft einfügen. Sie können die URL genauso einstellen, wie wir es mit dem Hintergrundbild gemacht haben. Es wird das Bild eingestellt. Die nächste Option ist die Wiederholung. Wenn wir also nicht wollen, dass es wiederholt wird, können wir keine Wiederholung angeben. Genau wie diese drei Codezeilen. Wir können auch die rechte obere Position einstellen, den Bildlauf und standardmäßig wird es Scrollen sein. wir also fest, dass das repariert wird. Also reparieren wir es rechts oben, wo man nach unten scrollt Dieses Bild wird jetzt an der rechten oberen Position der Seite fixiert der rechten oberen Position der Seite bewegt sich nicht mit dem Bildlauf, was die Standardaktion ist. Und dies ist nur eine Kurzmethode, die Sie verwenden können um all diese Eigenschaften und Werte innerhalb einer Zeile festzulegen . Also mach weiter und probiere es aus. Aktualisieren Sie die Farben der Schriftart sowie die Hintergrundfarben der Seitenelemente. Versuchen Sie es mit dem RGB, dem Hex sowie dem RGBA und stellen Sie dann ein Bild in den Hintergrund, und stellen Sie dann ein Bild und Sie können der nächsten Lektion fortfahren. 5. 4-Box-Modell-Rahmenrand-Padding: Lassen Sie uns also die Boxmodelle einfach als verschiedene Teile abdecken , wobei es sich um den Rand, die Polsterung , den Rand und die Breite und Höhe der Elemente handelt. Die Dimensionen des Elements für den Inhalt und wie wir auf der rechten Seite im Browser sehen können , haben sie eine berechnete Darstellung des Box-Modells sowie des visuellen Modells In der Webseite oben werden wir Anpassungen an der Polsterung, dem Rand, dem Rand und den Inhaltsdimensionen vornehmen. Nehmen wir an, wir konzentrieren uns auf das Box-Modell. Das Box-Modell ist also ein Begriff , der verwendet wird, wenn wir über das Design und das Layout der Seitenelemente sprechen . Jedes einzelne Element auf der Seite wird also eine Darstellung des Inhalts haben. Also die Höhe und die Breite des Inhalts, das Auffüllen dieses Inhalts, Es gibt einen Rahmen, der sich um ihn wickeln wird. Und dann wird die Marge außerhalb liegen. Und das wird all diese Elemente darstellen, verschiedene Teile, die innerhalb des Boxmodells fortgesetzt werden . Wenn Sie einen Chrome-Browser verwenden, können Sie ein Element auswählen und eine Überprüfung durchführen. dann innerhalb des Inspect nach unten scrollen, Wenn Sie dann innerhalb des Inspect nach unten scrollen, wo wir die Stile und die berechneten Stile haben , erhalten Sie eine Darstellung des Box-Modells dieses bestimmten Elements. Wir haben also den Rand, den Rand der Polsterung und die Standardbreite und die Höhe. Es gibt also zusätzliche Ränder , die aufgrund des Blockinhalts hinzugefügt werden. Werfen wir einen Blick darauf und wir werden einige Anpassungen vornehmen. Zunächst wählen wir das Seitenelement aus, auf das wir auch das Styling anwenden möchten . Und das wird das Element mit einer ID von zwei sein. Und wir setzen eine Grenze, damit wir die Grenzen mit dem inneren Inhalt erkennen können . Der Rahmen kann mit der Randbreite eingestellt werden. Es gibt auch eine Randfarbe , die wir sortieren müssen. Und dann die Eigenschaft „Border Style“. Dies kann danach auch als eine Kurzschrift dafür geschehen , die es uns ermöglicht, den Rahmen um das Seitenelement anzuwenden. Jetzt haben wir innerhalb des Box-Modells eine Grenze von einem. Ich mache das etwas kleiner, also lassen wir es ziemlich groß vergrößern. Also mache ich es kleiner, damit es einfacher ist , es auf dem Bildschirm zu sehen. Und auf diese Weise können wir auch das Boxmodell sehen , das damit verbunden ist. Es gibt eine Möglichkeit, dies als Kurzschrift zu schreiben. Ich werde mir leisten, dies zu schrägen und zu kommentieren , und du kannst es einfach als Grenze machen. Am häufigsten werden Sie es als Grenze geschrieben sehen , denn ohne all dies werden Sie nichts für den Boarder sehen. Legen Sie die Breite des Rahmens fest und legen Sie den Stil des Rahmens und die Farbe des Rahmens fest. Es wird uns erlauben, das anzuwenden. Wir können diese Werte aktualisieren. Wenn wir also fünf Tipps für die Grenze machen , wird dies auch innerhalb des Box-Modells aktualisiert. Und wir haben festgestellt, dass innerhalb des Elements selbst, innerhalb der Grenze, die Polsterung dort enthalten ist. Fügen wir diesem Seitenelement also etwas Polsterung hinzu . Sie können die Polsterung genauso einstellen, wie wir zuvor gesehen haben, wo wir eine Polsterung durchführen und eine Reihe von Einheiten festlegen können , die wir zum Plotten machen möchten. Sie können auch unten polstern, und das ist die verschiedenen Polsterungen darauf anzuwenden. Es gibt auch die Polsterung links und rechts. Stellen Sie die Polsterung nach links auf 15 Plektren und stellen Sie die Polsterung ein. Großartig. Das ist also die Polsterung mitgeliefert. Die Polsterung befindet sich auf der Innenseite des Randes und außerhalb des Inhaltsbereichs für den Inhalt selbst. Lassen Sie uns eine Breite von 200 PECS festlegen, und wir legen eine Höhe von 200 Plektren fest, die die Abmessungen des Hauptbehälters ändern. Und ich werde es tatsächlich auf 100 einstellen , damit wir es immer noch sichtbar auf der Seite sehen können. Das hat sich jetzt aktualisiert. Während es nur das Standardstyling für das Element war, das die Eigenschaften des div übernahm. Als wir die Größe geändert haben, nahm es die gesamte Breite über die verfügbare Kreuzbreite. Jetzt haben wir eine festgelegte Höhe und Breite. So wie wir es mit der Grenze gesehen haben. Wir können die Eigenschaften des Rand-Padding innerhalb des Kurzschriftenformats festlegen. Das wird alles in einer Zeile geschehen. Wenn wir die Polsterung einstellen, wird der erste Satz Polsterung. Wenn wir eine Polsterung von fünf Pix setzen, wird das rundum fünf Tipps anwenden. Wir sehen, dass es oben, unten und rechts und links angewendet wird . Wenn wir dort einen anderen Wert festlegen können, wird dies den oberen Wert einstellen und der untere Wert bleibt bei fünf. Und die Linke und die rechte werden zehn Bilder bekommen. Wenn Sie also zwei Werte innerhalb der Kurzschrift für das Padding haben , wird es zuerst auf oben und unten und dann rechts und links als nächstes angewendet . Wenn Sie drei Werte innerhalb des Padding hinzufügen, wird ein Format im Uhrzeigersinn verwendet in dem der erste Wert oben angewendet wird. Der zweite Wert wird auf der rechten Seite angewendet. Der dritte Wert wird auf den Boden angewendet. Und weil es noch keinen vierten Wert gibt, wird es die linke und die rechte Position anwenden . Das wird also die linke und die rechte Polsterung gleich anwenden . Es wird also zehn Polsterungen für beide sein. Schließlich können wir dort einen vierten Wert hinzufügen. Und damit können wir oben, rechts, links, unten und dann auf die linke Seite Polster auftragen rechts, links, unten und dann auf die linke . Und Sie können sehen, dass dies hier dargestellt und innerhalb des Box-Modells gerendert wird. Schauen wir uns auch an, was wir mit der Marge machen können. So wie wir mit der Marge, der Marge und dem oberen unteren Wert sahen , wurde sie in das Box-Modell aufgenommen. Die finden innerhalb der Seite statt. Und wir haben auch die Kurzform, die wir bei diesen verwenden können. Lassen Sie uns eine Hintergrundfarbe für die Elemente festlegen. also eine Hintergrundfarbe setze, stelle ich sie als gelesen ein. Auf diese Weise können wir sehen, wo die Grenzen des Seitenelements liegen. Beachten Sie, dass die rote Farbe auch in der Polsterung enthalten sein wird auch in der Polsterung und alles bis zum Rand. Aber außerhalb der Grenze, um den Rand zu verwenden, wird das dem Element nicht hinzugefügt. Diese rote Farbe wird diesem Element nicht hinzugefügt. Einrichten der Marge. Und so wie wir mit der Polsterung gesehen haben, beginnen wir mit den 20 Picks. Das wird einen Rand für oben, unten und rundum hinzufügen . Wenn wir zehn Picks als nächsten Wert machen , wird für den linken und den rechten Wert sein. So wie wir es beim Polstern gesehen haben, werden die Ränder genauso funktionieren. Dann füge ich die beiden anderen Optionen hinzu. Und jetzt haben wir separate Polsterung und separate Ränder für alle Seiten des Seitenelements. Regel verwenden wir die Kurzschriftenmethoden für die Polsterung, für den Rand und für die Marge. Um das Styling auf diese Seitenelemente anzuwenden, versuchen Sie, eine Auswahl eines Seitenelements zu treffen und die Aktualisierung der Eigenschaftswerte des Boxmodells auf dieses Element anzuwenden . Und Sie können bereit sein, mit der nächsten Lektion fortzufahren. 6. 5 Text und Schriftarten CSS: Wir werden die verschiedenen Möglichkeiten behandeln Sie die Schriftart aktualisieren können. Dazu gehören das Aktualisieren der Großschreibung mithilfe der Transformation, das Aktualisieren der Dekoration, das Unterstreichen und Entfernen des darunter liegenden, das Hinzufügen eines Schatteneinzugs, eines Zeilenabstands, einer Zeilenhöhe, Aktualisieren der Schriftgröße mit der Kurzschriftenmethode für die Schriftgröße und die Schriftfamilie. Auch wie Sie aus Google Fonts auswählen und diese Schriftfamilien mit der Zeilenhöhe auf Ihre Webseite bringen mit der Zeilenhöhe auf Ihre Webseite können, um den Inhalt vertikal zu zentrieren, sowie den Text ausrichten und ausrichten es entweder nach links, rechts oder in der Mitte. Und alle häufig verwendeten Schrifteigenschaften , auf die Sie mit CSS stoßen würden , werden in dieser Lektion angezeigt. Lass uns in unseren HTML gehen. Wir wählen das Element mit einer ID von zwei und fügen dann einen Rahmen hinzu und wenden einige Aktualisierungen auf die Eigenschaften und das Styling davon an. Setze die Grenze. Und ich setze eine Auswahl, einen Auswahlrahmen und mache einen roten Rand um ihn herum, damit wir die Seite, den Inhalt auf der Seite sehen und vergrößern können , damit sie etwas größer ist. Nehmen wir ein paar Aktualisierungen am Text vor. Im Wissen mit dem Text können wir eine Farbe festlegen. Die Farbe wird mit dem Farbwert festgelegt und kann die Textfarbe aktualisieren. Es gibt auch andere Eigenschaften für Texte, wie zum Beispiel den Text ausrichten. Und das ermöglicht es uns, entweder zu zentrieren, links, rechts zu rechtfertigen. Es gibt also eine Reihe verschiedener Optionen. Wenn wir es auf richtig setzen, passiert der Text mit dem Text , dass er nach rechts ausgerichtet ist. Und standardmäßig richtet es sich nach links aus. Sie können den Text auch zentrieren und der darin enthaltene Textinhalt zentriert ausrichtet. Ich werde auch einige Margen hinzufügen. Es ist also nicht genau direkt an der Grenze. Und ich mache es etwas größer. Also ein Auffüllen des Seitenelements. Wir können bei Bedarf auch einige Margen hinzufügen, die es etwas besser hervorheben können , wo wir sehen, wo es ausgerichtet ist. Beachten Sie, dass die Ausrichtung bis zum Ende der Polsterung stattfindet . Wenn wir es links einrichten würden, haben wir immer noch die Polsterung auf der linken Seite. Bringen Sie es zurück in die Mitte und speichern Sie das. Es gibt auch eine Rechtfertigung. Was sie rechtfertigen, dass es tun wird, ist, dass es dies gleichmäßiger ausbreiten wird. Es sieht also so aus, als wäre der Inhalt des Textes gleichmäßig von links nach rechts verteilt. Da der zweite Teil des Satzes endet, ist es in diesem Fall der zweite Teil des Satzes endet, nicht in der Lage, Text für die gleiche Breite für links und rechts und die Ränder anzupassen Text für die gleiche Breite . Aber wenn wir zusätzlichen Text hinzufügen würden, werde ich nur den Textinhalt duplizieren, der jetzt rechtfertigt , der versucht, den Inhalt gleichmäßig zwischen der linken und der rechten Textdekoration zu verteilen. Und dafür gibt es eine Reihe von Möglichkeiten. Es gibt also einen Basiswert, es gibt eine Überlagerung, eine solide None ist die Standardeinstellung sagt keine Dekoration auf dem Text. Wenn Sie jedoch standardmäßig ein Anker-Tag verwenden , gibt es Dekorationen auf diesen. Lassen Sie uns das Unterstrichene für den Textinhalt machen. Dann wählen wir den Ankertext und machen die Textdekoration. Wenn Sie die Standardtextdekoration des Ankers entfernen möchten. Und du könntest die auf „None“ setzen. Und das wird diese Standard-Textdekorationszeile entfernen diese Standard-Textdekorationszeile , durch die Sie das tun können. Wir führen die Zeile durch den ausgewählten Text. Es gibt eine überlagernde Option , die das platziert, wenn der Basiswert es überstrichen wird. Platzieren Sie also die Zeile über den Text können Sie den Text mithilfe der Option „Texttransformieren“ transformieren. Wenn Sie die Texte groß schreiben möchten , die wahrscheinlich bereits groß geschrieben sind, können Sie alles in Kleinbuchstaben umwandeln. Sie können alles auch in Großbuchstaben umwandeln. Wählen Sie die Anker-Tags und aktualisieren Sie diese alle als Großbuchstaben, der alles in Großbuchstaben legt. Ich wähle den Header-Inhalt aus. Und wir werden das Header-Element groß schreiben, die Texttransformation auswählen und diese dann in Kleinbuchstaben großschreiben und aktualisieren. Und dann zeigt das Display es als großgeschriebene Texte an. So können Sie einen Textschatten machen und das bietet einen Schatteneffekt. Sie müssen angeben, wo Sie den Schatten positionieren. Richten Sie es also als vier Bilder für Pix über und dann vier Gipfel nach unten ein. Das gibt uns also den Schatteneffekt. Und dann ist das Grün die Schattenfarbe und der Texteinzug. Und geben Sie dann an, wie stark Sie den Text einrücken möchten, wodurch der Text eingezogen wird. Beginne, was das erste Zeichen ist. Innerhalb der Auswahl kann der Buchstabenabstand verwendet werden , um den Abstand zwischen den Buchstaben zu identifizieren. Das ist also die Eigenschaft „ Buchstabenabstand“. Und dies erwartet einen Einheitswert. Wenn Sie den Buchstabenabstand von zehn Picks einrichten , werden die Buchstaben mit den dortigen Werten für die zehn Spitzen zwischen den Buchstaben platziert mit den dortigen Werten für . Wählen Sie auch die Zeilenhöhe aus. Und die Zeilenhöhe legt die Höhe dieser bestimmten Inhaltszeile fest. Verprügelt. Standardmäßig ist es auf die Schriftgröße eingestellt. Sie können es also auf eine andere Zeilenhöhe einstellen , die den Abstand noch mehr verkleinert. Sie können eine Schriftgröße festlegen und die Schriftgröße kann entweder ein Inkrement sein oder als Wert festgelegt werden, entweder die Auswahl, Punkte, EMs. Also jede der Einheiten, die Sie verwenden können, verwende ich einfach die Bilder und setze diese auf 20 Picks ein, wodurch die Schriftgröße größer wird. Und wenn Sie die Zeilenhöhe nicht haben, wird die Standardzeilenhöhe auf die 20 Plektren festgelegt. Verwenden Sie auch die Zeilenhöhe , um vertikal zu zentrieren. Wenn Sie also nur den einen Satz im Wrapper haben, haben wir den Header, das div. wir also eine Auswahl von Elementen. Also Header div, richten Sie eine Höhe für dieses Element ein und das wird auf 100 Picks eingestellt, zentrieren Sie den Text horizontal in einem Rahmen. Und wenn wir die Zeilenhöhe auf 100 Picks setzen, wird der Text jetzt vertikal innerhalb des Elements zentriert. Sie können auch die zu verwendende Schriftart festlegen. Das kann also mit der Schriftfamilie eingestellt werden und das wird die Schriftart aktualisiert. Dies sind die Standardschriftarten, die im Editor angezeigt werden . Sie können also aus diesen auswählen, und das sind Standardschriftarten. Sie können auch Schriften aus externen Quellen abrufen. Normalerweise verwende ich Google-Schriftarten , um eine Schriftart auszuwählen. Und dies ist eine Website , auf der Sie Schriftarten auswählen und in Ihr Projekt einbringen können. Gehen Sie runter und es gibt über 1400 Schriftarten derzeit über 1400 Schriftarten, aus denen Sie auswählen können. Sie würden also hier durchgehen und die Schriftart auswählen, die Sie verwenden möchten. Und ich wähle diesen aus, treffe eine Auswahl der Schriftart. Es wird dir ein Beispiel geben , wie es aussehen wird. Wählen Sie die Ansicht ausgewählte Schriftarten aus. Und jetzt kannst du saugen, den Code holen, um ihn in die Schrift zu bringen. Es gibt das CSS für die Schrift. Wir können dies auf unsere Webinhaltseinstellung, die Schriftfamilie, anwenden . Sie müssen auch die Schrift einbringen. Und es zeigt Ihnen, wie Sie das machen können, wo Sie auf das Stylesheet verlinken können. Der beste Weg, dies zu tun, wenn Sie dies direkt in Ihrer CSS-Datei tun möchten , ist, dass Sie den Import durchführen können. Import ermöglicht es Ihnen, es in Ihre CSS-Datei zu bringen. Jeder Ihrer HTML-Code , der mit der CSS-Datei verknüpft ist, hat dann Zugriff, um die Punktschrift zu verwenden. Wenn wir uns nun den Firmennamen ansehen, wird er in dieser Schriftart festgelegt die wir aus den Google-Schriftarten ausgewählt haben. Aktualisieren wir die Schriftgröße. Ich schaffe es richtig groß, 23 EM. Sie haben auch die Möglichkeit, die verschiedenen Stile und verschiedene Schriftstile festzulegen . Fahren Sie fort und wählen Sie die Schriftstile im Ankertext aus. Und es gibt standardmäßig Optionen, Sie werden das Normale verwenden. Sie können es auf kursiv einstellen, wodurch es leicht nach rechts gebogen wird. Sie können auch ein Schriftgewicht festlegen und es gibt eine Reihe von Inkrementen. Sie können es auf fett, fett Erde einstellen, und das wird nur den ausgewählten Schriftinhalt gebowlt . Sie können dies auch als Schriftart Kurzschrift machen. Ich gehe fort und wähle ein anderes Seitenelement aus, bei dem wir die ID eines haben. Wählen Sie also dieses Seitenelement aus, und dann wenden wir einige verschiedene Eigenschaften auf diese an. Richten Sie das ein und ich füge einen Rahmen hinzu, damit wir sehen können , wo sich der Speicherort dieses Seitenelements befindet. Das ist also diejenige, die wir dort unten ausgewählt haben. Fügen wir etwas Polsterung hinzu. Aktualisieren Sie auch die Schriftgröße. Es ist eine wirklich große Schrift dort. Die Kurzschrift der Schrift. Wir können verschiedene Größeneigenschaften darauf anwenden. Anstatt also die Schriftgröße zu verwenden, kann dies direkt unter die Schrift gebracht werden. Weil Sie zwei Eigenschaften haben müssen, nämlich die Schriftgröße und die Schriftfamilie. Also, wenn wir dies aktualisieren und die Schriftfamilie einbeziehen wollten , die wir von Google mitgebracht haben. Könnte es innerhalb dieser Art von Format tun. Und jetzt wird das angewendet und wir haben es in einem Kurzformat gemacht. Sie müssen die Größe und auch die Schriftfamilie haben. Und Sie können zusätzliche hinzufügen, wie zum Beispiel kursiv. Das wird also die Schrift kursiv schreiben. Adopters bietet eine einfachere Möglichkeit , diesen Schriftinhalt zu schreiben. Dies sind einige der häufig verwendeten Schrifteigenschaften im Styling. Versuchen Sie also, eine Auswahl der Seitenelemente zu treffen und die verschiedenen Styling-Eigenschaften auf die Elemente anzuwenden . Und du könntest bereit sein, zur nächsten Lektion überzugehen. 7. 6 CSS: In dieser Lektion wird beschrieben, was Eigenschaft angezeigt werden soll und die verschiedenen Werte, die so häufig verwendet werden oder Inline- und Inline-Block blockieren, sowie keine anzeigen. Wie sie sich also auf die Seitenelemente auswirken und dann den Unterschied zwischen Sichtbarkeit ausgeblendet und keine angezeigt werden und wie sie auf der Webseite angezeigt werden. Die Anzeigeeigenschaft ist eine der wichtigsten CSS-Eigenschaften , die Sie zur Steuerung des Layouts verwenden können. Standardmäßig haben einige der Seitenelemente, wie z. B. divs, bereits eine Eigenschaft dafür. Und das ist die Anzeigeeigenschaft, egal ob es sich um einen Block oder Inline handelt, wenn Sie Elemente auf Seite erstellen. Und ich werde hier ein Paar erstellen , wo wir ein Div haben. Und dann füge ich innerhalb des Div ein paar Zeitspanne hinzu. Spans, was sie tun ist, dass sie inline sind und das bedeutet , dass sie keine neue Codezeile aufnehmen werden. Standardmäßig werden die Spannweiten inline sein und die Divs sind diejenigen, die den vollständigen Codeblock einnehmen werden . Wenn ich das erste Wort aktualisieren und umbrechen wollte, meins mit der neuen Zeile mit dem div, wird es es verschieben und auf eine neue Zeile setzen, während die Spannweiten inline sein werden. Treffen wir eine Auswahl dieser Elemente und wir werden einige Aktualisierungen dieser Seitenelemente vornehmen. Auswahl des Headers mit dem Div, das sich unmittelbar darunter befindet, den Sie mit dem Zeichen „größer als“ verwenden können . Ich wähle einen Rahmen aus. Also ADA, man wählt einen festen schwarzen Rand zu dieser Auswahl des Div und dann den Inhalt, der in diesem div enthalten ist. Ich werde die Spannweiten aktualisieren und die Spannweiten auswählen, die im div enthalten sind. Und dies gilt für alle Spannweiten, die in diesem übergeordneten Element enthalten sind , und die Anzeigeeigenschaft wird blockiert. Was passiert ist, ist, dass die Spannweiten jetzt dieselbe Anzeigeeigenschaft haben wie das div, wo sie eine neue Zeile nehmen einen Rahmen hinzufügen. Jetzt gehen sie in eine neue Zeile setzen die Anzeigeeigenschaft auf Inline. Und weil wir kein anderes Element haben , das inline dazu ist, setzt es es deshalb nicht nebeneinander. Also lasst uns weitermachen und wir werden den HTML-Code aktualisieren. Und wir werden die beiden Werte dort haben. Und das werden beide Divs sein. Und jetzt sind das Divs , die inline sein werden. Ich füge auch einen Rahmen um sie herum hinzu, damit wir sie im visuellen Bereich der Seite unterscheiden können . Richten Sie sie also blau ein. Jetzt, da die Divs inline sind, sind die Spannweiten blockiert. Wir können sehen, dass der Unterschied zwischen den beiden Block-Level-Elementen mit einer neuen Linie beginnt und sie die volle verfügbare Breite aus dem Container nehmen . Wenn wir die Breite aktualisieren würden , die innerhalb des Headers verfügbar ist, was der übergeordnete Container ist. Und wir legen eine Breite davon fest. Und ich setze das auf 200 Tipps ein. Die blockierten Container, die Blockanzeigeelemente, werden die volle Breite davon annehmen. Es gibt auch ein Display, keine. Also wähle ich das Nav-Element und aktualisiere diese Anzeigeeigenschaft. Das sind also die Hyperlinks , die wir auf der Seite haben. Und ich stelle das so ein, dass keine angezeigt wird. Was passiert ist, ist, dass das tatsächlich von der Seite verschwunden ist und sich immer noch im Quellcode befindet, aber die Anzeige, keine verbirgt es einfach aus dem Blickfeld. Dies wird tatsächlich anders sein als die Sichtbarkeit keine. Lassen Sie mich das zurückbringen und ich wähle das Element mit dem Element aus, um dieses zu verstecken. Und dann wählen wir das Element mit einer ID von zwei und verwenden die Sichtbarkeit und setzen die Sichtbarkeit auf ausgeblendet. Und der Unterschied zwischen der Anzeige keine und der sichtbaren Sichtbarkeit besteht darin, dass das Verborgene immer noch den Platz auf der Seite beansprucht, während die Anzeige das nicht vollständig entfernt hat Seitenelement aus dem Anzeigebereich, die Hintergrundfarbe davon. Es ist also sichtbarer. Dann verstecken wir es noch einmal mit dem Display none. Wenn ich dies also aktualisiere, um zu sagen, dass keine angezeigt wird, wird dieser gelbe Block aus dem sichtbaren Bereich der Seite verschwinden . Gehen wir fort und wir wählen die Listenelemente auf der Seite aus, um die Listenelemente auf der einige Eigenschaften der Listenelemente auf der Seite zu aktualisieren . Also ungeordnete Liste, Listenelemente. Und was wir auf die Listenelemente anwenden möchten, wird die Anzeige aktualisieren und ich stelle die Anzeige auf Inline-Block ein. Wenn wir das tun, ist passiert, dass es die Eigenschaften immer noch aus der ungeordneten Liste behält. Es gibt einige Standardeigenschaften. Deshalb ist es eingerückt. Aber mit der Anzeige keine, Inline-Block anzeigen, die uns ermöglichten, diese horizontal auszurichten. Und so werden normalerweise die Navigationsmenüs erstellt, in denen wir eine ungeordnete Liste haben und die Elemente aus der ungeordneten Liste löschen, die Standardeigenschaften wie Rand und Auffüllung. Wenn Sie das entfernen, wird dies direkt in Einklang gebracht. Ich setze auch den Rahmen, damit wir die gesamte ungeordnete Liste sehen die gesamte ungeordnete Liste und den Rand um ein Pixel einfarbig grün setzen können. Das nimmt den vollen Blockplatz ein. Aber wir haben den Rand entfernt und die Auffüllung, mit der die Listenelemente am linken Inline-Block ausgerichtet werden konnten , wird sich geringfügig von dem unterscheiden, was wir mit Inlinefarbe für sie haben , so dass wir können sehen, wo die Grenzen dieser Elemente liegen. Das wird also der Inline-Block sein. Und wenn ich es auf Inline umstelle, sehen Sie, dass es ein bisschen zusätzliche Polsterung gibt, die mit den Blöcken da sein wird. Also ein bisschen zusätzlicher Abstand zwischen dem Inline -, Inline-Block. Es gibt also einen kleinen Unterschied zwischen den beiden, und es wird einen größeren Unterschied geben, wenn wir die Polsterung nehmen und wenn wir den Elementen Polsterung hinzufügen. Einmal fügen wir die Polsterung hinzu, die nur inline ist. Inline-Elemente werden die übergeordnete Größe nicht übernehmen. Sie sehen das also, wenn wir nur das Inline verwenden, obwohl wir in der Lage sind, dasselbe Padding anzuwenden , wenn wir das übergeordnete Element der ungeordneten Liste betrachten . Jetzt wird das kleiner sein als das, was wir für die Größe haben. Also müssen wir diese Blockeigenschaften mithilfe des Inline-Blocks abrufen. Es ist also eine Kombination aus Inline und Block. Und es ermöglicht uns, die volle Höhe des Eltern-Kinds, der Anzeige, des Inline-Blocks, Eigenschaftswerts der Inline-Blockanzeige zu nehmen. Sie können bereit sein, mit der nächsten Lektion fortzufahren. 8. 7 CSS: Positionen gibt die Art der Positionierung für das Element an. Wir werden uns also die häufig verwendeten ansehen , wie den Verwandten, den festen, den absoluten Sticky und wie Sie diese verwenden können, um Seiteninhalt zu positionieren. Und wenn die Seiteninhaltsblättern einen Unterschied im Verhalten zwischen den verschiedenen Elementen sehen Verhalten zwischen den verschiedenen Elementen , auf die die unterschiedlichen Positionierungseigenschaften angewendet wurden . Mit dieser positions-Eigenschaft konnte man ein Element auswählen und seine Position auf der Seite festlegen. Also lasst uns weitermachen und wir werden eine Auswahl einiger Seitenelemente treffen. Es wählt die Navigationsleiste aus. Für die Navigationsleiste erlaubte eine Hintergrundfarbe , damit wir unterscheiden können , wo sie beginnt und wo sie endet. Es wird also ihre Navigationsleiste sein. Und innerhalb des Navigationssystems haben wir auch einige ungeordnete Listen und eine Reihe von Listenelementen und dann einige Anker-Tags , die darin enthalten sind. Lass uns weitermachen und wir werden die Position dieses Elements aktualisieren . Stellen Sie die Position ein und ich setze die Position auf statisch. Welche Statik ist statisch positioniert? Es ist nicht so, dass es in besonderer Weise positioniert ist. Es ****** Personen das entsprechend dem normalen Fluss der Seite. Sie es also auf eine statische Position ein. Und ich mache den Text ein bisschen größer, damit wir uns trösten können. Ich werde auch einen Teil des Inhalts aktualisieren. Also das Artikelelement und ich werden die Höhe aktualisieren , nicht dass wir etwas nach dem Seiteninhalt mit der statischen Position scrollen können , das wird die Standardposition sein. Es gibt also keine spezielle Positionierung für dieses Element. Wir können die Position relativ verwenden. Und die Relative der Position ermöglicht es uns , die Position von ihrer normalen Position aus zu aktualisieren. Wenn Sie es als reine Position relativ festlegen, steht es immer noch im Einklang mit dem normalen Seitenfluss. Verwendung von position relative ermöglicht es uns jedoch , die linke und die oberste Position zu aktualisieren. Wenn ich also das gesamte Element um 36 nach rechts bewegen wollte , kann dies mit der Position relativ mit der Position statisch geschehen . Es wird diese zweite Eigenschaft ignorieren. Es erlaubt Ihnen also nicht, links oder oben zu machen. Sie müssen also die Position relativ festlegen, wodurch Sie die anderen Eigenschaften festlegen und das Element positionieren können, um Anpassungen daran vorzunehmen , wo es sich auf der Seite befindet. Dafür gibt es auch eine untere Position. Wenn du es auf die unteren 40 Bilder stellst. Es geht also um einen Boden von 40, und das kommt von der Unterseite des übergeordneten Elements von dort ab , wo die ursprüngliche Position dieses enthaltenden Elements war. Ich füge die Wrapper-Klasse hinzu. Und ich setze eine Höhe davon auf 400 Plektren ein. Und dann machen wir auch eine Grenze um ihn herum. Also ein Pick, solider Block. Es gibt unseren Wrapper, damit wir die Ober- und Unterseite für den Wrapper sehen können . Wenn wir ein Element auswählen und wenn wir die feste Position verwenden, wird das Element an derselben Stelle fixiert , selbst wenn die Seite gescrollt wird. Wir werden fortfahren und wir wählen das Header-Element und legen seine Position als fest fest fest. Und ich füge auch eine Hintergrundfarbe für die Siedlung hinzu. Richten Sie es einfach als Block ein. Das wird also die feste Position des Elements sein. Und wenn Sie die verschiedenen Positionierungen verwenden, aktualisieren Sie im Allgemeinen auch die Farbe auf Weiß. Bei der festen Position würden Sie normalerweise eine Breite festlegen, also geben Sie ihr eine Breite und machen Sie eine Breite von 50%. Sobald wir das gespeichert haben, sehen wir , dass wir eine Breite von 50% haben. Es gibt auch eine Linke , die Sie einstellen können. So wie wir es mit dem Verwandten gesehen haben. Das Fixed ermöglicht es uns, es in einem bestimmten Teil der Seite zu positionieren . Dies wird relativ zu dem Ort sein, an dem sich der Bildschirm befindet. Wenn wir einen Bildschirm mit der größten Größe haben, wird das immer noch innerhalb der fünfundzwanzig Prozent liegen. Fünfundzwanzig Prozent gegenüber dem oberen Rand der Seitengröße. Wenn wir es also nach oben bewegen , wird sich dieses Element ebenfalls nach oben bewegen. Ich muss dies aktualisieren, um RGBA zu sein , damit wir den Inhalt, der sich darunter befindet , als Alpha-Version sehen den Inhalt, der sich darunter befindet können. Und ich gebe ihm 50% Transparenz. So können wir den Inhalt sehen, der sich unter dem festen Positionselement befindet. Gehe auch dorthin zurück, wo wir den Boden gesetzt haben. Wenn wir es auf 0 setzen, könnte dies tatsächlich dasselbe sein. Auf Null gesetzt unten und 0 top werden also überall dort sein, wo die Standardposition war. Da es also statisch war, würde es immer noch innerhalb dieser Standardposition sitzen. Obwohl wir es nicht um 30 nach links bewegen, wäre die Spitzenposition immer noch dieselbe gewesen. Wenn wir es wieder auf relativ verschieben und aktualisieren, wird das aktualisiert, wo es ursprünglich positioniert werden sollte , und das wird diesen Positionswert aktualisieren . Es gibt auch eine absolute Position. Dies ist die absolute Position und sie relativ zur Position des Vorfahren. Es ist also nicht relativ zum Standpunkt. So wie z. B. relativ zum Aussichtspunkt fixiert. Das Absolute wird relativ zum Elternteil sein. Gehen wir fort und wir wählen Seitenelemente aus und wir wählen das mit der ID von zwei aus. Wählen Sie tatsächlich diejenige mit der ID von einem aus und aktualisieren Sie diese. Wir haben einen ganzen Textblock dort. Ich lege eine Hintergrundfarbe , damit wir sie auf der Seite sehen können. Auf gelb. Es wird also festlegen, dass dieser Textblock gelb ist und seine Position festlegen. Stellen Sie die Position auf absolut ein. Und ich verwende die gleichen Positionierungswerte , die wir dort hatten. Jetzt wird es als absolut festgelegt. Aber der Unterschied besteht darin, dass beim Scrollen die festen Positionen immer noch gleich bleiben, aber das Absolute beginnt erst an derselben Stelle zu sein. Ich aktualisiere das Display so , dass es keine der NEF ist. Und wenn wir den Standardwert haben und wir beginnen, wird dies relativ zu dem Ort positioniert, an dem sich das Elternteil befindet. Wenn wir den Wrapper aktualisieren würden und wenn wir am Rand wären, an die Spitze des Wrapper von 40 Picks , wird er auch nach unten verschoben und aktualisiert, wo wir ihn fixiert haben. Während wir es scrollen, wird es immer noch in Bezug auf den Inhalt der Hauptseite sein. Aktualisieren Sie dies auch, um unterrichtet zu werden , und wir setzen es auf 100 Picks. Und auch für den oberen Teil des Headers wären es 100 Picks. Und dafür verwende ich auch eine RGBA. Und so können wir sehen, wie sich das anders bewegt als das, was wir für die feste Position haben. Weil es wieder positioniert ist. Und wenn das positionierte Element keine positionierten Vorfahren hat , die den gesamten Dokumentenkörper verwenden. Lassen Sie uns also etwas Positionierung hinzufügen. Wenn wir also eine Position relativ zum Wrapper festlegen, machen wir von hier aus zehn Tipps. Dies wirkt sich jetzt auf die Stelle aus, wo die absolute Position gesetzt wird. Weil das Absolute in Relation gesetzt wird. Wenn einer der Vorfahren eine feste Position hat, wird er ihn dort einstellen, wo er sich innerhalb des Vorfahren befindet. Es gibt auch eine klebrige Position. Wählen Sie also das Element mit einer ID von zwei aus und stellen Sie es auf klebrige Position ein. Legen Sie auch eine Hintergrundfarbe für dieses Element fest. Und diese Hintergrundfarbe wird auf grün gesetzt. Stellen Sie die Top 0 Plektren ein. Und dieses Element wird klebrig sein. Und das klebrige schalten wir zwischen dem relativen und dem Fixed um, je nachdem , wo sich die Bildlaufposition befindet. Reduzieren wir die Größe des Artikels und ich vergrößere die Größe. Wenn ich also scrolle, sehen wir, dass der Sticky wechseln wird. Je nachdem, wo sich der Bildlauf befindet, wird die Position eingestellt, sie wird im Ansichtsbereich aktualisiert. Wenn ich also nach unten scrolle, bleibt es dort klebrig. Und wenn ich dann weiter scrolle, wird die relative Positionsverschiebung zwischen dem Klebrigen verwendet, wobei sowohl fixiert als auch der relative verwendet wird. Sicher, dass Sie genügend Inhalte haben , damit Sie scrollen können. So können Sie die Unterschiede zwischen den Positionierungs- und den Positionierungseigenschaften erkennen. Werte. 9. 8 CSS Float: dem Float können Sie Inhalte auf der Seite positionieren , damit Sie verschiedene Spalten auf Ihrer Seite erstellen können. Was Sie damit machen können, wo Sie es nach rechts oder links positionieren können , um den Schwimmer für die folgenden Seitenelemente zu löschen, indem Sie klar, wie Überlauf mit dem Schwimmer funktioniert und die floated Elemente, richten Sie sie innerhalb des restlichen Seiteninhalts aus. Und wie sich der Float auf die folgenden Elemente auswirkt , die Geschwister der Elemente sind , auf die der Float angewendet wurde. Das kommt also alles in dieser Lektion. Float wird zum Positionieren und Formatieren von Inhalten verwendet , insbesondere für Bilder, sowie zuvor mehr zum Erstellen des Seitenlayouts und der Struktur verwendet . Jetzt haben wir sowohl das CSS-Grid als auch Flex, die wir etwas später behandeln werden. Jetzt möchten wir das Bild innerhalb des Elements mit der ID von einem auswählen . Gehen Sie also durch und treffen Sie eine Auswahl und wählen Sie das Element mit dem Bild-Tag aus. Lasst uns weitermachen und wir werden einige Eigenschaften darauf anwenden. Ich stelle eine Breite von 100 Plektren und verwende tatsächlich die maximale Breite. Wenn also die Seitengröße kleiner wird und die maximale Breite funktioniert , besteht darin, dass die maximale Breite , die wir für dieses Bild sehen werden, 400 Auswahl beträgt, selbst wenn die Seitengröße zugewiesen wird und wie erlaubt mehr, und wir werden bei der maximalen Breite bleiben. Ich werde dies auf 100 Picks reduzieren , damit wir besser sehen können , wie die Floats funktionieren werden wenn man das in einer Reihe über Wasser geht. Im Moment sehen wir, dass das Bild direkt mit dem Inhalt übereinstimmen wird. Aber wir positionieren den Inhalt. Wir positionieren den Inhalt nicht direkt um das Bild herum. Sie können Floats verwenden, um dies zu beheben. Richten Sie also einen Float wenn wir das Bild nach rechts schweben wollen , wird der Text um das Bild herum umbrechen. Fügen wir einen Rahmen für das Bild hinzu. Also wählen Sie solide und in einem roten Rand erlaubt , damit wir leicht sehen können , wo sich der Bildrand befindet. Dies ermöglicht es uns, die Hälfte des Textes hinzuzufügen, der um das Bild herum umschließt. Wir können es auch auf die linke Seite schweben. Das wird den gleichen Effekt bewirken, aber positionieren Sie ihn auf der linken Seite. Sie können auch die Listenelemente innerhalb des Drehknopfs auswählen. Und lasst uns einen Schwimmer auf diese anwenden. Setup, ein Float von links für die Listenelemente. Und was jetzt passiert ist, ist, dass wir die Listenelemente haben, die direkt nebeneinander schweben. Und bei den Floats müssen Sie einen Clear anwenden, sonst wird die float-Eigenschaft immer noch auf das nächste Element angewendet. Und hier haben wir diese Art von Effekt, bei dem wir die Listenelemente nicht löschen und wo wir auslöschen und eine Klärung haben sollten und eine Klärung haben um zu verhindern, dass es zum nächsten Element übergeht wir können eine Spanne einrichten. Und innerhalb der Zeitspanne geben wir ihm eine Klasse. Ich nenne es einfach Clear Float. Und auf diese Weise können wir den Clear Float für die ungeordnete Liste auswählen . Ich füge einen Rahmen um die ungeordnete Liste hinzu , damit wir leicht erkennen können , wo die ungeordnete Liste in Stopps endet und wo sie schweben. ist aufgefallen, dass wir innerhalb der ungeordneten Liste nicht die Höhe der ungeordneten Liste erhalten . Der Hintergrund. Wenn wir eine Hintergrundfarbe auf die ungeordnete Liste anwenden würden , wende ich einfach eine Hintergrundfarbe von Schwarz darauf an. Es kommt nur als Linie wegen des Schwimmers vor, es nach links schwebte. Wenn ich den Schwimmer entfernen würde, würde der Punkt die gesamten Elemente abdecken. Aber sobald wir es nach links schweben, wird das diese Eigenschaftswerte nehmen und den Float anwenden. Ich möchte den Float Clear hinzufügen. Was das tun wird, ist, dass es uns erlaubt, die Schwimmer zu räumen. Wir können den Schwimmer links räumen, wir können den Schwimmer räumen, oder? Und dann können wir Float und beides löschen. Normalerweise verwenden Sie normalerweise das Clear, um die deklarierten beiden Floats zu schweben. Ich wähle auch den Artikel aus und wende einen Rahmen um den Artikel an. Und wir werden auch die Klasse der Clear Fix auf die Website anwenden . Wie Sie sehen können, dass das, was hier passiert , ist, wenn wir es nach links schweben, ruft dieses Element immer noch dieses Styling ab, um es nach links zu schweben. Wenn wir also den Clear Float machen , wird dann die nächste Zeile innerhalb einer Site wieder an ihre Standardposition auf die linke Seite verschoben innerhalb einer Site wieder an . Wenn wir den Überlauf der ungeordneten Liste aktualisieren. Wenn wir also den Überlauf auf automatisch einstellen, wird dann die Höhe und die Abmessungen des übergeordneten Elements festgelegt , während wir ihn schweben. Dort haben wir also die vollständige Abdeckung für den schwarzen Teil erhalten, dass wir dieses Element auswählen dürfen. Und jetzt nimmt es die Eigenschaften des Schwimmers auf und verhindert, dass das Element überläuft es sich außerhalb des Containers befindet. Also können wir das auch auf das Element mit der ID von einem setzen der ID von einem und dasselbe tun, wo wir den Überlauf einstellen können. Auf diese Weise bietet es genügend Abstand für das Element da wir den Inhalt überschwemmen und uns dennoch erlauben zum nächsten Teil der Seitenelemente zu wechseln , die die Floats in verwenden können um Spalten innerhalb Ihres Webseiteninhalts zu erstellen. Also lasst uns weitermachen und wir werden einen Hauptsäulenbereich erstellen und ein paar verschiedene Divs einrichten. Ich gebe ihnen einfach eine Klasse von Col für Spalte und gebe ihnen dann verschiedene Werte, die im Inhalt enthalten sind , damit wir sie unterscheiden können. Das werden also drei Spalten sein , die wir einrichten werden. Sie werden alle die Klasse von CO L. haben und wir werden Floats verwenden, um eine freie Spalte gutes Design zu erstellen. Gehen Sie zum Stylesheet, wählen Sie das Element mit der CLL-Klasse aus und fügen Sie einen Rahmen hinzu. Auf diese Weise können wir zwischen ihnen unterscheiden. Dann wende einen Schwimmer an. Lasst sie auf die linke Seite drehen. Und beachte, dass wir nicht die klare Lösung haben. Deshalb gibt es diesen Inhalt immer noch, der folgende Inhalt wird immer noch in Schwung gebracht. Wir müssen die Klärung des folgenden Elements anwenden. Das wird also für denjenigen sein, der das neu ausrichten wird , während wir die Floats für die Elemente ausräumen. Lassen Sie uns die Breite für diese festlegen und ich setze sie auf 33,3%. Der Grund, warum wir nicht in der Lage sind, die vollen 100% zu erreichen , liegt darin, dass die Grenze, wenn wir die Grenze entfernen würden , direkt nebeneinander lagern würden. Es gibt auch eine andere Möglichkeit, das zu beheben, wo wir die Box-Größe anwenden können. Und was eine Box-Sizing-Eigenschaft uns ermöglicht, ist die Polsterung und den Rand in die Gesamtbreite der Boxen aufzunehmen . Wenden wir also die Eigenschaft „ Box-Sizing“ auf alle Seitenelemente an und legen die Größe der Box auf die Anzahl der Randfelder für die vollständige Auffüllung fest, den Rahmen für die Elemente. Und das gibt uns die Möglichkeit, sie auszurichten. Ich muss etwas Polsterung für diese Elemente hinzufügen und wir legen auch eine Höhe für die Elemente fest. Das gibt uns also etwas mehr Abstand um die Elemente. Und so können Sie mit dem Float eine dreisäutige Spalte erstellen . Und solange du den Schwimmer vom nächsten Geschwisterelement löschst . Und auch wenn Sie Inhalte haben, die die schwebenden Elemente überlaufen. Wenn wir die Bilder in jedem von diesen enthalten haben, wird es einen Überlauf geben. So können Sie den Überlauf auf „versteckt“ einstellen. Dadurch wird jeder Überlauf des Inhalts ausgeblendet. Oder wenn Sie es auf auto einstellen, wird die Höhe automatisch angepasst und es uns ermöglicht, zu scrollen, um zu sehen der gesamte Inhalt des Elements schwebt. Es gibt also zwei Optionen, die Sie mit dem Überlauf ausführen können Sie mit dem Überlauf ausführen , um den Seiteninhalt richtig anzupassen. Probieren Sie es also auf Ihrer Seite aus und machen Sie sich besser damit vertraut, was Sie mit der float-Eigenschaft und den verschiedenen damit verbundenen Werten tun können. 10. 9 CSS: Es wird eine lustige Lektion, in der wir uns auf die Pseudoklassen konzentrieren werden. Und was Pseudoklassen tun, ist, dass sie uns erlauben, Auswahlen zu treffen und den Zustand eines Elements zu definieren. Wird normalerweise für Anker-Tags verwendet , bei denen sie den Link, den Besuchten, den Hover und aktiv haben . Sie können diese Styling-Eigenschaften aktualisieren. Es ist nicht nur auf diese Elemente beschränkt, die Anker-Tags, Sie können es auf jedes Element platzieren , bei dem wir den Hover haben. Für den Fall, dass der Mauszeiger darüber schwebt, erhalten wir einen roten Rand für die Bilder. Die anderen Elemente, über die sich schwebten , werden hellblau. Es gibt auch eine Möglichkeit, eine Auswahl zu treffen. Also zuerst und verlorenes Kind, du kannst das n-te Kind machen, was es dir ermöglicht, eben oder seltsam zu machen. Sie können abwechselnd für die Geschwister stylen. Geben Sie auch das Kontrollkästchen an, prüfen Sie, ob es aktiviert ist, und wenden Sie das Styling an , wenn es aktiviert ist. Und es gibt auch die Fokus-Pseudoklasse, die die Styling-Eigenschaften aktualisiert wenn der Fokus auf die Elemente angewendet wird. Pseudo-Klassen können Sie den Status des Elements definieren. Also wenn das Element, und dies geschieht normalerweise, wenn wir Hyperlinks verwenden. Lassen Sie uns eine Auswahl der Anker-Tags treffen und dafür werden wir einige der Eigenschaften der Pseudoklasse aktualisieren. Normalerweise haben wir also einen Wert für den Link selbst. Und diese ändern sich je nachdem, ob sie bereits angeklickt wurde. Dies ist also eine Standardeigenschaft der Hyperlinks. Und wenn Sie diese ändern möchten, also alle diese Links, die wir derzeit haben, wenn wir sie als brandneuen Link einrichten. Das bedeutet also, dass der Link nicht besucht wurde. Wir können die Eigenschaft für den Link festlegen und die Farbe aktualisieren. Das bedeutet, dass wenn wir einen Hyperlink haben , der nicht besucht wurde , der rot wird. Und ich werde das aktualisieren, um einen anderen Wert zu haben. Jetzt sehen wir, dass diejenigen, die nicht besucht wurden, gelesen werden. Wir haben auch Links, die besucht wurden. Lassen Sie uns also einen brandneuen Standardwert für den besuchten Status des Links festlegen für den besuchten Status des und diesen und die besuchten aktualisieren . Stellen wir das auf grün ein. Das gilt für alle anderen Links, die wir haben. Sie können auch einen Hover-Effekt festlegen wenn Sie den Mauszeiger über den Link bewegen. Im Moment gibt es also standardmäßig keinen Hover-Effekt. Manchmal werden sie das tun. Du hast die Textdekoration und setze das auf „None“. Wenn wir also den Mauszeiger darüber bewegen, verschwindet der Basiswert. Sie können auch die Hintergrundfarbe der Elemente aktualisieren. Wenn wir also den Mauszeiger über sie bewegen, legen wir sie zum Lesen ein. Und wir legen die Farbe des Textes auf Weiß fest. Das gibt Ihnen also diese Art von Effekt, den Sie häufig in den Navigationsmenüs sehen. Es gibt auch einen aktiven Zustand. Wählen wir also die Elemente aus und aktualisieren ihren aktiven Status. Und aktiv. Lassen Sie uns dies als diese Art von Farbe für das Aktive festlegen. Was aktiv bedeutet, dass wenn es heruntergeklickt wird, während ich darüber fahre, wenn ich es drücke, das grün wird. Das wird uns also das Aktive geben. Aktualisieren wir auch die Schriftgröße, damit sie etwas sichtbarer ist, wenn ich sie drücke. Wenn es geklickt wird, wird es groß. Und wenn ich es dann veröffentliche, geht es auf die Standardgröße zurück. Das ist also der aktive Zustand. Und das sind typische Pseudoklassen, die Sie vielleicht haben, die Sie für die Anker-Tags haben. Es muss also nicht nur auf Anker-Tags sein. Sie können es für andere Seitenelemente einrichten. Also muss ich zum Beispiel die Bilder auswählen, werde die Breite der Bilder auf 100 Picks einstellen. Und die Höhe der Bilder wird auf 100 Picks festgelegt. Das wird sie viel kleiner machen. Wenden wir eine Pseudoklasse auf sie an. Immer wenn wir den Mauszeiger über die Bilder bewegen, wähle ich den Rahmen aus. Und wir werden eine Grenze von drei Picks einrichten. Und es wird gelesen, wenn wir den Mauszeiger darüber bewegen. Standardmäßig fügen wir einen Rahmen hinzu, damit die Bilder blockiert werden sollen. Andernfalls verschieben sich die Bilder in ihrer Position. Immer wenn ich über sie fahre. Jetzt bekommen sie den roten Hintergrund. Es ist auch merkwürdig für das div und ein Sudo für das div. Wenn der Mauszeiger über den Mauszeiger verschoben wird, aktualisieren wir die Hintergrundfarbe und legen diese als Hintergrundfarbe fest. Eigentlich setzen wir das nicht auf das Haupt-Div, aber wir setzen es auf die Elemente , die im Haupt enthalten sind. Auswahl des Elements mit der Wrapper-Klasse. Es wird also das Hauptelement sein und das auf alle Elemente anwenden , die sich darin befinden. Also alle untergeordneten Elemente innerhalb des Wrapper, die sofort innerhalb des Wrapper sind. Jetzt wird dieser Hover-Effekt auf sie angewendet. Das sind also alle Hauptabschnitte , die wir auf der Webseite hatten. Sie können das Pseudo auch verwenden um eines der untergeordneten Elemente anzugeben. Wenn Sie also das erste untergeordnete Element des Wrappers erhalten möchten, können Sie das erste untergeordnete Element angeben. Auf diese Weise können Sie den Auswahlprozess fein abstimmen. Aktualisieren wir die Hintergrundfarbe für das erste Kind und setzen es auf Rot. Es wird das erste Kind des Wrappers sein. Ich gehe eigentlich dahin , wo ich die Divs habe. Und ich gebe dem eine Reihe von Zeilen, wähle das erste Kind aus, das sich in Reihe befindet. Es wird ein bisschen besser sein, es zu benutzen. Innerhalb der Zeile möchten wir die erste Spalte auswählen. können wir also tun, indem wir die Klasse auswählen und dann das erste untergeordnete Element des Elements auswählen. Es wird also das übereinstimmende erste Kind in der Liste zurückgeben das übereinstimmende erste Kind in , das sich alle auf dem gleichen Level befinden wird. Alle Spalten befinden sich also auf der gleichen Ebene. Dort können wir das erste Kind auswählen. Sie können auch das letzte Kind machen. Wenn Sie also innerhalb der Zeile auswählen wird die letzte untergeordnete Eigenschaft aktualisiert und festgelegt. Wir können das auf blau setzen. Es kann auch spezifisch sein, also mit dem n-ten Kind. Das wird also die Anzahl der Kinder sein. Wenn Sie es also für jedes zweite Element festlegen möchten, geben wir die Nummer an , die wir auch überspringen möchten. Dies wird es also auf jedes andere Element für jedes zweite Element anwenden . Und ich aktualisiere die Farbe der zu lesenden Schriftart. Im Moment geht es nur innerhalb des Elements. Und lasst uns diese kopieren und wir duplizieren sie. Auf diese Weise können wir auf mehrere Elemente einstellen, die die untergeordneten Elemente sind, wenn wir den Indexwert verwenden . Das wird sich also auf den zweiten beziehen. Lassen Sie uns aktualisieren eine Hintergrundfarbe festlegen und die Hintergrundfarbe auf Grün setzen. Also wieder wird es der zweite sein. Wir können dies aktualisieren, um alle übereinstimmenden auszuwählen, die ungerade sind. Wir können dies auch aktualisieren, um alle übereinstimmenden auszuwählen, die gerade sind , die wir auf alle alternativen Elemente anwenden werden . Lassen Sie uns fortfahren und fügen Sie ein Kontrollkästchen auf unserer Seite hinzu. Bedient unser Kontrollkästchen mit einem Scheck. Gib ihm eine Klasse von Checker, und wir machen ein paar davon. Also haben wir den Check Me, Check Me auch, überprüfe mich drei und überprüfe mich nach mir. Das gibt uns also ein paar Checkboxen auf der Seite. Und nun wählen wir die Elemente aus, die die Eingabe sind. Mit der Art des Kontrollkästchens. Wir können mit den Eingabetypen spezifischer sein, indem wir die eckigen Klammern verwenden und dann den Typ angeben. Das wird also eines der Attribute des Elements sein. Wir möchten die geprüfte Option darauf anwenden. Prüfen Sie also, ob es überprüft wurde, und wenden Sie dann etwas Styling darauf an. Was wir tun möchten, lassen Sie uns eine Höhe von 50 Pixel und eine Breite von 50 Pix auf dieses geprüfte Element festlegen . Wenn sie überprüft werden, werden sie richtig groß. Es gibt auch einen Fokus-Pseudo-Selektor, der angewendet werden kann, wenn wir uns auf einen Input konzentrieren. Und lasst uns die Hintergrundfarbe aktualisieren. Setze das also auf gelb. Und ich werde tatsächlich aktualisieren und einige zusätzliche reguläre Eingaben hinzufügen . Jetzt erhalten diese Eingaben, wann immer sie ausgewählt sind und der Fokus auf ihnen liegt, die Auswahl von Gelb und die Kontrollkästchen. Sie werden immer noch aktualisiert, sobald sie aktiviert sind, genau wie mit dem Kontrollkästchen, indem sie die Eingabe auswählen und dann auch den Typ als Text auswählen. Das gilt für diese Eigenschaft. Und einige der Eigenschaften , die nicht für alle Seitenelemente verfügbar sein werden alle Seitenelemente verfügbar sein , werden gerade als Standardhintergrundfarben für sie festgelegt. Probieren Sie es aus und sehen Sie, was Sie mit den Pseudoklassen machen können. Probieren Sie die verschiedenen Pseudoklassen auf verschiedenen Seitenelementen aus. Es kann bereit sein, mit der nächsten Lektion fortzufahren. 11. 10 Pseudo CSS: In dieser Lektion werden wir den Teil der Auswahl, das ausgewählte Element, aktualisieren . Aktualisieren Sie also die erste Zeile, den ersten Buchstaben, fügen Sie den Inhalt nach und vor der Elementauswahl hinzu. Und das alles wird mit Pseudoelementen geschehen, bei denen wir die beiden Doppelpunkt verwenden, um das Pseudoelement anzugeben und Stile auf um das Pseudoelement anzugeben einen Teil des ausgewählten Elements anzuwenden . Pseudoelemente dürfen bestimmte Teile eines Elements erstellen und auswählen. Wir werden fortfahren und wir werden eine Auswahl des Seiteninhalts treffen . Wir haben eine Reihe von Seitenelementen, die wir bereits haben. Ich wähle diejenige mit einer ID von einem aus. Und dann werden wir ein Pseudoelement darauf anwenden das Element mit der ID eines auswählen. Und ich aktualisiere die Schriftgröße des Elements mache die Schriftgröße relativ groß. Wir können die Bildgröße auch als ziemlich große Bilder aktualisieren. Aktualisieren wir also die Breite des Bildes, 200 PECS. Es ist also viel kleiner. Wenden wir nun ein Pseudoelement an. Wenn wir es also auf die erste Zeile anwenden wollten, können wir dies innerhalb einer Zeile angeben. Und dies verwendet die beiden Colins , die es uns ermöglichen, das Pseudo anzugeben die erste Zeile auszuwählen. Und lasst uns die erste Zeile aktualisieren und der ersten Zeile eine rote Farbe hinzufügen . Das wird die erste Zeile des Inhalts sein. Wenn die Linie schrumpft, sie immer noch nur auf die erste Zeile angewendet. Dies ist eine interessante Möglichkeit, verschiedene Effekte auf Teile des Elements anzuwenden . Aktualisieren wir die Hintergrundfarbe und wir legen die Hintergrundfarbe auf Schwarz fest. Die Farbe der Schrift legt fest, dass alles weiß ist. Und das lege ich als Strand fest. Lasst uns updaten. Und es wird eine Auswahl des ersten Buchstabens treffen. Innerhalb dieses Elements. Wählen Sie den ersten Buchstaben aus. Und ich aktualisiere die Schriftgröße des ersten Buchstabens, um das für EM zu machen. So kann er den ersten Buchstaben aktualisieren ihn wirklich groß machen. Sie können den Inhalt auch nach der Auswahl des Elements festlegen . Sie können also das Element auswählen und mit After können Sie Inhalte nach dem ausgewählten Element hinzufügen. Wir können den Inhalt angeben. Hinzufügen des Inhalts von HelloWorld. Es wird der Inhalt hinzugefügt. Ich weiß, dass es ein bisschen schwer zu erkennen ist. Aktualisieren wir also die Farbe so, dass sie für den Hintergrund blau ist. Es gibt also den Inhalt, der in dem einen gesetzt wird. Und wenn Sie den Seiteninhalt des Elements untersuchen , gibt es das Nachher. Und wir sehen nicht, dass die Hallo Welt geschrieben wird , da das mit dem Styling gemacht wird. Was auch immer in dieser Polizei ist, wird der Inhalt sein, der hinzugefügt wurde. Sie können auch ein Vorher machen. Dadurch wird der Inhalt vorher platziert. Das hat es tatsächlich in die erste Zeile aufgenommen und den Inhalt aktualisiert. Wenn Sie also sogar den ersten Buchstaben auf diesen ersten Teil des Seiteninhalts als Pseudoelemente anwenden , können Sie Teil des Elements auswählen und Aktualisierungen vornehmen. Es sind auf die verschiedenen Eigenschaften beschränkt , die angewendet werden können. Also mach weiter und versuche dich besser mit dem vertraut zu machen, was du als Pseudoelemente tun kannst. 12. 11 Float Layout CSS: Wir werden eine einfache Website mit Floats einrichten. Wir haben also die typische Kopfzeilennavigation, das Menü und die Fußzeile. Und wir werden die Schwimmer benutzen. Es schwimmt also sowohl für das dreisäulige Design als auch für die Links der Navigationsleiste, die die verschiedenen Pseudoklassen und die Pseudoelemente anwenden die die verschiedenen Pseudoklassen und , um die Floats zu löschen. Und dann wenden Sie verschiedene Styling-Eigenschaften an, um es wie eine Website aussehen zu lassen. Wir werden diese typische Webseite LEO aktualisieren , um auf ein dreispaltiges Design zu tippen. Wir haben also eine Kopfzeilennavigation, den Hauptinhaltsbereich und einen Fußzeilenbereich. Es trifft eine Auswahl von diesen. Und dann werden wir diese mit einem Float hinzufügen. Also lasst uns zuerst weitermachen und wir werden das Styling öffnen und ein Styling löschen , das wir zuvor dort hatten, und wenden die Randbox an, weil wir die Schwimmer verwenden werden. Das wird also mit allen Seitenelementen erledigt . Wählen Sie alle Seitenelemente aus und legen Sie die Größe der Box fest, und legen Sie die Größe der Box damit diese Seitenelemente als Randfeld bezeichnet werden. Auf diese Weise, wenn wir die Spalten einrichten, welche die nächste ist, die wir auswählen werden. Wir können eine Breite für diese auf 33% festlegen. Und so können wir sie richtig auf die Seite passen lassen. Ich setze sie auf 33% ein. Fügen Sie auch einen Rahmen für sie hinzu, damit wir alle verschiedenen Spalten klar sehen können. Das kann also ein Pixel sein, ein solider schwarzer Rand. Es gibt unsere Kolumnen. Lassen Sie uns eine Standardhöhe für sie festlegen. Und die Höhe kann 200 Plektren betragen. Dann können wir sie mit dem Schwimmer nach links schweben. Richten Sie sie also als Float ein. Und ich schwebe sie nach links. Das stellt das Basic für die drei Spalten ein. Ich werde auch einen Text ausrichten, um den Text zu zentrieren, den wir haben. Stellen Sie das als Mitte für den Text ausgerichtet ein. Wir haben die drei Spalten dort. Wir möchten die Fußzeile einstellen. Ich habe Klassen für die Fußzeile und für die Kopfzeile hinzugefügt. Wählen Sie also die Fußzeile und die Kopfzeile aus. Dann richte ich sie beide nur Komma getrennte beide Auswahlen ein. Ich setze den Text ausrichten, zentrieren Sie den Text aus. Wir werden den Hintergrund von beiden festlegen. Sie könnten beide übereinstimmen. Und so gab es einen schwarzen Hintergrund. Die Farbe der Schrift kann weiß sein. Da sind also unsere Fußzeilen da. Es wird tatsächlich auf die Spalten angewendet, weil wir danach nicht geklärt haben. Also wollen wir nach der Auswahl des Hauptinhalts löschen . Ich gebe diesem eine Klasse von Mittelwert , damit wir sie innerhalb des Stylings auswählen können. Wir möchten den Clear Fix für dieses Hauptelement anwenden, es auswählen und dann das Pseudo verwenden, um es festzulegen. Danach werden wir dort einige Inhalte einstellen. Und dies wird es uns ermöglichen, die klare Lösung für beide zu tun . Und der Inhalt kann nur ein leerer Inhalt sein. Stellen Sie die Anzeige als Tabellenanzeige ein und löschen Sie dann beide mit einer Klärung. Also Buch, das alle Schwimmer räumt und beides frei macht. Dies ermöglicht es uns erneut, die Kopf- und Fußzeile getrennt zu lassen. Und weil diese Spalten aufgrund des Floats über der Kopf- und Fußzeile schwebten. Stellen wir dafür eine Höhe ein. Dies kann 120 sein, wählt die Zeilenhöhe für sie aus , damit wir den Text zentrieren und vertikal ausrichten können. Und wenn Sie mehr Text hinzufügen, müssen Sie natürlich aktualisieren, wie hoch die Zeilenhöhe ist. Im Moment werde ich keine zusätzlichen Texte hinzufügen, also richte ich sie nur als Zeilenhöhe auch für die Navigationsleiste ein. Also wird es die Navbar sein. Ich gebe ihm eine Klasse von Navi falls wir die Tags, verschiedene Teile der Seite, wiederverwenden möchten . Ich wähle es als Klasse von Navi aus. Für den genug Negationsbalken. Wir können den Text auf zentrierte Ausrichtung ausrichten. Lassen Sie uns eine Hintergrundfarbe für den Inhalt machen und diese als rot einrichten. Lasst uns auch weitermachen und wir werden dort ein paar Divs hinzufügen . Dann benutzen wir diese Divs und richten sie auch mit den Floats aus. Auswahl innerhalb des Navigationsgeräts die divs. Wir können auch die Divs machen , die sich sofort innerhalb des NADPH befinden. Stellen Sie das so ein, dass es schwebt. Nach links. Füge etwas Polsterung für die Entwickler hinzu, zehn Bilder. Wir wollen auch den klaren Fix für danach machen , Komma getrennt. Und dort haben wir auch die Schwimmer. Und das sollte auch auf nachher eingestellt werden. Ich setze das auch danach ein. Wir setzen das Div danach auf löschen. Stellen Sie für die Entwickler eine Breite von 25 Pix ein. Stellen Sie eine Breite von 25 Pix ein. Richten Sie den Text auch in der Mitte aus, da wir die vier Elemente in der Liste haben . Es wird eine Hintergrundfarbe für jeden von ihnen festgelegt. Stellen Sie die Hintergrundfarbe auf Rot und die Schriftfarbe kann weiß sein. Für diese gibt es unsere Links. Immer wenn wir den Mauszeiger über sie bewegen. Es sind noch keine Links, aber wir müssten Links hinzufügen. Wir werden die Hintergrundfarbe aktualisieren, wenn sie mit dem Mauszeiger unterwegs sind. Und ich setze die Hintergrundfarbe auf Schwarz ein. Die Farbe kann auf Rot gehen. So können Sie eine Basis-Website mit Floats einrichten. 13. 12 Flex Layout CSS: Wir erstellen eine CSS-Vorlage mit Flexbox und richten unsere typische HTML-Vorlage ein. Wir haben die Kopfzeile, das Navi, die Haupt- und Fußzeile, aber die dreispaltige Website bietet uns Flexbox eine Möglichkeit, ein Web-Layout zu erstellen. Dies wird auch reagieren. Wenn wir die Größe ändern und vergrößern, werden diese Spalten weiterhin reaktionsschnelle Elemente in einem Container erstellen , die mit flex, diese Lektion werden wir machen und verwenden Flex Box, um ein dreispaltiges Website-Design zu erstellen. Also werden wir die Elemente von der Seite auswählen und aktualisieren. Also lasst uns weitermachen und wir werden alle Elemente auswählen , die Spalten sind. Hier haben wir das dreisäulige Design. Ich werde mich auch auf alle Elemente bewerben und die Größe der Box hinzufügen. Auf diese Weise können wir die Standardgröße jeder der Zellen festlegen . Und dazu gehören auch die Polsterung und jede der Grenzen. Box-Größenbestimmung ermöglicht es uns, die Ränder und die Polsterung für die Breite der Elementzellen einzubeziehen die Ränder und die Polsterung für . Also wählen wir alle Spalten aus. Ich füge den Spalten einen Rahmen hinzu. Also wähle man fest, und ich mache einen blauen Rand für die Säulen. Es gibt unsere drei Spalten , die wir anwenden möchten. Ich werde auch etwas Polsterung zu den Spalten hinzufügen. Richten Sie also die Polsterung ein und ich mache nur zehn Pixel Padding darauf. Und ich lege eine Standardhöhe fest, damit sie 200 Plektren beträgt. Es gibt also unsere drei Spalten. Richten Sie einen Text aus, damit wir den Text so ausrichten können , dass er für ihn zentriert wird. Und jetzt wollen wir sie mit dem Flex auf Lager haben. Lassen Sie uns die Flex-Breite einstellen und die wir mit der Flex-Eigenschaft eines festlegen können. Es wird also die Breite jedes einzelnen dieser Container sein. Wir müssen das übergeordnete Element auswählen und die Flex-Eigenschaft auf das übergeordnete Element anwenden . Das sind also die Spalten, die innerhalb des mittleren Elements enthalten sind , innerhalb des Hauptelements. Aktualisieren Sie die Anzeigeeigenschaft und legen Sie sie auf Flex fest. Dadurch können die Kinder des Hauptbehälters diese Anzeigeeigenschaft abrufen. Und dort bekommen wir das dreisäulige Design. Wir können das auch aktualisieren und die Navigation einstellen. Wir haben ein Element mit einer Klasse von Navi, trennen Sie sie einfach durch Komma und wir möchten die Flex-Eigenschaft sofort auf beide anwenden , um diese zu lagern. Daher möchten wir verschiedene Eigenschaften auf die Navigationselemente anwenden . Dies sind diejenigen, die die Divs innerhalb der Nav-Klasse sind. Wählen Sie also die Nav-Klasse und dann die Divs aus, die in ihnen enthalten sind. Lasst uns weitermachen und dafür eine Grenze einrichten. Ich richte eine grüne Grenze für sie ein. Auf diese Weise bekommen wir einige Grenzen um sie herum und fügen dafür etwas Polsterung hinzu. Und lassen Sie uns ein paar fünf Pixel Polsterung für sie sortieren. Dann setzen wir mit flex den Flex-Wert für eins und richten auch einen Text aus, um den Text auszurichten, dass der Text zentriert ausgerichtet wird, um den Text auszurichten der uns die Link-Elemente gibt. Einrichten eines Hintergrunds. Ich richte eine Hintergrundfarbe für die Seitenelemente und richte sie als Block ein. Und dann kann die Farbe blau sein, wird die Farbe tatsächlich auf Weiß einstellen. Und das Hinzufügen des Hover-Effekts zu diesen Elementen, wenn die Elemente schweben. Um ihnen das Feld zu geben, dass sie Links sein werden. Wir können die Verknüpfung danach entweder mit JavaScript anwenden oder wir können es innerhalb des HTML als Anker-Tags tun . Immer wenn wir mit der Maus auf ein Update fahren, ist die Hintergrundfarbe. Wir legen fest, dass das blau ist. Während wir den Mauszeiger überfahren. Es gibt uns eine neue Hintergrundfarbe für diese Elemente. Wählen wir nun die Kopf- und Fußzeile aus. Elemente mit einer Kopfzeile und dem Element mit einer Fußzeilenklasse wenden einige Eigenschaften darauf an. Wieder einmal, Hintergrundfarbe für diese, Hintergrundfarbe für diese. Ich stelle den Überlauf auf Auto ein. Das wird also den gesamten verfügbaren Speicherplatz einnehmen. Text ausrichten, zentrieren, richten Sie den Text aus. Und wir werden eine Mindesthöhe einrichten, damit sie 100 PECS beträgt. Das gibt uns die Kopf - und Fußzeile und erledigen auch die Zeilenhöhe dafür. Es ist eigentlich für die Fußzeile, wir wählen es separat aus. Wir haben das Div innerhalb dieses Elements. Wählen Sie das div aus, in dem wir den Inhalt für die Fußzeile für dieses Wochenende haben, legen Sie einen Spielraum fest und dann auch etwas Polsterung. Auf diese Weise können wir zusätzliche Inhaltszeilen hinzufügen. So können Sie Flex verwenden, um eine Standard-Website-Vorlage mit drei Spalten einzurichten . 14. 13 CSS Grid Layout CSS: Wir werden das Anzeigeraster anwenden. Das CSS-Raster, um ein grundlegendes dreispaltiges Template-Design mit einer Navigationsleiste zu erstellen , könnte dies vollständig reagieren. Durch die Verwendung des CSS-Rasters können Sie reaktionsschnelle Seitenelemente erstellen. Ich zeige Ihnen, wie Sie eine grundlegende Startervorlage erstellen können , die Sie für Ihre Websites verwenden können , um sie weiter zu entwickeln , während Sie zusätzliche Inhalte zu Elementen hinzufügen . Beginnend mit einem einfachen, sehr einfachen Layout werden wir eine Kopfzeile, einen Nav-Hauptbereich und eine Fußzeile für den Inhalt haben . In dieser Lektion werden wir das Website-Design und das Layout mithilfe des Rasters einrichten . Es wird eine dreispaltige Website sein. Wählen wir zunächst den Hauptcontainer aus, und das wird der Container sein, der bedeutet, dass ich bereits die Box-Größe hinzugefügt habe. Dies wird also der Elternteil sein, dem die Kinder angezeigt werden , die unmittelbaren Kinder mit ihm als Rasterformat, das Display verwenden und als Anzeigeraster einrichten . Dann werden wir sie für das Netz als ein FR, FR und ein FR einrichten . Dadurch werden diese Spalten sofort in diese Art von Struktur festgelegt . Aktualisieren wir die Spalten, wählen die Elemente mit den Spalten aus, richten Sie die ein und greifen den Rahmen. Richten Sie die Breite von ihnen ein. Und sie werden innerhalb des Rasters gesetzt sein. Wir wollen es also dynamisch machen damit wir die Breite nicht wirklich einstellen müssen, aber wir werden die Höhe für diese Zellen festlegen. Und ich stelle auch fest, dass der Textinhalt zentriert wird , um den darin enthaltenen Textinhalt auszurichten. Es gibt also diese vier Spalten. Sie können dies auch verkürzen, indem Sie die Wiederholung verwenden. Wenn sie also alle die gleiche Größe wir die Wiederholung verwenden können. Und eine Wiederholung von vier mit einem FR für jeden von ihnen einrichten . Und eigentlich sollten das drei sein , weil wir die drei Spalten dort haben. Wir werden das auch für die Navigation tun. Wir haben Elemente mit einer Klasse von Navi. Das wird also der Elternteil für das Netz sein. Und dann werden die Navigationselemente dort als Rasterelemente enthalten sein , die das Raster einrichten. Und dieser hat vier Gegenstände für Kinder da drin. Und wir wählen das Navi und die Divs aus, die mit einer Klasse sofort genug sind . Und dann die Diffs. Dies werden Links sein. Wir können Text ausrichten. Richten Sie auch eine Hintergrundfarbe ein und ich richte eine Hintergrundfarbe von Grün ein. Für diese. Ich aktualisiere die Schriftgröße auf 1,2 EM. Wir legen eine Farbe Weiß für die Links fest. Und wir fügen die Option hinzu, wenn wir den Mauszeiger über sie bewegen, damit die Farbe aktualisiert wird. Also das Pseudo. Und wir können das einstellen. Also setze das ein. Wie wäre es, wenn wir das auf Block setzen? Immer wenn sie mit dem Mauszeiger unterwegs sind, gibt es unsere Links und das Raster reagiert standardmäßig. Das gibt uns also die grundlegende Struktur, die wir brauchten. Jetzt können wir ein zusätzliches Styling sowohl auf die Kopfzeile als auch auf die Fußzeile anwenden . Und richte eine Hintergrundfarbe für diese ein. Ich richte nur einen schwarzen Standardhintergrund ein. Und die Farbe der Schrift kann weiß sein. Wählen wir die Schriftgröße aus. Mach es richtig groß. Und dann richten Sie den Text aus, zentrieren Sie den Text für diese aus. Das gibt uns also unsere grundlegende Webseitenstruktur in der wir die Kopfzeile, die Fußzeile haben und auch den Überlauf für diese festlegen. Auf diese Weise werden sie bis zum Standardabstand der Navigationsleiste heruntergehen . Lassen Sie uns innerhalb der Struktur der Seite benötigen. Dann, während Sie die Größe ändern und verkleinern. Dies werden auch vollständig reaktionsschnelle Seitenelemente sein. Angenommen, Sie können das Raster verwenden, um eine Standard-Website-Vorlage einzurichten , die Sie als Ausgangspunkt für die Entwicklung Ihrer Webseite verwenden können .