Ob Sie es wissen oder nicht, Sie nutzen CSS fast jedes Mal, wenn Sie einen Webbrowser öffnen. Es ist das Vorlagensystem, das von fast jeder modernen Website verwendet wird, um Seiten ihr Layout und Aussehen zu geben. Einige von euch denken vielleicht: " Ich habe schon Webseiten gemacht und es war einfach, ich brauchte nie CSS. "Und das ist wahr. Sie benötigen CSS nicht, um eine gut aussehende und funktionale Website zu erstellen, aber die Chancen stehen gut, dass Ihre Website kleiner, sauberer, einheitlicher und besser aussehend hätte sein können, wenn Sie CSS von Anfang an gewählt hätten. Heute zeigen wir Ihnen die Grundlagen von CSS. Dieser Leitfaden wird Sie nicht von einem Anfänger zum preisgekrönten Webdesigner bringen, aber es wird Ihnen helfen, zu verstehen, wie CSS funktioniert und wie es Ihnen viel Zeit und Mühe kostet.

Schneller Überblick

CSS (Cascading Style Sheet) soll eines tun: die Präsentation Ihrer Site verwalten. Dies klingt vielleicht einfach, aber denken Sie daran, während wir fortfahren. Eine wichtige Sache, die von dieser Tatsache weggenommen werden sollte, ist, dass Präsentation nicht die Aufgabe von HTML ist. HTML definiert die Struktur Ihrer Seite (was ist eine Kopfzeile, was ist eine Fußzeile, etc). CSS übernimmt diese Struktur und erledigt die ganze Arbeit, wie diese Struktur dargestellt wird .

Der falsche Weg

Um Ihnen eine Vorstellung davon zu geben, was CSS beheben soll, werfen Sie einen Blick auf diesen HTML-Code:

 Meine Homepage 
Die größte Website aller Zeiten wird derzeit entwickelt.


Aliens sind auch eingefallen.


Was in Ihrem Browser so aussieht:

Hier gibt es eine Reihe möglicher Probleme. Für den Anfang platziert es Schrift und Farbe Informationen jedes Mal, wenn eine neue Überschrift oder ein neuer Absatz gezeichnet wird. Jedes neue Element auf der Website benötigt identische Schrift- und Farbdefinitionen, obwohl sie für jede Überschrift und jeden Absatz identisch sind. Dies bedeutet eine Menge verschwendeter Bandbreite, wenn Sie viele Einträge haben.

Als nächstes ist das Problem der Skalierbarkeit. Wenn Sie auf dieser Nachrichtenseite 100 Einträge haben und Sie entscheiden, dass die Überschriften rot sein sollen, haben Sie eine Menge Arbeit vor sich, um jedes Überschriften-Tag so zu ändern, dass die neue Farbe angezeigt wird.

Drittens, und dies ist eine Frage des "richtigen Verfahrens", enthält diese Seite mehrere Elemente, die "präsentativ" und nicht "strukturell" sind. Die Tags font, color und linebreak beziehen sich auf die Darstellung der Seite und haben nichts mit der Struktur der Seite zu tun. HTML eignet sich nur schlecht für die Präsentation, der Job wird am besten CSS überlassen, wie wir weiter unten zeigen werden.

Entwerfen mit CSS

Wie können wir all diese zusätzlichen Tags entfernen? Wie können wir die Seitengröße reduzieren und gleichzeitig die Farben und das Layout beibehalten? Nun, Bild, das Sie an einem einzigen Ort definieren könnten, wie alle Ihre Überschriften aussehen sollten (z. B. großer grüner Text). Dann müssen Sie nicht die Farbe für jede eindeutige Überschrift definieren. Gleiches gilt für die Absätze. Wenn Sie möchten, dass der gesamte Absatztext blau ist, legen Sie dies als CSS-Regel für das "p" -Tag fest. Alle weiteren Absätze haben blauen Text, ohne dass Sie jedes Mal neu eingeben müssen.

