back


Arbeiten mit Stilvorlagen / CSS

vorlage_01


› download vorlage_01.zip


Ordnerstruktur der Vorlage:


HTML-Files:

seite1.html

seite2.html

seite3.html


CSS-Files:

css/reset.css -> globaler reset, wichtig für Browserkompatibilität

css/style.css -> globale CSS Stile für Inhalte von Vorlage


Grundsätzlicher Aufbau HTML Dokument (z.B. “seite1.html”):


1.) Doctype:


Im Doctype legen wir XHTML 1.0 Transitional fest.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


2.) Header:


Im Header können Meta-Angaben (Autor, Beschreibung, Stichwörter) gemacht werden. Darauf werden wir dann noch später im Detail eingehen. Auch externe CSS oder JavaScript Files sollten hier eingebunden werden. Über die Meta-Angabe “http-equiv=”Content-Type” wird das “charset” auf “UTF-8″ gestellt. Dadurch umgehen wir z.B. Probleme in der Darstellung von Umlauten.


<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Computergundkurs</title>
<!-- externes css -->
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>


2.) Body:


In den Body kommt der eigentliche Inhalte der Webseite. In unserem Fall eine einfache Navigation und ein Bereich für Inhalte.


<body>
   
    <!-- navigation -->
    <div id="navigation">
        <!-- menüpunkte als unordered list -->
        <ul>
            <li><a href="seite1.html" title="seite 1">Seite 1</a></li>
            <li><a href="seite2.html" title="seite 1">Seite 2</a></li>
            <li><a href="seite3.html" title="seite 1">Seite 3</a></li>
        </ul>
    </div>
   
    <!-- inhalt -->
    <div id="content">
        <!-- Überschrift h1 -->
        <h1>Header1</h1>
        <!-- paragraph -->
        <p>
            Phasellus tincidunt purus nec nunc. Donec et lectus sit.
        </p>
    </div>

</body>


Aufbau “style.css”:

CSS steht für Cascading Stylesheets: Der zweite Teil des Namens lässt sich einfach und treffend mit Formatvorlagen übersetzen. Der erste Teil heisst so viel wie >kaskadierend<. Er bezieht sich darauf, dass auf einzelne Elemente im Dokument unterschiedliche Formatierungsregeln wirken. Das Zusammenspiel dieser Formatierungen wird mit dem Begriff >kaskadierend< beschrieben.


CSS dient zur Trennung von Inhalt (html) und Form (CSS).
Durch CSS kann der Inhalt einer Seite von der eigentlichen Präsentation getrennt werden. Dadurch sind Änderungen an der Gestaltung möglich, ohne dass der (X)HTML-Code modifiziert werden muss.


Beim “body” werde Stile festgelegt, die für den ganzen Inhalt gelten sollen (z.B. Schriftart, Schriftfarbe, Hintergrundfarbe etc.).


/* body */
body {
      font-family: "Times New Roman", Times, serif;
    color: #000000;
}


Hier werden z.B. die Schrifgrößen für die einzelnen Header (h1,h2,h3,h4,h5,h6) festgelegt. Der Vollständigkeits halber sind hier alle Header Typen aufgelistet. Es können aber auch zusätzlich Stile wie Schriftfarbe, Hintergrundfarbe etc. definiert werden.


/* headers */
h1 {
    font-size: 72px;
}
h2 {
    font-size: 56px;
}
h3 {
    font-size: 40px;
}
h4 {
    font-size: 32px;
}
h5 {
    font-size: 24px;
}
h6 {
    font-size: 16px;
}


Hier werden die Stile für Paragraphen festgelegt (z.B. Schriftgröße, Zeilenabstand etc.).


/* paragraph */
p {
    font-size: 14px;
    line-height: 20px;
}


Festlegen der Stile für die Links. “a:hover” definiert den Stil beim Rollover eines Links mit der Maus.


/* link design */
a {
    color: #FF0090;
}
a:hover {
    color: #ffffff;
    background-color: #FF0090;
}


In unsere Vorgabe arbeiten wir mit absoluten <div> containern. Dies hat den Vorteil das die einzelnen Grundelemente der Seite (Navigation, Inhalt) pixelgenau positioniert werden können.


/* -----------------------------------------------------------------------

    container settings

----------------------------------------------------------------------- */
#navigation {
    position: absolute;
    top: 32px;
    left: 64px;
}
#navigation ul li{
	list-style-type: none;
}
#content {
    position: absolute;
    top: 64px;
    left: 64px;
    width: 720px;
}


Im HTML Code wird über eine ID der Container benannt:


<div id="content"></div>


Um dann später im CSS Code wieder über das “#” Attribut angesprochen zu werden.


#content {
    position: absolute;
    top: 64px;
    left: 64px;
    width: 720px;
}


In der Navigation arbeiten wir mit einer sogenannten “unordered list”. Die Vorteile werden dann später aufgezeigt. Mit dem Befehl “list-style-type:none” wird verhindert, dass vor jedem Link ein Punkt steht.


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


Eine gute Übersicht über die wichtigsten CSS Befehle findet man hier:

http://www.html-seminar.de/css-definitionen-uebersicht.htm



vorlage_02


› download vorlage_02.zip


Die HTML-Files enstprechen der von “vorlage_01″. Um die Menüpunkte der Naviation horizontal zu platzieren wird bei “#navigation ul li” der Stil “float:left” und über “margin-right: 16px” ein Abstand zwischen den Elementen definiert. Außerdem ist die Position des Inhalt Containers über die Stile “top” und “left” so festgelegt, dass oben die Navigation und unten der Inhalt steht.


#navigation ul li{
    list-style-type: none;
    float: left; /* die elemente sollen nebeneinander stehen */
    margin-right: 16px; /* abstand rechts zum nächsten elemen */
}
#content {
    position: absolute;
    top: 64px;
    left: 64px;
    width: 720px;
}



vorlage_03


› download vorlage_03.zip


Die HTML-Files enstprechen der von “vorlage_01″. Über das Setzen neuer Sile für “#navigation a” und “#navigation a:hover” werden neue Linkfarben für die Navigation festgelegt. Wir sehen, dass “#navigaton a” nichts anders bedeutet, als dass diese Stile sich nur auf “<a>” Elemente innerhalb des Navigations Containers beziehen. Wir werden zwar später noch lernen, auch mit eigenen Klassen zu arbeiten, aber oftmals reicht es aus Stile in den einzelnen Containern gezielt anzusprechen.


#navigation a {
    color: #000000;
    font-size: 32px;
}
#navigation a:hover {
    color: #ffffff;
    background-color: #000000;
}