A CSS-Regl schaut so aus:
Selektor[,Selektor2,…]{Oagnschoft-A:Wert-A;Oagnschoft-B:Wert-B}/* Kommentar */A Stylesheet deaf beliebig vui soichane Regln enthoitn. De foigende Tabejn gibt de wichtigstn Selektorn wieda, mit dena Elemente (moastHTML-Elemente) ausgwejd wean kena. A voiständige Iwasicht vo oin Selektorn findd si fia CSS2[1] wia aa fia CSS3[2] auf w3.org.
Megliche Auswoikriterien san direkte Merkmoi vo de Elemente (Typ, Klasse, ID, Attribut oda Attributwert), owa aa strukturelle Oagnschoftn (Existenz vo am bestimmtn iwagordnetn Element oda vo am Voagängarelement). De Auswoikriterien lossn si miteinanda kombinian.
| Musta | Bedeitung | Eigfiat in | Definition | Ealaitarung |
|---|
| * | Selektiat jeds Element | CSS2 | Universal selector | |
| E | Selektiat jeds Element vom Typ E | CSS2 | Type selectors | Typ-Selektoren |
| .c | Selektiat jeds Element vo da Klasse c (analog [class~='c']) | CSS2 | Class selectors | Klassen-Selektoren |
| #myid | Selektiart s Element mit da ID „myid“. | CSS2 | ID selectors | ID-Selektoren |
| E[foo] | Selektiat jeds Element E, bei dem des „foo“-Attribut gsetzt is (unobhängig vom Wert) | CSS2 | Attribute selectors | Attribut-Selektoren |
| E[foo=bar] | Selektiat jeds Element E, bei dem das „foo“-Attribut mim Wert bar gsetzt is | CSS2 | Attribute selectors | Attribut-Selektoren |
| E[foo^=bar] | Selektiat jeds Element E, bei dem des „foo“-Attribut mitm Wert bar ofangt | CSS3 | Substring matching attribute selectors | Attribut-Selektoren |
| E[foo$=bar] | Selektiat jeds Element E, bei dem des „foo“-Attribut mitm Wert bar endd | CSS3 | Substring matching attribute selectors | Attribut-Selektoren |
| E[foo*=bar] | Selektiat jeds Element E, bei dem des „foo“-Attribut an Wert bar enthoit | CSS3 | Substring matching attribute selectors | Attribut-Selektoren |
| E.c | Selektiat jeds Element E vo da Klasse c | CSS2 | Class selectors | Und-Verknüpfung |
| E F | Selektiat jedes Element F, des a Nochfoar vo Element E is | CSS2 | Descendant selectors | Hierarchische Verschachtelung |
| E> F | Selektiat jeds Element F, des a Kind vo E is | CSS2 | Child selectors | Direkte hierarchische Verschachtelung |
| E ~ F | Selektiat jeds Element F, des an Vorgänga E af gleicha Ebene hod | CSS3 | General sibling combinator | Abfolge |
| E + F | Selektiat jeds Element F, des an direktn Vorgänga E af gleicha Ebene hod | CSS2 | Adjacent sibling combinator | Direkte Abfolge |
| E:first-child | Selektiat an Element E, wenns des easchte Kind vom direktn Vorfoarn is | CSS2 | The :first-child pseudo-class | |
CSS:
p.note{position:relative;left:15%;width:80%;padding:30px;padding-bottom:45px;border:1pxsolidblack;line-height:1.5em;color:black;font-weight:bold;text-align:justify;background-color:#eeeeee;}HTML:
<pclass="note">DiesisteinkleinerTestabsatz.DiesisteinkleinerTestabsatz...</p>
Desp-Tag mocht den Text, dea wo dazwischn steht, zu am Obsotz. Wei eam de Klasse „note“ zuagwiesn wead, wead a vo am CSS-kompatibln Browsa wia foigt dorgstejt:
Do wead da Deklarationsbereich oinp-Elementn zuagwiesn, wo desclass-Attribut mit am Wertnote besitzn. Dadat ma desp im Selektor weglossn, waradn olle Elemente vo da Klassenote betroffn, beim Weglossn vom.note ollep-Elemente.
A wichtigs Prinzip vo CSS is de Vaeabung vo de Oagnschoftswerte an untagordnete Elemente und de Kombination vaschiedena Stylesheets (Kaskadeneffekt). De kena dabei aus vaschiednan Quejn stamma: vom Autor vom Stylesheet, am Browser (User Agent) oda am Nutza.
