Zaiendo Wir sind die Community


Neueste Ankündigungen:
Zaiendo.de ist auf FaceBook und Youtube.

Witz des Tages:
Übern Berg ist es kürzer als wenn Du läufst.

Teilen auf:
Twitter Facebook Stumble Upon Delicious Google

Themabewertung:
  • 1 Bewertung(en) - 5 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
[Tutorial] CSS Anleitung für Beginner
#1
Und weiter geht's, nach langer Zeit, mit dem CSS Tutorial. Vorraussetzung ist Lennarts HTML Tutorial. Wink

CSS - Wat isn dat? CSS ist sozusagen eine "Designsprache" und bietet mehr bzw. bessere Möglichkeiten, um Webseiten zu designen und zu gestalten. Dazu wird der Designcode aus dem eigentlichen HTML-Code rausgenommen und in einen eigenen Abschnitt der HTML-Datei oder gar in eine komplett neue Datei ausgelagert.

Noch was: Das ist mein erstes richtiges Tutorial, deswegen könnt ihr gerne Kritik üben. CSS ist sehr umfangreich und wir werden am Ende scheinbar nichts erreicht haben, wir lagern nur alle Designeinstellungen in einen gesonderten CSS-Bereich aus. Dabei werdet ihr aber den einfachen Umgang mit CSS erlernen. Ich plane das Tutorial zu erweitern, vielleicht mag ja jemand anderes mitmachen. (Zu Lennart schiel Big Grin )
Denn Tutorial schreiben ist vorallem zu komplexen Themen recht schwer.

Als Basis nehme ich die (um des Logos Willen aufgefrischte) HTML-Seite aus Lennarts HTML Tutorial:
Code:
<html>

<head>
<title>Titel der Homepage</title>
</head>

<body bgcolor="#0000FF">

<font color="white" size="7">
<center>Hallo Welt!</center>
</font><br>
<a href="https://www.zaiendo.de">Link</a><br>

<img src="https://www.zaiendo.de/cms/images/font.png" border="0">

</body>

</html>
CSS kommt immer dann ins Spiel, wenn das normale Design nicht gewünscht ist. (Schwarz auf Weiß Wink ) Auf dieser Seite wäre das erste Beispiel die Hintergrundfarbe: <body bgcolor="#0000FF"> wäre es nicht übersichtlicher wenn dort nur <body> stünde? Klar, und genau das werden wir jetzt mit CSS machen:

Den CSS-Code schreiben wir in den Head-Bereich (zwischen <head> und </head>), da CSS kein HTML ist müssen wir dem Browser erstmal unseren Sprachenwechsel mitteilen
Code:
<style type="text/css">

