Dies ist der dritte Artikel in unserer Back to Basics-Serie, in dem wir uns mit den absoluten Anfangskonzepten der Webentwicklung beschäftigen. Wenn Sie ein Designer ohne oder mit geringen Kenntnissen der Webprogrammierung sind, ist diese Serie für Sie.
In unserem ersten Artikel haben wir uns mit HTML auseinandergesetzt, und in unserem zweiten Artikel haben wir die grundlegende Anatomie eines HTML-Dokuments beschrieben. Heute springen wir zu einem neuen Thema und beantworten eine sehr wichtige Frage: Was ist CSS?
Was ist CSS?
Bevor wir diese Frage direkt beantworten, denken wir noch einmal an die Antwort auf die erste Frage: Was ist HTML? Wie wir gelernt haben, könnte man sagen, dass HTML aus konzeptioneller Sicht meistens die Inhalt und Struktur einer Webseite. Wir haben die Metapher eines Skeletts verwendet und diskutiert, wie HTML die Grundbausteine des World Wide Web bildet, wie wir es kennen.
Wenn auf einer Webseite ein Absatz vorhanden ist, stammt dieser aus dem HTML-Code. Wenn es eine Überschrift und eine Bildergalerie gibt, wurden diese Elemente wahrscheinlich als HTML-Code-Ausschnitte eingefügt (offensichtliche Ausnahmen für Flash und dergleichen).
Vor diesem Hintergrund sind Cascading Stylesheets, häufiger als CSS bezeichnet, der Weg zu Stil dieser Inhalt Die Farbauswahl, sich wiederholende Hintergrundtexturen, Schatten, abgerundete Ecken und sogar das Layout bilden den gesamten Bereich von CSS. Als Designer ist dies der Bereich, in dem Sie wahrscheinlich am meisten Erfolg haben werden.
Um ein klares Bild davon zu erhalten, wie wichtig CSS für das Webdesign ist, werfen wir einen Blick auf eine Webseite mit und ohne Stylesheet.
Vorher und nachher CSS
In Anbetracht dessen, dass CSS einfach zu "Styling" führt? Wenn Sie sich auf einer Webseite befinden, denken Sie vielleicht, es sei nur ein Sahnehäubchen auf dem sprichwörtlichen Kuchen, was bedeutet, dass es lediglich kleine ästhetische Anpassungen bietet. Der Einfluss von CSS auf eine Webseite ist jedoch enorm.
Zur Veranschaulichung dieser Idee finden Sie hier einen Screenshot der Design Shack-Homepage mit deaktiviertem primärem Stylesheet:
Vor CSS
Diese Grundstruktur kann in einer unendlichen Anzahl von Variationen gestaltet werden, von denen jede so dramatisch anders aussieht, dass sie trotz des gleichen HTML-Codes nicht einmal als dieselbe Seite erkannt werden!
Mit der Einfügung eines einzelnen Stylesheets wird die Homepage von Design Shack wie folgt:
Nach CSS
Kann ich einen "heiligen Mist" bekommen? Sie werden feststellen, dass dies keine einfachen Farbänderungen sind. Der Einfluss von CSS auf die Benutzererfahrung ist dramatisch. Das gesamte Layout wurde in ein dreispaltiges Format rekonstruiert, Hintergrundtexturen wurden angewendet und die Typografie wurde drastisch verbessert.
Wie funktioniert es?
Wie führt CSS also diese ganze Magie aus? Was für eine verrückte Codierung müssen Sie lernen, dem Browser mitzuteilen, dass er eine solch dramatische Transformation durchführt? Die gute Nachricht ist, CSS ist viel einfacher als Sie vielleicht denken. Verglichen mit der Art von Hardcore-Codierung, die Sie in Sprachen wie PHP machen müssen, ist dies ein relativ einfaches Niveau. Es macht auch unglaublich viel Spaß, wenn man den Dreh raus hat.
Es geht um Selectors
Im ersten Teil dieser Serie haben wir erfahren, wie HTML hauptsächlich aufgebaut ist Stichworte. Nahezu jedes HTML-Snippet besteht aus HTML Elemente Umschlossen mit einem Satz von Tags, die ungefähr dieser Syntax entsprechen:
Bei CSS ist die Syntax völlig anders und doch eng miteinander verbunden. Wir können wirklich jedes einzelne Stück unseres HTML-Codes detailliert betrachten und individuell gestalten. Diese Aufgabe lösen wir mit CSS-Selektoren.
Ein Selektor ist genau das, was er anhört: Er ermöglicht es Ihnen, etwas zur Manipulation auszuwählen, in unserem Fall einen bestimmten Teil des HTML-Codes. Viele CSS-Selektoren entsprechen direkt dem Tag, auf den sie abzielen. Wenn wir zum Beispiel den Inhalt zwischen den h1- und Absatz-Tags oben formatieren möchten, würden wir Folgendes verwenden.
Wie Sie sehen können, ist der Selektor für den? H1? Tag ist einfach? h1 ?. Auf den Selektor folgt dann ein Satz geschweifte Klammern, die den gesamten Code enthalten, der sich auf diesen Selektor bezieht.
Der Code in den geschweiften Klammern ist aufgeteilt in Eigenschaften, die genau definieren, was Sie über den anvisierten Teil von HTML ändern. Genau wie in Photoshop verfügt jedes Teil des Designs über mehrere Eigenschaften, die geändert werden können. Eine gegebene Textpassage hat eine Schriftart, eine Schriftgröße, eine Farbe, eine Zeilenhöhe usw. Jeder von diesen sollte manuell festgelegt werden, anstatt sich auf Standardwerte zu verlassen, die unter Browsern inkonsistent sind.
Hier ist ein Blick auf diese Syntax in Aktion. Wir haben einen Selektor, gefolgt von geschweiften Klammern, die eine Eigenschaft und deren Wert gefolgt von einem Semikolon enthalten (optional für die letzte Eigenschaft in einer Liste).
Dieser Code ist sehr gut lesbar und setzt die Größe des gesamten h1-Texts auf der Seite auf 25 Pixel. Die Terminologie hier ist sehr wichtig, also hier ist ein weiterer Blick für Sie visuell gesinnte Leute.
Mehrere Eigenschaften verwenden
Das obige Beispiel ist ziemlich vereinfacht. Wie bereits erwähnt, verfügt jeder Selektor normalerweise über mehrere Eigenschaften, die vom Entwickler festgelegt werden. Verschiedene Codierer organisieren ihren Code auf verschiedene Arten, aber hier ist ein CSS-Block typischerweise strukturiert.
Hier legen wir die Schriftart, deren Größe und Farbe fest. Die Schriftfamilie? verwendet Sicherungszeichensätze für den Fall, dass die Hauptschriftart auf dem Computer des Endbenutzers nicht vorhanden ist.
Mehr als Tags
Die Auswahlbeispiele oben zielen auf einfache HTML-Tags ab, CSS enthält jedoch viel kompliziertere Selektoren, die auf alle Arten von HTML abzielen.Sie können sogar kombinieren oder "Kette"? verschiedene Selektoren zusammen.
Angenommen, Sie hatten zwei Absätze in zwei verschiedenen Divs in Ihrem HTML-Code:
Wenn ich jetzt einfach das Absatz-Tag in meinem CSS anvisiere, wären beide Absätze betroffen. Angenommen, ich möchte, dass sie anders aussehen. Wie würde ich das tun?
Hier ist eine Möglichkeit, um herauszufinden, was los ist:
Wie Sie sehen, setzen wir für jeden Absatz eine andere Farbe, indem Sie Selektoren kombinieren. Wir haben das Ziel? In beiden Fällen habe ich aber im ersten Abschnitt die Hauptsektion angesteuert. id und in der zweiten habe ich die? sekundärsektion? Klasse. Der Unterschied besteht darin, dass Klassen wiederverwendbar sind und auf mehrere Elemente im HTML-Code angewendet werden können, während die IDs eindeutig sind. Sobald wir unseren? Sekundären Bereich? Klasse, wir können diese Stile einfach auf andere Divs anwenden, indem wir diese Klasse im HTML-Code anschlagen.
In CSS möchten Sie immer so effizient wie möglich sein, also tun Sie alles, was Sie können, mit so wenig Code wie möglich. Der Unterricht spart viel Zeit und Platz.
Weitere Informationen zu CSS-Selektoren finden Sie in unserem Artikel CSS-Selektoren: Just the Tricky Bits.
Kaskadieren?
Nun haben wir ein rudimentäres Verständnis von "Stylesheets". und wie sie? Stil? das HTML, also woher kommt das? Kaskadieren? Teil hereinkommen
Dies kommt wieder auf den Begriff der Effizienz zurück. Sobald Sie einen generischen Stil festgelegt haben, läuft er nach unten. zu anderen Elementen. Dieser Code beispielsweise macht jedes Ankertag auf der Seite rot:
Die Spezifität ist jedoch sehr wichtig. Wenn wir also etwas hinzufügen, ändert sich alles:
Jetzt ist jeder Link auf der Seite rot gefärbt. außer die mit dem? Abschnitt? id, die blau sein wird. Der spezifischere Selektor hat den allgemeinen Selektor außer Kraft gesetzt.
Einen kurzen Überblick darüber, wie Sie herausfinden, welche Regeln andere überschreiben, finden Sie unter Erste Schritte mit CSS.
Wie funktioniert Webdesign?
Nachdem wir uns nun mit HTML und CSS auseinandergesetzt haben, sollten Sie in der Lage sein zu sehen, wie sie zusammenarbeiten, um fertige Webseiten zu erstellen. Lassen Sie uns ein schnelles Beispiel eines Entwurfsprozesses durchlaufen, den jemand durchlaufen könnte.
Photoshop-Modell
Zunächst reißt jemand Photoshop auf und gestaltet im Wesentlichen die Site. Wie es aussehen wird, welche Farben verwendet werden, wo die Bilder platziert werden, die verschiedenen Inhaltsspalten: alles.
Beachten Sie, dass dieser Schritt vollständig optional ist. Es gibt in diesen Tagen einen ziemlich großen Trend in Richtung Gestaltung im Browser und überspringen Sie Photoshop oder Fireworks Comps vollständig.
HTML
Als Nächstes betrachtet der Webentwickler, der möglicherweise dieselbe Person ist oder nicht, das Modell und sucht nach Abschnitten, die in den HTML-Code aufgenommen werden können, wie Absätze, Bilder usw. Die grundlegenden visuellen Gruppen im Design werden in HTML gespiegelt mit divs oder anderen strukturellen Elementen.
CSS
Der Inhalt in reinem HTML wird ohne jeglichen Stil sein, daher betrachtet der Entwickler das Layout, die Schriftarten, Farben usw., die im Photoshop-Modell verwendet wurden, und übersetzt diese Eigenschaften in CSS. Während der Entwickler-Code überwacht er die Live-Vorschau, um zu sehen, wie sich der Code auf den Inhalt auswirkt, bis alles stimmt.
Fazit
Nachdem Sie die drei Artikel dieser Serie gelesen haben, sollten Sie eine genaue Vorstellung davon haben, was HTML und CSS sind und wie sie zusammenarbeiten, um Webseiten zu erstellen.
Dies war keinesfalls ein erschöpfender Einblick in diese beiden Syntaxarten und sollte auch nicht dazu führen, dass Sie wirklich mit Ihrem eigenen Code arbeiten. Stattdessen füllt sie diese konzeptionelle Wissenslücke, die sich darauf bezieht, was diese Sprachen sind und wie sie verwendet werden. Ob Sie jemals eine sein wollen oder nicht Web-EntwicklerWenn Sie dieses Wissen besitzen, werden Sie besser werden Webdesigner.