Dies ist eigentlich nichts großartiges aber ich für es für euch mal mit auf. Ihr könnt natürlich geordnete Listen und ungeordnete Listen beliebig verschachteln, so lange ihr die Synthax einhaltet. Ich denke mal hier ist sehen besser als erklären:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<ul>
<li><a href="index.htm" title="Startseite von CSS-Roots">Startseite</a></li>
<li><a href="about.htm" title="N&auml;here Informationen &uuml;ber CSS-Roots">About us</a></li>
<li><a href="pseudo.htm" title="Pseudoseite">Pseudoseite 1</a></li>
<li><a href="pseudo.htm" title="Pseudoseite">Pseudoseite 2</a></li>
<li><a href="pseudo.htm" title="Pseudoseite">Pseudoseite 3</a></li>
<li><a href="pseudo.htm" title="Pseudoseite">Pseudoseite 4</a></li>
<li><a href="pseudo.htm" title="Pseudoseite">Pseudoseite mit Unterthemen</a></li>
<ol>
<li><a href="pseudo.htm" title="Pseudoseite">Unterthema 1</a></li>
<li><a href="pseudo.htm" title="Pseudoseite">Unterthema 2</a></li>
</ol>
<li><a href="pseudo.htm" title="Pseudoseite">Pseudoseite 5</a></li>
</ul>

Das ganze könnt ihr natürlich auch anders herum machen. Im übrigen sieht das Ergebnis dann so aus:

Ich denke mal die meisten von euch wird das Aufzählungszeichen selbst stören, das ist aber kein Problem da man dieses ganz einfach per Stylesheet ausblenden lassen kann. Das ganze geht wie folgt:

 #ul 
{   list-style-type: none; }
 
#li 
{  list-style-type: none; }

Durch diese list-style-Aussage gebt ihr dem Browser an dass er die Aufzählungszeichen im gesamten Dokument nicht anzeigen soll, ihr könnt dies natürlich auch nur für einen bestimmten div festlegen, wie zum Beispiel “navi”. Das sieht dann so aus:

 #nav ul 
{   list-style-type: none; }
 
#nav li 
{   list-style-type: none;}

Jetzt seit ihr wahrscheinlich soweit dass ihr eure Listen etwas ansprechender formatieren möchtet. Das ist kein Problem denn ihr könnt das gesamte Aussehen eurer Listen über den Stylesheet definieren. Erstmal der Quellcode:

 #nav ul {
   list-style-type: none; /*Entfernen der Aufzaehlungen*/
   margin:	0; /*Abstaende auf Null setzen*/
   padding:	0; /*Abstaende auf Null setzen*/
   }
#nav li {
 
   margin: 5px; /*Außenabstand auf allen Seiten auf 5px setzen*/
   text-align: center; /*Text auf zentriert einstellen*/
   list-style-type: none; /*Entfernen der Aufzaehlungen*/
}
#nav li a  /*Hier werden die Verlinkungen eurer Listen definiert*/
{
   text-decoration: none;  /*Entfernen aller formatierungen wie unterstrich etc.*/
   color:#3d3d3d; /*Festlegen der Linkfarbe*/
   margin: 5px;/*Außenabstand auf allen Seiten auf 5px setzen*/
}

So ich denke durch die Kommentierung sollte sich der Code-Teil selbst erklären.
Das Ergebnis sieht dann so aus:

Für die meisten eurer Projekte wird der Hintergrund eurer Homepage eine wichtige Rolle einnehmen. Ihr habt hier verschiedene Möglichkeiten und nun die Qual der Wahl, ob ihr einfarbige hintergründe einbinden möchtet, oder ein Hintergrundbild einsetzen wollt. Auch hier möchte ich euch nichts vorenthalten und zeige euch nun beide Möglichkeiten.

Für einfarbige Hintergründe legt ihr am einfachsten im Stylesheet die Hintergrundfarbe des Bodys fest.

1

background-color: #808080;

Wenn ihr allerdings ein Hintergrundbild einbauen möchtet, dann könnt ihr es so machen:

1
2
3

{ 
background-image: url(images/banner.jpg);
}

