Commputer

Zurück zum Aktivitätsfeld Service

Zurück zum Abschnitt Webdesign-Tutorials

Weiter zur PHP-Befehlsübersicht

Einsteigerkenntnisse und Grundvokabular für CSS

  1. Was ist CSS ?

    CSS (cascaded style sheet) sorgt dafür, das Webites "schön" aussehen und einige zusätzliche Funktionen erhalten.

  2. "class" und "div"

    In der HTML-Datei benennt man Objekte entweder als "div" (normalerweise ein Objekt, z.B. Text, Überschrift) oder als "class" (z.B. mehrere Objekte oder Bilder)
    ! Um eine "class" anzusprechen braucht man folgenden Befehl: .name_der_class (Punkt vorne)
    ! Um ein "div" anzusprechen braucht man folgenden Befehl: #name_der_class (Raute vorne)
    Die folgenden Befehle müssen von diesen Klammern { } eingeklammert sein, jede Befehlszeile (eine Zeile pro Befehl) endet mit einem ; (Semicolon)
    Man kann außerdem nur Links oder nur die Tabellenspalten etc. einer Klasse oder eines div ansprechen:
    #name_div a {...} spricht nur die Verlinkungen an
    #name_div a:hover {...} spricht nur die Verlinkungen beim mous-over an
    #name_div li {...} spricht nur die Listenpunkte an
    #name_div th {...} spricht nur die oberste Tabellenzeile an

  3. Verschiedene Farben in CSS

    Farben kann mann in der CSS folgendermaßen angeben: zum einen gibt es festgelegte Farben wie gelb, blau, etc., diese werden mit yellow/blue/.... erzeugt. Außerdem kann man noch fast jede beliebige Farbe in Form eines Zahlencodes angeben, dieser ist zum Beispiel #000000 für schwarz und #FFFFFF für weiß. Er ist immer sechsstellig und beginnt mit #, er besteht aus Zahlen und Buchstaben, bei diesen ist die Klein-bzw.Großschreubung vernachlässigbar.
    Wie man diesen Code oder auch die Standardfarben einsetzt, wird bei den folgenden Punkten gezeigt.

  4. Texte und Links verschönern

    text-decoration: underline; unterstreicht einen Text
    text-decoration: none; entfernt Textdekorationselemente, wie z.B. das automatische unterstreichen bei Links
    font-weight: bold; schreibt den Text fett
    font-style: italic; schreibt den Text kursiv
    font-family: Verdana; wird "Verdana" als Schriftart festgelegt
    font-size: 13,5px; stellt die Schriftgröße auf 13,5 pixel ein
    text-align:center; Zentriert den Text
    color: #FFFFFF; stellt die Schriftfarbe auf weiß

  5. Hintergründe und Bilder:

    background-color:#000000; stellt die Hintergrundfarbe auf schwarz
    width:100px; stellt die Breite des Objektes (dies kann auch die gesamte Website sein) auf 100px
    height:100px; stellt die Höhe des Objektes auf 100px

  6. Rahmen

    border 4px solid/inset/outset/dotted/.... blue/green/yellow/#FFFFFF/....; Erzeugt einen Rahmen in verschiedenen Dicken in Pixel, Typen (3D, durchgezogen, gestrichelt,...) und verschiedenen Farben

  7. Platzierung von Objekten und Festlegen von Bereichen: margin und padding und float
  8. Sonstiges

    /* Kommentar */ sorgt dafür dass der Bereich zwischen /* und */ ignoriert wird --> Kommentar