CSS-Tutorial [Basics]

/* CSS-Tutorial fast-version */

/*
Nundenn, first of all wie man sieht Kommentare funktionieren in CSS mit /* und werden beendet mit * und /

Nun zu den aller wichtigsten Grundlagen und dafür schalten wir kurz zu HTML:
es gibt immer verschiedene Elemente wie:
<a href=""> (Anker)
<div> (Container)
<table> (Tabellen-Grundlage)
<tr> (Tabellen-Spalte)
<td> (Tabellen-Zeile)
<frame> (Frames)
etc

diese Elemente beginnen immer mit den Kürzel und mit diesen spricht man sie auch in CSS an.

Aber da man Elemente z.b. mehrere DIV's voneinander unterscheiden möchte kann man auch Klassen oder ID's zuordnen!

z.B.: <div id="header"..>
oder <div class="bodya"..>
Auch das zuordnen mehrer Klassen ist möglich:
<div class="bodya bodyb bodyc"..>

Aber nicht von mehreren ID's!

Grundlegend hat die ID IMMER vorrang zur Class egal wann sie erwähnt wird, es gibt aber auch Ausnahmen auf die ich noch eingehen werde.


Nun zurück zum CSS-Part wir haben ein DIV mit der ID "content" diesen wollen wir mittig präsentieren & eine Schriftart zuordnen

das Element:
<div id="content">
</div>

CSS-Klasse:
*/
#content {
    margin:auto;
    font-family:Arial;
    color:#000;
}
/*
mit #ID spricht man ein Element mit einer ID an, margin:auto; positioniert das DIV Element in der Mitte da man einen DIV bei gewisser position: parameter nicht mit <center></center> mittig formatieren kann, also bei Div's immer so zentrieren also eigentlich fast immer *g*..

Nundenn das war eine ID es gibt aber auch Klassen:
<table id="tabelle">
    <tr>
        <td class="inhalt">test</td>
        <td class="inhalt">test2</td>
        <td class="inhalt" id="xy">Kursiv!</td>
    </tr>
</table>

Nehmen wir an man hat mehrere Tabellen möchte aber NUR diese eine Tabelle ansprechen so kommt man zu den Ansprechen verschachtelter Elemente, und zugleich habe ich auch einem Element die selbe ID gegeben und die selbe Klasse.. nur als Beispiel.

Zuerst mal sprechen wir die Class inhalt an das könnte man über .inhalt { tätigen, wollen wir aber nicht wir wollen nämlich nur alle mit der Klasse "inhalt" innerhalb des Element mit der ID "tabelle" ansprechen:
*/
#tabelle tr .inhalt {
    text-align:center; /* zentriert */
    font-weight:bold; /* fett */
    color:#ff0000; /* red */
}

/* Wäre alles getan, zentriert, fett & rote Schriftfarbe, wir wollen aber das ein Element mit der id "xy" kursiv dargestellt wird.. jetzt wirds tricky: */
#tabelle tr #xy {
    font-style:italic; /* kursiv */
}

/* Man bedenke aber das dass Element nun die Argumente der ersten Definition übernimmt als auch der der 2ten!

Was ist aber nun wenn in beiden ein Wert vorkommt z.B.: margin-left:10px; .. und aber in der #xy definition margin-left:20px; dann wird natürlich das mit den 20px übernommen da die ID stärker ist!

Aber auch das kann man umgehen:
*/

#tabelle tr .inhalt {
    margin-left:10px !important;
}

/* das !important statement vor den Semikolon sorgt dafür das dieser Wert wichtig ist, erst ein 2tes !important Element kann dieses im Normalfall rausschlagen!

Zusätzlich zu den bisher genannten gibt es noch Sachen wie :hover, :active etc aber dazu komm ich jetzt nur für :hover:

Es gibt ein Text der soll beim drüberfahren fett werden:

<span class="drueber">Text</span>

Unser CSS dafür: */
.drueber:hover {
    font-weight:bold;
}

/* Schon erledigt ;]..

beim darüber fahren wird nun der Text fett..

Achja noch zum mitgeben paar wichtige Elemente:

z-index: (Ist ein Wert der Ebene, z.b. kann man so mehrere Bilder übereinanderl egen und entscheiden welches Bild das vorderste sein soll erlaubt sind negative als auch positive Werte)

color:#RRGGBB; (Textfarbe dies betrifft nicht die Hintergrundfarbe!)

background-color:#RRGGBB; (Diesmal die Background Farbe)
background-image:url('./test.jpg'); (Für ein Hintergrundbild)
background-repeat:no-repeat; (Um das Hintergrundbild nicht zu wiederholen weitere paramenter: x-repeat oder y-repeat)

position:relative; (Bestimmt die Position standardwert ist static wenn ich mich nicht irre, es gibt noch absolute, relative, fixed und noch paar..)
fixed: Ein fixer Wert heißt das Bild ist fixiert und scrollt nicht mit
relative: Element ist drinnen scrollt mit und richtet sich an den außenliegenden Elementen
absolute: Selbige wie relative nur hält es sich an keinen Elementen und kann somit bei gewissen Position zuordnen aus den Element rutschen

zu Position kann man diese eben bestimmen:
position:relative; top: 10px; left:20px;

Somit hält sich das bild an einen Abstand von oben 10px und links 20px und dies am vorigen Element (Dies muss auch ein absolute oder relative Element sein!)

Uff was kann ich noch sagen naja so aus den Kopf rauß grundlagen eher nicht mehr.. das wären paar.. HTML wäre wirklich wichtig um CSS verstehen zu können aber versuch es halt einfach mal ^.^...

Achja CSS innerhalb von HTML wird immer mit:
<style type="text/Css">
/* CSS /
</style>

deklariert.

Und bedenke immer: Was bei Firefox mit CSS gut aussieht muss nicht bei IE gleich aussehen ^^... besonders bei der Positionierung gibt es oft Probleme oder es gibt Sachen wie "rgba" nicht um Farben zu bestimmen (auch samt Opacity = Transparenz) wegen rgba erkundige dich aber bitte mehr auf: http://css3generator.com/

Viel Spaß!
*/