5 Projekte, mit denen Sie moderne CSS beherrschen können

Viele Leute denken, dass CSS keine Programmiersprache ist, und ich stimme zu - es ist schwieriger, zu meistern. Die Kenntnisse in CSS erfordert Entwurfsfähigkeit, Bestimmung, Kreativität, Erfahrung und Codierungsfähigkeiten (insbesondere bei der Verwendung von Präprozessoren wie SASS).

CSS schlägt dem Browser Layout und Stil vor. Der Browser kann diese Vorschläge nach Belieben erklären, und selbst Benutzer oder Geräte können alle Attribute ignorieren oder überschreiben. Das Erstellen von Hochleistungscode, der auf allen Geräten und Bildschirmauflösungen gut funktioniert, ist eine Herausforderung, und nur wenige Menschen versuchen es oder erfolgreich auszufüllen. Die Belohnungen können jedoch aufregend sein.

Von der einfachsten Art zu Beginn können die folgenden Projektvorschläge Ihnen helfen, sich auf den CSS -Meisterweg mit Büchern von SitePoint Premium zu begeben.

Schlüsselpunkte

Kenntnisse in CSS erfordert Entwurfsfähigkeit, Bestimmung, Kreativität, Erfahrung und Codierungsfähigkeiten. Das Erstellen von Hochleistungscode, der auf allen Geräten und Bildschirmauflösungen gut funktioniert, kann eine Herausforderung sein, aber die Belohnungen können aufregend sein.
Fünf Projekte, mit denen die CSS -Fähigkeiten verbessert werden können, gehören das Ermöglichung von Websites, das Anbringen moderner CSS -Themen auf vorhandene Websites, das Neugestaltung von Formularlayouts, die Erhöhung der Website -Geschwindigkeit und das Starten eines neuen Projekts oder eine CSS -Komponente von Grund auf neu.
Die Verwendung moderner Browser -Entwickler -Tools kann dazu beitragen, die Leistung zu bewerten und Optimierungsziele zu entdecken. Techniken wie kritisches CSS und progressives CSS -Laden stellen sicher, dass Stylesheets effizient geladen werden.
Mastering moderne CSS-Projekte erfordert das Verständnis von CSS-Grundlagen und -Be-Practices, einschließlich der Verwendung von CSS-Resets, mobilen Ansätzen für reaktionsschnelles Design, CSS-Präprozessoren wie SASS, CSS-Gitter und Flexbox sowie bei der organisierten Haltung von CSS und addieren Sie gute Kommentare.

1. Ermöglichen Sie die Website von leichter zu drucken

Holen Sie sich die Website, an der Sie arbeiten, und versuchen Sie, eine Seite zu drucken (oder eine Vorschau zu drucken). Sind Sie mit den Ergebnissen zufrieden?

HTML -Seiten sind kontinuierliche Medien und funktionieren möglicherweise nicht unbedingt gut für die Druckmedien. Unangemessene Kapitel, Skalierung, Textgröße, Spaltengröße und fehlende oder beschnittene Inhalte können zu einem schlechten Zugang zu Druckerlebnissen führen, und nur wenige Entwickler werden dieses Problem berücksichtigen.

Zum Glück kann das Druck von CSS in wenigen Stunden entwickelt werden. Dies ist normalerweise eine Frage des Zurücksetzen von Stilen (weißer Text auf Schwarz), unnötigem Kapitel (Menü, Heldenbilder, Formen, Social -Media -Widgets usw.), linearisierende Layouts und Reduzierung von Papier- und Tintenverbrauch.

In Browser-basierte Entwickler-Tools (von CSS Master) und Browser Devtool-Geheimnissen eingraben, um nach dem Umschalten zum Drucken zu erfahren und zu ändern.

Anwendung von CSS bedingt (vom CSS -Master) beschreibt, wie @Media -Abfrageregeln, einschließlich Druckstilblätter, definiert werden.

Betrachten Sie Ihren Strategiehandbuch zu CSS -benutzerdefinierten Eigenschaften (von neuen Grenzen im Webdesign), um festzustellen, ob CSS -Variablen bei den Druckeigenschaften helfen können. Betrachten Sie auch die Barrierefreiheit (von CSS Animation 101), um Animationen auszuschalten oder sie am besten auszudrucken.

Schließlich erstellen Sie druckerfreundliche Seiten mit CSS (aus CSS-Tools & Skills) ein komplettes Tutorial für Druckoptimierung mit Tipps zum Einsparen von Tinten und Papierkosten.

2. Anwenden moderner CSS -Themen auf vorhandene Websites

Einzelfarbschema ist langweilig! Jeder erwartet Dark -Modusoptionen in seinen Betriebssystemen und -anwendungen. Warum also nicht eine zu Ihrer Website hinzufügen?

