Einführung in HTML - CSS - Grundlagen

#1 von STMaster , 04.10.2009 09:59

Und der siebte Streich folgt sogleich... diesmal wird er sich mit den Grundlagen von CSS befassen.


Wie bindet man CSS in HTML ein?

Es gibt mehrere Möglichkeiten.
1:

1
<E style="CSS-Angaben"></E> <!-- E steht für einen beliebigen Tag -->


2:

1
2
3
4
5
<style type="text/css">
<!--
/* CSS-Angaben */
-->
</style>


3:

1
<link rel="stylesheet" type="text/css" href="URL der CSS-Datei">


Ich bevorzuge die dritte Möglichkeit, da diese zur Übersichtlichkeit in der HTML-Datei beiträgt.


Wie erstellt man eine CSS-Datei?

Nichts einfacher als das... man nimmt einen einfachen Texteditor (oder einen etwas funktionaleren wie notepad++) und speichert die Datei unter irgendwas.css


Syntax:

1
2
3
4
5
6

Selektor {
Eigenschaft: Wert;
[...]
}


Es gibt natürlich auch Kommentare:

1
/* Kommentar */



Selektoren:

Mit einem Selektor gibt man an, für welche Elemente die nachfolgenden Eigenschaften gelten. Es gibt viele solcher Selektoren - nur gibt es leider oft Probleme mit bestimmten Browsern, die nur wenige Selektoren unterstützen. Der schlimmste Browser ist der Internet Explorer 6: uralt, jedoch immernoch weit verbreitet. Auch versteht der Internet Explorer einige Selektoren nicht - es werden teilweise sogar Selektoren nichtmehr unterstützt, die der Internet Explorer 6 noch unterstützt hat. Außerdem gibt es ein paar, die man selten braucht. Ich werde also nur ein paar (diejenigen, die meiner Meinung nach die Wichtigsten sind) Selektoren behandeln:

  • * (wählt ALLE Elemente aus)
  • E (wählt das Element E aus
  • E F (wählt das Element F aus, das in Element F verschachtelt ist)
  • .class (wählt alle Elemente mit der Klasse class aus; auch in der Syntax E.class möglich)
  • #id (wählt alle Elemente mit der ID id aus; auch in der Syntax E#id möglich)

    Man weist einem Element per Attribut eine Klasse oder eine ID zu:

    1
    2
    <p class="klasse"></p>
    <p id="id"></id>




    Das war's mal für diesen Teil; die nächsten Teile werden sich dann auch noch mit CSS beschäftigen. Wie immer: bei Fragen bitte fragen


  • Ich wünschte, meine Pizza wäre ein EMO. Dann würde sie sich selber schneiden.

     
    STMaster
    Meister
    Beiträge: 401
    Registriert am: 26.09.2009


       

    Einführung in HTML - Kopfdaten

    Counter

    free counters
    Xobor Einfach ein eigenes Forum erstellen | ©Xobor.de