CSS lässt sich am besten lernen. Beginnen wir damit, genau die oben beschriebenen Regeln zu definieren - alle Überschriften sollten grün sein und alle Absätze sollten blau sein. Starten Sie mit dem Texteditor Ihrer Wahl eine neue Datei namens style.css und fügen Sie den folgenden Text hinzu:

 h1 {farbe: grün;} p {farbe: blau;}

Dies definiert alle h1- Tags als grünen Text und alle p- Tags als blauen Text.

Alles, was wir jetzt tun müssen, ist, es mit dem Link-Tag mit dem HTML-Code zu verbinden und dann alle nutzlosen Font-Tags aus dem HTML-Code zu entfernen. Am Ende sollte es ungefähr so ​​aussehen:

 Meine Homepage 
Die größte Website aller Zeiten wird derzeit entwickelt.
Aliens sind auch eingefallen.

Ziemlich sauberer, nicht wahr? Wir haben bereits die Gesamtgröße unserer Website reduziert, und das war mit nur 2 Einträge in unserem "Blog".

CSS für Layout

Sicher, es kann Ihre Schriften konsistent machen, aber das allein reicht sicherlich nicht aus, um CSS zum vollständigen Werkzeug für die Präsentation von Webseiten zu machen. Um dies zu tun, muss es in der Lage sein, das Layout Ihrer Site zu beeinflussen, und Ihnen die Kontrolle darüber geben, wie die Dinge aussehen, sondern wohin sie gehen. Die volle Leistungsfähigkeit von CSS gegenüber dem Site-Layout geht weit über den Rahmen dieses Handbuchs hinaus. Daher werden wir das Konzept durch ein einziges gemeinsames Szenario - eine Navigations-Sidebar - vorstellen.

So etwas zu erstellen ist in CSS erstaunlich einfach. Gehen Sie zurück zu Ihrer style.css-Datei und fügen Sie den folgenden Abschnitt hinzu:

 #Seitenleiste {Breite: 100px; Höhe: 200px; Rand-Stil: fest; schweben: links; Rand rechts: 15px; }

Notieren Sie sich das # am Anfang der Namensleiste . Kurz gesagt - dies teilt CSS mit, dass wir mit einem neuen eindeutigen Elementnamen arbeiten, den wir erfunden haben, im Gegensatz zu einem eingebauten Tag wie h1 oder p . Die lange Erklärung beinhaltet den Unterschied zwischen einer ID und einer Klasse und wird hier im Detail erklärt.

Sie sollten hier einige wichtige Bits sehen können. Zuerst erstellten wir eine neue ID namens Sidebar, gaben ihr eine bestimmte Höhe und Breite, einen festen Rand und gaben an, dass sie einen 15-Pixel-Rand auf der rechten Seite haben sollte. Wir haben ihm gesagt, dass er auf der linken Seite des Bildschirms schweben soll, wobei andere Seitenelemente (wie Ihr Text) um ihn herum fließen. Sie können dieses Element aktivieren, indem Sie dem HTML-Text ein Sidebar- Tag hinzufügen, etwa so.

  • Gegenstand 1
  • Punkt 2
  • Punkt 3

Und jetzt, wenn Sie Ihre Seite öffnen, gibt es Ihre neue Sidebar!

Fazit

Klar, wir haben erst begonnen, die Oberfläche der CSS-Fähigkeiten zu kratzen, aber hoffentlich sollte klar sein, dass diese Grundprinzipien auf viel mehr angewendet werden können, als wir es hier getan haben. Die Textmanipulationen können verwendet werden, um Text auf unzählige Arten zu formatieren, und durch das Ändern des Sidebar-Konzepts können Sie unendliche Variationen des Site-Layouts erstellen. Für weitere Studien empfiehlt dieser Autor den CSS-Bereich von W3Schools.com.

Bildnachweis: Geirarne