Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu dieser Vergleichsansicht

programmieren:css:css_selektoren [10.11.2014 16:43] (aktuell)
Zeile 1: Zeile 1:
 +\\ 
 +{{:images:navigation:artist.png?80|}}
 +\\
 +======CSS Selektoren======
 +Um bestimmte Elemente gezielt formatieren zu können, musst du sie direkt ansprechen können, um ihnen dann eine Formatierung zuzuweisen. Diese Auswahl geschieht mit sogenannten Selektoren.
 +\\ 
 +===== Grundlagen =====
 +Alle Formatierungsbefehle sind immer nach dem selben Prinzip aufgebaut.\\
 +Du musst angeben **was** du formatieren willst. Das geschieht über den Selektor.\\
 +nach dem Selektor steht innerhalb der **{ }** wie das entsprechende Element formatiert werden soll.\\
  
 +
 +  Selektor {Eigenschaft1: Wert; Eigenschaft2: Wert; Eigenschaft3: Wert; u.s.w.}
 +{{:css:selektor.png|}}
 +\\ 
 +\\ 
 +\\ 
 +==== Element ====
 +Willst du alle Vorkommen eines bestimmten Elementes formatieren ist er Selektor der **Name des Elementes** selbst. \\
 +So weist du allen <p> Tags die Schriftfarbe blau zu.\\
 +  p {color: blue;} 
 +
 +\\
 +\\ 
 +====Mehreren Elementen den gleichen Stil zuweisen  ====
 +Willst du mehreren Elementen den gleichen Stil zuweisen, dann kannst du sie mit **Komma** getrennt auflisten.\\
 +So weist du allen <p>, <h2> und <div> Tags die Schriftfarbe blau zu.\\
 +  p, h2, div {color: blue;}
 +\\ 
 +\\ 
 +=== Kombinierte Selektoren ===
 +Willst du beispielsweise alle Tags formatieren, die innerhalb eines anderen Tags stehen, erreichst du das, indem du die Selektoren hintereinander schreibst.\\
 +So weist du den <p> Tags die Schriftfarbe blau zu, die innerhalb eines <div> Tags stehen.\\
 +  div p {color: blue;}
 +\\ 
 +\\ 
 +=== Kind-Selektoren ===
 +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.\\
 +So weist du den <p> Tags die Schriftfarbe blau zu, die direkt innerhalb des <body> Tags stehen. Weiter verschachtelte <p> Tags bleiben von der Formatierung unberührt. \\ 
 +  body>p {color: blue;}
 +\\ 
 +\\ 
 +=== Folgeelement-Selektoren === 
 +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.\\
 +So weist du den <p> Tags die Schriftfarbe blau zu, aber nur, wenn es einem <h1> Tag folgt.\\
 +  h1+p {color: red;}
 +\\
 +\\
 +===Pseudo-Klassen===
 +Pseudoklassen sind Selektoren, zum Tragen kommen, wenn ein Element eine bestimmte Eigenschaft besitzt.\\
 +Am besten lässt sich das am Beispiel eines Links beschreiben. \\
 +Ein Link kann verschiedene Zustände besitzen.\\
 +Die Maus kann sich darüber befinden, es kann besucht sein, ...\\
 +So weist du jedem besuchtem Link die Farbe gelb zu:\\
 +  a:visited {color: yellow;}
 +\\
 +\\
 +So weist du jedem Link, über dem sich die Maus befindet, die Farbe grün zu:\\
 +  a:hover{color: green;}
 +\\
 +\\ 
 +\\
 +FIXME die Seite wird ab hier noch überarbeitet
 +==== 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 #
 +\\ 
 +  ...
 +  <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>
 +  ...
 +\\ 
 +\\ 
 +
 +
 +\\ 
 +\\ 
 +----
 +\\
 +[[:inhalt|Startseite]] > [[..:uebersicht|Programmieren]] > [[.:uebersicht|CSS]] > CSS Hilfsmittel
programmieren/css/css_selektoren.txt · Zuletzt geändert: 10.11.2014 16:43 (Externe Bearbeitung)
CC Attribution-Noncommercial-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0