de.hideout-lastation.com
CSS Back To Basics: Terminologien erklärt
Dieser Artikel ist Teil unserer "HTML5 / CSS3 Tutorials" -Serie - mit dem Ziel, Sie zu einem besseren Designer und / oder Entwickler zu machen. Klicken Sie hier, um mehr Artikel aus derselben Serie zu sehen.
CSS oder Cascading Stylesheets vervollständigen die Definitionssprache der Designregeln für unser Web. Künstler auf der ganzen Welt verwenden täglich CSS, um Regeln für grundlegende Webseitenlayouts zu erstellen, zu organisieren und zu kodieren. Dies ist die beliebteste Sprache für Front-End-Design und bietet erstaunliche Fähigkeiten mit der jüngsten Version von CSS3. Aber was bedeutet dieser ganze Code eigentlich?
Die Sprache selbst ist seit einigen Jahren vollständig entwickelt. Verwirrung kann hauptsächlich durch Fehlkommunikation und Missbrauch ähnlicher Begriffe entstehen. CSS bringt viele neue Konzepte auf den Tisch. Wir werden einige der beliebtesten Begriffe behandeln, die es als CSS-Guru zu meistern gilt.
Warum mit 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 nicht gerne scriptet oder programmiert. Es ist eine Stilsprache, genauer Code, der verwendet wird, um zu beschreiben, wie sich eine Webseite verhalten soll.
Mit CSS können wir Attribute aus einzelnen HTML-Elementen direkt bearbeiten. Alle Blöcke, Absätze, Links und Bilder können durch CSS-Regeln beeinflusst werden. Die Präsentationssemantik für das Web zu verfeinern 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, in CSS einzutauchen. Der gesamte Code ist in zwei Aktionen unterteilt: Wählen eines Elements zum Anwenden von Designs und was anzuwenden ist. Letzteres wird durch Eigenschaft / Wert-Paare erstellt.
Als Beispiel eine color: red; ist ein sehr einfaches Eigenschaft / Wert-Paar. Die von uns verwendete Eigenschaft ist die Farbe, die es uns erlaubt, jeden akzeptablen Wert zur Änderung der Textfarbe zu übergeben. Dies könnte auch Hexcode oder RGB (Rot-Grün-Blau) Farbdaten sein. Viele Male werden Designer die Idee von Werten nicht erwähnen, weil sie irreführend sein kann.
Eigenschaften und Werte sind wirklich eine Idee. Jede Eigenschaftsdeklaration benötigt einen Wert und Werte allein sind bedeutungslos. Es gibt viele Online-Dokumentationen, die die vielen verschiedenen Eigenschaften und ihre Auswirkung auf HTML-Elemente behandeln. Ich würde empfehlen, ein CSS-Nachschlagewerk von einem nahe gelegenen Buchladen zu kaufen. Sie sind ziemlich billig und enthalten die meisten Informationen, die Sie benötigen.
Selektorwerte
Selektoren werden benötigt, um eine komplette CSS-Codezeile zu vervollständigen. Dies ist das, was wir deklarieren, um festzulegen, auf welche Art von Element wir zielen. Es gibt viele Selektoren und viele sind so verworren, dass der durchschnittliche Designer die Fähigkeiten nicht benötigt. Überprüfen Sie die Selektor-Dokumentation von W3, wenn Sie mehr erfahren möchten.
Am einfachsten beginnen Sie mit Stildefinitionen, indem Sie bare Elemente als Eigenschaftsselektoren verwenden. Das bedeutet, dass der root-Code wie p für Absätze, div für Divisionen und sogar body und html manipuliert werden kann, um das gesamte Webseiten-Dokument zu manipulieren. Im Folgenden finden Sie ein schnelles Beispiel für das Formatieren aller Absatzelemente.
p {Schriftfamilie: Arial, serifenlos; Farbe: # 222; Schriftdicke: fett; } Was CSS wirklich ausmacht, ist, wie genau Selektor-Sniping sein kann. Der beste Weg, um zielgerichtete Stile zu erreichen, sind zwei Methoden, die als Klassen und IDs bezeichnet werden . Dies sind alltägliche Ideen in HTML, in denen Sie festlegen können, dass jedes Element über Attribute einen ID- und einen Klassenwert erhält. Mit CSS können Sie dann einfach Styles auf diesen bestimmten Block anwenden.
p # firstpar {Schriftgröße: 14px; } / * Stile Absatz mit 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 verwechselt, keine große Überraschung. Werte wurden früher als die Platzierung, die wir verwenden, um eine Eigenschaft zu beschreiben, erläutert. Längeneinheiten sind auch Werte, in denen sie eine Eigenschaft beschreiben.
Der Unterschied besteht darin, dass diese Werte numerische Daten erfordern und daher einige Einheiten zurückgeben müssen. Pixel (px) sind am weitesten verbreitet und können für fast alles verwendet werden: Breite / Höhe, Schriftgröße, Füllung / Ränder, um nur einige zu nennen.
Darüber hinaus können Prozentsätze (%) angezeigt werden, die häufig in Fluidlayouts verwendet werden. Wenn Sie die Breitenwerte auf einen Prozentwert setzen, wird der Compiler 100% als die gesamte Breite des Webbrowsers annehmen. Dies gibt Designern eine Menge Präzision, wenn sie Stile auf Layoutstrukturen und sogar Seitentypografie anwenden.
Der Deklarationsblock
Nachdem wir alle diese Begriffe zusammengefügt haben, können wir endlich die Kernidee der Stylesheets diskutieren. Codeblöcke werden verwendet, um Themenbereiche abzugrenzen und Elementdetails zu spezifizieren. Im Folgenden finden Sie beispielsweise eine Codezeile für einen einfachen Navigationscontainer:
div # nav {Anzeige: Block; Breite: 100%; Auffüllen: 3px 6px; Rand unten: 20px; } Der einfachste Weg, diesen Code anzuzeigen, besteht darin, Eigenschaften nacheinander zu zeichnen. CSS-Entwickler haben Code-Blöcke verwendet, um jede Eigenschaft in eine eigene Zeile zu zerlegen. Diese Agenda nimmt nicht nur viel mehr Platz in Anspruch, sondern reduziert auch die Fähigkeit, Ihr Blatt zu "überfliegen", um genau das zu finden, was Sie brauchen.
Ein besserer Weg, um Code-Blöcke aufzulösen, besteht darin, verworrene Elemente in ihre eigenen zu zerlegen, nachdem sie eine Schwelle erreicht haben. Diese Nummer ist persönlich und unterscheidet sich zwischen den Entwicklern. Es ist der Wendepunkt, an dem die Logik es doof vorschreibt, alles auf einer einzigen Zeile zu halten, hauptsächlich wegen der Lesbarkeit.
Im Folgenden habe ich ein Beispiel für einen Block von Navigationseigenschaften zusammengefasst. Diese Praxis hält tiefere Elemente am selben Ort, so dass Änderungen an allen Navigationselementen viel einfacher sind.
div # nav {Anzeige: Block; Breite: 100%; Auffüllen: 3px 6px; Rand unten: 20px; } div # nav ul {Liste-Stil: keine; Bildschirmsperre; } div # nav ul li {schweben: links; Rand rechts: 10px; Schriftgröße: 12px; } div # nav ul li a {farbe: # 0f0f0f; Textdekoration: keine; Anzeige: Inline-Block; Auffüllen: 2px 5px; } Mögliche Fortschritte von CSS2 / CSS3
In den Schlagzeilen wurde kürzlich nonstop über die erstaunlichen Vorteile von CSS3 gesprochen. Aber was hat sich wirklich in der Sprache geändert ? Klar, alter Code wird immer noch gut laufen. Dies zeigt zumindest vollständige Rückwärtskompatibilität zwischen Compilern (immer eine gute Sache).
Hauptunterschiede beziehen sich hauptsächlich auf neue Eigenschaften. Diese ermöglichen es, abgerundete Ecken und Schlagschatteneffekte im Browser darzustellen. CSS3 bietet auch neue Werkzeuge zum Beschreiben von Farben im Dokument. HSL (Hue-Saturation-Lightness) ist die neueste Ergänzung zu HSLA, die einen Alpha-Kanal enthält, um die Opazität zu reduzieren.
Attribut-Selektoren sind ein großer Schritt vorwärts in Bezug auf das direkte Markup-Styling. Mit dieser Art von Code können Sie auf einen bestimmten Elementnamen abzielen, der Attribute mit bestimmten Werten enthält. Diese sind vor allem dann nützlich, wenn Sie mit Markup arbeiten, z. B. XML, wo es keine Standardentwurfsprinzipien für die Bearbeitung von Knoten gibt. Das folgende Beispiel ist eine relativ einfache Idee:
div [attrib ^ = "1"] {/ * Stile hier * /} Der obige Code ist Teil der CSS-Selektoren-Bibliothek. Dies würde alle div-Elemente mit einem Attribut "attrib" betreffen, das auch den Wert "1" enthält. Wenn das immer noch verwirrend ist, verweisen Sie das Beispiel unten, um zu klären. Theoretisch sollten diese beiden Selektoren dieselben Aktionen ausführen.
p [id ^ = "primär"] {/ * Stile * /} p # primär {/ * Stile * /} Fazit
Nach ein paar der am meisten verwechselten Begriffe scheint CSS ein Spaziergang im Park zu sein. Die Sprache ist sehr intuitiv und Anfänger können innerhalb der ersten Stunden direkt mit dem Design beginnen. Dies macht CSS unter Webentwicklern so beliebt.
Die Vorteile von CSS3 haben gerade erst begonnen zu greifen. In den nächsten Jahren werden uns die sich entwickelnden Webtrends zeigen, wie viel Kontrolle wir wirklich über das Design von Webseiten haben. CSS ist derzeit stolz als dominierende Sprache für Front-End-Website-Styling. Das Üben in sogar rudimentäre Fähigkeiten auf mittlerem Niveau kann zu reichhaltiger Design-Erfahrung und weiterem Wissen führen.
Flyte ist ein LightBulb, der schwebt, und es ist cool
Was fällt dir als erstes ein, wenn du das siehst? Lass mich helfen: Wie schwebt diese Glühbirne auf dieser Basis? Zweitens, was zum Teufel brennt diese Glühbirne?Zauber.Nun, die Magie der Magnetschwebebahn und der drahtlosen Energieübertragung, um genau zu sein. Diese LED-Glühbirne wird von einem Elektromagneten überschwemmt und leuchtet kabellos auf - schau ma, keine Batterie oder Stromkabel.Dies
Design schlanke Video Player Schnittstelle - Photoshop Tutorial
Diese Ära ist nur über glatte Oberfläche. Es sieht nicht nur professionell aus, sondern vermittelt den Menschen das Gefühl von Zuverlässigkeit, und genau das ist es, wonach die meisten Unternehmen suchen. Ich erlebe die Bedeutung und zeige Ihnen Schritt für Schritt, wie Sie eine schlanke Oberfläche eines Videoplayers gestalten können.Wir wer
