Layout

Cascading Style Sheets

 

Inhalt

Stylesheet anlegen
Die Sprache CSS
HTML Tag Bezeichnungen in CSS
CSS Befehle
» Schrift
» Hintergrund
» Rahmen
» Scrollbalken
» Mauszeiger
» Spielereien

 

Stylesheet anlegen

Es gibt zwei Möglichkeiten, Stylesheets in deine Webseite einzubinden. Die einfachste Methode ist, sie in den Header der Seite einzufügen.

<html>
<head>
<title>Meine Seite</title>

<style type="text/css">

// Dein Stylesheet

</style>

</head>
<body>

</body>
</html>

Deine Formatierung, wie du sie hier findest, schreibst du innerhalb des style-Tags.

Die zweite Möglichkeit ist, eine Stylesheet Datei anzulegen. Gehe auf Start - Programme - Zubehör und öffne den Editor.
Speicher die Datei unter "Speichern unter..." und gib einen Namen, z.B. style ein, und hänge die Endung .css an, also style.css
Unter dem Eingabefeld steht Textdateien (*txt), da wählst du nun aus der Liste "Alle Dateien" aus und klickst auf speichern. Diese Datei kannst du jetzt mit einer Zeile in denen HTML Code einbinden:

<html>
<head>
<title>Meine Seite</title>

<link rel="stylesheet" href="pfad/style.css" type="text/css">

</head>
<body>

</body>
</html>

Diese Datei ist noch leer, sehen wir einmal, wie wir sie füllen können.

 

Die Sprache CSS

Die Webgestaltungssprache Cascading Style Sheets (CSS) ist eigentlich sehr einfach, wenn man HTML kennt, wenn nicht, kann man sie aber dennoch verstehen. Der Grundaufbau ist

Tag { Befehl }

wobei mit Tag das HTML Tag gemeint ist, das bestimmt, was im Brower angezeigt werden soll, zum Beispiel p für einen Absatz, img für ein Bild oder table für eine Tabelle, was im HTML Code jeweils innerhalb der Klammern < und > steht.
In den geschweiften Klammern in der Stylesheetdatei kommt der Befehl, der nur dieses HTML Tag formatiert. Wenn man mehrere Befehle einfügen möchte, werden diese durch ein Semikolon ( ; )getrennt.

Wie die meisten Websprachen ignoriert CSS Leerzeichen im Text, du solltest aber einige wegen der Übersichtlichkeit setzten und die Befehle für die einzelnen Tagformatierungen einrücken und untereinander schreiben:

<style type="text/css">

Erstes Tag {

      Befehl 1;
      Befehl 2;
      Befehl 3

}

Zweites Tag {

      Befehl 1;
      Befehl 2

}

...

</style>

 

HTML Tag Bezeichnungen in CSS

Ich gebe dir einmal ein kleine Liste, wie du durch welche Tag Bezeichnungen verschiedene HTML Tags auf einer Seite formatieren kannst.

Tag
Bescheibung
   
body Formatiert die gesamte Seite
a Formatiert Links
a:visitited Formatiert besuchte Links
a:hover Formatiert Mouseover der Links
a:active Formatiert aktive Links
table Formatiert Tabellen
td Formatiert Tabellenzellen
input Formatiert Eingabefelder und Abschick Button
textarea Formatiert große Texteingabe Felder
img Formatiert Bilder
hr Formatiert Trennlinien
font Formatier in font eingebetteten Text
p Formatiert in p eingebettete Absätze

Dies sind nur Beispiele, du kannst alle anderen HTML Tags ebenfalls formatieren.

 

CSS Befehle / Anweisungen

Folgendes kannst du nun innerhalb deiner Stylesheet Datei oder innerhalb deiner Grundstruktur schreiben, mit den Tagbezeichnungen vorneweg, die du fomatieren willst.
Der Aufbau ist oben beschrieben, willst du zum Beispiel den Link beim Mouseover ändern, ist die Grundstruktur a:hover { }, willst du den Hintergrund oder Schrift der ganzen Seite verändern, nimmst du body { }. Die CSS Befehle brauchst du nun nur noch in die geschweiten Klammern schreiben. Vergiss das Semilkolon nicht, wenn es mehrere sind.

Allgemein

  • Du kannst fast alle Befehle mit none verneinen und dadurch die Formatierung unterdrücken.

  • Viele CSS Befehle, wie bunte Scrollbalken oder eigene Mausanzeiger, können nur vom Internet Explorer übersetzt werden.

  • Du kannst auch alle Stylesheetbefehle direkt im HTML Code anwenden, dazu fügst du die einzelnen Befehle direkt innerhalb style="" in die HTML Tags ein, zum Beispiel <a href="seite.htm" style="text-decoration: none; color: #FF0000"> oder <table width="300" style="border-style:none">

 

