Sinnvolle und valide HTML-Struktur.
| CSS-Eigenschaften definieren | |
|---|---|
body { |
Selektor { Eigenschaft:Wert; ...; ...;} Ein Selektor kann gleich mehrere Eigenschaften bekommen. Trennung mit dem Semikolon. Global kann eine vererbbare Eigenschaft z.B. eine Schriftart festgelegt ... |
h1 { font-family: Times New Roman, serif; } |
... und für einzelne Selektoren dann verändert werden. |
body, h2, h3, th, td { font-size:x-small; } |
Komma: mehreren Selektoren die gleiche Formatierung zuweisen |
h2 { font-size: small; } |
individuelle Formatierung, die selektierten Elemente sind hier einfache HTML-Tags |
| HTML-Tags für CSS-Formatierung | |
<div> ... </div> |
Block |
<span> ... </span> |
Inline |
| Klassen | |
| Auf einer HTML-Seite können Klassen beliebig oft verwendet werden. | |
.meineKlasse {...} |
CSS-Selektor: Der Punkt kennzeichnet den Klassennamen. |
<div class="meineKlasse"> ... </div> |
HTML-Anwendung: Der Punkt wird hier weggelassen. |
<div class="eineKlasse nochEineKlasse"> ... </div> |
Ein Tag kann mehrere Klassen erhalten. Die Klassen werden mit einem Leerzeichen getrennt. |
| ID | |
| Auf einer HTML-Seite darf eine ID nur einmal auftauchen. | |
#meineID {...} |
CSS-Selektor: Die Raute kennzeichnet die ID. |
<div id="meineID"> ... </div> |
HTML-Anwendung: Die Raute wird hier weggelassen. |
| Selektoren für verschachtelte (in der Baumstruktur untergeordnete) HTML-Elemente | |
#nav li a {color: #CCCCCC;} |
<div id="nav"><ul><li><a href="#"> |
| Klasse und ID direkt im gleichen Tag | |
p.meineKlasse |
<p class="meineKlasse"> |
| Kommentar | |
/* CSS-Kommentar */ |
Hier können Ihre Notizen stehen |
| Rundumschlag | |
* {margin:0px ; padding:0px; }ev. so auch font-size, line-height definieren. |
alle Selektoren hier alle Abstände auf null, weil verschiedene Browser unterschiedliche Standardwerte haben Alternative: „Normalisierung“ wie z.B. bei html5boilerplate.com |
| Position | |
position:absolute |
ursprünglicher Platz geht verloren bezieht sich auf das nächstes Elternelement mit position |
position:relative |
ursprüngliche Platz bleibt erhalten bezieht sich auf den ursprünglichen Platz |
position:fixed |
wird nicht mitgescrollt |
h1, p, ul, li) gibt es eine neue Zeile. img, em, strong).<a href="#"><span> ...</span></a> aber <a href="#"><div> ...</div></a> Einige Eigenschaften (z.B. die Schriftart) werden vererbt (z.B. vom body auf alles was im body ist, z.B. p).
Andere Eigenschaften werden nicht vererbt. (z.B. margin, padding, Hintergrund).
Die Vererbung wird aufgehoben, wenn das Kinderelement eine eigene Eigenschaft hat (z.B. <a> überschreibt die Farbe von <p>).
style-Attributhead oder als externe Datei eingebundenes CSSstyle-Attributidclassde.selfhtml.org: css/formate/kaskade.htm#spezifitaet
width, height, margin-left, margin-bottom einstellen. Mit display: block, inline, inlne-block umschalten.float oder position oder marginfloat mit clear aufheben, Zusammenschieben durch den Browser mit Breite des übergeordneten Behälters verhinderntop oder right ist position (z.B. absolute oder relative) nötig.z-index) ist position erforderlich.content benötigt :before oder :afterdisplay: inline-blockmin- und max- Breite/Höhe:before und :after erst ab IE8