Bis vor kurzem benötigten Themenschalter häufig einen zusätzlichen Satz von Stilen und JavaScript-gesteuerten Switch-Steuerelementen. Moderne Browser verwenden jedoch CSS -benutzerdefinierte Eigenschaften (Variablen) und prefers-color-scheme @media -Regeln, um das Leben zu erleichtern.

Strategien für das Themen (von neuen Grenzen im Webdesign) bieten eine Reihe von Ideen und Notizen beim Entwerfen neuer Themen.

Anwendung von CSS bedingt (aus dem CSS -Master) beschreibt, wie @media -Query -Regeln, einschließlich prefers-color-scheme, definiert werden.

Zuletzt bietet moderne CSS: Hinzufügen eines CSS -Dark -Themas (aus dem modernen CSS) ein komplettes Tutorial zum Aktivieren von dunklen Themen.

3. Gestalten Sie das Formularlayout

   neu

Überprüfen Sie die Formulare auf Ihrer Website, z. B. Abfragen oder Anmeldeformulare. Sofern es kürzlich nicht codiert ist, wird es wahrscheinlich mit Container-DIV und schwimmbasierten Layouts implementiert, die auf kleineren Bildschirmen brechen können. Ältere Formulare verwenden möglicherweise unnötiges JavaScript oder haben eine schlechte Zugänglichkeit.

Ein Registrierungsformular (aus Formularentwurfsmustern) beschreibt den besten Weg, um Formulare mit HTML5 zu entwerfen, zu stylen und zu codieren.

Mit

CSS -Gitter können Sie unnötige Tags beseitigen und ein kugelsicheres und reaktionsschnelles Layout erstellen, ohne Medienabfragen zu verwenden. Das folgende CSS -Grid -Tutorial hilft Ihnen beim schnellen Einstieg:

• produktionsbereitete CSS-Gitterlayouts (von neuen Grenzen im Webdesign)
• Layouts mit CSS -Raster (aus Master CSS) und
erstellen
• "CSS Grid Layout" (aus "Sprung Start Responsive Web Design")

Machen Sie zuletzt Formulare mit CSS-Gitter (aus dem CSS-Gitterlayout) hervorragend ein komplettes Tutorial, das für ältere Browser ein auf Gitterbasis basierendes Formularlayout und schwimmende Fallbacks bietet.

4. Verbesserung der Website -Geschwindigkeit

Zu Beginn des 2020 erforderten die durchschnittliche Webseite 2 MB Downloads, die 20 Sekunden dauerte, um auf einem regulären mobilen Gerät vollständig anzuzeigen. CSS berücksichtigt 65 KB und wird in sieben Dateien verteilt. Dies scheint keine Rolle zu sein, aber die Stylesheet -Eigenschaften haben Auswirkungen.

Verbringen Sie einige Stunden damit, Ihre vorhandene Website zu überprüfen, um festzustellen, ob Sie Bilder, Schriftarten und JavaScript -Effekte durch effizientere CSS ersetzen oder optimieren können. Ihr CSS -Code kann wachsen, aber das Gesamtgewicht sinkt und die Leistung wird erheblich verbessert.

Test -Tools (von Sprung Start Web Performance) und Debugging für die Reaktionsfähigkeit der Benutzeroberfläche (vom CSS -Master) Erklären Sie, wie moderne Browser -Entwickler -Tools verwendet werden, um die Leistung zu bewerten und Optimierungsziele zu entdecken.

Laden von Assets im Web (von neuen Grenzen im Webdesign) beschreibt, wie Technologien wie kritische CSS und progressive CSS -Lade verwendet werden, um sicherzustellen, dass die Stilblätter effizient geladen werden. 20 Tipps zur Optimierung der CSS -Leistung (aus modernen CSS) bieten einige praktische Tipps.

Schließlich enthält Jump Start Web Performance Dutzende von schnellen, tieferen und lebensverändernden Entwicklungsvorschlägen, um sicherzustellen, dass Ihre Website schnell für alle bleibt.

5. Starten Sie ein neues Projekt oder eine CSS -Komponente

Die oben genannten Projektempfehlungen können verwendet werden, um vorhandene Websites zu verbessern, aber es gibt keine Einschränkungen oder Einschränkungen, wenn ein neues Projekt von Grund auf neu gestartet wird. Optionen zu berücksichtigen:

