tutorials.de-Buchverschenkaktion 08/2010
Thema geschlossen
  1. 09.03.07 17:32 #1
    GFX-Händchen GFX-Händchen ist offline Mitglied Platin GFX-Händchen befindet sich auf einem aufstrebenden Ast
    Registriert seit
    Jan 2004
    Beiträge
    550
    Voraussetzung:
    HTML-Grundkenntnisse

    Kurze Einleitung:
    Ich erlerne z.Zt. selber noch HTML und CSS, möchte aber meine bisher erlernten Grundkenntnisse gerne weitergeben.
    In diesem Tutorial (übrigens mein erstes für Tutorials.de und über CSS) habe ich mich erstmal einem leichten Thema gewidmet und zwar dem Zuweisen von Farbe zum Text.
    Auch habe ich gleich zwei versch. Wege aufgeführt wie dies möglich sein kann.

    Für welchen Weg ihr euch im Endeffekt entscheiden werdet bleibt euch überlassen.

    CSS ist dafür da, dass der HTML-Code nicht zu groß und unübersichtlich wird.

    Um das Tutorial nachzumachen reicht die Testversion Adobe GoLive aber auch jeder kostenlose (Freeware) CSS-Editor oder auch der normale Editor der eurem OS beiliegt.

    Beginnen wir also.

    Die CSS-Anfangs-Anweisung wird immer in den Head-Bereich des HTML-Dokuments eingetragen.
    Auf meinen Screenshots ist der obige Head-Bereich nicht zu sehen, weil man diesen für das Tutorial vernachlässigen kann.
    Den Quellcode habe ich jeweils mit Kommentaren (grau) versehen.

    Wie ihr sehen könnt beginnt der CSS-Anfang mit <style type=“text/css“> und endet mit </style>.
    Einen Kommentar, welchen der Browser nicht ausgibt aber dennoch interpretiert, leitet man mit <!-- ein und endet mit -->.
    Darin kommt der eigentliche CSS-Code und somit die ganze Formatierung des Textes bzw. der Seite.
    [x]Text Farbe zuweisen mittels CSS-css_1.jpg
    Schauen wir uns den HTML-Code im <body>-Tag etwas genauer an.
    Ihr seht, dass der Text einmal eine Zeile in h1-Formatierung, zwei in h2-Formatierung und eine Zeile mit einer Zitat-Formatierung (<em....</em>)enthält.
    Ohne dem gesamten CSS-wäre der Text nur schwarz und besäße keine Farbe, da im HTML-Code kein <font>-Tag verwendet wurde.
    Der einzelnen Formatierung wurde oben im CSS-Bereichs (welcher wie wir uns erinnern im Head-Bereich liegt) Farbe zugewiesen.
    Da in meinem HTML-Code zwei h2-Zeilen vorkommen, würden beiden Zeilen die Farbe blau bekommen. Zur besseren Übersicht wurde die Hintergrundfarbe entfernt:
    [x]Text Farbe zuweisen mittels CSS-vorschau_1.jpg
    Damit nun die eine h2-Zeile dennoch eine andere Farbe bekommen kann habe ich als Ausnahmeregel der einen Zeile mittels
    Code :
    1

    style=“color:....;“
    eine Farbe zugewiesen.
    [x]Text Farbe zuweisen mittels CSS-vorschau_3.jpg
    Eine andere Möglichkeit wäre gewesen der h2-Zeile die eine andere Farbe bekommen soll eine id zuzuweisen und oben der id dann eine Farbe zu geben:
    [x]Text Farbe zuweisen mittels CSS-css_2.jpg
    Wenn man eine Hintergrundfarbe definieren möchte, dann muss im CSS-Bereich folgender Code vorhanden sein:
    Code :
    1

    body    {background-color: eure_Farbe;}
    Die Farbe kann sowohl Hexadezimal (#000000) als auch ausgeschrieben angegeben werden wobei Hexadezimal immer besser ist, da nicht jede Farbe (englisch übersetzt) vorhanden ist.
    Mit gelber Hintergrundfarbe sieht das ganze so aus:
    [x]Text Farbe zuweisen mittels CSS-vorschau_2.jpg
    Um nochmal auf den CSS-Bereich zuzukommen:
    Es muss immer definiert werden welcher Bereich im HTML-Code was bekommen soll z.B. der <body>-Tag (blau).
    Diesem wird ein Ereignis (grün) und ein Wert (rot) zugewiesen.
    Zusätzlich muss nach dem Wert immer ein Semikolon
    Code :
    1

    ;
    gesetzt werden.
    Das Ereignis und der Wert stehen immer in geschweiften Klammern
    Code :
    1

    {
    und
    Code :
    1

    }
    wobei es egal ist, ob ein Leerzeichen die geschweifte Klammer oder das Ereignis vom Wert trennt (siehe dazu den Code in den obigen Bildern).

    Es ist natürlich auch möglich den gesamten CSS-Code auszulagern in einer .css-Datei.
    Dies wollte ich euch aber erstmal bei diesem kleinen „Projekt“ nicht zumuten.
    Auch ist es natürlich möglich anstatt einer Hintergrundfarbe eine Hintergrundgrafik einzufügen – dazu evtl. in einem meiner nächsten Tutorials mehr.

    So, damit wäre ich am Ende meines ersten CSS-Tutorials angelangt und hoffe, dass es euch gefallen hat.

    Ich bitte euch mein Tutorial zu bewerten damit ich für die Zukunft weiß, ob es sich rentiert, dass ich mich hinsetze und meine Freizeit in ein (weiteres) Tutorial stecke.

    Wer sich intensiv mit dem Thema beschäftigen möchte, der kann sich auch von Video2Brain.de Video-Tutorials auf DVD kaufen.
    Geändert von GFX-Händchen (10.03.07 um 08:43 Uhr)
« [x]Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken | - »

Ähnliche Themen

  1. Color RGB-Farbe zuweisen
    Von Morpheyz im Forum Java
    Antworten: 5
    Letzter Beitrag: 28.02.10, 18:37
  2. Buchstabe andere Farbe zuweisen
    Von Sascha Schirra im Forum Javascript & Ajax
    Antworten: 10
    Letzter Beitrag: 19.02.09, 14:17
  3. Bestimmte Farbe im Bild Transparenz zuweisen
    Von Html im Forum Photoshop
    Antworten: 4
    Letzter Beitrag: 03.01.07, 14:29
  4. Farbe zuweisen an Bibilotheksobjekt
    Von harrry im Forum Flash Plattform
    Antworten: 5
    Letzter Beitrag: 07.03.05, 15:28

Lesezeichen

Lesezeichen