Anhang: CSS-Syntax
In HTML
- <h1 style="eigenschaft:wert;">
- Style im HTML-Tag anwenden
- <style type="text/css">
Selektor {Eigenschaft: Wert; }
</style> - CSS-Defintionen im <head>
- <link rel="stylesheet" media="screen" type="text/css" href="formate.css" />
- CSS-Datei im <head> einbinden
- media: Ausgabe auf Bildschirm (screen), Drucker (print), Sprache (aural), …
- type: Contenttype
- href: Pfad/Dateiname
CSS
Allgemeine CSS-Syntax:
Selektor { Eigenschaft1: Wert1; …; EigenschaftN: WertN; }
Referenz: CSS Selektoren in selfHTML Wiki.
Selektoren
- *
- Universalselektor (Jedes beliebige Tag)
- p
- Selektor für ein Tag (hier <p>)
- h1,h2
- Selektor für Tags (hier <h1> und <h2>)
- *#id oder kurz #id
- Selektor für id="id"
- *.kl oder kurz .kl
- Selektor für class="kl"
- p.kl
- Selektor <p class="kl">
- p#id
- Selektor <p id="id">
Selektoren für verschachtelte Tags
- p a
- <a> irgendwo innerhalb <p>
- p + a
- <a> folgt unmittelbar auf <p>
- p > a
- <a> genau eine Ebene tiefer als <p>
- p * a
- <a> mindestens zwei Ebenen tiefer als <p>
Selektor für Tag mit Attribut
- * [lang]
- Alle Tags mit Attribut lang=""
- a [href]
- <a href="">
- a [href=".."]
- <a href="..">
- a [href^="http:"]
- <a href=""> das mit dem Wert „http:“ anfängt
- a [href$=".html"]
- <a href=""> das mit dem Wert „.html“ endet
- a [href*="wiki"]
- <a href=""> das den Wert „wiki“ enthält
- p [value~="eins"]
- <p value=""> das in einer Menge „eins“ enthält
- p [lang|="de"]
- <p lang=""> das mit „de-“ anfängt
Pseudo-Elemente
- a:link
- Normaler Verweis
- a:visited
- Besuchter Verweis
- a:focus
- Element das den Fokus hat
- a:hover
- Element unter der Maus
- a:active
- Angeklicktes Element
- a:before
- Etwas vor einem Tag einfügen
- a:after
- Etwas nach einem Tag einfügen
- ul:first-child
- Erstes Unterelement
- p:first-line
- Erste Zeile
- p:first-letter
- Erster Buchstabe
- p:lang(lc)
- Sprachattribut
Weitere Syntax
- p { font-size:1em !important; }
- Stylesheetpriorität ändern
- @import url("normal.css") screen;
- Weitere CSS-Datei im Stylesheet einbinden
- @media screen { … }
- Bereich für Ausgabe auf Bildschirm
- /* Kommentar */
- Kommentar im Stylesheet
- // Kommentar bis Zeilenende
- Kommentar im Stylesheet
Priorität
- Benutzer-Stylesheet mit !important
- Autoren-Stylesheet mit !important
- Autoren-Stylesheet
- Benutzer-Stylesheet
- Browser-Stylesheet