1. Erstellen Sie einen Online -Lebenslauf. Zusätzliche Punkte: Stellen Sie sicher, dass es reaktionsschnell ist, gut gedruckt und alle Ressourcen in eine einzelne HTML -Datei codiert, die per E -Mail gesendet werden kann. (Tipp: Vermeiden Sie es, JavaScript hinzuzufügen, um sicherzustellen, dass es nicht durch das E -Mail -System blockiert wird.)
2. Erstellen Sie ein interaktives Portfolio. Bei einer grafischen Liste aller Websites werden zusätzliche Informationen angezeigt, wenn Sie auf ein Element klicken. Gitterlayouts sind ideal, aber wenn Sie es wirklich herausfordern möchten, versuchen Sie es mit Mauerwerk. (CSS Grid ist noch nicht in der Lage, dies zu erreichen, aber überlegen Sie, wie dies mit CSS -Spalten oder vertikal sortiertes Rasterlayout dies tun soll.)
3. Grafikdesign codieren. Vielleicht können Sie eine attraktive Idee aus Dribbble oder ähnlicher Designgemeinschaft auswählen und sie mit HTML5 und CSS3 codieren. Extrapunkte: Erstellen Sie es ohne Framework oder JavaScript!
4. CSS-Bilder erstellen. Erstellen Sie einen nützlichen Satz von Symbolen mit Pseudoelementen und CSS-Formen oder erstellen Sie ein Bild mit Gradienten und Schatten.
5. Probieren Sie SVG- und CSS -Animationen. Erstellen Sie attraktive Logos, Diagramme, Fortschrittsbalken, Aktivitätsspinner und vieles mehr.

Entwickler und Browser -Tools:

• 《DOM, CSS und Animationen》 (aus "Browser Devtool Secrets")
• "So verwenden Sie Gulp.js, um Ihre CSS -Aufgaben zu automatisieren" (aus "CSS: Tools & Skills")
• 《Start Sass》
• "CSS -Debugging und Optimierung: Codequalitätstools" (aus "CSS: Tools & Skills")
• "CSS -Debugging und Optimierung: Entwickler -Tools" (aus "CSS: Tools & Skills")
• 《lebensverändernde Diäten》 (von Sprung Start Web Performance)
• 《Visual Studio Code: End-to-End-Bearbeitung und Debugging-Tools für Webentwickler》

CSS Grid Concept:

• 《Neugestaltung einer Site zur Verwendung von CSS -Gitterlayout》 (aus "CSS Grid Layout")
• "Easy und Responsive Modern CSS Grid Layout" (aus "CSS Grid Layout")
• verbessert CSS -Layouts von Floats zu Flexbox nach und nach das Grid》 (vom CSS -Gitter -Layout)
《Neugestaltung eines kartenbasierten Tumblr-Layouts mit CSS Grid》 (aus "CSS Grid Layout")
• Bessere reaktionsschnelle Strukturen mit Grid -Systemen (von Sprung Start Responsive Web Design)

reaktionsschnelle CSS -Technologie:

• 《14 Essential reaktionsschnelle CSS -Techniken》
• 《Responsive Design》
• 《Sprung Start Responsive Webdesign》

CSS Übergang und Animation:

• 《CSS -Animation 101》
• "Übergänge und Animationen" (aus "CSS Master")
• 《Verwenden von CSS -Transformationen in der realen Welt》 (aus modernen CSS)

Verwenden Sie CSS mit SVG:

• "Animieren von SVG" (aus "praktischem SVG")
• 《Verwendung von CSS mit SVG》 (aus "CSS -Master")
• 《Real World Nutzung von CSS mit SVG》 (aus modernen CSS)

Hören Sie jetzt auf zu lesen und beginnen Sie mit dem Codieren!

FAQs zum Mastering moderner CSS -Projekte (FAQ)

Was sind einige Best Practices für die Beherrschung moderner CSS -Projekte?

Mastering moderne CSS -Projekte erfordert ein gutes Verständnis der CSS -Grundlagen und Best Practices. Dazu gehören die Verwendung von CSS-Reset, um die Konsistenz zwischen verschiedenen Browsern zu gewährleisten, einen mobilen Ansatz für das reaktionsschnelle Design zu verwenden, und die Verwendung von CSS-Präprozessoren wie SASS oder weniger, um Ihre CSS einfacher zu warten. Das Verständnis von CSS -Raster und Flexbox kann außerdem helfen, komplexe Layouts mit weniger Code zu erstellen. Schließlich kann das organisierte Halten Ihres CSS und das Hinzufügen guter Kommentare es anderen (oder zukünftigen Sie) erleichtern, Ihren Code zu verstehen.

Wie kann ich meine CSS -Codierungsfähigkeiten verbessern?

Verbessern Sie Ihre CSS -Codierungsfähigkeiten durch kontinuierliche Praxis und Lernen. Verstehen Sie zuerst die Grundlagen von CSS und bewegen Sie sich allmählich zu fortgeschritteneren Themen. Online-Tutorials, Codierungsherausforderungen und Open-Source-Projekte können praktische Erfahrungen bieten. Darüber hinaus können Sie den Branchenexperten und dem Beitritt zur CSS -Community helfen, die neuesten Trends und Technologien kennenzulernen.

