css
Statt den vorgegebenen Standartformaten einzelner Html Tags können auch
eigene Formatierungen vorgenommen werden. Dies geschieht durch die Cascding
Style Sheets (css). Sie beschreiben, wie ein von mir definierter Bereich auszusehen
hat = Formatvorlage.
- Element { format-eigenschaft: wert }
- Element1, Element2 { format-eigenschaft1: wert; format-eigenschaft2: wert }
- Auf fachchinesisch: selektor {deklaration}
Es gibt 3 Selektoren:
- bestehende Html -Tags
Beispiel:
Definition im Head: h1 { color: red; font-size: 150% }
- ein von mir bezeichnete Untergruppe eines Html -Tags = Klasse
Beispiel:
Definition im Head: h1.klassenName { color: white}
Aufruf im Body: <h1 class="klassenName"> inhalt </h1>
- einen bestimmten, namentlich bezeichnenten (id="einName") Block
(div), Bereich (span) oder Html - Tag.
Beispiel:
Definition im Head: #einName { color: white}
Aufruf im Body: <div id="einName"> inhalt </div>
Ein css kann:
- innerhalb des Tags
Beispiel:
<h1style="color: red"> inhalt </h1>
- innerhalb des Htmldocumentes
Beispiel:
<style media="screen" type="text/css">
<!--
h1 { color: red }
--></style>
- oder als externe Datei
Beispiel:
Einziger Inhalt der Datei: h1 { color: red }
Name der Datei: formate.css
Benützung dieser Datei: <link rel="stylesheet" type="text/css"
href="formate.css">
definiert werden. Wobei die erste Möglichkeit die zweite überschreibt
und die zweite die dritte.
ID geht vor class.
Mehrere Selektoren werden durch Beistrich, mehrere Deklarationen durch Strichpunkt getrennt.
.s1{d1} und element.s1{d2} ergibt d1 + d2 = Vererbung
Selektoren spezialisieren von links nach rechts: td p b
nur b: eine
feine Sache
ein b im p: eine feine Sache
ein b im 3.p verschachtelt: eine feine Sache
nicht überschreibbar: color:red !important
display:block (wie div) | inline (wie span) | list-item | none (was nicht gedruckt werden soll, statt alt Tag bei Bildern)
Bemaßung:
- absolut: cm, pt
- relativ: Bildschirmauflösung=px, Geviert=em, x-Länge=ex, Breite des Elementes:%
Wichtigkeiten
- Wenn die erste Zeile rechts rausrückt: Wenn text-indent negativ unbedingt padding-left positv
- td {white-space:nowrab}
- font-family:sans-serif -> alles ohne Serifen
- font: bold 12pt/16pt 'Times',serif ...geht auch bei background,list-style
- body table td wenn Eigenschaft im gesamten Dokument gelten soll
- input und select auch gestaltbar
- Layer posotion:fixed ->skrollt nicht!
- page-break-before[after]:always = neue Druckseite vor dem Selektor
- statt Menueframe:
- Menue: ul.nav a:hover und float:left; width:22em;
- Inhalt: margin-left: 20em;
- float:right; width:20em; margin: 0 0 1em 1em;
- Inhalt zentrieren
-
- body {margin: 0; padding: 1em 0; text-align:center;}/li>
- div.reset { text-align:left; margin: 0 auto; width:760px;
- .Fusszeile{clear:both}
