Share
Willkommen zur fünften Lektion unserer Web Design for Kids-Serie, die sich mit CSS beschäftigt.
Wir haben hart an unserem HTML-Inhalt gearbeitet, also ist es jetzt an der Zeit, dass er schön aussieht! Wir werden hier Dinge zu unserer HTML-Seite hinzufügen und eine neue Datei starten: a CSS dokumentieren.
Schauen Sie sich die fertige Website an, die wir erstellen. Die Dateien für diese Lektion können Sie hier herunterladen. Vergessen Sie nicht, Fragen zu den Kommentaren am Ende dieser Seite zu stellen.
Bevor wir mit dem Codieren beginnen, sollten wir uns zunächst mit CSS vertraut machen. CSS steht für Cascading Style Sheets und es ist eine Sprache, mit der wir das Aussehen unserer HTML-Seite ändern können.
In der Abbildung oben zeigt der Browser links eine Website ohne CSS, nein Styling, während die Website auf der rechten Seite styling ist. Das Styling wurde in eine CSS-Datei geschrieben-viel besser!
CSS wird in einer separaten Datei mit unserem Texteditor geschrieben. Unser HTML-Dokument wurde mit einem gespeichert .html Erweiterung, aber unser CSS-Dokument wird mit einem .css Erweiterung.
Wir müssen ein brandneues Dokument in unserem Texteditor starten und dieses unter "tutstown.css" im "tutsfolder" speichern. neben "index.html" und dem Ordner "images".
Damit unser CSS-Dokument Stile auf unser HTML-Dokument anwenden kann, müssen wir sie miteinander verknüpfen. Dies geschieht durch eine Element im head-Element ganz oben in unserem HTML-Dokument.
Wir werden diesen Link direkt unter unserem Titel hinzufügen:
Tuts Town
Es gibt ein paar wichtige Attribute in dieses selbstschließende Element einschließen, das erste davon ist Art. Das Typattribut teilt dem Browser mit, was der Art von dem wir verlinken. In diesem Fall ist es eine text / css Datei.
Das zweite Attribut, das wir hier sehen, ist rel, was dem Browser sagt was Beziehung ist zwischen dem HTML-Code und dem verknüpften Dokument (unserem CSS). Das CSS-Dokument ist a Stylesheet für unser HTML, also das, was wir hier einschließen.
Schließlich haben wir die href woran du dich vielleicht von unseren erinnern könntest Elemente. Es zeigt woanders. In diesem Fall wird dem Browser mitgeteilt, wo er die CSS-Datei finden kann, mit der wir verlinkt haben.
Wenn alles richtig verlinkt ist, sieht die Seite anders aus, wenn Sie sie im Browser aktualisieren:
In unserer CSS-Datei können wir die von uns verwendeten HTML-Elemente auflisten und angeben, wie sie aussehen sollen. Es gibt viele Möglichkeiten, auf die gewünschten Elemente hinzuweisen und HTML-Klassen sind eine dieser Möglichkeiten.
HTML-Klassen sind Attribute, die wir Elementen hinzufügen können. Sobald ein Element einen Klassennamen hat, können wir diesen in unserem CSS verwenden.
Der gewählte Klassenname sollte ein oder mehrere Wörter sein, die den Inhalt dieses Elements beschreiben.
Hinzufügen einer Klasse zu unserem könnte ungefähr so aussehen:
Klassen sind nicht eindeutig, daher können verschiedene Elemente denselben Klassennamen haben. Dies macht das Hinzufügen der gleichen Stile zu vielen Elementen viel einfacher. Wir werden dies in Aktion sehen, wenn wir zu unseren Filialbildern kommen!
Die Art und Weise, wie Sie Code schreiben, wird als seine bezeichnet Syntax. Genau wie bei HTML muss CSS korrekt geschrieben werden, um funktionieren zu können.
Lass uns zu unserer CSS-Datei springen und, nur zum Üben, die Hintergrundfarbe vom Header zu Blau.
.Primärheader Hintergrundfarbe: Blau;
Es gibt viele Stücke, um richtig zu sein!Unser CSS versteht also, dass wir einen Klassennamen als Ziel haben, wir müssen ein paar Dinge tun:
Accentsconagua
. vor dem Namen.Hintergrundfarbe) folgt unmittelbar ein Doppelpunkt : Blau in diesem Fall). ; Es kann sehr leicht sein, diese zu vergessen!
Speichern Sie diese CSS-Datei und aktualisieren Sie den Browser. Wenn Sie dies noch nicht geöffnet haben, können Sie dies tun, indem Sie auf die Datei "index.html" im Ordner "tuts" doppelklicken. Wie nett ist das denn?!
Wichtig! Nun löschen wir dieses Styling, da unsere Site keinen blauen Header hat!
CSS erlaubt es uns auch, Kommentare in unsere Datei aufzunehmen, die der Browser ignoriert, aber sie sehen ein bisschen anders aus als unsere HTML-Kommentare.
Ein CSS-Kommentar ist in diesen Symbolen enthalten: / * * /
/ * Dies ist ein Kommentar in CSS * /
Das CSS-Dokument in den Übungsdateien enthält einige hilfreiche Kommentare zur weiteren Erläuterung.
Das erste Styling, das wir auf unserer Website vornehmen können, ist die Änderung der Hintergrundfarbe zu diesem schönen hellgelb. Es gibt einige Farbwerte, die in CSS geschrieben werden können, wie z Blau im obigen Beispielcode und der Browser versteht. Für andere, weniger gebräuchliche Farben müssen wir die Farben einschließen hexadezimal, oder verhexen, stattdessen Nummer.
Alle Farben haben eine passende Hex-Nummer. Browser verstehen nicht viele Farben, wenn sie ausgeschrieben sind, aber sie verstehen sehr gut Hexadezimalzahlen. Die Hex-Nummer für unsere hellgelbe Farbe lautet # FAF8DA, und wir wollen das auf das anwenden , die ganze Seite ausfüllen.
body Hintergrundfarbe: # FAF8DA;
Wichtig! Es ist kein Punkt vor erforderlich Karosserie hier, weil es kein Klassenname ist. Stattdessen haben wir sofort auf das Körperelement hingewiesen.
Wenn Sie sich für den Hex-Wert anderer Farben interessieren, kann diese Color-Hex-Stelle sehr nützlich sein.
Wir können auch die einstellen Schriftart (die Art der Buchstaben) für unsere Website Karosserie in unserem CSS.
Alles, was wir zu diesem Zeitpunkt wissen müssen, ist, dass wir es tun müssen Verknüpfung eine Schriftart von Google zu unserem HTML-Dokument. Sobald diese Verknüpfung besteht, wird der Browser dies verstehen und wir können sie verwenden.
Hier ist ein Blick auf den Link, den wir in der hinzufügen müssen unseres HTML-Codes (derselbe Ort, an dem wir unser CSS-Dokument verlinkt haben!)
Dann können wir das speichern und zu unserem CSS-Dokument wechseln:
body font-family: 'Open Sans';
Dadurch wird die Schriftart für den gesamten Text auf der Seite als festgelegt Offene Sans.
In der Kopfzeile ändern wir die Textfarbe und -größe sowie die Bildgröße der Stadt.
Zuerst müssen wir den Elementen im Header die richtigen HTML-Klassen hinzufügen, damit wir sie in unserem CSS verwenden können.
Innerhalb der Eröffnung tag Lassen Sie uns eine Klasse hinzufügen Hauptüberschrift und innerhalb der Stadtvorschau:
Willkommen bei Tuts + Town
In unserem CSS-Dokument können wir nun auf diese Elemente durch die Klassennamen verweisen, die wir festlegen und mit dem Styling beginnen.
Wir setzen hier eine ziemlich große Schriftgröße von 70px. px oder Pixel, ist wie ein Punkt auf dem Bildschirm. Dieser Punkt ist mit Farbe gefüllt und wird als Maßeinheit verwendet. Das Image unserer Stadt ist auch ziemlich groß, also setzen wir das an 650px breit.
Das Farbe Diese Eigenschaft legt die Farbe des Textes fest, der hier (# 205D76) Ist dunkelblau.
.Hauptüberschrift Schriftgröße: 70px; Farbe: # 205D76; .town-preview width: 650px;
Denken Sie daran, dass wir in main kleinere Abschnitte haben, die ein Bild und einen Text enthalten. Wir müssen für diese Bilder eine Größe festlegen und die Überschriften und Listen mit CSS formatieren.
Als erstes müssen wir die Größe der Gebäudebilder einstellen. Um die Bildgröße zusammen festzulegen, können wir denselben Klassennamen für mehrere Elemente verwenden.
Wir möchten den gleichen Klassennamen hinzufügen, Gebäude, Um alle drei Bilder in unserem HTML-Code zu speichern, ändern Sie sie in unserem CSS auf einmal.
.Gebäude Breite: 200px;
Unsere drei kleineren Überschriften können auch den gleichen Klassennamen haben Farbe und Schriftgröße des Textes.
.Kategorieüberschrift Farbe: # 205D76; Schriftgröße: 30px;
Nach der Überschrift in jedem Bereich haben wir unsere ungeordneten Shop-Listen - erinnern Sie sich daran? Neben der Änderung der Größe und Farbe der Links müssen wir auch die Farbe der Liste ändern Bullet Punkte.
Fügen wir eine Klasse hinzu Store-Liste zum Store-Link zum in unserem HTML-Dokument und speichern Sie es.
.Speicherliste color: # FFC122; / * Ändert die Aufzählungspunktfarbe der Liste * / .store-link color: # EA6E2F; Schriftgröße: 20px;
Wenn Sie unsere Website im Browser betrachten, stellen Sie möglicherweise fest, dass zwischen den Listenelementen keine großen Abstände bestehen, sodass sie etwas überfüllt wirken. Später in der Serie werden wir uns im Layout-Tutorial mit dem Thema Abstand beschäftigen.
Nachdem wir eine Klasse hinzugefügt haben Hauptfußzeile zu und erstellt von zum Element innerhalb dieser Fußzeile können wir das deklarieren Hintergrundfarbe sowie den Text Farbe und Schriftgröße:
.Hauptfußzeile Hintergrundfarbe: # FFC122; .created-by color: #FFFFFF; Schriftgröße: 20px;
In dieser Lektion haben wir alles darüber gelernt, wie Sie ein HTML- und ein CSS-Dokument miteinander verknüpfen und dann unseren Elementen schöne Stile hinzufügen Klassen. An diesem Punkt stimmt das, was wir in unserem Browser sehen, immer noch nicht mit der vollständig gestalteten Website-Vorschau überein, auf die wir uns bezogen haben, aber schauen Sie sich an, was ein Unterschied zwischen Farbe und Größe sein kann! Es wird nur besser werden.
Als Nächstes werden wir unsere Inhalte mithilfe von extra cleverem CSS auf dem Bildschirm anordnen Layout Techniken.
Wir sehen uns in der Stadt!