Es ist allerdings empfehlenswert ihr ein weiteres Element einzubinden, damit sich das Hintergrundbild nicht unendlich wiederholt, denn wenn ihr zum Beispiel euer hintergrundbild auf 1024px breite ausgelegt habt, dann wird es sich ab 1025px stetig wiederholten was nicht wirklich schön aussieht.
Also macht einfach einen kleinen Trick:

1
2
3
4

{ 
background-image: url(images/banner.jpg); 
background-repeat:no-repeat;
}

Hierdurch verhindert ihr genau diesen Effekt. Wenn ihr möchtet könnt ihr auch seperat auswählen ob sich das Bild nur horizontal wiederholen soll oder vertikal wiederholen soll, dann nutzt ihr folgenden Funktion:

1
2
3
4

{ 
background-image: url(images/banner.jpg); 
background-repeat:repeat-x;
}

Diese Funktion dient der wiederholung auf der X-Achse also horizontal, wenn ihr es Vertikal auf der Y Achse wiederholen lassen wollt dann ersetzt dass X einfach durch ein Y.

Was bei größeren Projekten meist an Bedeutung gewinnt, ist das kommentieren bestimmter Abschnitte, sowohl im Html-Dokument und im Stylesheet. Der Vorteil beim kommentieren von Dokumenten liegt darin das ihr bestimmte wichtige Abschnitte kenntlich machen könnt, oder knifflige Code-passagen so zu kommentieren, dass ihr deren Funktion auch wenn ihr das Projekt später wieder aufnehmt einfach erkennt und wieder bearbeiten könnt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS-Roots Headervorlage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="de" />
<meta name="language" content="de" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="robots" content="index,follow" />
<meta name="description" content="Hallo Welt" />
<meta name="keywords" content="Keyword 1; Keyword 2;Keyword 3;Keyword 4;" />
<meta name="copyright" content="CSS-Roots 2008" />
<meta name="author" content="CSS-Roots" />
<meta http-equiv="imagetoolbar"        content="no" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="/images/favicon.ico" rel="icon"/>
</head>
     <body>
      <div id="banner"></div>  <!--- Dieser Text in den Pfeilen ist ein Kommentar für HTML Dokumente -->
    </body>
</html>

Und hier ein Kommentar für euren Stylesheet

1
2
3
4
5
6
7
8
9
10

 
/*****Dies ist ein Kommentar im Stylesheet******/
#test
{
width:100%;
background: #f3f3f4;
height:112px;
background-image: url(images/greybanner.jpg);
background-repeat:no-repeat;
}

Da wir jetzt einmal die Grundlagen erlernt haben möchte ich euch an dieser Stelle beibringen was ihr alles mit euren Texten auf der Homepage anstellen könnt. Im Prinzip könnt ihr alles machen, was ihr auch in euren Textbearbeitungsprogrammen machen könnt. Fett markierung, unterstreichen und und und. Generell habt ihr die Möglichkeit entweder einzelne Elemente über das Attribut Style direkt in eurer jeweiligen Html-Seite festlegen oder definiert Sie als Klasse im Stylesheet, was ich bevorzuge. Aber der vollständigkeit halber hier eine kleine Anleitung wie es mit dem Style-Attribut funktioniert.

Nebenbei zeige ich euch hier direkt wie ihr Texte unterstreicht.

Da wir jetzt einmal die Grundlagen erlernt haben möchte ich euch an dieser Stelle beibringen was ihr alles mit euren Texten auf der Homepage anstellen könnt. Im Prinzip könnt ihr alles machen, was ihr auch in euren Textbearbeitungsprogrammen machen könnt. Fett markierung, unterstreichen und und und. Generell habt ihr die Möglichkeit entweder einzelne Elemente über das Attribut Style direkt in eurer jeweiligen Html-Seite festlegen oder definiert Sie als Klasse im Stylesheet, was ich bevorzuge. Aber der vollständigkeit halber hier eine kleine Anleitung wie es mit dem Style-Attribut funktioniert.

Nebenbei zeige ich euch hier direkt wie ihr Texte unterstreicht.

 
<!-- Klassenerzeugung innerhalb eines Dokumentes -->
<!--
 
    .underline{text-decoration: underline;}
 
-->
 
