Benutzer-Werkzeuge

Webseiten-Werkzeuge


css:start

CSS

Element Selektoren

Am einfachsten formatierst du Elemente, indem du die Formatierung direkt einem bestimmten Tag zuordnest.

p {color: blue;} 

So weist du allen <p> Tags die Schriftfarbe blau zu.

Mehrere Stile zuweisen

Innerhalb einer Deklaration können mehrere Stil-Anweisungen aufgelistet werden. Die Anweisungen sind durch ein Semikolon (;) zu trennen.

p {color: blue; font-size: 130%;}


Mehreren Elementen den gleichen Stil zuweisen

Willst du mehreren Elementen den gleichen Stil zuweisen, dann kannst du sie mit Komma getrennt vor der Deklaration auflisten.

p, h2, ul {color: blue;}


Bestimmte Bereiche formatieren

Mit den Elementen ∠div> und ∠span> kannst du Bereiche auswählen, die du formatieren möchtest. Ohne den Einsatz von css haben die beiden Tags keine Auswirkungen auf den Aufbau einer Seite.

<div> ist ein Block-ELement und erzeugt einen Zeilenumbruch.
<span> ist ein Inline-Element.



Klassen und ID Selktoren

Klassen-Selektoren

Jedes Element / jeder Tag innerhalb des <body></body> Tags kann mit dem Attribut class=„blabla versehen werden. Über dieses Klassen-Attribut können Elemente einem Stil zugeordnet werden.

Eine Klassen-Definition beginnt immer mit einem Punkt

CSS
.meineKlasse {color: red;}
.meineAndereKlasse {color: blue;}


(X)HTML
...
<body>
   <p class="meineKlasse">
      Hier ist der Text des ersten Abschnitts
   </p>

   <p>
      Hier ist der Text des zweiten Abschnitts
   </p>

   <p>
      Hier <span class="meineKlasse">ist</span> der Text <span class="meineAndereKlasse">des</span> dritten Abschnitts
   </p>
  
   <p class="meineAndereKlasse">
      Hier ist der Text des vierten Abschnitts
   </p>
</body>



ID-Selektoren

IDs sind einzigartig. Auch hier handelt es sich um ein Attribut. Mit dem Unterschied, dass eine der Wert einer ID nur einmal in einer Seite vorkommen darf.

<p id="ichBinEinzigartig">blabla</p> 



Eine ID-Definition beginnt immer mit einer Raute #

CSS
#meineIDEins {color: red;}


...
<body>
   <p id="meineIDEins">
      Hier ist der Text des ersten Abschnitts
   </p>

   <p>
      Hier <span id="meineIDZwei">ist</span> der Text des zweiten Abschnitts
     </p>

   <p>
      Hier ist der Text des dritten Abschnitts
   </p>
 </body>
...



Kombinierte Selektoren

Nachfahren Selektoren

div p {color: red;}

Mit dieser Anweisung werden alle Absätze ausgewählt, die Nachfahre eines ‹div></div> Tags sind. Kinder, Enkel, etc.

Kind-Selektoren

body>p {color: red;}


Im Gegensatz zu den kombinierten Selektoren von weiter oben, wirkt der Kind-Selektor nur auf Elemente, die direkt innerhalb des Eltern/umschließenden Elementes stehen und keinen weiteren Tag dazwischen zulassen wie dies bei den kombinierten Selektoren möglich ist.

CSS
body>p {background-color: red;}


HTML
...
<body>
   <p>
      Ich habe einen roten Hintergrund und blaue Schrift.
   </p>

   <div>
      <p>
         Ich habe einen leider keinen roten Hintergrund, da ich kein
         Kind des <body> Elementes bin.
         Blaue Schrift habe ich, da ich innerhalb des <body> Elements stehe.
      </p>
  </div>

   <p>
      Ich habe einen roten Hintergrund und blaue Schrift.
   </p>
 </body>


Folgeelement-Selektoren / Nachbarelement-Selektoren

h1+p {color: red;}


Dieser Stil wird auf das Elemente angewendet, dass unmittelbar auf ein anderes folgt und das gleiche Elternteil hat, d.h. nicht in ihm verschachtelt ist. Erstes nachfolgendes Geschwister.

CSS
h1+p{background-color: red;}


HTML
...
<body>
   <h1>
      Ich bin eine Überschrift
   </h1>
   <p>
      Ich folge als erster Absatz direkt der Überschrift.
   </p>

   <p>
      Ich bin der zweite Absatz und werde nicht formatiert.
   </p>
 </body>



Geschwister-Selektor

h1~p {color: red;}


Dieser Stil wird auf das Elemente angewendet, dass auf auf ein anderes folgt und das gleiche Elternteil hat, d.h. nicht in ihm verschachtelt ist.

CSS
h1~p{background-color: red;}


HTML
...
<body>
   <h1>
      Ich bin eine Überschrift
   </h1>
   <p>
      Ich folge der Überschrift und werde formatiert.
   </p>

   <p>
    Ich folge der Überschrift und werde formatiert.
   </p>
   
   <div>
       <p>
         Ich folge nicht der Überschrift und werde nicht formatiert.
       </p>
   </div>
 </body>



css/start.txt · Zuletzt geändert: 25/04/2016 17:22 von M. Sabath