</style>
Eigentlich ist das leicht verständlich: Hier steckt Style drin, vom Typ CSS. Aber da fehlt noch das wichtigste: Die Hintergrundfarbeinstellung.
Diese kofigurieren wir mit der Zeile
Code:
body {background-color: #0000FF;}
Erklärung: Am Anfang steht der so genannte Selektor, es wird ein Element selektiert in unserem Fall der body-Tag, die geschweiften Klammern umfassen die Optionen, welche, jede einzeln, durch Semikolons getrennt werden. Background-color ist recht offensichtlich und sogar leichter verständlich als HTML: Hintergrundfarbe. Anders als bei HTML nutzen wir zum Zuweisen der Eigenschaft keine Gleichzeichen sondern Doppelpunkte, außerdem brauchen wir keine Anführungszeichen.
Gebt den CSS-Code in eurern Stylebereich ein und entfernt nun aus dem <body>-Tag das " bgcolor="#0000FF"". Das steht ja schon im Stylebereich drin. Wink

Jetzt im Browser neuladen... *Trommelwirbel* und wie wir sehen, sehen wir nichts. Jedenfalls keinen Unterschied. Das ist auch gut so, denn das bedeutet, dass dein CSS klappt. Smile Schließlich wollten wir ja erstmal die Styleinformationen aus dem HTML-Code auslagern. Wenn du mir nicht glaubst, kannst du gerne mal an den Farbeinstellungen rumspielen so sollte "#FF0000" einen roten Hintergrund ergeben.

Klappt nicht? So sieht mein Quelltext aus:
Code:
<html>

<head>
<title>Titel der Homepage</title>

<style type="text/css">
body {background-color: #0000FF;}
</style>
</head>

<body>

<font color="white" size="7">
<center>Hallo Welt!</center>
</font><br>
<a href="https://www.zaiendo.de">Link</a><br>

<img src="https://www.zaiendo.de/cms/images/font.png" border="0">

</body>

</html>
Nicht kopieren, abgleichen und Fehler finden. Wink

Die erste Hürde wäre überstanden, weiter geht es nun mit der Auslagerung der anderen Eigenschaften.
So unsere Hintergrundfarbe steht schon im Stylebereich, aber wir haben noch einige andere Einstellungen zu ändern. Wir überspringen jedoch erstmal den "Hallo Welt!"-Schriftzug und machen beim Bilderrand weiter. Dieser steht im <img>-Tag: "border="0""
Was HTML kann, kann CSS schon lange und wir fügen folgende Zeilen Code in unserem Stylebereich hinzu:
Code:
img {border: none;}
Erklärung: Mit img wählen wir sämtliche <img>-Tags im HTML-Code, die Eigenschaft "border" hat genau den selben Namen wie bei HTML, allerdings deaktivieren wir ihn ganz simpel per "none" > Keiner, Nada, Niente, Nix. So werden wir mit nur einem Wort sämtliche ungewollten Ränder los. Pratkisch. Smile
Neuladen und wieder keinen Unterschied feststellen, dann ist alles richtig. Smile

Klappt nicht? Hier ist mein Quelltext:

Code:
<html>

<head>
<title>Titel der Homepage</title>

<style type="text/css">
body {background-color: #0000FF;}
img {border: none;}
</style>
</head>

<body>

<font color="white" size="7">
<center>Hallo Welt!</center>
</font><br>
<a href="https://www.zaiendo.de">Link</a><br>

<img src="https://www.zaiendo.de/cms/images/font.png">

</body>

</html>
Nicht kopieren, abgleichen und Fehler finden. Wink

Ist das nicht ein tolles Tutorial? Ich bringe euch bei, wie man seine Homepage nicht sichtbar verändert, aber viel Zeit verschwendet.
Deswegen mal ein paar Einstellungen für den Rand.
In CSS haben viele Sachen mehrere Eigenschaften, so kann der Rand verschieden dick sein, unterschiedliche Farben haben und auch gestrichelt und gepunktet sein.
Beispiel für einen 2px breiten, gestrichelten weißen Rand:
Code:
img {border-width: 2px; border-style: dashed; border-color: #FFF;}
(#FFF steht für weiß genau wie #FFFFFF, spart aber unnötige Tipparbeit)
Ersetzt den alten img-Code.
Die Eigenschaften: "border-width: 2px" Randbreite beträgt 2 Pixel, "border-style: dashed" die Rahmenart soll gestrichelt sein (dashed engl. für gestrichelt, dotted engl für gepunktet, "solid" sorgt für eine durchgezogene Linie), die color Eingenschaft kennen wir bereits, allerdings vom Hintergrund. Die Verwendung ist gleich.
Das ist ja eine echte Codebombe für so einen ömmeligen kleinen Rahmen, außerdem fällt auf, dass immer ein "border-sonstwas" da steht, könnte man doch eigentlich weglassen oder? Ist ja nur Platzverschwendung. Denken sich vielleicht manche und nunja, genau das "border" sollte man vielleicht nicht weglassen, aber die auf den Bindestrich folgenden Wörter. Das ist eine praktische Eigenschaft von CSS: Man kann die Eigenschaften die eine Einstellung betreffen zusammenfassen:
Code:
img {border: 2px dashed #FFF;}
Wir haben einfach alle Einstellungen der Eigenschaft "border" zugewiesen, das klappt, wie es nach einem Reload der Seite sichbar werden sollte. Es ist übrigens eigentlich egal ob nun "2px dashed #FFF" oder "dashed 2px #FFF" oder irgendeine andere Kombination.

Klappt nicht? Mein Quelltext:
Code:
<html>

<head>
<title>Titel der Homepage</title>

<style type="text/css">
body {background-color: #0000FF;}
img {border: none}
</style>
</head>

<body>

<font color="white" size="7">
<center>Hallo Welt!</center>
</font><br>
<a href="https://www.zaiendo.de">Link</a><br>

<img src="https://www.zaiendo.de/cms/images/font.png">

</body>

</html>
Nicht kopieren, abgleichen und Fehler finden. Wink

Im nächsten Teil werden wir "Hallo Welt" per CSS verschönern.
So "Hallo Welt!" ist an der Reihe. Dazu entfernen wir erstmal alles was diesen Text in Form, Farbe oder Position beeinflusst aus unserem HTML-Code: Der <font>-Tag und der <center>-Tag.
Jetzt muss alles in den CSS-Teil, aber wie? Bisher haben wir immer einen Tag um ein Element im HTML-Code zu identifizieren: <body> und <img>. Aber jetzt wo alle Designtechnischen Tags entfernt wurden, bleibt nichts mehr übrig...
In Lennarts HTML-Tutorial haben wir die <h#>-Tags für Überschriften kennengelernt. z.B. h1. Diese lassen sich nun per CSS verändern, also schreiben wir "<h1>Hallo Welt!</h1>"
Der Text hat sich verändert, hat nun die vom Browser vordefinierten Eigenschaften erhalten, im Stylebereich werden wir nun die alten Einstellungen wiederherstellen.

Code:
h1 {color: #FFF; text-align: center; font-size: xx-large; font-weight: normal;}

Eine weitere Codegranate, aber schwer zu verstehen ist es nicht, da die Namen der Einstellungen ähnlich wie die der HTML-Tags sind:
color: definiert die Vordergrundfarbe, wir brauchen also kein text-color oder font-color, einfach nur "color" Wink

text-align: Gibt die Ausrichtung des betroffenen Textes an, in unserem Fall center - Mitte

font-size: Gibt die größe der Schriftart an. Dies geht bei CSS in vielen verschiedenen Formaten: px (Pixel), in (inches), pt (Points - Punkte), Prozent, em...
Wir nehmen ersteinmal die vordefinierten Größen:

xx-small
x-small
small
medium
large
x-large
xx-large

Da Lennart mal wieder den Extremwert nehmen musste nutzen wir die dementsprechend: xx-large

font-weight: Die Überschriften sind im Browser meist als Fett festgelegt, da wir aber keine fette Überschrift brauchen setzen wir die Eigenschaft auf "normal". font-weight engl. Schriftgewicht, logisch je fetter, desto mehr bringt sie auf die Waage. Wink
Um die Schrift fett zu machen nutzt man font-weight: bold;. Wenn die Schriftart dies Unterstützt kann man mit font-weight: light; die Schrift auch dünner machen. Insgesamt sind neun "Dickheitsgrade" verfügbar: 100,200,300,400,500,600,700,800,900, allerdings müssen diese auch von der Schriftart unterstützt werden.

Ein Druck auf F5 zeigt: Je nach Browser sieht die Überschrift jetzt genauso oder nur ähnlich aus. Bei Opera sollte zum Beispiel kein Unterschied erkennbar sein, Firefox zeigt den Text kleiner an als vorher.
Dies liegt daran, dass die vordefinierten Größen je nach Browser anders konfiguriert sind.
Wir werden deswegen auf die Einheit "em" umsteigen, welche am besten genutzt werden sollten um Schriftgrößen festzulegen. Em sagt dir nichts? Nicht schlimm, 1em entspricht der normalen Textgröße, 2 em der doppelten usw. Diese Einheit geht jedoch nicht von der Standartbrowsertextgröße bzw. Dokumenttextgröße aus, sondern der Größe die dem Text vererbt wurde, dazu aber später mehr.
Wir nehmen einfach mal als Textgröße "3em" das ist schön groß, genau richtig für eine Überschrift. Aber wieder unterscheiden sich die Größen im Browser, warum nur? Ich habe ja schon gesagt, dass 1em der normalen Textgröße entspricht, aber welche ist das? Auf unserer Seite wurde keine definiert, es wird eine vordefinierte vom Browser genutzt und dem Body-Bereich zugewiesen, diese Schriftgröße wird dann weitervererbt, alle Elemente die im Bodytag stehen erhalten diese Größe als Standartgröße vom Vater/Mutter, auch unser <h1>-Tag.
Um nun in allen Browsern das gleiche Bild zu erhalten schreiben wir in unseren Stylepart zu body folgendes mit in die geschweiften Klammern:
font-size: 12pt;
12pt (12 Punkte) entsprechen 16 Pixeln und ist gut leserlich, aber nicht zu groß. Jetzt ist der Link (auf den diese Größe ebenfalls vererbt wurde, da er im Bodybereich steht) in jedem Browser (ja, wirklich jedem. Ich habe es extra nochmal in Opera, Firefox, IE, Safari und Chrome ausprobiert) gleich groß und die Überschrift auch.
Ach nebenbei: Das <br> kann ebenfalls Entfernt werden, da Überschriften mit <h#>-Tags automatisch am Ende einen Zeilenumbruch einfügen.

Klappt nicht? Mein Quelltext:
Code:
<html>
<head>
<title>Titel der Homepage</title>

<style type="text/css">
body {background-color: #0000FF; font-size: 12pt;}
img {border: none}
h1 {color: #FFF; text-align: center; font-size: 3em; font-weight: normal;}
</style>
</head>

<body>
<h1>Hallo Welt!</h1>
<a href="https://www.zaiendo.de">Link</a><br>

<img src="https://www.zaiendo.de/cms/images/font.png">

</body>

</html>
Nicht kopieren, abgleichen und Fehler finden. Wink



Dit wars auch "schon". Ich freue mich über Kritik, Fragen Rückmeldungen etc. Smile
Ich hoffe, dass ich bald dazu komme weitere Lektionen zu schreiben, in denen wir dann mal etwas neues machen.
I'm sorry, Dave. I'm afraid I can't do that.
Antworten
#2
Schöne Arbeit gamer94!

Danke für die Auffrischung meines alten Tutorials Smile

Worauf man noch eingehen sollte wäre das style-Attribut in HTML-Tags, wie hier:
Code:
<p style="color:red;">Text</p>
sowie natürlich auf Klassen Smile

Aber fürs erste ganz hervorragendes Tutorial, danke für die viele Mühe!
[Bild: zaiendosig.php]
Antworten
#3
Joa, das style-Attribut habe ich weggelassen, da ich es eigentlich für sinnlos halte. HTML und CSS getrennt.
Auf Klassen und IDs bin ich noch nicht eingegangen, weil ich noch keinen Anwendungszweck gefunden habe, aber du hast natürlich recht, ist eigentlich das wichtigste. Big Grin Aber das Tutorial soll ja noch weitergeführt werden. (man beachte: soll!)
I'm sorry, Dave. I'm afraid I can't do that.
Antworten
#4
Das Style-Attribut ist leider immer wieder notwendig, ebenso wie Klassen und IDs, man stelle sich zum Beispiel ein Formular mit mehreren Textfeldern des Typs text oder Textbox vor, die alle eine andere Hintergrundfarbe erhalten sollen.

Beispielscript hier
Code:
<form id="form1" name="form1" action="" method="post">
<input type="text" style="background-color: blue;" name="input1">
<input type="text" style="background-color: red;" name="input2">
</form>
Mit Nutzung des Style-Elements
Code:
<style type="text/css">
.blueclass   {
background-color: blue;
}
.redclass   {
background-color: red;
}
</style>

<form id="form1" name="form1" action="" method="post">
<input type="text" class="blueclass" name="input1">
<input type="text" class="redclass" name="input2">
</form>
Mit Klassen


Das wäre bei einer Gesamtdefintion von Textfeldern des Typs text nicht möglich.

Desweiteren kann dein fertiger Quelltext leider nicht funktionieren, der </style>-Tag wird nicht beendet.
Danke, dass du dir diesen Beitrag durchgelesen hast. Bei Fragen kannst du mir eine PN schicken. Bewerte mich!
Antworten
#5
Oje, blöder Fehler, schnell mal beheben...

'türlich gibt es Sonderfälle, aber ich denke es macht keinen Sinn Sonderfälle in Einsteigertuts zu erläutern. Wink
Klassen und IDs kommen wie gesagt auf jeden Fall, ist ja Hauptbestandteil jeder Seite. Erstmal ging es mit ausschließlich darum, das Design von Lennats HTML Seite nach CSS zu portieren.
I'm sorry, Dave. I'm afraid I can't do that.
Antworten
Werbeagentur gesucht? PRinguin, die Digitalagentur. Für Web Entwicklung und Online Marketing.
Registriere dich (kostenlos) um diese Werbung zu verbergen.


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  [Tutorial] Homepagebau Anleitung für Beginner Lennart 14 9.574 30.01.2010, 02:52
Letzter Beitrag: Lennart

Verlinke dieses Thema:

Teile es auf:
Twitter Facebook Stumble Upon Delicious Google GMail LinkedIn



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste