Zum Inhalt

Inhaltsverzeichnis • Anhang • Anhang: CSS • Anhang: CSS-Syntax
⇦ Anhang: CSS / Anhang: CSS-Eigenschaften ⇨
06.07.2014 10:18:49

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

  1. Benutzer-Stylesheet mit !important
  2. Autoren-Stylesheet mit !important
  3. Autoren-Stylesheet
  4. Benutzer-Stylesheet
  5. Browser-Stylesheet
⇦ Anhang: CSS / Anhang: CSS-Eigenschaften ⇨
Nach oben