|
|
Johanneum Lüneburg |
|
|
| Informationssystem | |||
Angabe gilt für alle Elemente des Types x, also für <x>HIER</x>.
Angabe gilt für alle Elemente des Types x, mit der Klasse y, also für <x class="y">HIER</x>
Angabe gilt für alle Elemente des Types y, die sich innerhalb eines Elementes des Typs x befinden, also für <x><y>HIER</y></x>
Angabe gilt für alle Elemente des Types x, mit der ID y, also für <x id="y">HIER</x>
Angabe gilt für alle Elemente des Types y, die sich unmittelbar innerhalb eines Elementes des Typs x befinden, also für <x><y>HIER</y></x>
Angabe gilt für alle Elemente des Types y, die unmittelbar auf ein Element des Typs x folgen, also für <x></x><y>HIER</y>
Angabe gilt für alle Elemente des Types y, bei denen das Attribut y den Wert z hat, also für <x y="z">HIER</x>
Hintergrund. Alle Werte können mit der Angabe background: zusammengefaßt werden.
background:fixed x-repeat url(datei.gif);
Legt fest ob der Hintergrund beim Scrollen mitscrollt.
Mögliche Werte:
fixed = Hintergrund bleibt stehen
scroll Hintergrund scrollt mit
background-attachment:fixed;
Hintergundfarbe
Mögliche Werte:
RBG-Werte, Farbnamen
background-color:lime;
Hintergrundbild
Mögliche Werte:
url(DATEINAME) wobei DATEINAME der Pfad zu der Grafikdatei ist
background-image:url(../../../logojob.gif);
Position des Hintergrundbildes
Mögliche Werte:
Zwei durch Leerzeichen getrennte Zahlen (die erste für die Einrückung von links, die zweite für die Einrückung von oben)
background-position:10px 2cm;
Left fest, ob Hintergrundbilden gekachelt werden.
Mögliche Werte:
repeat = Wiederholung in beiden Richtungen
repeat-x = nur nebeneinander
repeat-y = nur untereinander
no-repeat = keine Wiederholung
background-repeat:repeat-y; Beispiel:
Rahmen. Alle Werte können mit der Angabe border zusammengefasst werden. Die Angaben können mit dem Zusatz -top / -left / -right / -bottom hinter border für jede Seite einzeln definiert werden
border: thin blue dotted;
border-left-style:dashed;
Farbe des Rahmens
Mögliche Werte:
RGB-Werte, Farbnamen
border-color:rgb(238,229,224);
Rahmentyp
Mösliche Werte:
none kein Rahmen
dotted Rahmen aus Punkten (.....)
dashed Rahmen aus Linien (-----)
solid durchgezogener Rahmen
double doppelter Rahmen
grove 3D-Efekt innen-außen
ridge 3D-Efekt außen-innen
inset 3D-Efekt innen-innen
outset 3D-Efekt außen-außen
border-style:double;
Stärke des Rahmens
Mögliche Werte:
thin dünner Rahmen
medium normaler Rahmen
thick dicker Rahmen
Exakte Größe
%
border-width:thick;
Textfarbe
Mögliche Werte:
RGB-Wert, Farbname
color:#eee5e0;
Darstellung. Achtung: display ist die mächtigste CSS-Eigenschaft. mit ihr läßt sich die grundlegende Bedeutung eines Tags verändern. Bitte mit Vorsicht verwenden !!
Mögliche Angaben:
block = Erzwingt einen Block - das Element erzeugt einen eigenen Absatz.
inline = Erzwingt die Anzeige im Text - das Element erzeugt keinen eigenen Absatz.
list-item = wie block, jedoch mit einem Aufzählungszeichen (Bullet) davor.
run-in = Absatz ohne Zeilenumbruch
compact = Absatz, bei dem der folgende Absatz daneben angezeigt wird (falls Platz vorhanden)
none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.
table = Tabelle
inline-table = wie table, aber ohne Absatz
table-row-group = Gruppe von Tabellen-Reihen
table-column = Tabellen-Spalte
table-column-group = Gruppe von Tabellen-Spalten
table-header-group = Gruppe von Tabellen-Kopfzeilen
table-footer-group = Gruppe von Tabellen-Füßen
table-row = Tabellen-Zeile
table-cell = Tabellen-Zelle
table-caption = Tabellen-Überschrift
display:none;
Schrift. Alle Werte können mit der Angabe font: zusammengefaßt werden.
font: bold italic Arial,sans-serif;
Schriftart. Mehrere Werte könne durch , abgetrennt werden.
Mögliche Werte:
serif Schrift mit Serifen
sans-serif Schrift ohne Serifen
monospace diktengleiche Schrift
fantasy Schrift für Auffällige Texte (nicht immer lesbar)
cursive fest kursive Schrift
Exakte Schriftart
font-family:Tahoma,Arial,sans-serif;
Schriftgröße
Mögliche Werte:
xx-small wie HTML "1"
x-small wie HTML "2"
small wie HTML "3"
medium wie HTML "4"
large wie HTML "5"
x-large wie HTML "6"
xx-large wie HTML "7"
larger wie HTML "+1"
smaller wie HTML "-1"
Exakte Größe
font-size:7pt;
Schriftstil
Mögliche Werte:
normal normale Schrift
italic kursive Schrift
oblique schräge Schrift (vom System schräg gestellt)
font-style:italic;
Schriftvariante
Mögliche Werte:
normal normale Schrift
small-caps Kapitälchen (BEISPIEL)
font-variant:small-caps;
Schriftgewicht
Mögliche Werte:
normal nicht Fett
bold Fett
bolder fetter (als fett)
lighter dünner (als normal
100 sehr sehr dünn
200 sehr dünn
....
900 sehr sehr fett
font-weight:bolder;
Zeichenabstand
Mögliche Werte:
Exake Größe
letter-spacing:5px;
Zeilenhöhe
Mögliche Werte:
Exake Größe
%
line-height:30px;
Listendarstellung. Alle Werte können mit der Angabe list-style zusammengefaßt werden.
list-style:decimal inside;
Listen-Grafik.
Mögliche Werte:
url(DATEINAME) wobei DATEINAME der Pfad zu der Grafikdatei ist
list-style-image:url(../../../nah.gif);
Listenbullet-Position
Mögliche Werte:
inside keine Einrückung zum Bullet
outside normale Ansicht
list-style-position:inside
Bullet Art
Mögliche Werte:
decimal = für <ol>-Listen: Numerierung 1.,2.,3.,4. usw.
decimal-leading-zero = für <ol>-Listen: Numerierung 01.,02.,03.,04. usw.
lower-roman = für <ol>-Listen: Numerierung i.,ii.,iii.,iv. usw.
upper-roman = für <ol>-Listen: Numerierung I.,II.,III.,IV. usw.
lower-alpha = für <ol>-Listen: Numerierung a.,b.,c.,d. usw.
lower-latin = für <ol>-Listen: Numerierung a.,b.,c.,d. usw.
upper-alpha = für <ol>-Listen: Numerierung A.,B.,C.,D. usw.
upper-latin = für <ol>-Listen: Numerierung A.,B.,C.,D. usw.
lower-greak = kleine griechische Buchstaben
disc = für <ul>-Listen: Dateisymbol als Bulletzeichen
circle = für <ul>-Listen: rundes Bulletzeichen
square = für <ul>-Listen: rechteckiges Bulletzeichen
none = kein Bulletzeichen, keine Numerierung
traditionelle Nummerierungen:
hebrew = hebräisch
georgian = georgisch
armenian = armenisch
cjk-ideographic = ???
Japanische Nummerierungen:
hiragana = a, i, u, e, o, ka, ki
katakana = A, I, U, E, O, KA, KI
hiragana-iroha = i, ro, ha, ni
katakana-iroha = I, RO, HA, NI
list-style-type:decimal
Abstand. Die Angabe erfolgt über margin-top, margin-right, margin-bottom, margin-left. Es ist auch möglich die Angabe für alle Seiten zu setzen: margin:
Mögliche Werte:
Exakte Größe
%
margin-top:1cm;
Innenabstand. Die Angabe erfolgt über pading-top, pading-right, pading-bottom, pading-left. Es ist auch möglich die Angabe für alle Seiten zu setzen: padding:
Mögliche Werte:
Exakte Größe
%
padding-right:30px;
Textausrichtung
Mögliche Werte:
left Links
center Zentriert
right Rechts
justify Blocksatz
text-align:center
Text-Dekoration
Mögliche Werte:
underline unterstrichen
overline überstrichen
line-through durchgestrichen
blink blinkend
none keine dekoration
text-decoration:line-through;
Text-Veränderung
Mögliche Werte:
none keine Änderung
capitalize Wortanfänge Groß
uppercase alles groß
lowercase alles klein
text-transform:capitalize
vertikale Ausrichtung
Mögliche Werte:
top oben
middle mittig
bottom unten
baseline Basislinie
sub tieferstellen
sup höherstellen
text-top Textoberkante
text-bottom Textunterkante
%: Abweichung von der Basislinie
Exakte Größe: Abweichung von der Basislinie
vertical-align:baseline;
Wortabstand
Mögliche Werte:
Exakte Größe
word-spacing:1cm;
Tabellen-Rahmen
Mögliche Werte:
collapse flacher Rahmen
seperate normaler3D-Rahmen
border-collapse:collapse
Rahmen-Abstand
Mögliche Werte:
Exakte Größe
%
border-spacing:1cm
Abstand von unten
Mögliche Werte
Exakte Größe
%
bottom:2cm
Textfortsetzung unterhalb
Mögliche Werte
left unterhalb des linken Elements
right unterhalb des rechten Elements
both unterhalb aller vorigen Elemente
none kein zusätzlicher Umbruch
clear:right;
Element zuschneiden
Mögliche Werte:
rect(w x y z) die 4 Werte (w bis z) werden durch eine Exakte Größe oder durch das Wort auto (tatsächliche Elementgröße) definiert. die 4 stehen für: w: oben, x:rechts, y:unten, z:links
clip:rect(30px, 10px, auto 20px);
Maus-Cursor
Mögliche Werte:
auto = automatischer Cursor (Normaleinstellung).
default = Plattformunabhängiger Standard-Cursor.
crosshair = Cursor in Form eines einfachen Fadankreuzes.
pointer = Cursor in Form eines Zeigers.
move = Cursor in Form eines Kreuzes, das die Fähigkeit zum Bewegen des Elements signalisiert.
n-resize = Cursor in Form Pfeils, der nach oben zeigt (n = Norden).
ne-resize = Cursor in Form Pfeils, der nach rechts oben zeigt (ne = Nordost).
e-resize = Cursor in Form Pfeils, der nach rechts zeigt (e = Osten).
se-resize = Cursor in Form Pfeils, der nach rechts unten zeigt (se = Südost).
s-resize = Cursor in Form Pfeils, der nach unten zeigt (s = Süden).
sw-resize = Cursor in Form Pfeils, der nach links unten zeigt (sw = Südwest).
w-resize = Cursor in Form Pfeils, der nach links zeigt (w = Westen).
nw-resize = Cursor in Form Pfeils, der nach links oben zeigt (nw = Nordwest).
text = Cursor in einer Form, die normalen Text symbolisiert.
wait = Cursor in Form eines Symbols, das einen Wartezustand signalisiert.
help = Cursor in Form Symbols, das Hilfe zu dem Element signalisiert.
url([Datei]) = Beliebiger Cursor, [Datei] muß eine spezielle Cursor-Datei sein.
cursor:help;
Textfluß
Mögliche Werte:
rtl von rechts nach links
ltr von links nach rechts
diraction:rtl
Leere Tabellen-Zellen
Mögliche Werte:
show Leere Zelle zu sehen
hide freie Fläche
empty-cells:show;
Elementausrichtung
Mögliche Werte:
left Element steht links
right Element steht rechts
none Element hat volle Breite
float:left;
Höhe des Elements
Mögliche Werte:
Exakte Grüße
height:30cm;
Abstand von Links
Mögliche Werte:
Exakte Größe
left:2pt;
maximale Höhe des Elements
Mögliche Werte:
Exakte Grüße
height:30cm;
maximale Breite des Elements
Mögliche Werte:
Exakte Grüße
height:30cm;
minimale Höhe des Elements
Mögliche Werte:
Exakte Grüße
height:30cm;
minimale Breite des Elements
Mögliche Werte:
Exakte Grüße
height:30cm;
verhalten bei übergrößem Inhalt
Mögliche Werte:
scroll Scrollbars
hidden keine Anzeige
visible Anzeige
auto Glückssache
overflow:scroll
Breiteneinstellung
Mögliche Werte:
fixed Breite aus addierten Zellbreiten
auto Breite aus table-Tag
table-layout:fixed;
Schatten
Mögliche Werte:
Farbe + drei exakte Größen (Verschiebung unten, vVerschiebung Rechts,Größe des Schattens
text-shadow:red 2px 2px 3px;
Abstand von Oben
Mögliche Werte:
Exakte Grüße
height:30cm;
Sichtbarkeit
Mögliche Werte:
hidden unsichtbar
visible sichtbar
collapse "eingeklappt"
visibility:collapse
Breite des Elements
Mögliche Werte:
Exakte Grüße
height:30cm;
Ebene
Mögliche Werte:
Zahl
z-index:3;
Die Media-Types werden auf 3 verschiedene Arten eingebunden:
@loeschen@media xxx { } in einer CSS-Definition, die Angaben in der Klammer ({}) gelten nur für den Media-Type xxx.
@loeschen@import url(DATEINAME) xxx aus der Datei "DATEINAME" werden die Angaben importiert und nur für den Media-Type xxx verwendet.
<link href="x.css" type="text/css" media="xxx"> CSS-Datei x.css gilt nur für den Media-Type xxx.
es sind folgende Media-Types definiert:
Bildschirmausgabe am PC o.ä.
Es können alle Angaben für die Darstellung verwendet werden:
Druck
Es können folgende Angaben verwendet werden:
Projektor
Es können folgende Angaben verwendet werden:
Sound-Ausgabe
Es können folgende Angaben verwendet werden:
Ausgabe über Video-Brillen
Es können folgende Angaben verwendet werden:
Fernseh-Ausgabe
Es können folgende Angaben verwendet werden:
Ausgabe an Mini-Computern
Es können folgende Angaben verwendet werden:
Teletyper
Es können folgende Angaben verwendet werden:
Angabe gilt für alle Media-Types
*) nicht alle Befehle sinnvoll
gilt für Aktiver Link
gilt für Link, über dem sich die Maus befindet.
gilt füt noch nicht besucten Link
gilt für besuchten Link
gilt für das Erste Unterelement des Types y in einem x.
gilt für den ersten Buchstaben in dem Element.
gilt für die erste Zeile in dem Element
diese Angaben existieren derzeit nur in der Theorie.
diese Angaben existieren derzeit nur in der Theorie.
Über den Befehl @loeschen@import url(...) bzw. @loeschen@import "..." kann man eine externe CSS Definition in eine andere einbinden.
Auf die Filter möchte ich hier nur kurz eingehen:
Die Filter sind eine vom Microsoft mit dem IE4 eingeführte Lösung, um verschiedene Efekte auszulösen. Als Beispiel dazu dienen die Linien zwischen den einzelnen Kapiteln auf dieser Seite.
