Einführung in CSS...
Erfreut stellte ich fest, dass es nun bei Lima-city endlich auch eine CSS-Rubrik gibt. Leider gab es bis jetzt noch kein einziges Tutorial, das sich mit CSS beschäftigt. Ich habe versucht das Tutorial möglichst gut verständlich zu gestallten, sodass es auch von Anfängern gut verstanden wird.
Jetzt wünsche ich ihnen viel Spass beim lesen des Tutorials und beim experimentieren mit CSS!
Inhalt
- Wie wird das Stylesheet eingebunden?
- Über die Verträglichkeit mit verschiedenen Browsern...
- Wie ist CSS aufgebaut?
- Wie heissen die definierten Elemente?
- Wie werden Elemente selber definiert?
- Welche Eigenschaften kann man definieren?
- Weiterführende Links
- Schlusswort
Wie wird das Stylesheet eingebunden?
Es gibt drei Methoden auf ein Stylesheet zuzugreifen:
- Stylesheet zwischen <style>...</style> einkopieren. Unpraktische Methode, da verbrauch von viel Space
- <link rel="Stylesheet" type="text/css" href="pfad/zum-stylesheet.css" /> (Im Headbereich)
- Zwischending zwischen Möglichkeit 1 u. 2:
<style>
@import "pfad-zum/stylesheet.css";
</style>
Über die Verträglichkeit mit verschiedenen Browsern...
Heutzutage gibt es nur noch wenige Browser, die mit Stylesheets nicht umgehen können. Die erste Möglichkeit um ein Stylesheet einzubinden funktioniert nun mit allen Browsern. Die zweite Möglichkeit funktioniert inzwischen mit fast allen Browsern ausgenommen Netscapeexplorer. Die dritte Möglichkeit funktioniert erstaunlicherweise nur mit den "Alternativ-Browsern" Dh. IE und Netscape können nicht mithalten. Deshalb ist von dieser Methode eher abzuraten, da noch immer die Mehrheit der Internetuser mit IE unterwegs sind :biggrin:
Wie ist CSS aufgebaut
Als erstes möchte ich ihnen sagen, dass CSS nicht als Programmiersprache gilt, und auch keinerlei Ähnlichkeiten mit einer Programmiersprache hat. CSS wird nur verwendet um Webseiten zu gestalten und zu "stylen". In CSS gibt es Elemente, die definiert werden können und Eigenschaften, die zum definieren helfen. CSS ist folgendermassen aufgebaut:
A /* ELEMENT */
{
font-size: 10pt; /*Schriftgrösse*/
font-family: Verdana, Arial; /*Schriftart; auch "font-face"*/
color: #000000; /*Schriftfarbe*/
background-color: #ff0000; /*Hintergrundfarbe*/
}
An diesem einfachen Beispiel sollten sie bereits eine Menge gelernt haben. Ein Stylesheet ist
folgendermassen aufgebaut: ELEMENT { EIGENSCHAFT: WERT; }
Kommentare sehen gleich aus wie die, die in PHP und C++ verwendet werden.
Wie heissen die definierten Elemente?
Die wichtigsten Elemente heissen: A (va. Link), H1-H6, TABLE, DIV, B, I, S, INPUT und TEXTAREA
Die Elemente können von modernen Browsern noch weiter eingeteilt werden; so kann man an die Elemente noch ein weiteres Detail hinzufügen. Es gibt beispielsweise :hover (Element berührt), :active (Klick auf das Element), :visitend (Nur bei Links: Wenn der Link bereits besucht wurde.)
Das Stylesheet:
A:hover
{
color: #00ff00;
}
tritt in Aktion, wenn ein Link mit der Maus berührt wird. (Färbt sich zb. um oder wird grösser...)
Wie werden Elemente selber definiert?
Wenn man ein bestimmtes Element speziell erwähnen möchte, ist es intelligent, diese Form von Definition zu verwenden:
.element
.red
Wichtig ist dabei eigentlich nur der "." (Punkt) vor dem Elementnamen. Um das Element aufzurufen ist der HTML-tag: class wichtig. <span class="red"> ruft beispielsweise das Element .red auf. <div class="red"> verursacht das gleiche.
Welche Eigenschaften kann man definieren?
Hier einige der wichtigsten Eigenschaften, die definiert werden können:
color: farbe; - Textfarbe in Hexacode
font-size: 10pt; - Schriftgrösse
font-family: Verdana, Comic sans MS;
text-align: right; - Ausrichtung des Textes. (left, right, center u. justify)
text-decoration: underline; - Dekoration (underline, overline, bold, line-trough und none [nichts])
background:url("bild.jpg"); - Hintergrundbild
background-color: farbe; - Hintergrundfarbe
border: 10; - Rahmengrösse (zb. bei Divs oder bei Tabellen)
border-color: farbe; - Rahmenfarbe
border-style: dashed; - Rahmeneigenschaft (dashed = gestrichelter Rahmen!!)
width: 80%; - Grösse eines Elements
height: 100px; - Höhe eines Elements
Weiterführende Links
Natürlich ist es nicht möglich, in einem einzigen Tutorial ein riesiges Gebiet zu behandeln. Deshalb habe ich beschlossen, die wichtigsten und besten Links für CSS aufzuführen. Dazu gehören:
- http://schattenbaum.net/css
- http://de.wikipedia.org/wiki/Cascading_Style_Sheets
- http://www.css4you.de/
- http://jendryschik.de/wsdev/einfuehrung/css/
- http://www.alvit.de/handbook/
- http://www.thestyleworks.de/
- http://www.w3.org/Style/CSS/
- http://de.selfhtml.org/css/
Schlusswort
Ich hoffe, dass mir dieses Tutorial gut gelungen ist und dass mit diesem Tutorial viele einen guten Einstieg in CSS finden. Dieses Tutorial war nur ein ganz kleiner Überblick über die Möglichkeiten von CSS und ich werde schon sehr bald versuchen weitere CSS-tutorials zu verfassen.
MfG sebigisler
Falls sie einen Teil dieses Tutorials nicht begreifen, können sie mich gerne auch unter der Adresse: mailto:sebigisler@bluewin.ch erreichen.