|
Grundlagen / Basiswissen
Formatierungen
Einheiten neu
allgemeine Seiteneinstellungen
Tabellen
Text & Schrifteigenschaften neu
Hintergrund / Hintergrundbilder neu
Grundlagen / Basiswissen
Die einzelnen CSS-Formatierungen kann auf verschiedene Weise
in die Homepage einbinden. Ersten als direkte Angaben im HEAD-Bereich
des jeweiligen Dokuments.
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
/* ... Hier werden die Formate definiert ... */
-->
</style>
</head>
<body>
</body>
</html>
Oder als Link auf die externe Datei mit den Formatierungen.
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet"
type="text/css" href="formate.css">
<style type="text/css">
<!--
... hier sind datei-spezifische Formate erlaubt ...
-->
</style>
</head>
<body>
</body>
</html>
::
Beispiel einer externen css-Datei ::
Unabhängig von zentral erstellten Formatierungen für
die Elemnte einer Seite kann man noch ganz spezifisch einzelne
Objekte innerhalb des BODY-Bereiches anders formatieren. Dazu
dient der style-tag der dem jeweiligen Objekt zugeordnet wird.
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css"
href="formate.css">
<style type="text/css">
<!--
... hier sind datei-spezifische Formate erlaubt ...
-->
</style>
</head>
<body>
<h1 style="[element-spezifische
Formate]">...</h1>
</body>
</html>
Die Formatierungen werden dann immer für jedes Element
erstellt, sprich Hintergrund, Farbe, Größe, Schriftart
usw. Wie das aussieht, im nächsten Kapitel.
nach oben
Formatierungen
Die Formatierungen sind in der Regel alle gleich egal ob
direkt im Dokument oder in der externen Datei.
Diese externe Datei lässt sich ganz einfach per Texteditor
von Windows o.ä. erstellen, wichtig nur sie muss als
.css abgespeichert werden ( format.css )
Innerhalb der Datei werden dann die TAG-Definitionen erstellt.
Am Anfang das Element oder der TAG dahinter in geschwungener
Klammer die Formatierung. Wobei mehrere Definitionen gleichzeitig
angegeben werden können, die durch ein Semikolon getrennt
sind. Erst die Eigenschaft angeben und dann hinter dem Doppelpunkt
den jeweiligen Wert.
Beispiel: body { background-color:#A9D8BD; font-family:verdana;
color:#000000 font-size:8pt }
Man aber auch für andere Elemente innerhalb des
Dokument weitere Formate angeben, z.B.
table { background-color:#62B684; font-family:arial;
color:#FFFFFF font-size:10pt }
Heißt trotz der allgemeinen body-Formatierung
kann die Tabelle ganz anders formatiert werden und das innerhalb
der gleichen Seite.
::
Beispiel anzeigen ::
nach oben
Einheiten
Zu numerischen Angaben bei CSS-Eigenschaften stehen absolute
und relative Maßeinheiten zur Verfügung. Absolute
Angaben sind feste Werte, während sich relative Angaben
immer auf einen Normalwert beziehen.
Zu beachten ist, dass bei Bruchzahlen nicht das deutsche
Komma, sondern ein Punkt verwendet wird
(nicht 1,5cm sondern 1.5cm).
Folgende Einheiten können Sie für numerische Angaben
verwenden:
| Einheit |
Typ |
Beschreibung
|
| pt |
absolut |
Typographische Maßeinheit
Punkt (1pt = 1/72in) |
| pc |
absolut |
Typographische Maßeinheit
Pica (1pc = 12pt) |
| in |
absolut |
Längenmaß Inch (1in
= 2.54cm) |
| cm |
absolut |
Längenmaß Zentimeter
|
| mm |
absolut |
Längenmaß Millimeter |
| px |
absolut/realtiv |
Pixel (1 Punkt auf dem Bildschirm)
Relativ zur Pixeldichte des Ausgabegeräts, absolut
bei gleichen Ausgabegeräten |
| em |
relativ |
Wert ist bezogen auf die Schriftgröße
des Elements |
| ex |
rlatiy |
Wert ist bezogen auf die Höhe
des Kleinbuchstaben x der Schriftart. Dieser ist in der
Regel halb so groß wie die Schriftgröße
|
nach oben
allgemeine Einstellungen
Als erstes formatieren wir das Grundlayout der Seite mittles
des BODY-TAGS. Diese Formatierung kommt eigentlich in den
meisten .css-Dateien bzw. Definitionen vor.
body { background-color:#A9D8BD; font-family:verdana;
color:#000000 font-size:8pt }
:: Beispiel anzeigen ::
Somit wird erreicht dass jede Seite die mit diesem CSS verbunden
immer ein und dieselbe Hintergrundfarbe, dieselbe Schrift
in gleicher Größe hat.
Erweiterbar ist das auch noch, z.B. mit einem Hintergrundbild.
body { background-color:#A9D8BD; background-image:url(../../images/bg.jpeg);
font-family:verdana; color:#000000 font-size:8pt }
:: Beispiel anzeigen ::
Im der BODY-Definition kommt also alles das hinein was das
Grundaussehen der Seite beinflußt dazu gehören
auch sie farbigen Scrollbalken.
body { background-color:#A9D8BD; font-family:verdana;
color:#000000 font-size:8pt
SCROLLBAR-FACE-COLOR: #A9D8BD; SCROLLBAR-HIGHLIGHT-COLOR:
#62B684;
SCROLLBAR-SHADOW-COLOR: #62B684; SCROLLBAR-3DLIGHT-COLOR:
#A9D8BD;
SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #A9D8BD;
SCROLLBAR-DARKSHADOW-COLOR: #A9D8BD;}
:: Beispiel anzeigen ::
nach oben
Tabellen
Gerade für Tabellen eignet CSS hervorragend. Mit HTML
kann man zwar Hintergrundfarbe oder Bild definieren sowie
die Rahmenfarbe oder auch Text innerhalb der Zellen. Mit CSS
jedoch sind noch viele weitere Sachen möglich. Bei Tabellen
gibt es drei grundlegende TAGS <table>, <td> und
<tr>. Für alle drei TAGS kann man unterschiedliche
Formatierungen erstellen. Die Definitionen sind aber ommer
die selben, man braucht nur angeben für welches Element
die Formatierung passen soll. Wie schon in dem ersten Beispiel
oben fangen wir an mit :
table { background-color:#62B684; font-family:arial;
color:#FFFFFF font-size:8pt }
:: Beispiel anzeigen ::
Tabelle mit Hintergrundbild:
table { background-image:url(../../images/bg.jpeg);
font-family:arial; color:#FFFFFF font-size:8pt }
:: Beispiel anzeigen ::
Dünne Tabellerahmen sehen immer sehr gut aus,
sie können aber anders gestaltet werden. Von ganz dünn
bis dick, von gerade durchgezogen bis gestrichelt.
Hier einige Beispiele:
table { background-color:#62B684; font-family:Verdana;
font-size:8pt; font-style:normal;
border-style:solid; border-width:1px; border-color:#000000;
}
:: Beispiel anzeigen ::
table { background-color:#62B684; font-family:Verdana; font-size:8pt;
font-style:normal;
border-style:dashed; border-width:1px; border-color:#000000;
}
:: Beispiel anzeigen ::
|
Format
|
Wert
|
Beschreibung
|
|
border-style:
|
solid
|
durchgezogen
|
| |
none |
kein |
| |
hidden |
kein |
| |
dotted |
gepunktet |
| |
double |
doppelt durchgezogen |
| |
dashed |
gestrichelt |
| |
groove |
3D Effekt |
|
|
inset
|
3D Effekt
|
| |
outset |
3D Effekt |
| |
ridge |
3D Effekt |
|
border-width:
|
...px
|
Rahmenbreite
|
|
border-color:
|
#......
|
Rahmenfarbe
|
|
border-top
|
nur in Verbindung mit
|
hiermit kann man
|
|
border-left
|
den anderen
|
die einzelnen Rahmenbestandteile
|
|
border-right
|
Atrributen style,width,
|
nochmal einzeln
|
|
border-bottom
|
color
|
definieren
|
Es können also auch die einzelnen Tabellenrahmen einzeln
anders definiert werden indem man die Atrribute kombiniert.
table { background-color:#62B684; font-family:Verdana;
font-size:8pt; font-style:normal;
border-top-style:dashed; border-top-width:1px; border-top-color:#000000;
border-bottom-style:dotted; border-bottom-width:2px; border-bottom-color:#ff0000;
border-left-style:double; border-left-width:3px; border-left-color:#00fff;
border-right-style:solid; border-right-width:4px; border-rigth-color:#0000ff;
}
:: Beispiel anzeigen ::
nach oben
Text & Schrifteigenschaften
Hier einige Formatierungsmöglichkeiten um einen Text
bzw. die Schrift zu gestalten.
Mit diesen Eigenschaften kann man schon sehr viel herausholen
und ein ansprechenden Design zu schaffen.
nach oben
Hintergrund /Hintergrundbilder
Mit den Hintergrund Eigenschaften können Sie Ihre Elemente
oder Ihre Seite mit einer Hintergrundfarbe bzw. einem Hintergrundbild
hinterlegen. Das Verhalten der Wiederholung, die Position
des Hintergrundbildes und ob es mitscrollen soll, kann ebenfalls
festgelegt werden.
nach oben
|
