Webdesign-Hilfe und Promotion-Tipps

» Kontakt / Impressum » Gästebuch


» Startseite

	Webdesign

» Info
» Grundsätzliches
» Bitte vermeiden!
» Webdesign-FAQ
» Ladezeiten optimieren
» Seiten-Layout
» Farb-Palette
» Frames
» Framesets
» Webseite hochladen
» CSS / Stylesheets
» CSS - Übersicht
» Literatur

	Promotion

» Info
» Webseite promoten
» Suchmaschinen / SEO
» Linklisten
» Bannerformate

	Links

» Info
» Homepage-Tools
» Tutorials
» HTML & Co
» Meine weiteren Seiten
» Persönliche Favoriten
» Link zu mir?

	Privat

» Über mich
» Fotografie
» Terragen-Bilder
» Photoimpact-Grafiken
» Homepage-History

CSS / Stylesheets

Mit so genannten Stylesheets lassen sich Webseiten einfach gestalten. Hier soll jedoch keine alles umfassende CSS-Dokumentation entstehen. Ich gabe nur einige Tipps, wie man z. B. Tabellenrahmen gestaltet, Text- und Linkfarben ändert, Hintergrundgrafiken einfügt und einiges mehr.

Übersicht:

» Grundlagen
» Tabellen
» Linkgestaltung
» Absätze / Text formatieren

Grundlagen

Man kann seine Webseite auf dreierlei Art mit CSS gestalten.

1. Externe .css-Datei

Dazu wird eine Datei mit den Style-Definitionen in das Hauptverzeichnis mit der Endung .css gespeichert (zum Beispiel stylesheet.css).
So könnte die .css-Seite inhaltlich aussehen
Im Headbereich der HTML-Seite wird die .css-Datei verlinkt:

2. Mit einem CSS-Bereich am Anfang der Seite (im Body)

Beispiel:

<body text="#000000 ... ">

<style type="text/css"> </style>

Webseiteninhalt

</body>

3. Direkt am Objekt (Absatz, Tabelle usw.)

Beispiel für eine Tabelle:

<table style="width:300px;border:1px dashed #000000;background:#C6E1F9;">
<tr>
<td style="padding:10px;">Tabelleninhalt</td>
</tr>
</table>

nach oben

Tabellen

Tabellen lassen sich auf vielerlei Weise gestalten. Zum Beispiel mit Hilfe eines Rahmens, einer Hintergrundfarbe und mit Abständen zwischen Tabellenrahmen und Inhalt.

Beispiel für eine einfache Tabelle mit Rahmen:

Dies ist eine einfache Tabelle mit einem einfachen Rahmen und einer blauen Hintergrundfarbe. Der Inhalt hat einen gewissen Abstand zum Tabellenrahmen.

So sieht der HTML-Text incl. CSS aus:

<table style="width:300px;border:1px solid #000000;background:#C6E1F9;">
<tr>
<td style="padding:10px;">Dies ist eine einfache Tabelle mit einem einfachen Rahmen und einer blauen Hintergrundfarbe. Der Inhalt hat einen gewissen Abstand zum Tabellenrahmen.</td>
</tr>
</table>

Mehrere Style-Definitionen in einem Objekt werden durch Semikolon (;) voneinander getrennt.

border:1px solid #000000;
bedeutet: Rahmen: 1 Pixel Breite, gerade Linie, Rahmenfarbe #000000 (schwarz)

background:#C6E1F9;
Hintergrundfarbe der Tabelle

padding:10px;
Abstand vom Tabellenrahmen zum Inhalt (oder besser: Abstand zwischen Tabellen-Zelle <td> zum Tabellenrahmen)

Einige weitere Gestaltungsmöglichkeiten:

Hintergrundbild: background-image:url(grafik/bildname.gif);
Rahmen gestrichelt: border:1px dashed #000000;
Nur linke Tabellenseite mit Linie: border-left:1px solid #000000;

nach oben

Linkgestaltung

Manchmal kommt es vor, dass man einen einzelnen Link anders gestalten möchte als alle anderen, etwa weil dieser Link auf einer anderen Hintergrundfarbe platziert wird und dadurch schwer erkennbar ist.

So wird's gemacht:

Link unterstrichen:

Link nicht unterstrichen:

nach oben

Absätze / Text formatieren

Hier mal ein Beispiel für diverse Formatierungen:

Dieser Absatz hat einen größeren Abstand zwischen den Zeilen. Die Buchstaben stehen weit auseinander und der Text wurde im Blocksatz formatiert. Die Schriftgröße wurde kleiner gewählt. Schriftfarbe grün.

Folgende Formatierungen wurden dazu vorgenommen:

<p style="color:#009F00; font-size:10px; line-height:30px; letter-spacing:3; text-align:justify;">Inhalt des Absatzes</p>

nach oben