20 CSS-Tricks, die du vermutlich noch nicht benutzt hast

1. Einführung: Hallo, mein Name ist Aga und ich bin Codierungsdesigner. Ich mag rosa Farbe und Dinosaurier, aber das Wichtigste ist, dass ich spezielle CSS-Klassen für Sie vorbereitet habe. 20 CSS-Tricks, die Sie wahrscheinlich noch nicht verwendet haben. Haben Sie schon einmal von Line Clamp Eigenschaft oder Column Count gehört? Haben Sie schon einmal Conic Gradient in CSS angewendet? Nun, wenn nicht, wird dies eine sehr interessante Reise sein , denn ich werde Ihnen 20 CSS-Tricks zeigen, die nicht sehr beliebt sind, um ehrlich zu sein, aber ich hoffe, dass Sie kreativ finden und das Ihre Arbeit an Labordesigns steigern wird. Die Klassen sind für jeden bestimmt, der jemals eine Zeile CSS-Code geschrieben hat und mit CSS-Klassen vertraut ist. Ich zeige Ihnen 19 CSS-Eigenschaften und ein HTML-Tag. Mit allen können Sie noch kreativere Layouts und noch mehr coole Effekte erstellen . Ich bin mir sicher, dass sie Ihren täglichen Workflow steigern, während Sie Ihre Designs codieren. Ich kann es kaum erwarten, dich auf der Studentenliste zu sehen. Tschüss. 2. Vorbereitungen – was du brauchst: Was du für den Unterricht brauchst. Erstens, Ihr Lieblings-Browser. Ich benutze gerne Chrome und Firefox. Zweite, Code-Editor. In Klassen verwende ich den Atom-Editor. Sie können es einfach von atom.io und das dritte Paket aus dem Projektbereich herunterladen , den ich speziell für Sie erstellt habe. Dort finden Sie das Skelett der Website, in dem wir einige Beispiele und einige CSS-Tricks zitieren werden. Das Paket enthält Index HTML Datei Ergebnis PNG, das ist das endgültige Layout, das wir anstreben. Später können Sie vergleichen, wie Ihre Website aussieht, ob sie dieser ähnlich ist und wir img Assets haben, alle Assets, die ich im Layout verwendet habe, alle Assets, die ich auf der Website verwendet habe, und natürlich CSS. Stile, in denen wir einige Zeilen hinzufügen und CSS erstellen werden. Wenn ich es auf Atom öffne, kann ich HTML-Code und styles.css sehen, wo ich alle neuen Elemente während des Kurses setzen werde. Hier können Sie sehen, dass ich auch einige Kommentare hinterlassen habe, damit Sie sofort wissen, wo Sie das neue CSS einfügen können. 3. Trick Nr. 1 – mehrere Hintergründe: Trick Nummer 1, mehrere Hintergründe. Wenn Sie sich jemals gefragt haben, ob Sie mehrere Bilder für Ihren Hintergrund verwenden können, ist die Antwort, dass ja, Sie können es tun. Wir können Hintergrundbild-Funktion für das Hinzufügen von mehr als einem Bild verwenden. Wir verwenden einfach URL-Funktion, und trennen alle anderen Bilder durch Komma. Wir können Hintergründe stapeln, aber dann für wichtige Informationen ist, dass der erste Hintergrund, den Sie auf der obersten Ebene bereitstellen, und der letzte Hintergrund wird in der Rückseite angezeigt. Nur je weniger Hintergrund kann Hintergrundfarbe enthalten. Natürlich haben andere Eigenschaften für Hintergrund wie Hintergrundwiederholung, oder die Hintergrundposition kann auch angewendet werden. Fangen wir mit der Übung an. Jetzt sind wir alle eingerichtet, um die Hintergründe hinzuzufügen. Lassen Sie uns den Index HTML aus unserem Paket öffnen, dies ist die Website, die wir haben, und wie erwähnt, werden wir zwei Bilder zu unserem Hintergrund hinzufügen. Wenn ich unter der Website schaue, dass es bereits codiert ist, wird es so aussehen. Wir haben zwei Hintergründe, und einer ist in der linken oberen Ecke, der andere unten rechts. Wir werden auch Hintergrund-Anlage fixiert hinzufügen, die Sie sehen können, dass diese beiden Hintergründe an einer Stelle fixiert sind. Wir haben diese parallaxische Wirkung. In Ordnung. Kommen wir zurück zu unserem Code, wir sind in der styles.css, und wenn wir unsere Dev-Tools öffnen, werden wir sehen, dass dies Header-Abschnitt ist, das ist der Selektor, den wir haben. Ich suche nach einem Header, diesem, und hier habe ich einen Kommentar hinterlassen, der besagt, dass wir hier mehrere Hintergründe hinzufügen. Wir haben Hintergrundfarbe, dass wir Hintergrundbild hinzufügen können, URL-Funktion, und diese beiden Bilder sind im Bild-Ordner. Lassen Sie uns img Ordner öffnen und wir sollten hand.jpeg haben, und colors.jpg. Diese beiden Dateien, ich füge die erste hinzu, es spielt keine Rolle, welche die erste sein wird weil sie sich nicht überlappen. Ich schreibe img/hand.jpeg, die andere URL-Funktion wieder im Ordner img/colors.jpg. In Ordnung. Ich speichere und lass uns unsere Website aktualisieren, wie Sie sehen können, gibt es eine Änderung. Wir können den Hintergrund sehen, die Hand, aber hier haben wir zwei Bilder angewendet. Das erste, was wir ändern müssen, ist definitiv Hintergrundgröße, die Hand wird nicht auf die volle Breite gestreckt werden. Wir können tun, sagen wir mit 430 Pixel, und die anderen 470. Leider wird der Hintergrund standardmäßig wiederholt, wir müssen dies zurücksetzen, Hintergrund-Wiederholung: keine Wiederholung; Dank dessen haben wir nur ein einziges Bild, und die Bilder bleiben hängen, alles, was Sie sehen können sind gesteckt. Die erste auf der Vorderseite ist hand.jpeg, weil es die erste in der in der URL-Funktion aufgeführten ist, und die zweite ist colors.jpg und die Farben sind darunter. Lassen Sie uns die Position für sie definieren. Wir können Hintergrundposition definieren, definieren für die Hand, es wird links und oben sein, und auf für die Farben, wird es richtig sein. Dies sind die Zeilen, die wir für unseren Code hinzufügen müssen, und zurück gibt es auch angewendet, Hintergrund-Anhang: fix; wir können diesen, parallaxischen Effekt sehen. Wenn ich auskommentierte, wird es sich anders verhalten. Was ich mache, kopiere ich einfach diese Zeilen und füge sie unten ein. Bitte denken Sie daran, dass Sie alle anderen Untereigenschaften für Hintergründe wie die Hintergrundfarbe verwenden können alle anderen Untereigenschaften für Hintergründe , um die Position anzupassen und einfach dasselbe tun , indem Sie die Werte für den gegebenen Hintergrund mit Komma trennen und einfach speichern. Wir können Hintergründe mischen, Sie können Bilder mischen, und Sie können auch Hintergrundfarbe hinzufügen. Mal sehen, ich habe diese zwei Hintergründe des Lichts. 4. Trick Nr. 2 – Einheiten für Breite und Höhe des Ansichtsfensters (vw und vh): Trick Nummer zwei, Breite des Ansichtsfensters und Höhe des Ansichtsfensters. Das Ansichtsfenster ist der Bereich, in dem der Browser die Site rendert. Dies ist der Bildschirm, die Höhe des Bildschirms minus der Raum, der für das Panel des Browsers reserviert ist. Manchmal möchten wir die Höhe des Elements oder die Breite basierend auf der Größe des Ansichtsfensters festlegen . Wir können Ansichtsfenster-Breiten- und Ansichtsfensterhöheneinheiten verwenden, und das möchten wir auch in unserem Layout verwenden. Wir haben unsere Website und wir wollen den Header für 80 Prozent der Höhe des Ansichtsfensters definieren . Anstatt 800 Pixel zu setzen, können wir 80 Ansichtsfensterhöhe schreiben. Wenn ich es als 50 definiere, können Sie sehen, dass dies die Hälfte der Höhe des Bildschirms ist. Wenn ich von der Vollbild-Anzeigegehe, sehen Sie, dass dies kleiner ist. Daher wird es basierend auf der Höhe des Fensters, umgehenund gehe, sehen Sie, dass dies kleiner ist einer Ansichtsfensterhöhe neu berechnet . Also ändere ich es auf 80, und ich möchte das auch in meinem Code anwenden. Schreiben von 80 Ansichtsfensterhöhe sparen, und so sieht es aus. Natürlich können Sie auch mit der Breite des Ansichtsfensters und der Höhe des Ansichtsfensters spielen. Ich würde es lieber nicht auf Text anwenden, es ist nicht sehr empfehlenswert Methode, aber Sie können leicht damit auf den Bildern oder Boxen, Containern spielen. Zum Beispiel können wir hier Höhe, 100, Ansichtsfensterhöhe hinzufügen, und Sie werden sehen, dass es perfekt zu 100 Prozent der Ansichtsfensterhöhe des Browsers passt . Wenn ich es in kleiner ändere, werden Sie sehen, dass es tatsächlich seine Höhe ändert. 5. Trick Nr. 3 – Kürzel für Schriften: Trick Nummer drei, Schriftart Kurzschrift. Anstatt alle SAP-Eigenschaften für Schriftart wie Schriftart, Schriftgewicht, Schriftgröße, Zeilenhöhe oder Schriftfamilie aufzulisten , können wir alles in einer Zeile mit Schriftkürzel schreiben. Wie macht man es? Lass uns mal sehen. Also kommen wir zurück zu Ihrer Website und wir haben die Überschrift h1 und wir würden gerne h2 tatsächlich, und wir möchten auf diese eine Schriftart Kurzschrift anwenden. Hier können wir sehen, dass wir Font-Familie haben. Wir haben einige Stile wie Schriftgewicht. Wir haben eine Zeilenhöhe. Also lassen Sie uns Kurzschrifteneigenschaft verwenden. Also lasst uns die h2 finden. Es war Klassen-Teiler. Also haben wir hier unsere Stile für die Überschrift definiert. Also schreibe ich Schriftart Kurzschrift und füge hier mein Spickzettel ein. Ich erinnere mich, welche SAP-Eigenschaft in welcher Reihenfolge verläuft? Zuerst haben wir die Schriftart definiert, die normale Schriftvariante ist, die ebenfalls normal ist. Schriftgewicht, wir haben 900, es ist von hier, also kann ich das entfernen. Schriftgröße, die 100 Pixel ist, entfernt es auch. Zeilenhöhe, die 0% ist. Also ist das getan, und dann Font-Familie, also kopiere ich Darker Grotesque und Sans Serif. Entfernen Sie es auch. Wenn ich nichts verpasst habe, müssen wir die Zeilenhöhe entfernen. Speichern Sie es. Ich kann immer noch meinen Kommentar haben. Lassen Sie uns die Website aktualisieren. Wir haben unsere Schriftart Kurzschrift richtig funktioniert. Wenn ich es auskommentiere, würde ich sehen, dass diese Eigenschaften nicht mehr angewendet werden. Also natürlich, Sie können damit spielen. Sie können es ändern und Ihren Code effektiver und kürzer machen, dank dieser Kurzschrift Eigenschaft. 6. Trick Nr. 4 – Schriftzug: Wir können einen Umrisseffekt für die Schriftart erzielen, indem Text streicheln und das Innere nicht ausfüllen. Leider wird diese Funktion von älteren Browsern nicht vollständig unterstützt, aber es bedeutet nicht, dass wir damit nicht experimentieren können. Dazu müssen wir zwei Eigenschaften anwenden. Das erste, -webkit-text-fill -color und mit diesem Präfix Webkit ist entscheidend. Die zweite, -webkit-texts-stroke. Wenn wir auf der Seite schauen, die bereits codiert ist, werden Sie sehen, dass wir dort den schwarzen Umriss der Überschrift haben. Vergrößern dieses auf CD-Effekt. Wenn ich in den Code eintauche, werden Sie sehen, dass wir für die Überschrift Textfüllfarbe angewendet haben. Die coole Sache ist, dass wir es auch transparent machen können, um wirklich coolen Effekt zu schaffen. Wir können auch die Farbe ändern, um es zu einem Grün zu machen, machen Sie es, was Sie wollen. Natürlich haben wir den Umriss, der durch Textstrich definiert wird, und wir können die Strichbreite in Pixeln definieren. Wir können mit fünf, wir können eins, was auch immer Sie wollen. Wir sind auch in der Lage, seine Farbe zu ändern. Du kannst tun, was du willst. Lassen Sie uns dies auf Funktionen in unserem Code anwenden. Wir haben -webkit-text-fill-color, die in unserem Fall weiß ist. Wir haben -webkit-Texts-stroke. Hier fügen wir zwei Pixel für den Umriss und die Farbe hinzu. Ich erfrische meine Website, dass ich diesen schönen Effekt der Umrisse sehen kann. Wenn Sie eine vollständige Tasche für die Browser erstellen möchten , die dies nicht für CSS-Eigenschaften unterstützen, können Sie Textschatten verwenden. Lassen Sie es uns einfach auskommentieren. Ich füge Textschatteneigenschaft ein. Aber zuerst müssen wir Farbschriftart anwenden, Farbe weiß. Sie werden sehen, dass mit Textschatten, können wir so etwas wie einen Umrisseffekt erstellen , den wir mit Textstrich- und Füllfarbe erreicht haben. Ich wollte Ihnen nur zeigen, dass Sie diese Option haben, um einen Fallback mit t shadow anzuwenden. Aber ich empfehle Ihnen dringend, mit Füllfarbe und Textstrich zu spielen. 7. Trick Nr. 5 – Schlagschatten: Trick Nummer 5, Schlagschatten. Schlagschatten ist die CSS-Funktion, die einen Schlagschatteneffekt auf das Bild anwendet. Was ist der Unterschied zwischen einem Schlagschatten und einem Box-Shadow? Lass uns sehen. Wenn wir einen Boxschatten anwenden, werden Sie sofort den Unterschied sehen. Quaderschatten wendet den Schatten hinter dem Element hinter dem Feld des Elements an, sodass Sie das Rechteck haben. Für Schlagschatten gilt es für das Element selbst. Wenn ich das Bild habe, das etwas Transparenz hat, genau wie dieses Bild dieser Blätter, werden Sie sehen, dass der Schatten für jeden Teil des Bildes erstellt wird. Deshalb ist es gut zu wissen, dass wir Schlagschatten-Eigenschaft haben, die gleiche Eigenschaft wird auch für die Hand angewendet. Wenn ich es vertusche, wirst du sehen, dass Schatten erscheinen. Wenn ich Box-Schatten habe, wird der Schatten auf das ganze Rechteck angewendet. Lass es uns in unseren Mantel geben. Für Schlagschatten haben wir 1,2,3, drei Koordinaten, also x, y, sind eigentlich keine Koordinate, aber die Unschärfe und der erste Wert ist die Farbe des Schattens, den wir haben. Wir haben Schlagschatten, fügen wir das zu Pflanze hinzu. Wir haben gefilterten Schlagschatten, 10 Pixel für die X-Achse, für eine Y-Achse wir haben 40 Pixel, 30 Pixel für die Unschärfe und für die Farbe haben wir schwarz, aber mit Transparenz von 5 Prozent. Ich erfrische meine Website, und ich kann für diese Pflanze sehen, ich habe Schlagschatten angewendet. Natürlich können wir manipulieren, wir können diese Werte auf 45 ändern, natürlich, fügen Sie dies unserer Hand hinzu, speichern, aktualisieren Sie die Website und ich kann sehen, dass für meine Hand, der Schatten auch angewendet wird. 8. Trick Nr. 6 – Unschärfe: Trick Nummer sechs, Filterunschärfe. Die Filtereigenschaft und ihr Weichzeichnungswert wenden einen Weichzeichnungseffekt auf das Bild an. Je größer wir haben werden, desto größer werden wir Unschärfe erstellen. Das Pixel, das sich in der Klammer befindet, ist der Radius der Unschärfe. Wir müssen Photoshop nicht mehr verwenden, um unscharfe Auswirkungen auf unser Bild auf einer Website zu haben. Werfen wir einen Blick in den Code. Dies ist die Website in ihrer endgültigen Version und Sie können sehen, dass wir diese verschwommenen Blätter hier angewendet haben. Lassen Sie uns diesen Effekt für dieses Bild und dieses hinzufügen, dies ist Klasse Pflanzenhintergrund und Klasse Pflanzenhintergrund unten. Ich werde umschalten, wo in unserem CSS zu dekodieren, so dass ich Pflanzenhintergrund habe und Filter Unschärfe anwenden, fügen wir fünf Pixel hinzu. Unser Radius wird fünf Pixel haben. Ich erfrische die Seite und ich sehe, dass meine Blätter verschwommen sind. Einfach, einfach, effektiv. Sie können auch den mittleren Teil der Seite überprüfen, wo wir Blatt als auch haben. Auf dieses Bild haben wir Klasse namens Pflanzenhintergrund angewendet. diesem Grund funktioniert auch der Weichzeichnungsfilter. 9. Trick Nr. 7 – Zeicheneinheit (ch): Trick Nummer 7, Zeicheneinheit. Wir können Zeicheneinheit anwenden. Es stellt die Breite des Zeichens '0' in der aktuellen Schriftart dar, von besonderer Verwendung in Kombination mit monospaced Schriftarten. Dies ist im Geiste ähnlich wie x-height. Nur, ch basiert auf der Breite des 0-Zeichens anstelle der Höhe dieses X-Zeichens. Anstatt die Breite unserer Absätze in Pixeln zu definieren, können wir Zeicheneinheiten anwenden. Wenn Sie die Website überprüfen, die bereits codiert ist, können Sie sehen, dass der Text eine begrenzte Breite hat. Vergleichen wir es mit unserer aktuellen Phase. Bleiben wir in Kontakt. Dies ist die Überschrift, die wir in Bezug auf die Breite verkürzen möchten und für diesen Fall können wir die maximale Breite anwenden, die sie in Zeicheneinheit festgelegt ist. Wir haben H2 Kontaktüberschrift und wir können Max-Breite anwenden, lassen Sie uns acht Zeicheneinheiten anwenden und wir werden unseren Text begrenzt haben. Ich kopiere einfach diese Eigenschaft, zurück zur Codesuche nach der Verhaltensüberschrift und füge Zeicheneinheit hinzu. Sie können hier in Kommentar sehen, dass ich Max-Breite und Zeicheneinheit hinzugefügt habe. Ich kann es so schreiben. Natürlich können wir damit auch für Absätze spielen. Zum Beispiel können wir hier max-width schreiben, sagen wir 50 Zeichen und unser Absatz wird verkürzt. In Bezug auf die Breite. 10. Trick Nr. 8 – erster Buchstabe: Trick Nummer 8, erster Buchstabe. erste Buchstabe ist ein Pseudo-Element, das den ersten Buchstaben in der ersten Zeile eines Block-Level-Elements auswählt . Zum Beispiel, Absatz. Inspiriert von den Elementen im Druck, können wir diese Ideen auch ganz einfach ins Web übertragen. Hier können wir den Effekt sehen, auf den wir anstreben. Dies ist der erste Buchstabe des Absatzes, F Buchstabe, und ich wende es hier an, Pseudoelement mit dem ersten Buchstaben. Mal sehen, wie das CSS aussieht. Ich habe Pseudoelement, Anfangsbuchstaben angewendet. Es gibt einige Schrifteigenschaften wie Schriftgrößenfamilie, Texttransformation. Aber auch habe ich float-left und einige Ränder hinzugefügt, um diesen Brief perfekt an den schwebenden Text anzupassen. Lassen Sie uns dies in unseren Code anwenden. Dies ist mein aktueller Zustand der Website, und ich freue mich auf Absatz. Es ist p-Klassen-Intro, ich suche nach Intro-Klasse. Erster Brief. Also habe ich bereits einen Selektor für Sie erstellt, und wir möchten, dass er links schwebt. Wir wollten diesen Brief in Großbuchstaben haben. Wir wollten Schriftfamilie, Karla, Schriftgröße 100 Pixel haben. Später können wir darauf anwenden, unsere Abkürzung für Font-Eigenschaft, Linie und einige Ränder. Nehmen wir an, wir werden es direkt in den Anpassungswerkzeugen optimieren, aber lassen Sie uns für Anfang 10 Pixel hinzufügen. Ich aktualisiere meine Seite. Ich sehe, dass das Pseudo-Element für die Intro-Klasse funktioniert. Tut mir leid, ich habe den Fehler gemacht. Es sollte natürlich Zeilenhöhe sein. Alles klar, erfrischend. Ganz unten habe ich dieses Pseudoelement, Anfangsbuchstaben Element aufgelistet. Von der linken Seite möchte ich null Pixel haben, und vielleicht von der rechten Seite, 20. Lassen Sie uns es mit dem vorherigen Beispiel vergleichen. Ich denke, dass wir auch eine Marge von oben hinzufügen können. Also wie 15 lassen Sie uns sagen, dass es gut mit dem Text ausgestattet ist, dass es den Absatz schwebt. Ich bin fertig mit Marge, Einfügen Speichern. Ich kann auch, anstatt diese drei Zeilen zu schreiben, kann ich Schriftart normal schreiben. Dies ist die Stil-Variante. Als Nächstes, was war als Nächstes? Wir können einen Blick in die Trennwand werfen. Es war Stil, Variante, Gewicht, Größe, Zeilenhöhe, Schriftfamilie. Alles klar, warte, also haben wir normale Größe, Zeilenhöhe und Schriftfamilie. Lassen Sie es uns entfernen. Aktualisieren, alles sieht in Ordnung aus. Auf diese Weise können wir Pseudoelement aus dem ersten Buchstaben auf den Absatz anwenden. Sie können es auch hinzufügen. Zum Beispiel haben wir hier eine Liste. Lassen Sie uns die Stile kopieren, die wir haben, und lassen Sie uns Pseudo-Element erstellen. Wir haben nummerierte Liste li und Pseudo-Element, ersten Buchstaben. Du musst zugeben, dass es ein bisschen verrückt ist. Aber wenn man bedenkt, dass es möglich ist, können wir später wirklich interessante Effekte erzeugen. Ich empfehle Ihnen, mit dem Anfangsbuchstaben Pseudoelement zu spielen, und natürlich können Sie den Buchstaben größer machen, um den Effekt noch wirksamer zu machen. 11. Trick Nr. 9 – Zeilenklammer: [ MUSIK] Trick Nummer 9, Leitungsklemme. Die webkit line clamp Eigenschaft ermöglicht es uns, den Inhalt eines Block-Containers auf die spezifische Anzahl der Linien zu begrenzen , die wir definieren. Es ist wichtig zu wissen, dass es nur mit der Kombination mit Display-Eigenschaft funktioniert , die auf Webkit-Box oder Webkit-Inline-Box eingestellt ist . Wir müssen auch Webkit-Box orientiert Eigenschaft anwenden, die auf vertikal gesetzt ist. Es ist auch wichtig, Überlauf hinzuzufügen , der Hepta versteckt ist, weil dank ihm der Inhalt abgeschnitten werden würde. Es wird nach einer bestimmten Anzahl der Zeilen, die wir anwenden, nicht angezeigt. Zeilenklemmen befinden sich in einem Teil des CSS-Überlaufmoduls Ebene drei, und es ist derzeit der Editorentwurf. Wir können Linienklemme anwenden, aber nur mit einem Webkit-Präfix, das überraschend für alle anderen großen Browser funktioniert, nicht nur in Chrome oder Safari. Wir möchten Linienklemme auf Absatz mit einer gekürzten Klasse anwenden. Was wir tun müssen, müssen wir diese vier Elemente setzen. Das erste, von dem ich erwähnte, ist Display und wir müssen es auf Webkit-Box setzen. Die nächste Sache ist, Webkit-Linienklemme hinzuzufügen. Diese Linie Klemme, lassen Sie uns es auf drei Linien beschränken. Dann müssen wir Webkit anwenden, Box orientieren und auf vertikal setzen. Wie Sie sehen können, dass der Absatz bereits auf drei Zeilen gekürzt ist, aber der Rest des Textes wird immer noch angezeigt. Um seine Höhe visuell zu begrenzen, müssen wir Überlauf anwenden und auf ausgeblendet setzen. Dank dem, was wir drei Textzeilen erreicht haben, obwohl unser Absatz super lang ist und der Text immer noch da ist, aber visuell wird er auf nur drei Zeilen gekürzt und wir haben eine Ellipse am Ende. So gibt es dem Benutzer Informationen, dass tatsächlich gibt es einen mehr, mehr Inhalt in diesem Absatz verborgen. Bitte denken Sie an diese vier Dinge, die angewendet werden müssen. Natürlich füge ich es meinem Redakteur hinzu, verkürzt. Ja, hier habe ich einen Kommentar für Sie hinterlassen, indem ich ihn eingefügt habe. Einfach schnell, bereinigen, speichern, aktualisieren, und ich habe den Absatz verkürzt. 12. Trick Nr. 10 – nummerierte Liste: Trick Nummer 10, nummerierte Liste. Wir können leicht eine nummerierte Liste erstellen, indem Sie ol tack verwenden. Was wir als Ergebnis haben, sind Zahlen, die vor jedem Element der Liste angezeigt werden, es ist wirklich praktisch und nützlich. Aber was ist mit dem Styling dieser Zahlen, hast du das jemals versucht? Um es zu tun, müssen wir mit einigen CSS-Eigenschaften spielen, die CSS-Zähler genannt werden. CSS-Leistungsindikatoren können Sie deren Inhaltsperioden basierend auf der Position im Dokument anpassen . Um einen CSS-Zähler zu verwenden, muss er zunächst auf einen Wert mit der Eigenschaft counter reset initialisiert werden. Dann, wenn wir mit der Initialisierung fertig sind, später kann dieser Zählerwert erhöht oder verringert werden , und dies geschieht durch Zählerinkrement. Der Wert eines Zählers kann entweder mit einer Zähler- oder Zählerfunktion und einer Inhaltseigenschaft angezeigt werden. Lassen Sie uns die praktische Seite von CSS-Zählern sehen. Werfen wir einen Blick in unsere Liste. Das ist die bestellte Scheibe zu Schulden, die ich bereits für Sie vorbereitet habe. Was ich getan habe, ist, dass die Zahlen, die vor jedem Verbündeten Element angezeigt werden, vor jedem Element der Liste. Dies ist der Listen-Stil Rasen. Wenn ich da rauskomme, siehst du die Zahlen. Aber wir verstecken sie, um Pseudo-Elemente für die Verwendung von CSS-Zählern zu verwenden. Das kommt wieder in die Dekodierung. Ich habe meine nummerierte Liste, Verbündeter. Das erste, was ich tun muss, ist, dass ich die Zählerinkrementeigenschaft anwenden muss. Wir verwenden keinen Zähler Reset, da dies bereits nummerierte Liste ist und wir bereits unsere Elemente entsprechend nummeriert haben. Das einzige, was wir hier tun, ist, dass wir das Gegeninkrement auf Verbündete setzen. Dies ist der angegebene Name, so können wir auch hinzufügen, zum Beispiel, Listenelement, was Sie wollen. Dann müssen wir Pseudo-Klasse erstellen. Also haben wir Liste Verbündeter vorher nummeriert. Hier müssen wir Inhaltszähler hinzufügen und den Zähler ansprechen, den wir bereits erstellt haben. Der Wert, den wir bereits erstellt haben, welches Listenelement. Das funktioniert so. Hier können wir natürlich Stile zu unseren Zahlen hinzufügen. Aber zuerst, mal sehen, ob es funktioniert. Also speichere ich das, aktualisiere die Seite und ich kann die Zahlen sehen. Ich kann sehen, dass die Zahlen angezeigt werden und diese Zahlen korrekt sind. Also haben wir sechs Elemente. Wer könnte sechs Charaktere, wir haben 1,2,3,4,5,6. Also, lasst uns ein bisschen damit spielen. Wir können zum Beispiel Grenzradius um 50 Prozent hinzufügen. Für jetzt können wir den Hintergrund hinzufügen. Sagen wir jetzt blau, nur um damit zu spielen. Fügen Sie Schriftgröße 20 Pixel hinzu. Ich rette, erfrischend. Ich kann sehen, dass die Stile kommen. Aber lassen Sie uns die Stile anwenden, die visuell ansprechend sind. Das ist also mein Spickzettel. Ich habe die Zahlen bereits hier, also kann ich den Wert für den Hintergrund kopieren. Ich kann sehen, dass Schriftgröße 30 Pixel und die Breite und die Höhe der, des Kreises 45 Pixel ist. Das ist der Durchmesser. Auch gibt es einige Positionierung, die uns hilft, die Zahl schön nach der Zeile des Textes positioniert zu halten . Also lasst es uns einfach machen. Ich habe vorher hier, ich habe meinen Hintergrund, ich habe Höhe, 45 Pixel Breite 45 Pixel, Position absolut, links. Fügen wir minus 40 Pixel, Zeilenhöhe 45, Textausrichtung Mitte, Schriftgröße bei 20. Wir haben bereits Schriftgröße, so können wir 30 hinzufügen und die Zeilenhöhe auf 40 ändern . Es sieht schöner aus und die Schriftfamilie sollte Karla sein. Eigentlich Schriftgröße 25 und Zeilenhöhe 45. Sieht gut aus. Es sieht aus wie etwas, das wir erreichen wollten. Nehmen Sie alle Stile, die hier sind, und ich füge es mein Pseudoelement ein, aktualisieren Sie. Ich kann sehen, dass die Anzahl dieser Stile, können Sie CSS-Zähler für verschiedene Elemente im Abschnitt der Website verwenden. Später werde ich Ihnen eine Übung geben, um zu versuchen, Zahlen zum Beispiel auf Überschriften oder Absätze anzuwenden , verschiedene Elemente, als die nummerierte Liste, die bereits das nummerierte Element ist. Es ist also ein bisschen einfacher, CSS-Zähler für die Pseudo-Elemente anzuwenden. 13. Trick Nr. 11 – Text abkürzen: Trick Nummer 11, Text abschneiden. Ich habe bereits erwähnt, dass Text mit Zeilenklemme abgeschnitten wird. Wir können auch eine andere Methode verwenden. Um Text zu kürzen, benötigen wir drei CSS-Eigenschaften, Leerzeichen, Überlauf und Textüberlauf. Leerraum muss auf No-Wrap, Überlauf auf ausgeblendet und Textüberlauf zu Ellipsen eingestellt werden. Textüberlauf tritt nur auf, wenn die Überlaufeigenschaft des Containers, der Wert ausgeblendet, scrollen oder auto und Leerzeichen ohne Umbruch aufweist . Deshalb brauchen wir drei von ihnen, um diesen Effekt zu erzielen. Werfen wir einen Blick in unsere Website, und wir möchten diesen ganzen Absatz auf nur eine Zeile kürzen. Was wir tun können, ist, dass wir diese drei Eigenschaften anwenden können, die ich bereits erwähnt habe. In Ordnung, also suchen wir nach dem Absatz, er ist hier. Ich kann tatsächlich eine Klasse hinzufügen. Dies ist der Absatz unter der nummerierten Liste. Ich suche nach der nummerierten Liste. Hier haben wir den Absatz, ich werde es abschneiden Titel. Ich füge diese drei Eigenschaften hinzu. Damit es funktioniert, ist es Überlauf: versteckt: Textüberlauf: Ellipse; und die letzte ist, Leerzeichen: Nowrap; Ich speichere es. Aktualisieren meiner Website, und was ich sehen kann, ist, dass mein ganzer Absatz auf nur eine Zeile verkürzt ist, und diese Zeile wird mit einer Ellipse beendet. Wenn ich eine der Eigenschaften befehle, wirst du sehen, dass es nicht so funktioniert, wie wir es erwarten. Ohne Textüberlauf-Ellipsen haben wir am Ende keine Ellipsen. Ohne Leerzeichen: nowrap; Leider ist der Text nicht abgeschnitten. Der Überlauf funktioniert, aber was ist, wenn wir Leerzeichen hinzufügen: Nowrap; und Textüberlauf: Ellipse? Nun, eigentlich ist der ganze Absatz irgendwo hier. Aber weil wir keinen Überlauf haben: versteckt; der Rest des Textes, der nicht abgeschnitten ist, wird immer noch angezeigt. Dank Überlauf: versteckt; wir haben nur eine Zeile und es endet mit Ellipsen. Dank Textüberlauf: Ellipse. Wir können damit spielen und es an Ihre Bedürfnisse anpassen. 14. Trick Nr. 12 – Text mit Farbverlauf: Trick Nummer 12, Farbverläufe Text. Stellen wir uns vor, wir würden gerne Gradienten auf diese Überschrift anwenden. Bleiben wir in Kontakt. Die Frage ist, können wir tatsächlich Gradienten Hintergründe für Detects anwenden? Ja, das können wir. Wir können es tun. Dank einiger CSS-Eigenschaften haben wir. Werfen wir einen Blick in den Code. Wir freuen uns auf die Kontakt-Rubrik. Ja, genau das hier. Das erste, was wir hinzufügen müssen, ist der Hintergrund. Hintergrund, der auf unseren Text abgeschnitten wird. Ich möchte radialen Farbverlauf anwenden und ich habe bereits meinen Spickzettel. Zwei Farben, rosa und gelb würde ich gerne verwenden. Wir haben die Hintergrundfarbe und dann sollte die Hintergrundfarbe in Bezug auf die Form des Textes maskiert werden. Der Rest muss abgeschnitten werden, damit wir die unnötigen Elemente aus dem Container loswerden müssen, in dem sich der Text befindet. Wir können dies erreichen, indem wir Webkit-Eigenschaft, Webkit-Hintergrundclip anwenden. Dies ist die, die wir haben müssen, und wir wenden Texte an, weil wir den Text ausschneiden wollen. Das letzte, was wir anwenden müssen, füllen Farbe und wir müssen dies auf eine transparente setzen. Wir haben Webkit, Text, Füllfarbe und gelten für transparent. Ich erfrische die Seite und die Magie passiert. Ich habe einen schönen Farbverlauf auf meinen Text angewendet. Wenn ich zum Beispiel die Füllfarbe herauskomme , werden Sie sofort sehen, dass der Farbverlauf nicht funktioniert. Dies sind die entscheidenden Eigenschaften, die wir hinzufügen müssen, und natürlich können wir Webkit-Texts-stroke hinzufügen, und dass zwei Pixel schwarz. Dies ist der Effekt, den wir am Ende erreichen möchten. Ich kopiere diese Zeile, füge ein und schöner Farbverlaufstext wird angezeigt. Natürlich können Sie mit dem Hintergrund spielen, indem Sie einen linearen Farbverlauf anwenden. Sie können mit den Farben spielen. Sie können mehr von ihnen hinzufügen. Fühlen Sie sich frei, mit den Farbverläufen zu tun, was Sie wollen. Ich hoffe, dass Sie Spaß haben werden. 15. Trick Nr. 13 – Textauswahl-Farben: Tricknummer 13; Kreuztext-Auswahl. Wenn wir einen Teil, einen Teil des Textes im Browser auswählen , zeigt es die blaue Farbe. Es ist die Standardfarbe, die in jedem Browser generiert wird. Aber es gibt CSS's Tricks, die uns helfen, dies zu ändern, Farbe für einen anderen Browser zu ändern. Wir sind in der CSS-Datei in unserer Übung und lassen Sie uns Pseudo-Klasse erstellen, die Auswahl genannt wird. Hierfür können wir die Farbe anwenden, die wir gerne unseren Text hervorheben lassen. Also, um zu denken, ich verwende eine einfache Hintergrundfarbe und ich wähle die gelbe, ich speichere sie, erfrische meine Website, und ich kann sehen, dass die Auswahl gelb ist. Wenn ich diese Pseudo-Klasse zur Auswahlklasse entferne , wird das Standardblau angezeigt. Also kommen wir zurück zu unserer gelben Farbe, und lassen Sie uns eine andere Farbe anwenden. Zum Beispiel, für Firefox, Ich benutzte Chrome, aber lassen Sie uns zu Firefox wechseln und lassen Sie uns eine andere Farbe für Firefox haben. Also für Firefox müssen wir Pseudo-Element-Pseudo-Klasse hinzufügen, aber mit dem Präfix des Herstellers. Also füge ich moz für Mozilla und Auswahl hinzu. Lassen Sie uns Hintergrundfarbe, Lachs anwenden. Ich öffne Firefox, der bereits für Sie vorbereitet wurde und wenn ich einen Text auswähle, ist es Lachsfarbe. Für Chrome ist es gelb. So können Sie damit spielen, und ich denke, es ist ein netter, netter kleiner Effekt, der den Einfluss auf die Benutzererfahrung hat. Fühlen Sie sich frei, gestapelte Auswahl zu verwenden, fühlen Sie sich frei, es zu ändern, fühlen Sie sich frei, verschiedene Hintergründe zu verwenden. 16. Trick Nr. 14 – kegelförmiger Farbverlauf: Trick Nummer 14, konischer Farbverlauf. Ich war super überrascht, als ich fand, dass wir reines CSS verwenden können, um Tortendiagramme zu erstellen. Ich denke, es macht super Spaß, weil wir für eine einfache Visualisierung keine SVG erstellen müssen oder wir keine komplizierten JavaScript-Bibliotheken anwenden müssen. Es ist nur CSS und es ist nur eine Zeile Codebewachung, um eine Website zu machen, die ich hier gerade verlinke. Es beschreibt, dass Kegelbestandteil die CSS-Funktion ist, ein Bild erstellt, das aus einem Farbverlauf mit Farbübergängen besteht, um einen Mittelpunkt gedreht werden, anstatt von der Mitte aus zu strahlen. diesem Grund können wir diese Kreisdiagramm wie Effekt erzielen. Werfen wir einen Blick in unsere Website. Was Sie sehen können, ist das Kreisdiagramm, das mit nur einer Zeile CSS erstellt wird. Schauen wir uns mal an, wie es konstruiert ist. Ich habe drei Farben in einem Kreisdiagramm. Es ist der Hintergrundeigenschaftensatz. Es setzt auf den Wert konische Zutat. Wir haben drei Farben. Was hier passiert ist, ist, dass sie in Prozentsätze unterteilt sind. Die erste Farbe, die orange, nimmt 25 Prozent des ganzen Kreises ein. Sie können sehen, dass es genau ein Viertel ist. Dann haben wir den blauen, der 25-56 Prozent braucht, das sind 31 Prozent. Dieser, und der Letzte nimmt den Rest. Von 56-100, das ist 34 Prozent. So können wir einen kegelförmigen Gradienten konstruieren. Natürlich können Sie mit verschiedenen Farben spielen. Kommen wir zurück zu unserem Code, wenn wir nach einem Kreisdiagramm suchen. Es ist hier. Wir haben zurück Runden konischen Gradienten angewendet. Hier haben wir zum Beispiel Lachs, blau und gelb. Sorry, dass Sie die entsprechenden Farben nicht einfügen, aber ich hoffe, dass Sie sie aus dem Paket erhalten. Lachs, sagen wir von null Prozent bis 30, von 30-50 und gelb von 50 Prozent bis 100. Ich speichere es, aktualisiere die Seite. Was ich sehe, ist fast das Ergebnis, das wir erreichen möchten. Aber die Sache ist, dass wir auch Grenzradius dick das Prozent anwenden müssen , um den Kreis zu erreichen. Ich wende Border-Radius 50 Prozent an und ich habe das Diagramm. Ich füge es beim Speichern ein, und mein Diagramm ist fertig. Natürlich können Sie die Farben der Legende ändern. Sie können die Farben ändern, um damit zu spielen, sein Symbol, es macht Spaß und ich denke, dass Sie es auch für dekorative Zwecke verwenden können. 17. Trick Nr. 15 – Wortumbruch-Tag: Trick Nummer 15, Wortumbruch-Tag. Obwohl ich den Kurs 20 CSS-Tricks betitelt habe, werde ich ein HTML-Tag erwähnen, das Arbeitsunterbrechungsmöglichkeit ist. Es ist nicht sehr beliebt, aber ich habe beschlossen, meine Informationen zu teilen weil ich denke, dass es in einigen Situationen sehr praktisch sein könnte. Also schauen wir uns mal an. Arbeitsunterbrechung Opportunity-Tag gibt an, wo in einem Text es in Ordnung wäre, einen Zeilenumbruch hinzuzufügen. Es kann in Fällen verwendet werden, in denen ein Wort zu lang ist oder wir befürchten, dass der Browser unsere Zeilen an der falschen Stelle bricht. Im zweiten Teil sehen Sie, dass es eine Telefonnummer gibt und was ist mit der Aufteilung dieses Textes in einige Teile? Was ist mit dem Brechen dieses Textes an bestimmten Orten? Zum Beispiel, für alle fünf Zahlen, alle fünf Zeichen. Wie verhält sich diese lange Telefonnummer , wenn wir die Breite des Browsers ändern? Mal sehen. Die Zahl bleibt in einer Zeile und tatsächlich hat sie ihre Position geändert, ihre jetzt innen, verhält sich aber immer noch so voll wie die Zeile. Was ist, wenn Sie es an mehreren Stellen brechen möchten ohne zusätzlichen Platz, zusätzlichen Charakter hinzuzufügen. Wir können Arbeitsunterbrechung Opportunity-Tag verwenden. Also lassen Sie uns unsere HTML sehen. Das ist meine Telefonnummer, span disrupt in einem span tag. Ich kann Arbeitsunterbrechungs-Tag alle vier, fünf oder sechs Zeichen hinzufügen . Also hier können wir gerade Nummer geben, und unsere ganze Telefonnummer wird kaputt sein. Ich speichere, erfrische und sehe, dass meine Telefonnummer jetzt kaputt ist. Es beginnt in der ersten Zeile und es erscheint auch in der zweiten Zeile. Einer der Teile dieser Nummer. So können Sie sehen, dass dies der erste, der zweite Teil, der dritte und der letzte ist. Wenn Sie also den Fenster-Browser kleiner, schmaler machen, werden Sie sehen, dass einige Teile der Nummer ihre Position in Bezug auf das Tag der Arbeitsunterbrechung ändern. Das ist die Telefonnummer, wir können sie entfernen, und wir können hier zum Beispiel ein sehr langes Wort schreiben ein sehr langes . Nach jedem Wort können wir Wortumbruch-Tag hinzufügen. Es wird also den ganzen Text in Zeilen zerlegen, die wir erreichen möchten. So verknotet um sie herum. Wir haben einen sehr langen Text, lassen Sie uns dies hervorheben. Ich kann es nicht sehen. Das ist also das Wort sehr lang. Sie können sehen, dass es sehr lange hält. Es teilt sich also nicht in der Mitte des Wortes und hier haben wir noch ein sehr langes Wort. Obwohl es sehr Nischen-Tag scheinen mag, denke ich, dass es einige Fälle gibt, die es helfen könnte. 18. Trick Nr. 16 – benutzerdefinierte Aufzählungspunkte: Tricknummer 16; Benutzerdefinierte Aufzählungspunkte. Was ist mit dem Erstellen einer Liste, die unsortiert ist, mit dem UL-Tag, aber mit einem benutzerdefinierten Aufzählungspunkt? Wir können auch ein Bild anwenden. Wie macht man es? Nun, lassen Sie uns einen Blick in den Code werfen. Wenn ich den Code auschecke, werde ich sehen, dass meine Klassencodeliste Listenelemente enthält, und das Wichtigste ist, den List-Stil zurückzusetzen auf keine zu setzen. Wir wollen diese Standard-schwarzen Aufzählungspunkte haben. Das nächste, was es hier angewendet wird, ist das Pseud-Element. Es ist die vorher Pseudoelementklasse. Es wird auf das LI, das Element der Liste, angewendet . Damit es funktioniert, müssen wir Inhalte einstellen. Es kann leer sein, aber es ist sehr wichtig, die content-Eigenschaft zu haben. Dann haben wir einige Positionierung mit diesem gelben Kreis und einem Hintergrund verbunden. Wenn ich die Hintergrundfarbe ändere, sehen Sie direkt die Änderung hier. Natürlich können wir die Quadrate haben, wir können die Höhe und die Breite davon ändern. Wir können mit etwas Positionierung spielen, alles liegt an Ihnen. Es gibt auch eine magische Sache, die wir hinzufügen können, und es ist das Hinzufügen des Hintergrunds zu den Inhalten. Es gibt auch eine coole Sache, die wir tatsächlich ein Bild anwenden können, auf die vorher Pseudo-Klasse. Was ist, wenn ich hier ein Bild hinzufügen möchte? Bild vor jedem Element der ungeordneten Liste. Wir können es mit Content-Eigenschaft tun, und wir setzen den Wert auf URL. Anstatt diesen Inhalt leer zu lassen, können wir hier natürlich etwas schreiben. Lassen Sie mich es noch einmal schreiben. Wie eins, zwei, drei, können wir tatsächlich die URL-Funktion zur Verfügung stellen. Die Funktion, die den Pfad zu unserem Bild hat, erinnere ich mich, dass ich Bild Bananensymbol genannt habe, und es ist ein IMG-Tag. Also schreibe ich URL (.. /img/banana-icon.png), und ich habe mein Symbol mit Banane bereit. Natürlich kann ich den Hintergrund ausräumen, oder vielleicht kann ich ihn ändern, um ihn in rosa Farbe zu haben. Ich kann auch den Hintergrund mischen. Ich kann einige Dimensionen mit dem Inhalt mischen, was eigentlich ein Bild hier ist. Ihre Aufgabe besteht jetzt darin, eine ähnliche Sache zu erstellen. Ich wechselte zu der Website, an der wir gerade arbeiten, und wenn Sie etwas tiefer gehen, werden Sie sehen, dass es eine Liste gibt. Es wäre großartig, wenn wir die Stile darauf anwenden könnten. Die Sache, an die Sie sich erinnern müssen, ist, dass wir zuerst den List-Stil zurücksetzen müssen. Wenn ich zu ihm navigiere, haben wir UL-Klassenliste. Für dieses LI haben wir bereits List-Stil auf none gesetzt, was sehr wichtig ist. Dann müssen wir die Pseudo-Klasse vorher für LI-Element anwenden, und das sehr wichtig ist der Inhalt. Auch wenn wir hier kein Bild anwenden möchten, ist der Inhalt sehr wichtig, damit die Pseudo-Klasse tatsächlich angezeigt wird. Ich überlasse diese Aufgabe für dich. Wenn Sie Probleme haben, können Sie zur ersten Sekunde der Lektion zurückkehren und sehen, wie die Pseudoklasse erstellt wird. Wenn ich zum Code-Editor gehe, werden Sie sehen , dass ich diesen Selektor bereits für Sie erstellt habe, also haben wir vor Pseudo-Klasse für LI-Element im Container, der eine Listenklasse hat, und Sie können hier alles schreiben, was Sie das Benutzerdefinierter Aufzählungspunkt Bitte denken Sie an die Inhaltseigenschaft. 19. Trick Nr. 17 – Objekt einpassen: Trick Nummer 17, Objekt-fit. Object-fit, CSS-Eigenschaft, definiert, wie der Inhalt von img oder Video geändert werden soll, um seinen Container anzupassen. Wir haben verschiedene Optionen, wie decken, füllen und enthalten. Werfen wir einen Blick in praktische Beispiele. In dieser Übung werden wir die Höhe des Bild-Containers begrenzen. Dies ist das Endergebnis, das wir erreichen möchten. Wenn wir das Bild untersuchen, werden wir sehen, dass es tatsächlich 600 Pixel Breite und 400 Pixel Höhe hat. In unserem aktuellen Projekt sehen wir, dass unser Bild in Bezug auf die Höhe super lang ist. Was wir tun werden, ist, dass wir einige Einschränkungen einführen werden. Ich habe das Klassenobjekt-fit, ich habe es bereits für Sie erstellt. Lassen Sie uns Höhe für eine 100 Pixel hinzufügen. Leider wird das ganze Bild kleiner, aber wir möchten ein anderes Ergebnis erzielen, das ich Ihnen bereits im vorherigen Layout gezeigt habe. Dafür können wir auch mit 100 Prozent hinzufügen, dank dem, was unser Bild gestreckt wird. Aber ich mag die Tatsache nicht, dass es tatsächlich sein Verhältnis ändert. Dank der Objekt-Anpassung können wir definieren, wie sich das Bild in diesem Bereich der Einschränkung verhalten wird, dem Container, den wir auf dem img-Tag gesetzt haben. Wir können wählen „enthalten“, so dass das ganze Bild in diesem Container enthalten sein wird, 600 mal 400 Pixel. Wir können Abdeckung hinzufügen, so dass es auf die volle Breite gestreckt wird, die wir „füllen“ können, so dass jedes Pixel durch das Bild gefüllt wird, egal wie gestreckt es sein sollte. Wir können keine festlegen, so dass das Bild seine natürliche Größe behält. Lassen Sie uns „Abdeckung“ dafür wählen. Object-fit wieder, Abdeckung und das ist das Ergebnis, das wir erreichen möchten. Ich denke, dass Objekt-fit ist eine großartige Eigenschaft auch in Bezug auf responsive Design, manchmal haben wir wirklich seltsame Proportionen der Bilder, und es variiert auch je nach Auflösung, ob es mobil oder Desktop ist. Ich empfehle Ihnen dringend, damit zu spielen. Ich möchte nur all diese Eigenschaften kopieren, die ich geschrieben habe. Ich komme zurück zu meinem Code und suche nach Klassenobjekt-fit, die für Sie bereit ist, indem Sie diese Zeilen einfügen, also Höhe mit einem Objekt-fit. Die Auffrischung der Website und mein Bild sieht wirklich schön aus. 20. Trick Nr. 18 – Spaltenzahl: Trick Nummer 18, Spaltenanzahl. Spaltenanzahl Eigenschaft bricht den Inhalt des gegebenen Elements, zum Beispiel, Absatz in angegebene Anzahl von Spalten. So verteilt der Browser den Inhalt gleichmäßig in genau der Zahl, die wir ihm gegeben haben. Was also, wenn wir anstelle dieses einen Textblocks zwei Spalten haben möchten, können wir es einfach tun. Wir haben Klasse Outro, und hier können wir Spaltenanzahl Eigenschaften anwenden und es auf zwei setzen. Genau so. Einfach und einfach. Natürlich können Sie die Anzahl erhöhen. Wir können auf die vorherige Situation zurückkommen, wo wir nur eine Spalte haben. Es ist also sehr einfach, den Inhalt des Containers mit Spaltenanzahl zu manipulieren. Zurück zu meinem Code auf der Suche nach Outro, Einfügen der Spaltenanzahl zum Speichern, Aktualisieren und meine Änderung ist fertig. 21. Trick Nr. 19 – benachbarte Elemente kombinieren: Trick Nummer 19, benachbarter Geschwisterkombinator. Der benachbarte Geschwisterkombinator stimmt nur mit dem zweiten Element überein, wenn er unmittelbar dem ersten Element folgt. Darüber hinaus sind beide untergeordnete Elemente desselben übergeordneten Elements. Was ist, wenn ich diesen Absatz formatieren und einen größeren Rand oben hinzufügen und die Breite begrenzt haben möchte? Ich kann sehen, dass dieser Absatz die Kinder von col-md-6 ist, und es ist das nächste Tag, der nächste Selektor nach der Diagrammlegende. Wir können benachbarten Geschwisterkombinator verwenden. Ich habe bereits einen Selektor für Sie vorbereitet. Dieser Selektor wählt Absatz, der unmittelbar nach der Chart-Legenden-Klasse ist. Mit anderen Worten, Absatz folgt unmittelbar Chart-Legende. Wenn ich hier Margin-top 20 Pixel und maximale Breite anwenden möchte, sagen wir, 300 Pixel, ich speichere es, aktualisiere meine Seite, und ich sehe, dass diese Stile angewendet werden und diese Stile nur auf diesen Absatz angewendet werden. Die anderen Absätze, wie zum Beispiel dieser, sind von unserem Selektor nicht betroffen. Selbst wenn ich einen weiteren Absatz hinzufügen, können wir seinen Inhalt ändern, und dieser Absatz wird auch die Kinder von col-md-6 Container sein. Mal sehen, welche Kacheln es beeinflussen würden. Lassen Sie uns sehen, wie unsere Website gerendert wird und wie diese beiden Absätze aussehen werden. Ich aktualisiere die Seite. Wenn Sie es vergleichen, sehen Sie, dass nur die ersten Absätze direkt nach der Diagrammlegende die Stile angewendet werden. Dieser hätte nur einen allgemeinen p-Selektor, den wir früher erstellt haben. Wir können sagen, dass benachbarte Geschwisterkombinator funktioniert. Sie können dies für verschiedene Zwecke verwenden. Manchmal ist es einfacher für uns, solche Selektoren zu verwenden, anstatt Klassen zu erstellen. Ich denke, es lohnt sich, damit zu spielen. 22. Trick Nr. 20 – allgemeine Elemente kombinieren: Trick Nummer 20, allgemeiner Geschwisterkombinator. Allgemeiner Geschwisterkombinator trennt zwei Selektoren und entspricht dem zweiten Element nur, wenn es dem ersten Element folgt. Es ist jedoch nicht notwendig, dass das zweite Element der unmittelbare Follower ist. Beide Elemente sollten die untergeordneten Elemente desselben übergeordneten Elements sein. Also die gleiche Situation wie für den allgemeinen Geschwisterkombinator. Was wäre, wenn wir einen Stil anwenden möchten, zum Beispiel Zeilenhöhe für alle Absätze, die der Diagrammlegende folgen, aber nicht unbedingt unmittelbar nach der Diagrammlegende. Alle p-Tags, so dass alle Absätze, die Diagramme folgen, Legende, so diese und diese werden die Stile angewendet. Fügen wir die Zeilenhöhe hinzu, 200 Prozent und wenn ich die Seite aktualisiere, haben sowohl die erste als auch die zweite die Zeilenhöhe 200 und die anderen Absätze 150. Fühlen Sie sich frei, allgemeine Geschwisterkombinator für Ihre Bedürfnisse zu verwenden. 23. Abschließende Worte: Also verlasse ich Sie mit einer aktuellen Phase der Website. Wenn Sie alle Übungen gemacht haben, die ich erklärt habe, ist dies die Bühne, die Sie an dieser Stelle haben sollten. Es gibt also einige Dinge, die noch hinzugefügt werden müssen , wenn wir es mit der endgültigen Version vergleichen, die ich auf meinem Computer habe, werden Sie sehen, dass wir immer noch an diesem Abschnitt arbeiten müssen, wo ich es mehrere Hintergründe und Natürlich können Sie alle Bilder im Paket finden. Es gibt auch einige Stile auf dem Text hier. Also sollten wir hier die Bilder anwenden, wir sollten den Text Strich hier ändern. Also immer noch ein paar Hausaufgaben für dich. Wenn Sie Ihre Website aus den Übungen vergleichen möchten. Sie können die PNG-Datei öffnen. Es ist im Paket, so dass Sie alle Details gründlich sehen werden. Natürlich sind Sie eingeladen, mit CSS zu experimentieren, die ich für Sie vorbereitet habe. Sie können die Werte ändern. Sie können die kreativen Techniken, die ich Ihnen gerade gezeigt habe, für verschiedene Zwecke verwenden. Natürlich sind Sie herzlich willkommen zu zeigen, was Sie sich ausgedacht haben. Ich bin sehr gespannt darauf, Ihren Fortschritt zu verfolgen und zu sehen, wovon Sie inspiriert sind. Bitte posten Sie Ihre Werke im Community-Bereich. Im Allgemeinen hoffe ich, dass Sie Spaß hatten und sich mit CSS-Eigenschaften vertraut gemacht haben.