Website Workshop Teil 5

Website Workshop Teil 5

Das Cascading Style Sheet

Cascading Style Sheet (CSS) sind ein sehr mächtiges Werkzeug. Im vierten Teil haben wir uns den Grundaufbau der HTML-Seite aufgebaut. Im <head> Bereich der html Datei haben wir bereits eine Anweisung für ein externes Stylesheet definiert.

<link rel="stylesheet" href="/nochkein.css" type="text/css" />


Bei href steht, dass als Stylesheet Datei nochkein.css benutzt werden soll. Ich hatte extra für die Demo-Vorschauseiten einen Dateinamen gewählt der nicht vorhanden ist. Jetzt ersetzen wir nochkein.css durch style.css. D.h. wir legen uns auch gleich eine normale Textdatei mit dem Dateinamen style.css an. Diese legen wir ins Hauptverzeichnis wo auch die index.html Datei zu finden ist.

In die style.css schreiben wir nun unsere erste Anweisung rein.

* {
margin: 0;
padding: 0;
border: none;
}


Die Browser haben teilweise unterschiedliche Standardeinstellungen, wie die html Tags dargestellt werden. * ist der sog. Universalselektor. Damit setzen wir den äußeren Abstand (margin), den inneren Abstand (padding) auf Null und definieren das Elemente keinen Rand haben sollen (border: none;). Später ergänzen wir für die einzelnen Elemente wieder die konkreten margins und paddings.

Hier noch eine Einstellung für den body Tag:

body {
color: #000;
background: url(/images/bg.jpg) repeat;
font-size: 1.0em;
font-family: Verdana, Arial, sans-serif;
}


Textfarbe ist schwarz (color: #000). Farben werden über eine hexadezimale Farbanweisung definiert. Der Farbwert für schwarz ist z.B. #000000. Bei solchen gleichen Zahlen, kann man auch auf #000 abkürzen. Weiß ist z.B. #ffffff, ein helles grau #cccccc.

Über fontsize wird die Schriftgröße definiert. 1.0em bedeutet hierbei 100% der Browserstandard-Schriftgröße. 0.8em macht sie kleiner (80%), 1,2em größer (120%). Als Hintergrund wird eine Grafik benutzt (background: url(images/bg.jpg) repeat;), die wiederholt gekachelt wird und so den Eindruck einer größen Fläche ergibt.

Als Schriftart wird Verdana benutzt. Soltte Verdana auf dem PC des Users nicht vorhanden sein wird Arial benutzt. Ist diese auch nicht vorhanden, wird eine serifenlose (sans-serif) benutzt.

Widmen wir uns nun den Containern:

Der obere Balken ist toprow. Da wir in der index.html ihm eine ID zugewiesen haben, fängt die Anweisung für toprow mit einen # an.
Gefolgt von dem Namen mit der Klammer {, anschließend die Formatanweisung und am Ende wieder mit der Klammer-Zu } schließen.
Klassen die man öfters benutzen darf, werden mit einem Punkt geschrieben, Beispiel .meineklasse { ... }

#toprow {
width: 100%;
height: 120px;
background: #000;
text-align: center;
}

#middlerow {
width: 100%;
background: #fff;
text-align: center;
padding: 30px 0 0 0;
}

#bottomrow {
width: 100%;
height: 100px;
margin-bottom: 120px;
background: #000;
text-align: center;
border-bottom: 4px solid #191919;
}


width:100%; breitet den Container toprow auf die gesamte Browserbreite aus. Er ist 120px hoch (height: 120px;), hat eine schwarze Hintergrundfarbe (background: #000;) und alles was in dem Container enthalten ist, wird zentriert. Eine Besonderheit zu den Abständen, margin und padding. Die vier Zahlenkombinationen geben die Abstände für die vier Seiten des Containers, der Box an. Reihenfolge: oben rechts unten links.  

padding: 30px 0 0 0; definiert, das der innere Abstand oben 30px beträgt. Die restlichen Abstände für rechts, unten, links sind auf Null = 0 gesetzt. Alternativ kann man auch padding-top: 30px; schreiben. Wie auch padding-bottom, padding-left, padding-right.

Setzen wir nun diese 5 Anweisungen, Universalselektor *, body, #toprow, #middlerow und #bottomrow in die style.css ein.

Demo 3, so sieht es jetzt im Browser aus.

Spätestens jetzt sollte  klar werden,

wie mächtig CSS ist und wie man das komplette Aussehen der Website dadurch verändern kann. Natürlich könnte man auch die CSS-Anweisungen in die html Datei reinschreiben. Dies hat jedoch den gravierenden Nachteil, das man bei nachträglichen Änderungen, jede html Datei angepasst werden muss. Stellt Euch vor, man hätte 30 html Dateien. Dann müsste man alle 30 anpacken und editieren. So mache ich dies nur in einer einzigen, der style.css und es wirkt sich automatisch auf Alle aus.

Der komplette Code der style.css

Nun möchte ich meine Erklärungen zu Stylesheets etwas abkürzen. Man könnte darüber noch ganze Bücher schreiben und würde auch den Rahmen dieses Workshops sprengen. Wer mehr erfahren möchte, dem bietet www.css4you.de eine gute Nachschlagehilfe, Referenz. Weiteres gute Nachschlagewerk: Selfhtml

Hier daher der komplette Code der style.css:

* {
margin: 0;
padding: 0;
border: none;
}

body {
color: #000;
background: url(/images/bg.jpg) repeat;
font-size: 1.0em;
font-family: Verdana, Arial, sans-serif;
}

p {
font-size: 0.8em;
margin-bottom: 10px;
}

.logo {
margin-left: 30px;
}

h1 {
color: #ffffff;
font-size: 1.8em;
font-family: "Times New Roman", Times, serif;
font-style: italic;
position: absolute; top: 25px; left: 165px;
}

h1 .gray {
color: #ccc;
font-size: 1.2em;
}

h1 .lightred {
color: #eb4f39;
font-size: 0.85em;
}

h2 {
color: #999;
font-size: 0.9em;
font-family: verdana, arial, non-serif;
position: absolute; top: 65px; left: 165px;
font-weight: lighter;
}

h3 {
font-size: 1.2em;
font-family: "Times New Roman", Times, serif;
font-style: italic;
font-weight: bold;
letter-spacing: 1px;
line-height: 1.4em;
margin-bottom: 15px;  
border-bottom: 1px solid #ccc;
}

h4 {
color: maroon;
font-size: 1.1em;
font-family: verdana, arial, non-serif;
font-weight: normal;
padding: 0 0 0 6px;
margin: 15px 0 10px 0;
border-left: 4px solid #ccc;
}

#content a {
color: maroon;
font-weight: bold;
text-decoration: none;
}

