Sie sind auf Seite 1von 8

CSS Grundkenntnisse - Layout etc...

:
Angabe fr externe Stylesheets (im Dokumentkopf):
<link rel="stylesheet" type="text/css"
auf ein externes Stylesheet (URL unter href)
href="style/style.css" />

Verweis

________________________________________________________________________________
______________________________________________________
Die Eigenschaft "color":
h1 {
Alle bers
chriften erster Ordnung (h1) werden rot
color: #ff0000
(Mgliche Werte: Hexadezimalwerte (#ff22aa), engl. Namen (blue), rgb-Werte)
}
________________________________________________________________________________
______________________________________________________
Die Gruppe "background":
body {
background-color: #FFCC66;
Hintergr
undfarbe des Dokuments oder Elementes
background-image: url("butterfly.gif");
Hintergr
undbild des Dokuments
background-repeat: no-repeat;
Wiederho
lung des Hintergrundbildes
(Mgliche Werte: repeat-x (horizontale Wiederholung), repeat-y (vertikal), repeat
(beides), no-repeat (nicht))
background-attachment: fixed;
Fixierun
g des Hintergundbildes
(Mgliche Werte: scroll (mitscrollen), fixed (fixiert))
background-position: right bottom;
Position
des Hintergrundbildes
(Mgliche Werte: 2cm 2cm (2cm vom linken und 2cm vom oberen Rand), 50% 20%, top ri
ght, bottom left, 100px 255px)
}
________
Kombination ([background-color] | [background-image] | [background-repeat] | [ba
ckground-attachment] | [background-position])
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
________________________________________________________________________________
______________________________________________________
Die Gruppe "font":
p {

font-style: italic;
til
(Mgliche Werte: italic (kursiv), normal (normal), oblique (schrg))
font-variant: small-caps;
reibung mit groen Buchstaben
(Mgliche Werte: normal, small-caps)
font-weight: bold;
r Schrift (Bei bold Angabe in vollen Hunderten mglich)
(Mgliche Werte: normal, bold)
font-size: 30px;
re
(Mgliche Werte: 30px, 12cm, 120%, 1em)
font-family: arial, sans-serif;
}

Schrifts
Kleinsch
Dicke de
Schriftg

________
Kombination ([font-style] | [font-variant] | [font-weight] | [font-size] | [font
-family])
________________________________________________________________________________
______________________________________________________
Die Gruppe "text":
p {
text-indent: 30px;

Abstze ei

nrcken
text-align: justify;
Textausr
ichtung
(Mgliche Werte: left, right, center oder justify (Blocksatz))
text-decoration: underline;
Textdeko
ration
(Mgliche Werte: underline, overline, line-through, none)
text-spacing: 3px;
Laufweit
e (Abstand zwischen den Buchstaben)
text-transform: capitalize;
Texttran
sformation (Gro-/Kleinschreibung)
(Mgliche Werte: capitalize (1. gro), uppercase (gro), lowercase (klein), none)
}
________________________________________________________________________________
______________________________________________________
Links:
a {

Links si

nd blau
color: blue;
}
________
a:link {
te Links sind blau
color: blue;

Unbesuch

}
a:visited {
Links sind rot
color: red;
}

Besuchte

a:active {
inks haben einen gelben Hintergrund
background-color: #FFFF00;
}

Aktive L

a:hover {
er ber Link = oranger und kursiver Link
color: orange;
font-style: italic;
}

Mauszeig

________________________________________________________________________________
______________________________________________________
Gruppierung:
Im zu gruppierenden Element das Attribut class mit dem Gruppennamen einfgen.
Beispiel:
<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm" class="weisswein">Riesling</a></li>
<li><a href="ch.htm" class="weisswein">Chardonnay</a></li>
<li><a href="pb.htm" class="weisswein">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm" class="rotwein">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="rotwein">Merlot</a></li>
<li><a href="pn.htm" class="rotwein">Pinot Noir</a></li>
</ul>
Den Klassen kann nun in CSS speziell Eigenschaften zugewiesen werden:
(Muster: Element.classname)
a {
color: blue;
}
a.weisswein {
color: #FFBB00;
}
a.rotwein {
color: #800000;
}

________
Identifikation:
Im zu identifizierenden Element das Attribut id mit einem einzigartigem Wert ein
fgen.
Beispiel:
<h1
...
<h2
...
<h2
...
<h1
...
<h2
...
<h3
...

id="k1">Kapitel 1</h1>
id="k1-1">Kapitel 1.1</h2>
id="k1-2">Kapitel 1.2</h2>
id="k2">Kapitel 2</h1>
id="k2-1">Kapitel 2.1</h2>
id="k2-1-2">Kapitel 2.1.2</h3>

Einer ID kann nun in CSS speziell Eigenschaften zugewiesen werden:


(Muster: #idname)
#k1-2 {
color: red;
}
________
Das Element "span" kann innerhalb eines Elements verwendet werden, um bestimmte
Wrter oder Stze zu gruppieren/identifizieren.
Beispiel:
<p><span class="tugend">Edel</span> sei der Mensch,
<span class="tugend">hilfreich</span> und <span class="tugend">gut</span
>.</p>
Diesen Textstellen knnen nun in CSS speziell Eigenschaften zugewiesen werden:
(Muster: span.classname oder #idname)
span.tugend {
color:red;
}
________
Das Blockelement "div" kann zur Identifikation von ein oder mehreren Elementen d
ienen.
Beispiel:
<div id="spd">
<ul>

<li>Gerhard Schrder</li>
<li>Helmut Schmidt</li>
<li>Willy Brandt</li>
</ul>
</div>
<div id="cducsu">
<ul>
<li>Angela Merkel</li>
<li>Helmut Kohl</li>
<li>Kurt Georg Kiesinger</li>
</ul>
</div>
Diesem Abschnitt kann nun in CSS speziell Eigenschaften zugewiesen werden:
(Muster: #idname)
#spd {
background:red;
color:white;
}
#cducsu {
background:black;
color:white;
}
________________________________________________________________________________
______________________________________________________
Das Box-Modell:
Auenabstnde:
Ein Element hat vier Seiten: rechts, links, oben und
unten (right, left, top und bottom).Der Auenabstand
"margin" ist die Entfernung jeder Seite zum Nachbarelement
(oder den Rndern des Web-Dokuments).
Der Auenabstand fr das Dokument selbst (body) kann so festgelegt werden:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
bzw.
body {
margin: 100px 40px 10px 70px;
}

________
Innenabstnde:
Der Innenabstand ("padding") kann auch als Fllung
verstanden werden. Dies macht Sinn, da der Abstand
zu anderen Elementen nicht verndert wird, sondern
nur den inneren Abstand vom Rand (border) zum Inhalt
des Elementes angibt.
Beispiel:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
In diesem Beispiel wird den berschriften einen Innenabstand gegeben.
Man kann sehen das sich der Inhalt verschiebt. Auerdem verndert sich
die Gre des frabigen Bereichs.
________
Umrandung:
Die Umrandung ("border") kann z.B. als Dekorationselement dienen.
Sie bildet ebenfalls eine Style-Gruppe mit Kombination.
h1 {
border-width: thick;
Breite d
er Umrandung
(Mgliche Werte sind: thin (dnn), medium (mittel), thick (dick) oder 6px (Pixelwert
))
border-style: dotted;
Art der
Umrandung
(Mgliche Werte sind: siehe Arten der Umrandung.gif)
border-color: gold;
Farbe de
r Umrandung
(Mgliche Werte sind: Farbwerte z.B. rgb- oder Hexadezimalwerte)
}
________
Kombination:
h1 {

border: thick dotted gold;


}
________
Man kann auch besondere Eigenschaften fr den oberen, unteren, linken und
rechten Rand (border-top, border-bottom, border-right oder border-left) vergeben
.
Das folgende Beispiel zeigt wie:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
________________________________________________________________________________
______________________________________________________
Breite und Hhe:
Mit der Eigenschaft width, kann man die gewnschte Breite eines Elementes angeben.
Diese einfache Beispiel erstellt eine 200px
breite Box, in der Text dargestellt werden kann:

div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
________
Im obigen Beispiel wird die Hhe der Box durch ihren
Inhalt bestimmt. Man kann aber die Hhe eines Elementes
auch mit der Eigenschaft height beeinflussen:
Als Beispiel weisen wir der Box aus unserem

Beispiel eine Hhe von 500 Pixel zu:


div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
________________________________________________________________________________
______________________________________________________