CSS Einstieg
In diesem Tutorial will ich dir einen Einblick in die Welt der Cascading Style Sheets geben. Kurz CSS wird dazu benutzt, um einem Layout oder einer Website sozusagen "den letzten Schliff" zu verpassen.Sie sind gedacht, um dem ganzen "Style" zu geben.
Was wiederum heisst, die Links und das Aussehen der Website (ausegnommen das Layout) zu gestalten.
Allererstens - wie erstellt man eine CSS Datei, und wie binde ich sie ein?
Am einfachsten ist, den Standard Editor von Windows zu benutzen. EInige Voreile ergeben sich daraus: Man muss sich nicht die Mühe geben, extra einen Editor herunterzuladen, dennd as duerfen auch viele nicht.Weiteres verunreinigen andere Editoren den Code nur - besonders das super tolle neue Feature von Microsoft Word. Editor ist zu finden in: Start » Alle Programme » Zubehoer » Editor
Oeffnet ihn, erstellt eine Normale Date. zB eure CSS Datei (den Aufbau erklaere ich weiter unten...)
Wenn ihr die Datei nun also Extern in eine HTML od. PHP Datei einbinden wollt, muusst ihr als .css speichern.
Praktisch ist das deshalb, weil dann jede Textseite anfangs zum selben Stylesheet verlinkt wird, und man nicht extra jeden CSS in ejder Datei umaendern muss.
Geht auf Speichern » Dann oeffnet sich ein Kaestchen » unter dem Dateinamenfeld waehle "Alle Datein" aus » dann gib einfach style.css in das Detinamenfeld ein, und speichere sie ab.
Einbinden Nun hast du die CSS Datei abgespeichert, und nun kannst du sie in deinen Layoutcode oder in deine Textseite einbinden.
Das geht so: Lade die Datei bei deinem FTP hoster hoch. Such die die URL und dann fuege es so am Anfang
(in den Head Bereich) jeder Textseite ein:
Nun hat die ganze textseite den Style, den du in "style.css" eingegeben kannst. Und du kannst den Style beliebig aendern.
Aufbau einer CSS Datei
Eine jede CSS Datei beginnt damit:Dies ist eigentlich nur eine Kennzeichnung, und wahrscheinlich nicht umbedingt noetig. Wichtig ist allerdings, dass das gnaze im head Bereich einer Datei steht (zB im Layout ... in einer normalen textdatei ist es egal, ob head steht, hauptsache oben...)
Ein jeder CSS Abschnitt ist aus dem CSS-Abschnitt-Namen und einer geschwungenen Klammer auf { gekennzeichnet.
Dabei spielt Gross & Kleinschriebung, sowie lehrabstaende keinerlei Rolle.
Danach folgen die jeweiligen CSS Eigenschaften, die jedoch zu aufwaendig sind, und ueberhaupt zu viele, um sie auszuzaehlen.
Ich werde in den nechsten Turorial zu den Einzelnen Abschnitten Eigenschaften aufzaehlen.
Die Eigenschaften sind jeweils mit einem Strichpunkt getrennt ";".
Um alles Uebersichtlicher zu gestalten empfehlen sich Abstaetze. Aber je nachdem, was fuer euch am besten anzusehen ist.