CSS Zurück zu den Grundlagen Begriffe erklärt
CSS oder Cascading Stylesheets vervollständigen die Sprache der Designregeln für unser Web. Überall verwenden Künstler überall CSS, um Regelwerke für grundlegende Website-Layouts zu erstellen, zu organisieren und zu kodieren. Dies ist die beliebteste Sprache für das Frontend-Design geworden und bietet mit der neuesten Version von CSS3 erstaunliche Fähigkeiten. Aber was bedeutet dieser Code eigentlich??
Die Sprache selbst ist seit einigen Jahren voll entwickelt. Verwirrung kann meistens auf Missverständnis und Missbrauch ähnlicher Begriffe zurückzuführen sein. CSS bringt viele neue Konzepte auf den Tisch. Wir werden einige der beliebtesten Terminologien behandeln, die Sie als CSS-Guru beherrschen können.
Warum sich auf CSS spezialisieren??
Diese Frage wurde schon früher gestellt, und selbst im Jahr 2011 können wir die gleichen Ergebnisse sehen. CSS ist eine robuste Sprache, die sich nicht gern mit Scripting oder Programmierung auskennt. Es ist eine Stilsprache, genauer gesagt, Code, der beschreibt, wie sich eine Webseite verhalten soll.
Mit CSS können Sie Attribute von einzelnen HTML-Elementen direkt bearbeiten. Alle Blöcke, Absätze, Links und Bilder können durch CSS-Regeln beeinflusst werden. Die Verfeinerung der Präsentationssemantik für das Web war schon immer ein großer Schritt. Dies ist der Hauptgrund, warum CSS immer noch der führende Player für Designer ist - niemand hat etwas Besseres geschaffen!
Eigenschaften und Werte
Dies ist der einfachste Weg, um in CSS einzudringen. Der gesamte Code lässt sich in zwei Aktionen unterteilen: Auswählen eines Elements zum Anwenden von Designs und zu verwendende Elemente. Letzteres wird durch Eigenschafts- / Wertepaare erstellt.
Als Beispiel Farbe Rot; ist ein sehr einfaches Eigenschaft / Wert-Paar. Die Eigenschaft, die wir genutzt haben, ist Farbe was uns erlaubt, in jedem akzeptablen Zustand zu übergeben Wert Textfarbe ändern. Dies können auch Hex-Code- oder RGB-Farbdaten (Rot-Grün-Blau) sein. Oft werden Designer die Idee von Werten nicht erwähnen, da dies irreführend sein kann.
Eigenschaften und Werte sind wirklich eine einzige Idee. Jede Eigenschaftsdeklaration erfordert einen Wert, und Werte allein sind bedeutungslos. Es gibt viele Online-Dokumentationen, die sich auf die vielen verschiedenen Eigenschaften und deren Auswirkungen auf HTML-Elemente beziehen. Ich würde empfehlen, ein CSS-Nachschlagewerk in einem nahegelegenen Buchladen zu kaufen. Sie sind ziemlich billig und enthalten fast alle Informationen, die Sie benötigen.
Auswahlwerte
Selektoren werden benötigt, um eine ganze Zeile CSS-Code abzuschließen. Hiermit legen wir fest, auf welchen Elementtyp wir abzielen. Es gibt viele Selektoren und viele sind so verworren, dass der durchschnittliche Designer die Fähigkeiten nicht benötigt. Überprüfen Sie die W3-Auswahldokumente, wenn Sie mehr erfahren möchten.
Die einfachste Möglichkeit, mit Stildefinitionen zu beginnen, besteht darin, bloße Elemente als Eigenschaftsauswahl zu verwenden. Dies bedeutet, den Root-Code wie zu manipulieren p für Absätze, div für Spaltungen und sogar Karosserie und html kann verwendet werden, um das gesamte Webseitendokument zu bearbeiten. Nachfolgend finden Sie ein schnelles Beispiel für die Gestaltung aller Absatzelemente.
p font-family: Arial, serifenlos; Farbe: # 222; Schriftdicke: fett;
Was CSS wirklich wichtig macht, ist, wie genau das Selektor-Sniping sein kann. Der beste Weg, um zielgerichtete Stile zu erreichen, ist durch zwei Methoden, die als bekannt sind Klassen und IDs. Dies sind gängige Ideen in HTML, bei denen Sie festlegen können, dass jedes Element über Attribute eine ID und einen Klassenwert hat. Wenn Sie dann CSS verwenden, können Sie einfach Stile auf diesen bestimmten Block anwenden.
p # firstpar font-size: 14px; / * formatiert Absatz mit der ID von "firstpar" * / p.comment font-size: 1.0em; Zeilenhöhe: 1.3em; / * formatiert Absatz (e) mit der Klasse "Kommentar" * /
Längeneinheiten und Werte
Oft werden diese Begriffe gemischt, keine große Überraschung. Die Werte wurden früher als die Platzierung erläutert, die wir zur Beschreibung einer Eigenschaft verwenden. Längeneinheiten sind auch Werte, da sie zur Beschreibung einer Eigenschaft verwendet werden.
Der Unterschied besteht darin, dass diese Werte numerische Daten erfordern und daher eine Form von Einheiten zurückgeben müssen. Pixel (px) sind die am weitesten verbreiteten und können für fast alles verwendet werden: Breite / Höhe, Schriftgröße, Füllungen / Ränder, um nur einige zu nennen.
Abgesehen von diesen können Sie Prozentsätze (%) sehen, die häufig durch flüssige Layouts verwendet werden. Beim Festlegen von Breitenwerten auf einen Prozentwert nimmt der Compiler an, dass 100% die gesamte Breite des Webbrowsers sind. Dies gibt den Designern beim Anwenden von Stilen auf Layoutstrukturen und sogar der Seitentypographie eine hohe Präzision.
Der Deklarationsblock
Nachdem wir all diese Begriffe zusammengestellt haben, können wir endlich die Kernidee hinter Stylesheets diskutieren. Codeblöcke werden verwendet, um Themenbereiche abzugrenzen und Elementdetails festzulegen. Im Folgenden finden Sie beispielsweise eine Codezeile für einen einfachen Navigationscontainer:
div # nav display: block; Breite: 100%; Polsterung: 3px 6px; Rand unten: 20px;
Der einfachste Weg, diesen Code anzuzeigen, besteht darin, die Eigenschaften nacheinander anzuordnen. CSS-Entwickler haben Codeblöcke verwendet, um jede Eigenschaft in eine eigene Zeile zu unterteilen. Diese Agenda nimmt nicht nur viel mehr Platz in Anspruch, sondern reduziert auch die Fähigkeit dazu “überfliegen” Ihr Blatt, um genau das zu finden, was Sie brauchen.
Eine bessere Möglichkeit, Codeblöcke aufzubrechen, besteht darin, gewundene Elemente nach dem Erreichen einer Schwelle in ihre eigenen zu zerlegen. Diese Nummer ist persönlich und unterscheidet sich zwischen den Entwicklern. Es ist der Wendepunkt, an dem die Logik es dumm vorschreibt, alles in einer einzigen Zeile zu halten, hauptsächlich wegen der Lesbarkeit.
Im Folgenden habe ich alle zusammen ein Beispiel für einen Block von Navigationseigenschaften geschrieben. Durch diese Vorgehensweise werden tiefere Elemente an derselben Stelle gespeichert, sodass Änderungen an allen Navigationselementen viel einfacher sind.
div # nav display: block; Breite: 100%; Polsterung: 3px 6px; Rand unten: 20px; div # nav ul list-style: none; Bildschirmsperre; div # nav ul li float: left; Rand rechts: 10px; Schriftgröße: 12px; div # nav ul li a color: # 0f0f0f; Textdekoration: keine; Anzeige: Inline-Block; Polsterung: 2px 5px;
Mögliche Verbesserungen von CSS2 / CSS3
In den Schlagzeilen wurde kürzlich ununterbrochen über die erstaunlichen Vorteile von CSS3 gesprochen. Aber was hat das wirklich? geändert in der Sprache Natürlich wird alter Code immer noch einwandfrei laufen. Dies zeigt zumindest die vollständige Rückwärtskompatibilität zwischen Compilern (immer eine gute Sache).
Hauptunterschiede beziehen sich hauptsächlich auf neue Eigenschaften. Dadurch können abgerundete Ecken und Schatteneffekte im Browser dargestellt werden. CSS3 bietet auch neue Werkzeuge zur Beschreibung von Farben im Dokument. HSL (Hue-Saturation-Lightness) ist neben HSLA die neueste, die einen Alphakanal enthält, um die Deckkraft zu verringern.
Attribut-Selektoren sind ein großer Schritt nach vorne in Bezug auf das Design von geraden Markierungen. Mit diesem Code können Sie einen bestimmten Elementnamen angeben, der Attribute mit bestimmten Werten enthält. Diese sind meistens hilfreich, wenn Sie mit Markup wie XML arbeiten, wo es keine Standardentwurfsprinzipien für die Bearbeitung von Knoten gibt. Das folgende Beispiel ist eine relativ einfache Idee:
div [attrib ^ = "1"] / * hier * /
Der obige Code ist Teil der CSS-Auswahlbibliothek. Dies würde sich auf alle div-Elemente mit einem Attribut auswirken “Attrib” das hält auch den Wert “1”. Wenn dies immer noch verwirrend ist, verweisen Sie das nachfolgende Beispiel zur Verdeutlichung. Theoretisch sollten diese beiden Selektoren die gleichen Aktionen ausführen.
p [id ^ = "primary"] / * styles * / p # primary / * styles * /
Fazit
Nachdem einige der am meisten verwirrten Begriffe zusammengebrochen sind, scheint CSS ein Spaziergang im Park zu sein. Die Sprache ist sehr intuitiv und Anfänger können schon in den ersten Stunden mit dem Entwerfen beginnen. Dies macht CSS so beliebt bei Web-Entwicklern.
Die Vorteile von CSS3 haben gerade erst Wirkung gezeigt. In den neuen Jahren werden sich die sich entwickelnden Web-Trends zeigen, wie viel Kontrolle wir wirklich über das Design von Webseiten haben. CSS ist derzeit stolz auf die dominierende Sprache für das Front-End-Website-Styling. Das Üben in nur rudimentäre Fähigkeiten auf mittlerem Niveau kann zu reichhaltiger Designerfahrung und weiterem Wissen führen.