Schrift

 

Schriftfarbe color: #000000
Schriftgröße font-size: 10
Schriftart font-family: Tahoma, Arial
Fettdruck font-weight: bold
Kursivdruck font-weight: italic
Links nicht unterstreichen text-decoration: none
   
Verschwommene Schrift
filter: blur(add=15, direction=90, strength=20) width: 100%; height: 10;
Glühende Schrift
filter:Glow(color=#000000, strength=6); height=10

Denk daran, dass Links auch Schrift sind, wenn du also z.B.

body {color: #000000; font-weight: italic}

schreibst, dann wird die Schrift schwarz und kursiv, wenn du

a {color: #000000; font-weight: italic}

schreibst, dann werden die Links schwarz und kursiv.

 

Hintergrund

 

Hintergrund Farbe background-color: #000000
Hintergrund Bild background-image: url(http://url.de/bg.jpg)
   
Fixieren background-attachment: fixed
Fixieren aufheben background-attachment: scroll
   
Hintergrundbild nicht wiederholen background-repeat: no-repeat
-> Das ist hilfreich, wenn du ein kleines Bild nur einmal anzeigen möchtest. Der Rest des Hintergrundes wird dann mit der Hintergrund Farbe gefüllt.
   
Hintergrund ausrichten
Links background-position: left
Rechts background-position: right
Oben background-position: top
Unten background-position: bottom
Mitte background-position: center

 

Rahmen

 

Rahmen Farbe border-color: #000000
-> Wenn du willst, kannst du vier Farben nennen, dann wird der Rahmen ganz bunt, z.B. border-color: #000000 #FFFFFF #000000 #FFFF00
   
Dünner Rahmen border-width: thin
Mittlerer Rahmen border-width: medium
Dicker Rahmen border-width: thick
   
Gepunktet border-style: dotted
Gestrichtelt border-style: dashed
Doppelt border-style: double

Die border-style Befehle gelten für Tabellen Rahmen, deshalb musst du sie in table { } oder td {} einbetten. Die Rahmen Farbe kannst du allerdings z. B. auch bei input { } oder textarea { } anwenden, oder du fügst es in body { } ein, so erhälst du einen Rahmen und die kompette Seite.

Was du noch machen kannst, ist jede Rahmenseite einzeln formatieren, dazu fügst du folgende Bezeichnungen mit einem weiteren - zwischen die Befehle

Rahmenseiten Bezeichnungen
   
Links left
Recht right
Oben top
Unten bottom

Beispiel: border-left-style: dashed oder border-top-width: thick

 

Scrollbalken

So kannst du deinen Scrollbalken für den IE komplett einfärben:

scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000
Obenauf
Links oberer Schatten
Links unterer Schatten
Rechts oberer Schatten
Rechts unterer Schatten
Scrolleiste unten
Pfeile

Tranparente (= durchsichte) Scrollbalken bekommst du leider nicht so ohne weiteres hin. Wenn du transparente Scrollbalken auf der ganzen Seite haben möchtest, musst du einen iframe formatieren. Du kannst auch die Scrollbalken in Tabellen transparent machen, allerdings reicht die Transparenz durch die Tabelle durch und der Hintergrund der Seite schimmert durch und nicht der Hintergrund der Tabelle.

Der CSS Befehl

FILTER: chroma(color=#00FF00)

sorgt dafür, dass alles, was auf der Seite neongrün (#00FF00) ist, transparent wird. Wenn du etwas anderes in dieser Farbe auf deiner Seite hast, solltest du deshalb einen anderen Hexawert wählen.

 

Mauszeiger

Wenn du möchtest, kannst du den Cursor auf deiner Seite ändern. Dafür gibt es extra Befehle für die Standart Windows Cursor, oder du verwendest eine eigene Graphik.

Halte die Maus über die Angaben

Hand cursor: hand
Fadenkreuz cursor: crosshair
Text cursor: text
Warten cursor: wait
Standart cursor: default
Hilfe cursor: help
Doppelpfeil horinzontal cursor: e-resize
Doppelpfeil diagonal cursor: ne-resize
Doppelpfeil senkrecht cursor: s-resize

Wenn du einen eigenen Mauszeiger haben möchtest, musst du ihn im *.cur oder *.ani Format speichern.

cursor: url('http://www.url.de/cursor.ani')

 

Spielereien

 

Inhalt senkrecht spieglen |
filter: FlipH

Inhalt horizental spiegeln __
filter: FlipV

Inhalt grau anzeigen
filter: Gray

Farben umkehren
filter: Invert

 

Abstand zwischen den Wörtern
word-spacing: 10em

Zeichenabstand zwischen den Wörten
letter-spacing: 10px

Abstand des Textes vom linken Rand
text-indent: 15px

Layout