Was sind einige gemeinsame Herausforderungen, denen Sie bei der Verwendung von CSS begegnen? Wie kann man diese Herausforderungen bewältigen?

Einige häufige Herausforderungen bei der Verwendung von CSS sind die Umgang mit Browser -Inkonsistenzen, Verständnis von Kastenmodellen und die Verwaltung komplexer Layouts. Dies kann durch Zurücksetzen oder Normalisieren mit CSS, Verständnis der box-sizing Eigenschaften und Layout mit CSS -Gitter oder Flexbox überwunden werden. Darüber hinaus kann die Verwendung eines CSS -Präprozessors bei der Verwaltung großer CSS -Dateien helfen und den Code erleichtern.

Wie erstelle ich ein reaktionsschnelles Design mit CSS?

Responsive Designs können mit CSS mithilfe von Medienabfragen erstellt werden, mit denen Sie verschiedene Stile für verschiedene Bildschirmgrößen anwenden können. Darüber hinaus können CSS -Gitter und Flexbox verwendet werden, um flexible Layouts zu erstellen, die der Bildschirmgröße entsprechen. Der mobile Ansatz (beginnend mit der kleinsten Bildschirmgröße und allmählich Hinzufügen von Stilen zu größeren Bildschirmen) kann auch dazu beitragen, effektive ansprechende Designs zu erstellen.

Welche fortschrittlichen CSS -Techniken sollte ich lernen?

Einige erweiterte CSS -Techniken, die Sie lernen sollten, umfassen CSS -Animationen und -übergänge, CSS -Variablen und CSS -benutzerdefinierte Eigenschaften. Wenn Sie verstehen, wie Sie Pseudo-Elemente und Pseudoklassen verwenden, können Sie komplexere Stile erstellen. Es ist auch vorteilhaft, CSS -Präprozessoren wie Sass oder weniger zu lernen.

Wie optimieren Sie mein CSS für eine bessere Leistung?

CSS kann für eine bessere Leistung optimiert werden, indem die Anzahl der verwendeten CSS unter Verwendung von Kurzeigenschaften minimiert und die Verwendung teurer CSS -Eigenschaften verringert wird. Darüber hinaus kann die Verwendung eines CSS -Kompressors dazu beitragen, die Dateigröße des CSS zu verringern und so die Ladezeit zu beschleunigen.

Was sind einige Ressourcen für das Erlernen fortgeschrittener CSS?

Es gibt viele Online -Ressourcen, um erweiterte CSS zu lernen, einschließlich Online -Tutorials, Codierungsherausforderungen und Dokumentationen. Websites wie CSS-Tricks, MDN Web Docs und Smashing Magazine bieten ausführliche Artikel und Führer zu einer Vielzahl von CSS-Themen. Darüber hinaus kann es wertvolle Erkenntnisse und Lernmöglichkeiten bieten, wenn man sich auf Branchenexperten konzentriert und sich der CSS -Community anschließt.

Wie kann CSS -Probleme debuggen?

Sie können Browser -Entwickler -Tools verwenden, um CSS -Probleme zu debuggen, mit denen Sie Elemente überprüfen, den Stil Ihrer Anwendung anzeigen und mit unterschiedlichen Stilen in Echtzeit experimentieren können. Das Verständnis von CSS -Kaskaden, Spezifität und Vererbung kann außerdem helfen, zu verstehen, warum bestimmte Stile nicht wie erwartet angewendet werden.

Wie kann CSS organisiert und leicht zu warten bleiben?

CSS können organisiert und leicht zu pflegen, indem konsistente Namenskonventionen befolgt, Kommentare zur Beschreibung Ihres Codes und die Organisation von CSS in logischen Teilen oder separaten Dateien verwendet werden. Darüber hinaus kann die Verwendung eines CSS -Präprozessors bei der Verwaltung großer CSS -Dateien helfen und den Code erleichtern.

Welche Rolle spielt CSS in der Webentwicklung?

CSS spielt eine entscheidende Rolle bei der Webentwicklung, indem es das Aussehen und das Gefühl einer Website kontrolliert. Sie können Stile auf HTML -Elemente anwenden, reaktionsschnelle Designs erstellen und sogar Animationen und Übergänge erstellen. Ohne CSS sind Webseiten einfach und stillos, was es zu einem wichtigen Tool für jeden Webentwickler macht.

Das obige ist der detaillierte Inhalt von5 Projekte, mit denen Sie moderne CSS beherrschen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!