====== Selektoren für HTML-Tags ====== ===== Elementtypen ===== Um ein zentrales Format für alle HTML-Elemente eines bestimmten Typs zu definieren, wird als als sog. **Selektor** der Name des HTML-Elementtyps angegeben, und zwar ohne spitze Klammern. Im folgenden Beispiel werden ''body'' (Dokument), ''h1'' (Überschriften 1. Ordnung), ''p'' (Textabsätze) und ''li'' (Listeneinträge) auf diese Weise notiert. Über den Universalselektor * hat man die Möglichkeit, Eigenschaften für alle Elemente zu definieren, wobei jedem Element natürlich nur die jeweils zulässigen Eigenschaften zugewiesen werden. Wenn ein Format für mehrere HTML-Elementtypen definiert werden soll, werden alle gewünschten Elementtypen angegeben- /* für einzelne Tags */ body { background-color: #FFFFCC; margin-left: 100px; } h1 { font-size: 300%; color: #FF0000; font-style: italic; border-bottom: solid thin black; } /* für mehrere Tags */ p,li { font-size: 110%; line-height: 140%; font-family: Helvetica,Arial,sans-serif; letter-spacing: 0.1em; word-spacing: 0.3em; } /* für alle Tags */ * { color:blue; } ===== Attribut-Selektoren ===== Im folgenden Beispiel wird davon ausgegangen, dass eine Formatdefinition für ''p''-Elemente (Absätze) existiert. Mit der Syntax p[align] werden alle ''p''-Elemente erfasst, die ein align-Attribut haben. Mit ''p[align=center]'' werden alle ''p''-Elemente erfasst, die ein ''align="center"'' im einleitenden Tag haben. Mit ''td[abbr~=Berlin]'' werden alle Tabellenzellen des Typs ''td'' erfasst, die ein Attribut abbr besitzen und bei denen in der Wertzuweisung an dieses Attribut das Wort Berlin vorkommt. p[align] p[align="center"] td[abbr~=Berlin] ++++ Beispiel |

My CSS web page!

Hello world! This is a W3Schools.com example.

right Hello world! This is a W3Schools.com example.

center Hello world! This is a W3Schools.com example.

berlin Hello world! This is a W3Schools.com example.
++++ ===== spezielle Selektoren ===== [[http://www.w3schools.com/css3/css3_ref_selectors.asp|Übersicht]] Wichtig sind nur die für die [[http://www.w3schools.com/css/css_link.asp|Links]] a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ (Die Reihenfolge der Deklaration ist wichtig!) | //:active// | aktiver Hyperling | | //:after// | Nach einem Element | | //:before// | Vor einem Element | | //:first-child// | Das erste "Kind" | | //:first-letter// | Das erste Zeichen einer Zeile | | //:first-line// | Die erste Zeile in einem Absatz | | //:focus// | Fokusierte Formularelemente | | //:hover// | mouse over | | //:link// | Hyperlink | | //:visited// | besuchter Link | [[http://www.w3schools.com/css/tryit.asp?filename=trycss_link|Beispiel]]