Dieser Text wird bei euch nun unterstrichen angezeigt

So und jetzt zeige ich es euch nochmal innerhalb des Stylesheets:

.underline{text-decoration: underline;}

Wie ihr seht eigentlich kein großer Unterschied, ausser dass ihr hier die Style Elemente weglasst. Das verwenden dieser Klassen für einen bestimmten Absatz ist auch der selbe wie bei der vorherigen Definition mit den Style Elementen. Also:

 
Dieser Text wird bei euch nun unterstrichen angezeigt

Und schon gehts weiter mit dem nächsten Schritt.

Ich wähle bei meinen Projekten lieber die Definition im Stylesheet, da dies besser ist wenn ihr Formatierungen auf mehreren Seiten anwenden möchtet. Ich werde euch im Anschluss daher nur noch die Stylesheetklassen zeigen, wie ihr diese anwendet habt ihr ja gerade gelernt.

Texte unterstreichen:

.unterstreichen{text-decoration: underline;} /* Text unterstreichen*/
.durchstreichen{text-decoration: line-through;}
.ueberstreichen{text-decoration: line-through;}
.blinken{text-decoration: blink}

Wenn ihr jetzt aber Textelemente Fett markieren möchtet, dann müsst ihr diese einfach mit einem
strong Element markieren oder aber natürlich auch dies im Stylesheet mit einer Klasse festlegen.
Beispielsweise so

.fett {font-weight: bold;}

Für kursive Schrift geht das ganze so:

.kursiv{font-style: italic;}

Natürlich könnt ihr diese Elemente auch kombinieren, so lange ihr nicht wiedersprüchliche dinge einbaut wie zum Beispiel:

font-style: normal ;
font-style: italic;

Bei einer solchen Anweisung ist es so als ob ihr dem Programm versucht zu sagen, siehe nach rechts und nach links zur selben Zeit. Da dies nicht möglich ist, übernimmt das Programm ledeglich den letzten Wert, also in diesem Fall das kursive.

Es gibt einige Leute die, aus mir nicht nachvollziehbaren Gründen Ihre Texte gerne von rechts nach links laufen lassen möchten, also bitte, auch diesem Wunsch kommen wir nach.

Auch dies ist eigentlich nicht schwer, ich erzeuge euch hier mal eine seperate Klasse hierfür, ihr könnt dies aber natürlich auch in jeden Div oder in jede Klasse mit einbauen.

.reverse{direction:rtl;}

Und nein bevor ihr fragt, das hat nichts mit dem Fernsehsender RTL zu tun, das rtl steht für right to left, also für rechts nach links. Mehr steckt auch schon nicht dahinter.

Wenn Ihr es umkehren zum Normalzustand m&ouml:chtet dann sieht das ganze wie folgt aus:

.reverse{direction:ltr;}

Wenn Ihr Interesse daran habt bestimmte Textpassagen mit einem anderen Zeichenabstand als einem anderen zu definieren so bietet sich hier die Möglichkeit dies über CSS exakt zu steuern.

.schmalerabstand {letter-spacing: -2px;}
.nochschmalabernichtnormal{letter-spacing: -1px;}
.schonbreiterabernichtganzbreit{letter-spacing: 1px;}
.breiterabstand{letter-spacing: 2px;}

Auch hier wiederhole ich mich: entweder integriert ihr es direkt ins Html-Dokument oder bindet es in eine bestehende CSS Klasse ein oder erzeugt eine hierfür.

Jetzt kommt das wahrscheinlich mit wichtigste Thema der Textformatierung, die Ausrichtung des Textes. Ob ihr euren Text nun zentrieren möchtet, oder lieber linksbündig oder rechtsbündig, oder sogar *gefährlich* Blocksatz schreiben wollt, das könnt ihr alles mit einem Element definieren das unterschiedliche Attribute hierfür bereitstellt.  Dieses Element nennt sich: text-align und so wird es angewandt:

text-align: left; /* Ausrichtung nach links */
text-align: right; /* Ausrichtung nach rechts*/
text-align: center; /* Ausrichtung zentriert*/
text-align: justify; /* Ausrichtung als Blocksatz*/

Damit haben wir die wichtigsten Themen der Textausrichtung angesprochen.