close

Anmelden

Neues Passwort anfordern?

Anmeldung mit OpenID

CSS Kurs 1. Was ist CSS? 2. Grundlagen

EinbettenHerunterladen
CSS Kurs
1. Was ist CSS?
CSS (Cascading Style Sheets) sind Formatanweisungen zur Gestaltung einer Webseite. Sie wurden
entwickelt, um die Formatierungs- und Layoutanweisungen aus dem HTML-Quelltext zu entfernen.
So soll vermieden werden, dass z.B. Webseiten mit Tabellen zwar pixelgenau gestaltet werden
können, aber jede Umgestaltung des Layouts einer Neuentwicklung der Webseite gleichkommt.
Ziel war darüber hinaus, kohärente, also gleichförmige Layouts für eine Webseite zu sichern, ohne
den Aufwand unmäßig zu steigern. Änderungen in der Farbgebung, Schriftgröße etc. erfolgen für
eine Website, auch wenn nur eine einzige kleine Datei verändert wird.
2. Grundlagen
CSS trennt HTML-Code und das Seitendesign.
Dies ist der body-Bereich einer HTML-Seite.
<body>
<h1>Dies ist eine &Uuml;berschrift in h1</h1>
<span>Dies ist einfach ein Text.</span>
</body>
So sieht die Seite ohne CSS aus:
Und so mit CSS:
CSS sind Formatvorlagen, die bestimmten Tags eine bestimmte Darstellung zuweisen. Da die CSSDatei vom Browser nur einmal geladen werden muss und die HTML-Dateien deutlich kleiner
werden, verringern sich auch die Ladezeiten.
Die Formatierung in der CSS-Datei sieht so aus:
h1 {
font-size: 400%;
}
span {
font-size: 99%;
border: #0000CC 3px solid;
}
Die Prozentangaben sind relativ zur Einstellung des Browsers zu verstehen. Über border wird der
Rand in Blau mit einer Breite von 3 Pixeln in durchgehender Linie formatiert. Diese
Formatierungen gelten nun für alle h1 und span – Tags in diesem Dokument.
Seite 1
CSS Kurs
3. CSS einbinden
Es gibt drei Wege, CSS in eine HTML-Datei einzubinden.
Zunächst kann der HTML-Tag selbst mit einem style versehen werden:
<span style="border: #0000CC 3px solid;">Dies ist einfach nur ein Text.</span>
Dann ist es möglich, das CSS in den head der HTML-Datei zu schreiben:
<style type="text/css">
<!-span {border: #0000CC 3px solid }
-->
</style>
Grundsätzlich sollten die CSS-Formatierungen aber immer in einer eigenen Datei erstellt werden.
Auf diese wird im head verwiesen.
<link rel="stylesheet" href="design.css" type="text/css" />
Über
<style type="text/css">
<!-@import url (design.css );
-->
</style>
kann eine CSS-Datei importiert werden. Dies verstehen einige ältere Browser nicht, so dass diese
Variante für browserspezifische CSS genutzt werden kann. Außerdem kann bei dieser Variante für
jeden Ausgabetyp ein eigenes Stylesheet definiert werden.
So wäre die Anweisung @import url (design.css ) screen; ein Stylesheet für die
Bildschirmausgabe, während @import url (drucken_01.css ) print; ein Stylesheet für die
Druckausgabe wäre.
Ausgabeattribute sind:
Attribut
Gerät
all
alle
aural
Screenreader u.Ä.
braille
blindenschriftfähig
embossed
Blindenschriftfähige Drucker
handheld
Handhelds
print
Drucker
Projection
Video-Beamer, OHP
Screen
Bildschirm
tty
Fernschreiber, Handys u.Ä. mit festen
Seite 2
CSS Kurs
Zeichensätzen
tv
TV-Geräte
Achtung: Welche Style-Definition vom Browser beachtet wird, hängt von der Nähe der Denfinition
zum formatierten HTML-Element ab., d.h.:
●
CSS-Regeln, die der Nutzer über seine
Browsereinstellungen vornimmt,
haben Vorrang vor allen anderen. Hier
die Einstellungsmöglichkeiten im IE7.
●
CSS-Regeln im HTML-Element haben Vorrang vor Regeln im head.
CSS-Regeln im head haben Vorrang vor Regeln in einer externen Datei.
●
Hier werden ausschließlich externe CSS-Dateien benutzt.
Seite 3
CSS Kurs
4. CSS erstellen
4.1. Aufbau
In CSS-Dateien sind keine deutschen Umlaute oder Sonderzeichen (öäüß) gestattet.
Jede CSS-Regel besteht aus den folgenden Teilen:
h1 {font-size: 400%;}
h1 {font-size: 400%;}
Selektor
selector
Eigenschaft
property
Wert
value
Deklaration
declaration
Selektoren können kombiniert werden: h1, h2, h3 {color: #FF0000;}
Die Selektoren werden durch Komma getrennt. Sie dürfen nicht mit einer Zahl beginnen.
Deklarationen können kombiniert werden. Sie werden durch Semikolon getrennt und üblicherweise
in eine neue Zeile geschrieben, z. B.
font-size: 99%;
border: #0000CC 5px solid;
border-bottom: 5px;
Werte können kombiniert werden: border: #0000CC 3px solid;
Die Werte werden mit Leerzeichen getrennt.
Achtung: Bei Größenangaben muss die Einheit direkt hinter dem Wert stehen, es darf kein
Leerzeichen folgen, also 5px, aber nicht 5 px! Letzteres würde als Aufzählung von Werten
angesehen, nicht als eine Wertangabe.
Seite 4
CSS Kurs
4.2. Selektoren
4.2.1. HTML-Elemente
Selektoren können HTML-Elemente sein, denen neue Eigenschaften zugewiesen werden, z.B. die
Schriftfarbe Blau.
span {
color:#0000FF;
}
Jetzt sind alle durch <span></span> eingeschlossenen Bereiche mit einer blauen Textfarbe
versehen.
Hier die Farbnamen für die 16 Grundfarben:
black
#000000
maroon
#800000
green
#008000
olive
#808000
navy
#000080
purple
#800080
teal
#008080
gray
#808080
silver
#C0C0C0
red
#FF0000
lime
#00FF00
yellow
#FFFF00
blue
#0000FF
fuchsia
#FF00FF
aqua
#00FFFF
white
#FFFFFF
Grundsätzlich kann statt der Hexadezimalangabe auch der Farbname verwendet werden.
Hexadezimalzahlen sind allerdings websicherer, da sie von allen Browsern gleich verarbeitet
werden.
4.2.2. CLASS-Selektoren
CLASS-Selektoren werden genutzt, wenn eine Formatierung an verschiedenen Stellen innerhalb
eines Dokuments vorkommen kann. Diese Selektoren beginnen mit einem Punkt und können frei
benannt werden, so dass keine generelle Formatierung aller HTML-Tags erfolgt.
Das css sieht so aus:
.blaue_farbe {
color: blue; /* Dies ist ein Kommentar! Die Textfarbe ist Blau.*/
}
Diese Klasse kann nun auf verschiedenste HTML-Elemente angewendet werden, z. B.
Quelltext:
Darstellung:
<h1 class="blaue_farbe">
Dies ist eine &Uuml;berschrift in
h1
</h1>
<span class="blaue_farbe">
Dies ist einfach nur ein Text.
</span>
Seite 5
CSS Kurs
4.2.3. Identitäts(Id)-Selektoren
Identitäts-Selektoren dürfen auf einer Seite nur einmal vorkommen. Sie werden deshalb oft für die
Hauptbereiche einer Webseite verwendet.
Beispiel:
#oben {
border: #CC0000 5px dotted; /*Rand: blau, 5 Pixel, gepunktet*/
margin: 3px; /*Außenabstand 3 Pixel*/
padding:10px; /*Innenabstand 10 Pixel*/
}
#unten {
border: #339900 10px solid;/* Rand: grün, 10 Pixel, durchgezogen*/
margin: 3px; /*Außenabstand 3 Pixel*/
}
HTML-Code:
Darstellung:
<div id="oben">
<h1 class="blaue_farbe">
Dies ist eine
&Uuml;berschrift in h1
</h1>
<span class="blaue_farbe">
Dies ist einfach nur ein
Text.
</span>
</div>
<div id="unten">
<p>
Dies ist der untere
Bereich
</p>
</div>
Seite 6
CSS Kurs
4.2.4. Kind-Selektoren
Kind-Selektoren sprechen das direkt untergeordnete Element an. Die Struktur einer Seite kann z.B.
so aussehen:
HTML ist hier das erste Elternelement.
Ihm untergeordnet sind die Kindelemente HEAD und BODY. Diese sind
wiederum Elternelemente zu den in ihnen enthaltenen Tags.
BODY ist Elternelement zu H“, DIV, und DIV. Das erste DIV ist dann
Elternelement zu H2 und das zweite DIV zu P.
Der HTML-Quelltext des BODY-Tags sieht dann so aus:
<body>
<h2>
Dies ist die erste Kindebene zum Body in h2.
</h2>
<div id="oben">
<h2>
Dies ist die zweite Kindebene zum
Body in h2.
</h2>
<div>
<p>
Dies ist die zweite
Kindebene zum
Body als normaler Text.
</p>
</div>
</div>
<div id="unten">
</div>
</body>
Und der CSS-Teil:
body>h2 {
font-size: 50px;
}
Seite 7
CSS Kurs
Die Darstellung sieht so aus:
Nur das direkte Kindelement zu BODY wird
verändert, alle Elemente, die tiefer in der Hierarchie
stehen, sind nicht betroffen.
Ähnlich lässt sich mit Folgeelement-Selektoren
arbeiten, bei denen ein Element nur formatiert wird,
wenn es unmittelbar auf ein bestimmtes anderes
folgt, z.B. div+p {margin-bottom: 15px}
4.2.5. Universal-Selektor
Der Universal-Selektor ist der Asterisk *.
Er wird genutzt, um universale Festlegungen zu treffen, z.B.
*{
padding: 0px;
margin: 0px;
}
Diese Angabe am Anfang eines Stylesheets ist empfehlenswert, um Vorformatierungen in diesem
Bereich zu überschreiben und ein einheitliches Browserverhalten zu bekommen.
4.2.6. Pseudo-Klassen
Pseudo-Klassen werden vor allem für die verschiedenen Zustände von Links genutzt, können aber
auch bei anderen Elementen eingesetzt werden. Sie werden nach dem betroffenen Element im
CSS-Dokument mit einem Doppelpunkt angefügt.
Linkzustand
Beschreibung
a{
text-decoration: overline;
font-size: 250%;
font-style: oblique;
color:#009900;
}
ungenutzt
a:visited {
text-decoration:underline;
font-size: 250%;
font-style: oblique;
color:red;
}
bereits besucht
Seite 8
Darstellung
CSS Kurs
a:hover {
Maus über dem Link
border: 5px double #000099;
}
a:focus {
border: 10px dashed #FF0000;
font-stretch: extra-expanded;
}
Link mit TAB-Taste
ausgewählt
a:active {
border: 20px solid #990000;
font-style:italic;
}
Link wird gerade geklickt
Diese Pseudoklassen lassen sich aber z.B. auch auf andere Elemente anwenden, z. B. auf Absätze:
CSS:
Darstellung:
p:hover {
border: 5px double #000099;
}
Bei umfangreichen Stylesheets können Angaben überschrieben werden oder sich widersprechen.
Der Browser muss dann entscheiden, wie er verfahren soll. Dies geschieht nach einem einfachen
Punktesystem.
HTML-Selektoren erhalten einen Punkt.
Pseudo-Klassen und CLASS-Selektoren erhalten zehn Punkte.
ID-Selektoren erhalten 100 Punkte.
Aus der Summierung ergibt sich der Gewinner.
Das heißt:
h1 {
font-size: 300%;
}
1 Punkt
nur ein HTML-Selektor
h1:hover {
font-size: 450%
}
11 Punkte
HTML-Selektor + Pseudo-Klasse
#winner h1 {
font-size: 600%;
}
101 Punkte
ID-Selektor + HTML-Selektor
Bei Gleichstand gewinnt der Befehl, der am weitesten unten in der CSS-Datei steht.
Seite 9
CSS Kurs
5. Das Box-Modell
CSS interpretiert alle HTML-Elemente als Rechtecke. Sie unterliegen dem sog. Boxmodell. (vgl.
Peter Müller:little boxes)
Nach dem Boxmodell besteht jedes Element aus einem Inhaltsbereich (content) mit einer Höhe
(height) und Breite (width), einem Innenabstand (padding), einem Rand (border) und einem
Außenabstand (padding).
Hintergrundfarben und/oder -bilder erstrecken sich über content und padding.
Breite (width), Linienart (style) und Farbe (color) des Randes (border) können einzeln definiert
werden.
Der Aussenrand (margin) übernimmt die Hintergrundfarbe des übergeordneten Elements.
Bei nebeneinander liegenden Block-Elementen addiert sich der Außenrand, also margin: 15px und
margin: 25px ergibt 40px zwischen den Boxen.
Bei übereinander liegenden Boxen wird aber nur der größere Außenabstand verwendet, der kleinere
ignoriert. (collapsing margins) Inline-Elemente haben keine vertikalen Außenabstände.
Die obere Box hat den größeren Abstand und
der Außenrand reicht an die untere heran,
denn deren Außenabstand wurde auf null
gesetzt.
Seite 10
CSS Kurs
Werden bei height keine Angaben gemacht, so sind alle Elemente so hoch wie ihr Inhalt.
Werden bei width keine Angaben gemacht, so nehmen Block-Elemente die gesamte Fensterbreite
eine, während Inline-Elemente so breit wie ihr Inhalt werden.
HTML-Quelltext
CSS
<body>
<div id="oben">
<p>
Dies ist der obere
Bereich.
</p>
</div>
<div>
<p>
Dies ist der untere
Bereich
</p>
</div>
<h1 class="hoch">
Eine hohe
Überschriftenbox
</h1>
<h1>
Eine einfache
Überschriftenbox
</h1>
</body>
div {
border: 5px solid #003366;
margin: 15px;
}
h1 {
border: 5px solid #003366;
margin: 15px;
}
#oben {
width: 50%;
border: 5px solid #003366;
}
.hoch {
height: 70px;
border: 5px solid #003366;
}
Darstellung:
Seite 11
CSS Kurs
Die Gesamtbreite einer Box ergibt sich aus den Breitenangaben für content, padding-right, paddingleft, border-right, border-left, margin-right und margin left.
width
150
+ padding-right
20
+padding-left
25
+border-right-width
5
+border-left-width
8
+margin-left
3
+margin-right
12
Gesamtbreite:
223
6. Seitengestaltung
6.1. Schriftengestaltung
Für die einheitliche Gestaltung von Webseiten ist die Schriftengestaltung ein entscheidendes
Merkmal.
CSS bietet dafür zwei grundlegende Befehle
6.1.1. color
color bezeichnet die Schriftfarbe. Aus irgendeinem Grund wird hier nicht font-color genutzt.
Beispiel
div {
border: 5px solid #003366;
margin: 15px;
color: red;
}
6.1.2. font
font bietet folgende Varianten:
Eigenschaft
Wert
Bedeutung
font-family:
Arial, Helvetica, sans-serif;
die zu verwendende Schriftart
bzw. Schriftartenfamilie
font-size:
large;
small;
50%
15px;
Schriftgröße groß
klein
50% des Elternelements
15 Pixel
font-stretch:
extra-expanded;
Schriftlaufweite
(Zeichenabstand)
Seite 12
CSS Kurs
font-style:
oblique;
italic;
Schriftstil
kursivstellen einer Schriftart
kursiver Schriftschnitt
font-variant:
small-caps;
normal;
Kapitälchen
normal
font-weight:
bold;
bolder;
light;
lighter;
normal;
100;
200; usw.
fett (entspr. 700)
fetter als Elternelement
fein
feiner
normal (entspr. 400)
6.1.3. word-spacing und letter-spacing
word-spacing definiert die Wortabstände, letter-spacing die Zeichenabstände. Für beide sind
angaben in Prozent nicht erlaubt, andere numerische Angaben schon.
6.1.4. text-decoration
Varianten:
text-decoration: underline;
text-decoration:overline;
text-decoration:line-through;
text-decoration:blink;
text-decoration:none;
= unterstrichen
= überstrichen
= durchgestrichen
= blinkend
= normal (keine Text-Dekoration)
6.1.5. text-indent
rückt den Text in der ersten Zeile ein.
text-indent:1em;
6.1.6. line-height
Zeilenhöhe
line-height: 1.5em;
6.1.7. vertical-align
vertikale Ausrichtung, möglich sind auch Prozentangaben
vertical-align: top
vertical-align: middle
vertical-align: bottom
= obenbündig ausrichten
= mittig ausrichten
= untenbündig ausrichten
Seite 13
CSS Kurs
vertical-align: baseline
vertical-align: sub
vertical-align: super
vertical-align: text-top
vertical-align: text-bottom
= an der Basislinie ausrichten (oder untenbündig,
wenn es keine Basislinie gibt)
= tieferstellen (ohne die Schriftgröße zu reduzieren)
= höherstellen (ohne die Schriftgröße zu reduzieren)
= am oberen Schriftrand ausrichten
= am unteren Schriftrand ausrichten
6.1.8. text-align
In korrekt darstellenden Browsern wird damit Text in Inline-Elementen horizontal ausgerichtet.
text-align: left = linksbündig ausrichten (Voreinstellung)
text-align: center = zentriert ausrichten
text-align: right = rechtsbündig ausrichten
text-align: justify = als Blocksatz ausrichten
Achtung: Der IE bis Version 6 zentriert auch Blockelemente über text-align. Korrekt werden diese
jedoch über die Eigenschaft margin ausgerichtet.
z.B.
display: block; /*macht aus dem Element ein Block-Element*/
margin: auto; /*zentriert das Block-Element, möglich wären auch gleiche Angaben für
die Seitenränder. Diese Variante wird benutzt, um Inline-Elemente einfach
zu zentrieren, wenn text-align nicht die gewünschte Wirkung erziehlt.*/
6.2. Hintergründe
6.2.1. background-color
definiert die Hintergrundfarbe, üblicherweise als Hexadezimalzahl.
background:#CC0000; /*rot*/
6.2.2. background- image
definiert ein Hintergrundbild
background-image:url(p_hover.png);
6.2.3. background-repeat
definiert die Wiederholung des Hintergrundbildes
background-repeat: repeat
background-repeat: repeat-x;
background-repeat: repeat-y
background-repeat: no-repeat
= wiederholen (Voreinstellung).
= nur "eine Zeile lang" waagerecht wiederholen.
= nur "eine Spalte lang" senkrecht wiederholen.
= nicht wiederholen, nur als Einzelbild anzeigen.
Seite 14
CSS Kurs
6.2.4. background-attachment
Mit background-attachment: wird das Scroll-Verhalten einer Hintergrundgrafik, die mit
background-image eingebunden wurde, kontrolliert Erlaubt ist eine der folgenden Angaben.
scroll = mitscrollen (Voreinstellung).
fixed = Hintergrundbild bleibt stehen.
6.2.5. background-position
Mit background-position: wird bestimmt, wo die linke obere Ecke der Hintergrundgrafik sein soll.
Der erste Wert steht für die horizontale, der zweite für die vertikale Position. Bezugspunkt ist das
HTML-Element, für das die Hintergrundgrafik definiert wird. Erlaubt sind numerische und
folgende Angaben:
background-position: top
= vertikal obenbündig.
background-position: bottom
= vertikal untenbündig.
background-position: center
= zentriert (horizontal oder vertikal, center center
kann als center zusammengefasst werden).
background-position: left
= horizontal linksbündig.
background-position: right
= horizontal rechtsbündig.
6.2.6.Numerische Angaben:
Abkürzung
Angabetyp
Bedeutung
Beispiele
pt
absolut
Steht für Punkt. Typografische
Maßeinheit. 1 Punkt entspricht 1/72
Inches.
font-size:12pt;
line-height:14pt;
pc
absolut
Steht für Pica. Typografische Maßeinheit. font-size:1pc;
1 Pica entspricht 12 Punkt.
line-height:1.2pc;
in
absolut
Steht für Inch. Allgemeines Längenmaß
im angelsächsischen Raum. 1 Inch
entspricht 2.54 Zentimetern.
border-width:0.1in;
margin-left:1in;
mm
absolut
Steht für Millimeter. Allgemeines
Längenmaß. 1000. Teil des Urmeters.
margin-bottom:10mm;
width:70mm;
cm
absolut
Steht für Zentimeter. Allgemeines
Längenmaß. 100. Teil des Urmeters.
font-size:1cm;
top:2.54cm;
px
absolut/relativ Steht für Pixel. Abhängig von der
border-width:3px;
Pixeldichte des Ausgabegeräts, relativ also margin-right:60px;
von Ausgabegerät zu Ausgabegerät,
absolut dagegen auf ein und das selbe
Ausgabegerät bezogen.
em
relativ
Steht für bezogen auf die Schriftgröße
font-size:1.2em;
des Elements. Ausnahme: wenn die font- line-height:1.5em;
size-Eigenschaft (also die Schriftgröße)
selbst mit dieser Maßangabe gesetzt wird,
steht diese für bezogen auf die
Seite 15
CSS Kurs
Schriftgröße des Elternelements.
ex
relativ
%
relativ
Steht für bezogen auf die Höhe des
Kleinbuchstaben x in diesem Element.
Ausnahme: wenn die font-sizeEigenschaft (also die Schriftgröße) selbst
mit dieser Maßangabe gesetzt wird, steht
diese für bezogen auf die Höhe des
Kleinbuchstaben x im Elternelement.
texttransform:uppercase;
font-size:1.3ex;
Steht für Prozent. Je nach CSSfont-size:10pt;
Eigenschaft relativ zur elementeigenen
line-height:120%;
Größe, oder zu der des Elternelements,
oder zu einem allgemeineren Kontext. Bei
nebenstehendem Beispiel ist die Angabe
zur Zeilenhöhe (line-height) relativ zur
Schriftgröße (font-size) zu interpretieren.
(vgl. http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische)
Als Dezimalzeichen ist der Punkt zu verwebden!
Ein Beispiel:
CSS:
body {
background:#CC0000;
background-image:url(p_hover.png);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:left top;
}
p{
margin-left: 180px;
}
HTML:
Darstellung:
<body>
<p>Lorem ipsum dolor sit...
<!-- Hier folgt mehrfach der
Lorem Ipsum – Text. -->
</p>
</body>
In diesem Beispiel sieht man, dass das Hintergrundbild immer links oben auf dem Browserfenster
bleibt, auch wenn der Leser, wie an dem Scrollbalken zu sehen, schon in der Mitte der Seite ist.
Seite 16
CSS Kurs
6.3. Listen
6.3.1. list-style-type
Hiermit wird das Aussehen des Listenzeichens definiert.
list-style-type: decimal
list-style-type: lower-roman
list-style-type: upper-roman
list-style-type: lower-alpha oder lower-latin
list-style-type: upper-alpha oder upper-latin
list-style-type: disc
list-style-type: circle
list-style-type: square
list-style-type: none
= für ol-Listen: Nummerierung 1.,2.,3.,4.
usw.
= für ol-Listen: Nummerierung
i.,ii.,iii.,iv. usw.
= für ol-Listen: Nummerierung
I.,II.,III.,IV. usw.
= für ol-Listen: Nummerierung a.,b.,c.,d.
usw.
= für ol-Listen: Nummerierung
A.,B.,C.,D. usw.
= für ul-Listen: gefüllter Kreis als
Bullet-Zeichen
= für ul-Listen: leerer Kreis als BulletZeichen
= für ul-Listen: rechteckiges BulletZeichen
= kein Bullet-Zeichen, keine
Nummerierung
6.3.2. list-style-position
definiert die Einrückposition
list-style-position: inside
list-style-position: outside
= eingerückt.
= ausgerückt (Voreinstellung).
Seite 17
CSS Kurs
6.3.3. list-style-image
definiert ein Bild als Listenzeichen
list-style-image:url(listenbullet.jpg) ;
Beispiel:
HTML
CSS
<ol>
<li>Liste</li>
<li>Liste</li>
<li>Liste</li>
</ol>
<ul>
<li>Liste</li>
<li>Liste</li>
<li>Liste</li>
</ul>
Darstellung
ol {
list-style-type:upper-roman;
list-style-position: inside;
}
ul {
list-style-type: upper-alpha;
list-style-position: inside;
list-style-image:url(pfeil.png)
}
Seite 18
CSS Kurs
6.4. Tabellen
Tabellen gehören natürlich auch weiterhin zu den HTML-Werkzeugen, allerdings nur noch zur
Darstellung tabellarischer Daten, nicht mehr zur Seitengestaltung oder zur Positionierung von
Seitenelementen.
Mit CSS werden Tabelle so
interpretiert, als lägen die
Tabellenteile in Schichten
wie Folien übereinander.
Dementsprechend sind die
Formatierungen unten
liegender Elemente nur
sichtbar, wenn sie von
weiter oben liegenden nicht
überdeckt werden.
Die Elemente der Tabelle liegen übereinander.
Quelle: http://www.thestyleworks.de/basics/tables.shtml
Leider stellt auch der neue
Internet Explorer 7 hier nicht
alles so dar, wie er soll.
Die Formatierung der vierten Spalte überdeckt darunterliegende
Formatierungen.
Quelle: http://www.thestyleworks.de/basics/tables.shtml
Empfehlenswert für ein barrierearmes Layout ist das summary-Attribut. Es ermöglicht
Screenreadern, erste Informationen über die folgende Tabelle schnell zu erfassen.
Beispiel:
<table summary=“Dies ist eine Übungstabelle zur Tabellenformatierung“> </table>
Über den HTML-Tag caption wird eine Tabellenbeschriftung eingefügt. Diese kann über captionside auf top, bottom, left oder right gesetzt werden. Die letzten beiden Werte sind veraltend.
Seite 19
CSS Kurs
6. 4. 1. Struktur
Über table-layout mit den Werten fixed oder auto wird festgelegt, ob die Tabelle sich im Browser
horizontal ausdehnen kann. Eingestellt ist auto.
Älteren Browsern (IE 6) müssen über empty-cells:show ausdrücklich angewiesen werden, leere
Zellen zu zeigen. Der Standard ist hide.
6.4.1.1. Kopf, Fuß, Körper
Tabellen sollten für eine sinnvolle logische Einteilung und Formatierung immer in Kopf, Körper
und Fuß eingeteilt werden.
Dabei gilt im Quelltext die Reihenfolge Kopf, Fuß, Körper. Der Kopf wird automatisch formatiert.
<table>
<thead>
<tr>
<th>Tabellenkopf, Zeile 1,
Spalte 1</th>
<th>Tabellenkopf, Zeile 1,
Spalte 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Fuß der Tabelle, Zeile 1, Spalte 1</td>
<td>Fuß der Tabelle, Zeile 1, Spalte 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Inhalt</td>
<td>Inhalt</td>
</tr>
<tr>
<td>Inhalt</td>
<td>Inhalt</td>
</tr>
<tr>
<td>Inhalt</td>
<td>Inhalt</td>
</tr>
<tr>
<td>Inhalt</td>
<td>Inhalt</td>
</tr>
</tbody>
</table>
Seite 20
CSS Kurs
6.4.1.2. Direkte Formatierung
Die Tabelle kann direkt über die Tabellenselektoren table, tr, td formatiert werden.
besser ist es allerdings, mit Klassen zu arbeiten, da dann die Formatierungen nicht generell gelten,
z. B auch für den Tabellenfuß, obwohl der abgesetzt werden sollte. zudem treten Formatierungen
nicht bei allen Browsern in gleicher weise ein.
Für die spätere Struktur können Spaltengruppen gebildet werden. Dies beschleunigt übrigens auch
das Laden der Seite.
<table>
<caption>
Eine Beispieltabelle
</caption>
<colgroup class="stunde">
<col class="stunde" />
</colgroup>
<colgroup class="tage">
<col class="montag" />
<col class="dienstag" />
<col class="mittwoch" />
<col class="donnerstag" />
<col class="freitag" />
</colgroup>
<thead>
<tr>
<th>Stunde</th>
<th>Montag</th>
<th>Dienstag</th>
<th>Mittwoch</th>
<th>Donnerstag</th>
<th>Freitag</th>
</tr>
</thead>
<tfoot>
<tr>
<td>AG</td>
<td>AG</td>
<td>AG</td>
<td>AG</td>
<td>AG</td>
<td>AG</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Inhalt</td>
<td>Inhalt</td>
Darstellung im IE 7
/*CSS*/
table {
border-collapse:separate;
border-spacing: 7px;
}
caption {
font-weight: bolder;
}
th {
border:#0066FF; /*nur IE7*/
border: 2px solid;
background:#CC9900
}
td {
border:#66FF00;
border: 6px double;
}
tfoot td {
background-color: #ddddff;
border:#FF0033;/*nur IE7*/
border:6px double;
}
Seite 21
CSS Kurs
<td>Inhalt</td>
<td>Inhalt</td>
<td>Inhalt</td>
<td>Inhalt</td>
</tr>
<tr>
<td>Inhalt</td>
<td>Inhalt</td>
<td>Inhalt</td>
<td>Inhalt</td>
<td>Inhalt</td>
<td>Inhalt</td>
</tr>
<tr>
<td>Inhalt</td>
<td>Inhalt</td>
<td>Inhalt</td>
<td>Inhalt</td>
<td>Inhalt</td>
<td>Inhalt</td>
</tr>
</tbody>
</table>
Darstellung im Firefox 2
6.4.1.3. Spaltengruppen und Klassen
Über die Tags colgroup und col können nun Spalten zusammengefasst und einheitlich formatiert
werden.
Möglich sind aber auch Formatierungen einzelner Zellen.
<table>
<caption>
Eine Beispieltabelle
</caption>
<colgroup class="stunde">
<col class="stunde" />
</colgroup>
<colgroup class="tage">
<col class="montag" />
<col class="dienstag" />
<col class="mittwoch" />
<col class="donnerstag" />
<col class="freitag" />
</colgroup>
<thead>
<tr>
<th class="stunde">Stunde</th>
Seite 22
CSS Kurs
<th class="tage montag">Montag</th>
<th class="tage dienstag">Dienstag</th>
<th class="tage mittwoch">Mittwoch</th>
<th class="tage donnerstag">Donnerstag</th>
<th class="tage freitag">Freitag</th>
</tr>
</thead>
<tfoot>
<tr>
<td class="stunde">AG</td>
<td class="montag">AG</td>
<td class="dienstag">AG</td>
<td class="mittwoch">AG</td>
<td class="donnerstag">AG</td>
<td class="freitag">AG</td>
</tr>
</tfoot>
<tbody>
<tr class="erste">
<td class="stunde">Erste</td>
<td class="montag">Inhalt</td>
<td class="dienstag">Inhalt</td>
<td class="mittwoch">Inhalt</td>
<td class="donnerstag">Inhalt</td>
<td class="freitag">Inhalt</td>
</tr>
<tr class="zweite">
<td class="stunde">Zweite</td>
<td class="montag">Inhalt</td>
<td class="dienstag">Inhalt</td>
<td class="mittwoch">Inhalt</td>
<td class="donnerstag">Inhalt</td>
<td class="freitag">Inhalt</td>
</tr>
<tr class="dritte">
<td class="stunde">Dritte</td>
<td class="montag">Inhalt</td>
<td class="dienstag">Inhalt</td>
<td class="mittwoch">Inhalt</td>
<td class="donnerstag">Inhalt</td>
<td class="freitag">Inhalt</td>
</tr>
</tbody>
</table>
Wie hier zu sehen, lassen sich
Hintergründe einigermaßen
unkompliziert erstellen.
Seite 23
/*css*/
table {
border-collapse:separate;
border-spacing: 7px;
}
caption {
font-weight: bolder;
}
.stunde{
font-size: 1.5em;
font-style:italic;
background-color:#CCFF66;
}
.tage {
font-size: 13px;
}
.montag {
background-color:#CC66FF;
}
.dienstag {
background-color:#FFCC00;
}
.mittwoch {
background-color:#33CC33;
}
.donnerstag {
background-color: #0000FF;
}
.freitag {
background-color: #FF0000;
}
tfoot .stunde, tfoot .tage, tfoot .montag, tfoot
.dienstag, tfoot .mittwoch, tfoot .donnerstag,
tfoot .freitag {
border-top: #000000 7px solid;
border-top-color: #0033FF;
}
thead .stunde, thead .tage, thead .montag, thead
.dienstag, thead .mittwoch, thead .donnerstag,
thead .freitag {
border-bottom: #000000 4px dotted;
border-bottom-color:#CC0000;
}
tr.erste td.donnerstag {
background-color:#CCFFFF;
}
tr.zweite td.donnerstag {
background-color: #00FFFF;
}
tr.dritte td.donnerstag {
background-color:#99FF00;
}
CSS Kurs
6.4.1.4. scope
Zur logischen Strukturierung dient letztlich noch das Attribut scope, das zeigt, dass ein Element
Header-Informationen enthält, also eine Überschrift für Tabellenbereiche ist.
Beispiel:
<td scope="row" class="stunde">Dritte</td>
scope bewirkt keine sichtbare Veränderung der Tabelle, sondern hilft Benutzerprogrammen, die
Tabelle besser zu verstehen.
Spalten- oder zeilenübergreifende Überschriften können entsprechend deklariert werden.
Beispiel:
<th colspan=“2“ scope="colgroup">Dritte</th>
<th rowspan=“2“ scope="rowgroup">Dritte</th>
6. 4. 2. Rahmen
Grundlegend sind für Rahmen die Befehle border-collapse: copllapse bzw. separate.
Die folgende Tabelle zeigt die wesentlichen praktischen Unterschiede zwischen beiden Modellen
(siehe zum Vergleich die beiden Beispiele):
Modell der getrennten Rahmen
border-collapse: separate;
Modell der zusammenfallenden
Rahmen
border-collapse: collapse;
Der Quelltext entspricht dem
obigen.
Der Quelltext entspricht
dem obigen.
Deklaration
des
Nur an table, td, th.
Rahmens ist
möglich an:
An allen Tabellenelementen: table,
tr, td, th, thead, tfoot, tbody,
col, colgroup.
Deklaration
des
Hintergrunds An allen Tabellenelementen.
ist möglich
an:
An allen Tabellenelementen.
Darstellung
des
Rahmens an
leeren
Zellen:
Von Eigenschaft empty-cells
abhängig (nicht unterstützt durch IE/Win
bis Version 6). IE/Win 6 stellt Rahmen von Trifft nicht zu bzw. keine Probleme.
leeren Zellen generell nicht dar. Abhilfe
durch Eintrag von &nbsp;. In IE 7 gelöst.
Seite 24
CSS Kurs
Abstände
zwischen
Zellen:
Von Eigenschaft border-spacing
abhängig, nicht unterstützt durch IE/Win 6.
Abhilfe: Attribut cellspacing im
Trifft nicht zu.
Starttag table. In IE 7 gelöst.
Reihenfolge
der
Abhängig von den Tabellenelementen.
Prioritäten:
Genau aufgeschlüsselt in der nächsten
Tabelle
Quelle: http://www.thestyleworks.de/basics/tables.shtml#border-rendering
Die Abstände zwischen den Zellen werden mit border-spacing festgelegt, das dem cellspacing
entspricht.
In gleicher Weise ersetzt padding das bisherige cellpadding im HTML-Code..
6.4.3. Ausrichtung
6.4.3.1.Horizontal
Deklarationen
marginleft
width
Ergebnis
margin-right
Ausrichtung der
Tabelle
Breite der Tabelle
0
xx Pixel
0
Zeilenanfang
xx Pixel
0
xx Pixel
auto
links
xx Pixel
auto
xx Pixel
0
rechts
xx Pixel
auto
xx Pixel
auto
mittig
xx Pixels
auto
auto
auto
mittig
Abhängig vom Inhalt
0
0
0
Zeilenanfang
Abhängig vom Inhalt
Breite entspricht der Breite des
umschließenden Blocks bzw. des Bildschirms.
Quelle: http://www.thestyleworks.de/tut-art/layout_table.shtml
0
100%
0
Seite 25
CSS Kurs
6.4.3.2. Vertikal vertical-align
Diese Eigenschaft beeinflusst die vertikale Positionierung von Inline-Elementen (img, span)
innerhalb von Textzeilen und Tabellenzellen. Der Wert baseline ist voreingestellt.
Erlaubte Werte von 'vertical-align'
baseline | sub | super | top | text-top | middle | bottom |
text-bottom | <percentage> | <length> | inherit
Innerhalb von Tabellen sind nur vier Schlüsselworte definiert. Diese erhalten hier eine vom
Fließtext abweichende Bedeutung.
baseline
Die Basislinie einer Zellenreihe ist die Basislinie der ersten Textzeile in der ersten Zelle.
Wenn der Text in einer anderen Zelle der Reihe größer ist, dann wird oberhalb des
Textes der ersten Zelle entsprechend viel padding addiert. Falls in einer Zelle kein Text
vorhanden ist, erfolgt die Ausrichtung nach der Basislinie eines anderen vorhandenen
Elementes. Die Basislinie von leeren Zellen ist bottom.
bottom
Bringt die Unterkante der letzten Textzeile mit der Unterkante der Tabellenzelle zur
Deckung.
middle
Bringt die vertikale Mitte der Textzeilen mit der vertikalen Mitte der Tabellenzelle zur
Deckung.
top
Bringt die Oberkante der ersten Textzeile mit der Oberkante der Tabellenzelle zur
Deckung.
sub, super, text-top, text-bottom
Diese Werte haben innerhalb von Tabellenzellen keinerlei Wirkung, es sei denn, sie
treten innerhalb eines Blockelementes auf, das innerhalb einer Tabellenzelle plaziert ist.
<percentage>
Prozentwerte, die sich auf die Zeilenhöhe beziehen. Positive Werte heben die Basislinie des
Textes an, negative senken sie ab.
<length>
Eine absolute oder relative Längenangabe. Positive Werte heben die Basislinie des Textes an,
negative senken sie ab.
inherit
Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement
annimmt.
Seite 26
CSS Kurs
7. Positionierungen
7. 1. position
7.1.1 static
Dies ist die Standardpositionierung. Sie muss nicht gesondert angegeben werden.
<div id="eins">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="zwei">
<p>&nbsp;</p>
<p>&nbsp;</p></div>
<div id="drei">
<p>&nbsp;</p>
<p>&nbsp;</p></div>
<div id="vier">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
/* CSS Document */
#eins{
border:#0033FF 3px solid;
}
#zwei {
border:#0033FF 3px solid;
}
#drei {
border:#0033FF 3px solid;
}
#vier {
border:#0033FF 3px solid;
}
7.1.2. relative
Das relative bezieht sich auf die normale Position. Dabei wird das Element durch die Werte top,
bottom, left oder right relativ zu seiner Ursprungsposition verschoben.
Die veränderte CSS-Formatierung bewirkt hier eine deutliche Änderung, allerdings nur bei einem
Element. Alle anderen bleiben an ihrem Platz, als ob der zweite Block nicht um 45 Pixel nach oben
verschoben worden wäre.
/* CSS Document */
#eins{
border:#0033FF 3px solid;
margin: 10px;
}
#zwei {
Seite 27
CSS Kurs
border:#0033FF 3px dotted;
margin: 10px;
position:relative;
top:-45px;
}
#drei {
border:#0033FF 3px dashed;
margin: 10px;
}
#vier {
border:#0033FF 3px double;
margin: 10px;
}
7.1.3. absolute
Absolut positionierte Elemente haben einen festen Platz „über“ den anderen Elemente, d.h. diese
verhalten sich, als ob das absolut positionierte Element nicht da wäre.
CSS-Code:
#zwei {
border:#0033FF 3px dotted;
margin: 10px;
position:absolute;
top:45px;
left:150px;
}
7.1.4. fixed
Fixe Positionierungen beziehen sich auf das Browserfenster, d.h. dieses Element bleibt beim
Scrollen immer auf seiner Position.
Seite 28
CSS Kurs
CSS-Code:
#zwei {
border:#0033FF 3px dotted;
margin: 10px;
position:fixed;
top:45px;
left:150px;
}
7.2. float
Floaten, gleiten oder schweben lassen, ist eine gute Möglichkeit, Block-Elemente nebeneinander zu
positionieren. Die Elemente werden aus dem normalen Fluss genommen.
float:right bewegt das Element so weit wie möglich nach rechts. Das folgende Element schiebt sich
links daneben. Ohne Angaben für die Breite (width) würden sich die Elemente überlagern.
/* CSS Document */
#eins{
border:#0033FF 3px solid;
margin: 10px;
float:right;
height: 100px;
width: 20%;
}
#zwei {
border:#0033FF 3px solid;
Hier wird der oberste Kasten
mit float:right angehoben und
ganz nach rechts verschoben.
Die anderen Kästen verhalten
sich, als wären dieser gefloatete
Kasten nicht vorhanden.
Lässt man die Größenangaben
weg, legt sich der zweite
Kasten einfach unter den
ersten.
Seite 29
CSS Kurs
margin: 10px;
height: 100px;
width:75%;
}
#drei {
border:#0033FF 3px dashed;
margin: 10px;
}
#vier {
border:#0033FF 3px double;
margin: 10px;
}
Der Befehl clear:both (oder left bzw. right) beendet alle float-Befehle an dieser Stelle. Dies ist z.B.
auf der Schulhomepage so gemacht worden, um den Seitenfuß unbeeinflusst gestalten zu können.
7.3. display
Hiermit wird der Anzeigemodus gesteuert.
Am bekanntesten sind sicherlich block für die Anzeige als Blockelement und inline für die Anzeige
als Inline-Element. So lassen sich die Anzeigemodi z.B. elegant wechseln, wenn z.B. Bilder als
inline-Elemente dargestellt werden sollen.
Weiterhin gibt es
list-item – Verhalten wie ein Listenelement
inline-block – Verhalten nach außen wie ein Inline-Element, nach innen wie ein BlockElement, also mit width, height und margin.
run-in – Einsatz nur im Zusammenhang mit :before und :after
Das Element wird an den Anfang der ersten Zeile des Folgeelements
eingeschoben, wenn dieses nicht mit float oder position:absolute positioniert
wurde.
table – Element wird als Tabelle behandelt, als Blockelement
inline-table – Element wird als Tabelle behandelt, bleibt aber im Textfluss.
Interessant ist display:none, denn damit kann für Anzeigegeräte ohne CSS ein Informationstext
eingestellt werden, den CSS-fähige Geräte nicht anzeigen.
Seite 30
CSS Kurs
8. media
Ursprünglich wird eine CSS-Datei so in eine Webseite eingebunden:
<link rel="stylesheet" href= "table_02.css" type="text/css" />
Das Stylesheet kann aber auch angepasst an das Ausgabemedium eingebunden werden.
Über
<link rel="stylesheet" href= "table_02.css" type="text/css" media=“screen“ />
wird festgelegt, dass das Stylesheet nur für Bildschirme gilt. Ein Ausdruck würde dann aussehen
wie die Seite ohne Stylesheet.
Möglich ist auch die Einbindung mehrerer CSS-Dateien, z.B. eine für den Bildschirm und eine für
die Druckausgabe mittels media=“print“. Sind Inhalte vorhersehbar für den Ausdruck gedacht,
sollte diese Möglichkeit genutzt werden.
Seite 31
CSS Kurs
9. Kaskade
Im Folgenden wird die Verarbeitung der CSS-Befehle dargestellt, die CSS den Namen gab. Nach
genau festgelegten Regeln werden die Befehle analysiert und umgesetzt.
Seite 32
CSS Kurs
Literatur:
(mit ansteigendem Schwierigkeitsgrad)
Peter Müller: Little Boxes ISBN 3-8334-4869-5
Kai Laborenz: CSS-Praxis ISBN 3-89842-577-0
Björn Seibert / Manuela Hoffmann: Professionelles Webdesign mit (X)HTML und CSS ISBN 389842-735-8
Dan Cederholm: Bulletproof Webdesign ISBN 3-8273-2343-6
Eric Meyer: Eric Meyer's CSS ISBN 3-8273-2296-0
Dave Shea / Molly E. Holzschlag: Zen und die Kunst des CSS-Designs ISBN 3-8273-2276-6
Webseiten:
http://www.selfhtml.org/
http://www.xhtml-und-css.de/
http://www.thestyleworks.de/index.shtml
http://infotekten.de/
http://www.csszengarden.com/
Anmerkung:
Der CSS ZEN Garden ist eine Seite, auf der mit immer dem gleichen HTML-Code verschiedenste
Designs durch Designer aus aller Welt gestaltet werden. Hier drei Beispiele:
Seite 33
Document
Kategorie
Internet
Seitenansichten
12
Dateigröße
1 119 KB
Tags
1/--Seiten
melden