Tutorial CSS
Falls ihr einen Fehler findet, einfach posten, ich hab das gerade in einem durch geschrieben. Kann gut sein, dass ich was Wichtiges vergessen habe, oder dass ihr da überhaupt nicht durchblickt
einfach was sagen ^^
Also ich hab mich mal entschlossen einen kleinen Tutoriel für CSS zu machen.
Ich empfehle euch die Testversion von Top Style runterzuladen, ist aber nicht zwingend notwendig!
http://www.bradsoft.com/download/index.asp
erstens
Wo baut man CSS ein?
Ganz wichtig in den <head> Bereich
also:
<html>
<head>
<title></title>
Also hier
</head>
<body>
</body>
</html>
Wie baut man es ein?
<style type="text/css">
der css style
</style>
also sähe das ganze etwa so aus:
<html>
<head>
<title></title>
<style type="text/css">
der css style
</style>
</head>
<body>
</body>
</html>
Aber ihr stimmt mir sicher zu, wenn ich sage, dass das viel zu unübersichtlich werden kann, wenn man dann da oben im headbereich einen ellenlangen style drinhat.
Deshalb erstellt eine neue Datei, tut dort euren style rein und speichert es zum Beispiel als style.css ab.
Dann müsst ihr nur einen verweis in den headbereich machen, und das sieht dann so aus:
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
so und jetzt zum CSS selber...
Was ist das überhaupt?
In CSS kannst du Schriftgröße, farbe, hintergrund und alles deffinieren, das erspart es dir, es in der Page selber machen, das macht deinen html code um einiges übersichtlicher und ist zu dem valid.
Was bringt mir das?
Stellen wir uns mal vor, du willst deine Homepage umkrempeln, andere schriftart, farbe etc. und was musst du jetzt machen. Es auf jeder einzelnen Seite ändern... ätzend, was?
Wenn du jedoch CSS auf jeder Seite verwendet hast, also die CSS datei, so wie ich es euch empfehle (mit dem verweis im headbereich) müsst ihr nur diese eine Datei ändern. Viel praktischer oder? ^^
Also fangen wir an mit dem wichtigsten.
so könnte eine css datei aussehen (das in den sternchen(*/) ist nur ein kommentar für euch, wenn ihr das kopiert, könnt ihr das entfernen!):
BODY {
color: #E3E1E1; /* deffiniert die textfarbe*/
text-align : center; /* deffiniert die 'textposition'*/
background-image: url(bg.jpg); /* Hintergrundbild*/
font-size:7pt ; /* schriftgröße*/
background-attachment: fixed; /* das der hintergrund fixiert ist, man kann hier auch scroll einsetzen*/
background-position:0px 0px; /* oder auch center, left, right, top, bottom*/
background-color: #000000; /* hintergrundfarbe*/
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #ffffff;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #000000;
}
das wäre das wichtigste, vieleicht werde ich später noch ein paar sachen hinzufügen, wie links oder ähnliches, aber zuerst einmal reicht das.
ihr könnt euch ja noch bei selfhtml umschauen ^^
http://aktuell.de.selfhtml.org/
Falls ihr einen Fehler findet, einfach posten, ich hab das gerade in einem durch geschrieben. Kann gut sein, dass ich was Wichtiges vergessen habe, oder dass ihr da überhaupt nicht durchblickt
einfach was sagen ^^Also ich hab mich mal entschlossen einen kleinen Tutoriel für CSS zu machen.
Ich empfehle euch die Testversion von Top Style runterzuladen, ist aber nicht zwingend notwendig!
http://www.bradsoft.com/download/index.asp
erstens
Wo baut man CSS ein?
Ganz wichtig in den <head> Bereich
also:
<html>
<head>
<title></title>
Also hier
</head>
<body>
</body>
</html>
Wie baut man es ein?
<style type="text/css">
der css style
</style>
also sähe das ganze etwa so aus:
<html>
<head>
<title></title>
<style type="text/css">
der css style
</style>
</head>
<body>
</body>
</html>
Aber ihr stimmt mir sicher zu, wenn ich sage, dass das viel zu unübersichtlich werden kann, wenn man dann da oben im headbereich einen ellenlangen style drinhat.
Deshalb erstellt eine neue Datei, tut dort euren style rein und speichert es zum Beispiel als style.css ab.
Dann müsst ihr nur einen verweis in den headbereich machen, und das sieht dann so aus:
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
so und jetzt zum CSS selber...
Was ist das überhaupt?
In CSS kannst du Schriftgröße, farbe, hintergrund und alles deffinieren, das erspart es dir, es in der Page selber machen, das macht deinen html code um einiges übersichtlicher und ist zu dem valid.
Was bringt mir das?
Stellen wir uns mal vor, du willst deine Homepage umkrempeln, andere schriftart, farbe etc. und was musst du jetzt machen. Es auf jeder einzelnen Seite ändern... ätzend, was?
Wenn du jedoch CSS auf jeder Seite verwendet hast, also die CSS datei, so wie ich es euch empfehle (mit dem verweis im headbereich) müsst ihr nur diese eine Datei ändern. Viel praktischer oder? ^^
Also fangen wir an mit dem wichtigsten.
so könnte eine css datei aussehen (das in den sternchen(*/) ist nur ein kommentar für euch, wenn ihr das kopiert, könnt ihr das entfernen!):
BODY {
color: #E3E1E1; /* deffiniert die textfarbe*/
text-align : center; /* deffiniert die 'textposition'*/
background-image: url(bg.jpg); /* Hintergrundbild*/
font-size:7pt ; /* schriftgröße*/
background-attachment: fixed; /* das der hintergrund fixiert ist, man kann hier auch scroll einsetzen*/
background-position:0px 0px; /* oder auch center, left, right, top, bottom*/
background-color: #000000; /* hintergrundfarbe*/
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #ffffff;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #000000;
}
das wäre das wichtigste, vieleicht werde ich später noch ein paar sachen hinzufügen, wie links oder ähnliches, aber zuerst einmal reicht das.
ihr könnt euch ja noch bei selfhtml umschauen ^^
http://aktuell.de.selfhtml.org/
weil schließlich sollen doch alle seiten im Main erscheinen^^ oder hab ich da jetzt was falsch verstanden?
