Ich erkläre es dir von Anfang an.
Ein Html Dokument wird mit einem Doctype eingeleitet, damit alle Browser sich gleich verhalten und wissen das jetzt HTML kommt und nicht etwa SVG oder XML oder Kaffeebohnen.
wir schreiben
Jetzt kommt noch das Tag für das Dokument in dem Fall HTML und das wir einen Header haben. Danach müssen wir den Zeichensatz angeben, warum - nun in China, Thailand und auf dem Mars werden andere Schriften verwendet und manche schrieben auch von rechts nach links, doch das gibt es.
Also schreiben wir
HTML:
<!DOCTYPE HTML>
<head>
<meta charset=UTF-8>
Es folgt der Titel der Seite, der uns im Browser oben in der Fensterleiste angezeigt wird.
HTML:
<!DOCTYPE HTML>
<head>
<meta charset=UTF-8>
<title>Seitentitel steht oben im Fenster </title>
Eine Seitenbeschreibung ist zwar nicht notwendig, wird aber von Suchmaschinen gern gesehen und als Ausschnit bei der Suche angezeigt.
Da es nur Vorteile bringt, schreiben wir das mit rein.
HTML:
<!DOCTYPE HTML>
<head>
<meta charset=UTF-8>
<title>Seitentitel steht oben im Fenster </title>
<meta name="description" content="Seitenbeschreibung von dem was man sieht.">
Nun brauchen wir noch Stilangaben für unsere späteren Elemente, damit der Browser nicht für jedes Element sein eigenes Süppchen kocht. Das kann man auslagern und an dieser Stelle den Verweis zur CSS-Datei angeben, aber wir wollen da ja ein wenig mit rumspielen, daher ist es besser alles im Blick zu haben und wir schreiben daher unsere Stilangaben mit ins HTML-Dokument.
HTML:
<!DOCTYPE HTML>
<head>
<meta charset=UTF-8>
<title>Seitentitel steht oben im Fenster </title>
<meta name="description" content="Seitenbeschreibung von dem was man sieht.">
<style type="text/css">
</style>
Das waren jetzt alle Angaben die in den Kopfbereich(Head) kommen, jetzt noch zumachen und mit dem Element
Body weiter machen.
HTML:
<!DOCTYPE HTML>
<head>
<meta charset=UTF-8>
<title>Seitentitel steht oben im Fenster </title>
<meta name="description" content="Seitenbeschreibung von dem was man sieht.">
<style type="text/css">
</style>
</head>
<body>
Alle Elemente die noch offen sind schliessen und wir haben das Grundgerüst unserer Seite.
HTML:
<!DOCTYPE HTML>
<head>
<meta charset=UTF-8>
<title>Seitentitel steht oben im Fenster </title>
<meta name="description" content="Seitenbeschreibung von dem was man sieht.">
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Jetzt wird unsere Seite schon angezeigt und alles was wir in das Element
body schreiben wird auch irgendwie angezeigt. Warum irgendwie, na weil wir ja noch keine Stilangaben angegeben haben und somit der Browser seine Stilangaben verwendet, von denen wir nicht wissen wie sie ausschauen. soll uns auch nicht interessieren, da wir die Browser durch unsere Angaben einfach zwingen werden, das so anzuzeigen wie wir das wünschen. Also los gehts.
Wir wollen erst mal das der Hintergrund einen schönen Farbverlauf bekommt.
Ich nehme mal deinen Farbverlauf. Also rein ins CSS für das Element
body.
HTML:
<!DOCTYPE HTML>
<head>
<meta charset=UTF-8>
<title>Seitentitel steht oben im Fenster </title>
<meta name="description" content="Seitenbeschreibung von dem was man sieht.">
<style type="text/css">
body {
background: -moz-linear-gradient(top, #6A96FF, #12266D); //für Mozilla Firefox
background: -o-linear-gradient(top, #6A96FF, #12266D); //für Opera
background: linear-gradient(top, #6A96FF, #12266D);
background: -webkit-gradient(linear, left top, left bottom, from(#6A96FF), to(#12266D));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6A96FF', endColorstr='#12266D');
}
</style>
</head>
<body>
</body>
</html>
Wenn wir uns das jetzt ansehen, stellen wir fest, dass der Verlauf nicht über die ganze Seite geht und noch schlimmer, jeder Browser was anderes anzeigt. Der IE sogar noch einen Abstand von oben.
Das werden wir denen schon noch abgewöhnen, wo kommen wir hin unseren schönen Verlauf so zu verschandeln.
Wir setzen also erstens alle Abstände auf Nullwert, sind ja nur margin(Aussenabstände) und padding(Innenabstände) und zwar für alle Elemente.
Das machen mir mit dem tollen Universalattribut Stern *.
Ausserdem teilen wir den Browsern mit, dass wir den Verlauf gern über die ganze Seite hätten. Also Seitenhöhe 100% sein soll.
HTML:
<!DOCTYPE HTML>
<head>
<meta charset=UTF-8>
<title>Seitentitel steht oben im Fenster </title>
<meta name="description" content="Seitenbeschreibung von dem was man sieht.">
<style type="text/css">
*{
margin:0;
padding:0;
}
body {
height:100%;
background: -moz-linear-gradient(top, #6A96FF, #12266D); //für Mozilla Firefox
background: -o-linear-gradient(top, #6A96FF, #12266D); //für Opera
background: linear-gradient(top, #6A96FF, #12266D);
background: -webkit-gradient(linear, left top, left bottom, from(#6A96FF), to(#12266D));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6A96FF', endColorstr='#12266D');
}
</style>
</head>
<body>
</body>
</html>
Schauen wir uns an wie es aussieht. IE8 hat keine Abstände mehr, zeigt aber immer noch keinen Verlauf über die ganze Seite und der FF, sowie die anderen modernen Browser zeigen jetzt gar nichts mehr an.
Was ist passiert. Nun, wir haben zwar dem Element
body eine Höhe von 100% zugewiesen, jedoch bezieht sich diese auf das Elternelemt. Ja da muss dann also noch was sein. Und das Element, welches das Element
body unter seiner Kontrolle hat ist das Element
html, welches ganz am Anfang unseres Dokumentes steht.
Logische Schlussfolgerung: Das erste Elemt ist das
html und das nächste Tochterelement ist das Element
body.
Das können wir uns zu nutze machen.
Wir verpassen dem Element html aber erst mal die korrekte Höhe von 100%.
HTML:
<!DOCTYPE HTML>
<head>
<meta charset=UTF-8>
<title>Seitentitel steht oben im Fenster </title>
<meta name="description" content="Seitenbeschreibung von dem was man sieht.">
<style type="text/css">
*{
margin:0;
padding:0;
}
html {
height:100%;
}
body {
height:100%;
background: -moz-linear-gradient(top, #6A96FF, #12266D); //für Mozilla Firefox
background: -o-linear-gradient(top, #6A96FF, #12266D); //für Opera
background: linear-gradient(top, #6A96FF, #12266D);
background: -webkit-gradient(linear, left top, left bottom, from(#6A96FF), to(#12266D));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6A96FF', endColorstr='#12266D');
}
</style>
</head>
<body>
</body>
</html>
Jetzt schaut der Verlauf sahne aus, oder.
ENDE
Außerdem sieht man wenn man das in der HTML-Datei macht in Notepad garkeine schönen strukturierten Verfärbungen im css code 