Share
Wir haben einen neuen und umfassenden Lernleitfaden, mit dem Sie CSS online lernen können, egal ob Sie gerade erst mit den Grundlagen vertraut sind oder fortgeschrittenere CSS erkunden möchten. Auschecken Lernen Sie CSS: Das komplette Handbuch.
CSS arbeitet Hand in Hand mit HTML. HTML sortiert die Seitenstruktur aus, CSS macht sie hübsch und fügt subtile Interaktionsebenen hinzu. Als Webdesigner sollten Sie sich wirklich mit diesen beiden Sprachen auseinandersetzen. Selbst wenn Sie die Codierung nicht selbst vornehmen, hilft das Verständnis, wie sie funktionieren, für das Web.
C.S.S. steht für Cascading Style Sheets; Dokumente, die Stilregeln für die Anwendung auf HTML (oder XML sowie einige andere Strukturformate) enthalten. Mehrere Stilregeln können auf ein HTML-Element zeigen. In diesem Fall muss festgelegt werden, welche Regel wirksam werden soll. Der Begriff kaskadieren beschreibt das Filtern von allgemeinen Regeln, bis die spezifischste Regel gefunden wird. Diese Regel wird dann ausgewählt, um ihre Arbeit zu erledigen…
Durch CSS kann die Darstellung von der Struktur getrennt werden. Es beseitigt die Notwendigkeit, die Stilregeln in HTML zu mischen:
Präsentation innerhalb der Struktur. Ew. das hält Dokumente ordentlich und DRYer.
CSS wird von Webbrowsern gelesen. Sie nehmen das Auszeichnungsdokument und wenden dann die Stilregeln auf die Elemente in diesem Dokument an.
Sie interpretieren Stilregeln nicht immer gleich, und mit der Entwicklung von Browsern unterstützt sie auch neuere Stilvorschläge. Oft experimentieren Browserhersteller selbst mit CSS-Eigenschaften, in der Hoffnung, dass ihre Vorschläge von den Anwendern übernommen werden.
Letztendlich liegt es am World Wide Web Consortium (W3C), ob CSS-Eigenschaften standardisiert sind oder nicht.
Die CSS-Syntax umfasst einige grundlegende Elemente. Regeln, Selektoren, Deklarationen, Eigenschaften und Werte.
Diese CSS-Regel enthält alle anderen Bits und Bobs, die wir gerade erwähnt haben.
Selectors zeigen auf Elemente innerhalb des HTML-Markups. Die Deklarationen in den geschweiften Klammern legen fest, wie diese Elemente gestaltet werden sollen. Es können mehrere Deklarationen innerhalb einer einzelnen Regel vorhanden sein. Jede Deklaration umfasst eine Eigenschaft mit einem zugehörigen Wert.
Es gibt viele Möglichkeiten, HTML-Elemente auf einfache Weise auszuwählen Typenauswahl:
Dadurch werden alle Bilder ausgewählt und alle werden mit Null aufgefüllt. Dann haben wir Klassen-Selektoren, die auf alle Elemente verweisen, auf die eine bestimmte Klasse angewendet wurde. Schauen Sie sich dieses Markup mit seinem zugehörigen CSS an:
Hier ist ein Anker, von dem es viele geben könnte ... 
… Dann werden alle Anker mit einer Klasse von "Highlight" ausgewählt und orange dargestellt. Hinweis: Im Gegensatz zu dem, was Sie vielleicht hören, gibt es keine CSS-Klasse. Es gibt CSS-Selektoren welches Ziel HTML-Klassen. Sie können mehr darüber auf tantek.com und 456 Berea St.
Es gibt sehr viele mögliche Selektoren zum Lernen. Es gibt noch mehr Eigenschaften, mit denen Sie sich auseinandersetzen können (schauen Sie sich diese Liste auf der W3C-Site an). Später werden wir uns die Aufgaben ansehen, bei denen Sie aufgefordert werden, viel davon zu lernen. Wenn Sie so viele Finger wie möglich an den Fingerspitzen haben, werden Sie zu einem besseren CSS-Codierer!
Jetzt haben Sie ein grundlegendes Verständnis dafür, was CSS ist, es ist Zeit, richtig einzutauchen. Es gibt eine Reihe von Anfängerkursen online, die Sie dabei unterstützen werden. Hier sind nur ein paar, die es sich lohnt zu überprüfen:
Als Dave Shea im Mai 2003 CSS Zen Garden lancierte, wollte er demonstrieren, dass ein einzelnes HTML-Dokument mit verschiedenen Stylesheets auf unbegrenzte Weise gestaltet werden kann. Es war ein brillantes Konzept und ein echter Glühbirnenmoment für Designer auf der ganzen Welt.
Warum machst du nicht etwas Ähnliches? Nehmen Sie eine einfache Markierung (Chris Coyiers ungeordnete Listennavigation ist der perfekte Kandidat):
Sehen Sie, wie viele verschiedene Effekte Sie erzielen können, indem Sie einfach die Stile ändern.
Werfen Sie einen Blick auf diesen Webdesigntuts + Community Workshop, bei dem fast 100 Leser ihre Stylesheets für eine einfache ungeordnete Liste eingereicht haben. Wie Sie anhand der Ergebnisse sehen können, kann ein wenig Phantasie CSS etwas kosten!
Wenn Leute CSS kennen, twittern sie darüber - das ist Wissenschaftstatsache. Achten Sie darauf, was CSS-Prominente tun, und Sie werden viel lernen. Hier sind nur ein paar Twitterer, denen Sie folgen sollten:
… und…
Warum finden Sie nicht Ihre eigenen Helden auf einer Social-Coding-Site wie GitHub oder CodePen? Das Beste an Netzwerken wie diesen ist der Ratschlag, den sich alle geben; Wenn Sie ein CSS-Problem haben, hat jemand es vor Ihnen gehabt und ist bereit, eine Hand zu geben.
CodePen Wie bereits erwähnt, interpretieren Browser Ihre Stile nicht immer gleich. Dies gilt insbesondere für ältere Versionen von Internet Explorer, die bei der CSS-Übernahme weit hinter den Zeiten zurückliegen. Moderne Browser (wie z. B. Google Chrome, Mozilla Firefox, Apple Safari, Opera und sogar Internet Explorer 10) verfügen über ein proaktiveres Update-Management, so dass die Wahrscheinlichkeit verringert wird, dass ältere Versionen lange herumschweben.
Das heißt, es gibt Unterschiede zwischen diesen Browsern, unabhängig davon, wie aktuell sie sind. Einige CSS werden in einem Browser gut unterstützt, in einem anderen jedoch unterschiedlich interpretiert. Aus diesem Grund ist es ein guter Rat, auf Browser zu achten.
Hier sind einige nützliche Ressourcen, die Ihnen auf Ihrem Weg helfen werden:
Egal, ob Sie sie von Anfang bis Ende lesen oder einfach zur Hand haben, wenn Sie eine schnelle Referenz benötigen - die besten Branchenbücher sind einzigartig für das Lernen.
Über CSS wurde schon oft geschrieben, aber diese Publikationen sind meine Sahne der Ernte:
Wenn Sie Vertrauen gewinnen, wächst Ihr CSS-Vokabular. Sie legen CSS-Eigenschaften für den Arbeitsspeicher fest und legen verschiedene Optionen für die Auswahl von Elementen fest. Jetzt ist es an der Zeit, es wirklich etwas zu verbessern und einige CSS-Selektoren ernsthaft zu lernen.
Um CSS-Selektoren zu lernen, müssen Sie sich auch mit der Spezifität auseinandersetzen.
Stormtrooper Icon von Jory Raphael Welche Selektoren überschreiben andere? Was ist das Nötigste an der Syntax, die ich in meinen Selektoren verwenden sollte, damit meine Codierung effizient ist? Der einzige Ort, an den ich immer Leute schicken werde, um die Regeln der Spezifität zu erlernen, ist Andy Clarkes CSS: Specificity Wars. Eine inspirierte Visualisierung, wie sich Selektoren gegenüberstehen (und die dunklen Kräfte).
CSS ist eine sehr engagierte Disziplin. Wenn Sie erst einmal die Grundlagen in der Hand haben, gibt es viele Möglichkeiten für weitere Untersuchungen. Zum Beispiel:
CSS3 ist ständig in Bewegung. Neue Eigenschaften werden übernommen, andere werden von Browsern vollständig gelöscht, manchmal ändert sich sogar die Syntax. Wenn Sie sich mit CSS-Farbverläufen auseinandersetzen möchten, ist dies ein weiterer Nagel im Sarg Ihrer Photoshop-Anwendung. Warum sollten Sie abgeschnittene Bilder verwenden, wenn Sie es CSS können?!
Siehe CSS3. Bitte sehen Sie alle korrekten CSS3-Implementierungen mit empfohlenen Fallbacks für nicht unterstützte Browser. Werfen Sie einen Blick auf CSS3 Essentials on Tuts + Premium, um Ihr Wissen zu verbessern.
Mit Responsive Web Design können Sie Ihre flüssigen Weblayouts ändern, je nachdem, wie auf die Seite zugegriffen wird. CSS3-Medienabfragen unterstützen diesen Prozess und stellen je nach den Umständen unterschiedliche CSS-Regeln bereit. Sehen Sie sich Responsive Web Design an: Ein visueller Leitfaden für den Einstieg.
Es stellt sich heraus, dass CSS besser sein könnte. Wenn Sie begonnen haben, CSS für reale Projekte zu verwenden, ziehen Sie wahrscheinlich die gleiche Schlussfolgerung. Die Pflege großer CSS-Dateien ist schwierig, Wiederholungen sind üblich - und warum können Sie eine Variable nicht verwenden, um den Wert einer HEX-Farbe zu speichern, anstatt sie immer wieder einzugeben ?! CSS-Präprozessoren wie Sass, LESS und Stylus lösen all diese Probleme und mehr. Sie müssen nicht einmal eine ähnliche Sprache "neu lernen" (halten Sie sich nur an Vanille-CSS, wenn Sie möchten), und Sie können die Kraft von Präprozessoren nutzen.
Werfen Sie einen Blick in den Modus "Weniger los", "Meistern Sie SASS" und "Sass vs. LESS vs. Stylus: Preprocessor Shootout", wenn Sie mehr erfahren möchten.
SMACSS (oder skalierbare und modulare Architektur für CSS) ist ein von Jonathan Snook entwickeltes Konzept, das die unhandliche Wartbarkeit von CSS-Dateien bekämpfen soll. Es lehrt keine neue Sprache, sondern schlägt Möglichkeiten vor, wie Sie Ihr aktuelles CSS besser organisieren können.
Durch das Schreiben von modularem CSS können Sie Teile des Stilcodes in andere Projekte einfügen, ohne den Rest Ihrer Stile zu beschädigen. Spezifisches Management vom Feinsten.
Es steht außer Frage, dass Sie mit Fähigkeiten wie HTML und CSS ein viel besserer Webdesigner sind. Befolgen Sie die beiden beschriebenen Lernprozesse, und Sie sind auf gutem Weg.
Wenn Sie CSS-Lernempfehlungen haben, geben Sie diese in den Kommentaren an!
Accentsconagua