#content a:hover {
color: maroon;
text-decoration: underline;
}

#footer a {
color: #999;
text-decoration: none;
}

#footer a:hover {
color: #fff;
text-decoration: none;
}

#menue {
width: 648px;
margin-bottom: 20px;  
}

#menue ul li {
display: inline;
font-size: 1.2em;
font-family: "Times New Roman", Times, serif;
font-style: italic;
font-weight: bold;
letter-spacing: 1px;
}

#menue li a:link {
padding: 2px 6px;  
text-decoration: none;
color: #000;
border-left: 1px solid #fff;
}

#menue li a:active {
padding: 2px 6px;  
text-decoration: none;
color: #000;
border-left: 1px solid #fff;
}

#menue li a:visited {
padding: 2px 6px;  
text-decoration: none;
color: #000;
border-left: 1px solid #fff;
}

#menue li a:hover {
padding: 2px 6px;   
text-decoration: none;
color: maroon;
border-left: 1px solid #aaa;
}

#toprow {
width: 100%;
height: 120px;
background: #000;
text-align: center;
}

#middlerow {
width: 100%;
background: #fff;
text-align: center;
padding: 30px 0 0 0;
}

#bottomrow {
width: 100%;
height: 100px;
margin-bottom: 120px;
background: #000;
text-align: center;
border-bottom: 4px solid #191919;
}

#header {
width: 930px;
height: 120px;
margin: 0 auto 0 auto;
text-align: left;
position: relative;
}

#content {
width: 930px;
height: auto;
text-align: center;
margin: 0 auto 0 auto;
}

#leftcol {
width: 650px;
height: auto;
text-align: left;
float: left;
padding-bottom: 15px;
}

#rightcol {
width: 220px;
height: 468px;
margin: 0 0 25px 15px;
padding: 0 15px 0 15px;
border-left: 1px solid #ccc;
text-align: left;
float: left;
}

#footer {
width: 930px;
height: 100px;
margin: 0 auto 0 auto;
padding-top: 20px;
text-align: left;
color: #999;
font-size: 0.8em;
}

#footer .webicons{
width: 200px;
margin: 0 30px 0 60px;
float: right;
}

.clearer {
clear: both;
}

#content a img {
padding:5px;
margin: 0 5px 5px 0;
border: 1px solid #ccc;
background: #fff;
}

#content a img:hover {
padding:5px;
margin: 0 5px 5px 0;
border: 1px solid #888;
background: #ddd;
}

.galleryCont {
display:none;
}



Dies sieht vielleicht jetzt alles sehr einfach aus. In der Realität tastet man sich jedoch Schritt für Schritt an die Sache ran. Die Positionierung der Grafiken habe ich im Prinzip durch geschicktes setzen von margins vorgenommen. Auch kann man über border Linien verwirklichen, dass braucht man nicht mit einer Grafik verwirklichen. Weiteres Manko sind die unterschiedlichen Browser Kompatiblitäten zum sog. W3C-Standard.  

Dieses W3C Commitee hat die CSS Standards festgelegt. Leider hat sich in der Vergangenheit besonders Microsoft mit dem IE nicht an diese Standards gehalten. Gerade der alte IE 6 treibt den Webentwickler in den Wahnsinn. Die Mozilla-Browser, z.B. der Firefox hält sich an diese Standards. D.h. testet man das Aussehen mit dem Firefox und sieht es im IE mal wieder anders aus, darf die Schuldfrage ruhig in Richtung Redmond (MS) gestellt werden.

Demo 4, so sieht es jetzt im Browser als fast fertige Live Seite aus.

Im sechsten Teil, werden wir uns der Portfolio, Fotogalerie Seite widmen.

 
Diese Website benutzt Cookies. Wenn du die Website weiter nutzt, gehen wir von deinem Einverständnis aus. Mehr Information findest du in unserer Datenschutzerklärung.
OK