CSS 2.1 Attributliste


Zum Text der Seite

Inhalt

Auch auf dieser Seite soll so knapp wie möglich Fahne von Großbritannien CSS 2.1 aufgelistet werden. Diese Seite soll als Nachschlageseite und Ge­dankenstütze dienen.

Diese Seite ist sicherlich nicht zum Lernen von CSS geeignet. Sie soll bei der Programmierung von dynamischen Webseiten (Folgekurs) helfen. Eine kom­plette CSS-Referenz findet sich im SELFHTML.

Eine interessante Liste der Standardstyles für HTML 4.0 findet sich ebenfalls beim WWW-Consortium.

Inhalt

  1. Grundstruktur
  2. Werte
  3. Rangordnung
  4. Medientypen
  5. Schrifteigenschaften
  6. Farbe und Hintergrund
  7. Texteigenschaften
  8. Listen
  9. Automatische Zähler
  10. Box-Eigenschaften
  11. Ränder
  12. Konturen
  13. Positionierung
  14. Tabellen
  15. Anzeigeeigenschaften
  16. Seitenweise Ausgabe
  17. Generierte Inhalte
  18. Sprachausgabe
Seitenanfang

Grundstruktur

Syntax
Selektor { Eigenschaft: wert; ... }
Selektor Komma-separierte Liste von HTML-Element, .Klassenname, #Id oder Pseudokllasse
HTML-Element Ein HTML-Tag oder eine Leerzeichen-separierte Liste von Tags, die einer Schachtelung entsprechen, also z. B. li li als Selektor definiert Eigenschaften zweifach geschachtelter Listen.
Klassenname Name, den man im class-Attribut angibt (für bel. Elemente.
Id Name, den man im id-Attribut angibt (eindeutig).
Pseudoklasse Element unmittelbar gefolgt von :first-child, :link, :visited, :hover, :active, :focus, :lang, :first-line, :first-letter, :before und :after
Eigenschaft Schlüsselworte für die CSS-Eigenschaften.
wert Passender Wert für die eigenschaft.
Kommentar
/* Kommentar */
Einbindung in HTML
  • <link rel="stylesheet" title="Name" href="url" type="text/css">
  • <style>
    Stylesheet - Anweisungen
    </style>
  • <tag style="Stylesheet - Anweisungen">
Seitenanfang

Werte

Schlüsselwort
Im CSS 2.1 sind als Werte viele feste Schlüsselworte definiert, Groß- und Kleinschreibung sind äquivalent,
länge
Absolute und relative Längenangaben in den Maßeinheiten:
  1. in - Inches (Zoll) = 25.4 mm,
  2. cm - Zentimeter,
  3. mm - Millimeter,
  4. pt - Punkte, 1pt = 1/72 in ≈ 0,3528 mm,
  5. pc - Pica, 1pc = 1/12 in ≈ 4,2333 mm,
  6. em - Höhe einer Zeile der Standardschrift,
  7. ex - Höhe des x der Standardschrift,
  8. px - Pixel, sollte 1/90in sein, wird aber praktisch von allen Browsern als ein Bildpunkt definiert,
prozent
Relative Angaben in Prozent (%).
farbe
Farbwerte können folgende Notation haben:
  1. name - Farbnamen, nicht benutzen,
  2. #RRGGBB - Komponenten Rot, Grün und Blau hexadezimal zweistellig,
  3. #RGB - Komponenten Rot, Grün und Blau hexadezimal einstellig, wird auf RRGGBB erweitert,
  4. rgb(RRR.RR%,GGG.GG%,BBB.BB%) - Komponenten Rot, Grün und Blau dezimal als Prozentwerte 0% - 100.00%,
  5. rgb(RRR, GGG,BBB) - Komponenten Rot, Grün und Blau ganzzahlig 0 - 255,
url
url("url").
Seitenanfang

Rangordnung

Rangordnung von oben nach unten:

  1. Befehl !important in den Eigenschaften,
  2. Id-Selektor,
  3. Klassen- und Pseudoklassen-Selektor,
  4. HTML-Element-Selektor,

Eng verknüpft mit der Rangordnung ist die Vererbung von Eigenschaften. Eine Diskussion würde hier im Moment zu weit fü,hren.

Seitenanfang

Medientypen

Im CSS 2.1 können über Medienregeln Stylesheets für bestimmte Ausgabemedien definiert werden. Die Angaben sind aber oft nur informativ, da einige Geräte nicht erkannt werden können!

@media typ [, typ, ... ] {
Stylesheets
}

all
Alle Ausgabegeräte,
braille
Braille-Zeile (mechanisch-tastbare Anzeige von Zeichen in Blindenschrft),
embossed
Braille-Drucker,
handheld
Handheld-Computer, PDA's,
print
Drucker, wird von vielen Browsern berücksichtigt,
projection
Projektion mit einem Datenprojektor, wird normalerweise nicht erkannt, da die Projektionsdaten vom Bildschirmsignal abgegriffen werden,
screen
normaler Computer-Farbbildschirme,
speech (aural)
Sprachausgabe,
tty
Terminals mit festen Zeichensätzen und Zeilen- und Spalten, Fernschreiber,
tv
Fernseher (geringe Auslösung, Farbe, Sound, geringe Scrollfähigkeit),
Seitenanfang

Liste der Eigenschaften

Alle Eigenschaften können den expliziten Wert inherit (vererbt vom Elternelement) hebn.

Seitenanfang

Schrifteigenschaften

font-family: schriftartenname | serif | sans-serif | cursive | fantasy | monospace, . . . ;
Schriftart, -familie
font-style: normal | italic | oblique;
Schriftstil
font-variant: normal | small-caps;
Schriftvariante
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Schriftstärke
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | länge | prozent;
Schriftgräße
font-size-adjust: zahl | none;
Verhältnis Größe zu x-Höhe
font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;
Schriftbreite
font: [[ font-style || font-variant || font-weight ] font-size [ line-height ] [ font-family | caption | icon | menu | message-box | small-caption | status-bar; ]
alle Schriftangaben
Seitenanfang

Farbe und Hintergrund

color: farbe;
Vordergrundfarbe
background-color; farbe | transparent;
Hintergrundfarbe
background-image: url | none;
Hintergrundbild
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
Hintergrundwiederholung
background-attachment; scroll | fixed;
Positionierung des Hintergrunds gegen den Vordergrund
background-position: [ [ prozent | länge ] [ prozent | länge ] | [ [ top | center | bottom ] || [ left | center | right ] ] ];
Position des Hintergrundes
background: [ background-color || background-image || background-repeat || background-attachment || background-position ];
alle Hintergrundangaben
Seitenanfang

Texteigenschaften

word-spacing: normal | länge;
Wordabstand
letter-spacing: normal | länge;
Buchstabenabstand
text-decoration: none | [ underline || overline || line-through || blink ];
Text-Dekoration
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | prozent | länge;
vertikale Ausrichtung
text-align: left | right | center | justify | string;
Text-Ausrichtung
text-transform: capitalize | uppercase | lowercase | none;
Text-Transformation
text-indent: länge | prozent;
Einzug der ersten Zeile im Block
line-height: normal | zahl | länge | prozent;
Zeilenhöhe
text-shadow: none | [ farbe || länge länge [ lämge ]] . . . ;
Text-Schatten
Seitenanfang

Listen

list-style-position: inside | outside;
Ein- oder Auszug der listenbullets
list-style-image: url | none;
Url des Bullets
list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none;
Art der Listennumerierung
list-style: list-style-type || list-style-position || list-style-image;
alle Listenangaben
Seitenanfang

Automatische Zähler

counter-increment: [ name [ zahl ]] | none;;
Schrittweite des Zählers
counter-reset: [ name [ zahl ] ] | none;
Festlegen des Startwertes eines Zählers
Seitenanfang

Box-Eigenschaften

border-top-color: farbe | transparent;
border-right-color: farbe | transparent;
border-bottom-color: farbe | transparent;
border-left-color: farbe| transparent;
border-color: border-top-color [ border-right-color [ border-bottom-color [ border-left-color ]]] ;
Randfarben
randbreite:
thin | medium | thick | länge
border-top-width: randbreite;
border-right-width: randbreite;
border-bottom-width: randbreite;
border-left-width: randbreite;
border-width: border-top-width [ border-right-width [ border-bottom-width [ border-left-width ]]];
Randbreiten
randstil:
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-top-style: randstil;
border-right-style: randstil;
border-bottom-style: randstil;
border-left-style: randstil;
border-style: border-top-style [ border-right-style [ border-bottom-style [ border-left-style ]]];
Randstile
border-top: border-width || border-style || farbe;
border-right: border-width || border-style || farbe;
border-bottom: border-width || border-style || farbe;
border-left: border-width || border-style || farbe;
border: border-width || border-style || farbe;
alle Box-Eigenschaften
height: länge | prozent | auto;
width: länge | prozent | auto;
Höhe und Breite der Box
max-height: länge | prozent | none;
max-width: länge | prozent | none;
maximale Höhe und Breite der Box
min-height: länge | prozent;
min-width: länge | prozent;
minimale Höhe und Breite der Box
Seitenanfang

Ränder

border-collapse: collapse | separate;
Art der Tabellenlinien (einfach oder doppelt)
border-spacing: länge [ länge ];
Abstand der separierten Tabellenlinien (cellspacing)
rand:
länge | prozent | auto
margin-top: rand;
margin-right: rand;
margin-bottom: rand;
margin-left: rand;
margin: margin-top [ margin-right [ margin-bottom [ margin-left ]]];
Außenabstand der Box von anderen Elementen
padding-top: rand;
padding-right: rand;
padding-bottom: rand;
padding-left: rand;
padding: padding-top [ padding-right [ padding-bottom [ padding-left ]]];
Innenabstand des Inhalts vom Rahmen
Seitenanfang

Konturen

Konturen verwenden im Gegensatz zu Boxen keinen zusätzlichen Platz bei der Anzeige.

outline-color: farbe | invert;
Konturenfarbe
outline-style: randstil;
Stil der Kontur
outline-width: randbreite;
Breite der Kontur
outline: outline-color || outline-style || outline-width;
alle Konureigenschaften
Seitenanfang

Positionierung

bottom: länge | prozent | auto;
left: länge | prozent | auto;
top: länge | prozent | auto;
right: länge | prozent | auto;
Abstände zu anderen Elementen
float: left | right | none;
Umfluss von Elementen
clear: none | left | right | both;
Löschen der Ausrichtung/Unfluss von float
position: static | relative | absolute | fixed;
Art der Positionierung
Seitenanfang

Tabellen

caption-side: top | bottom | left | right;
Position der Beschriftung der Tabelle
empty-cells: show | hide;
Anzeige leerer Tabellenzellen
table-layout: auto | fixed;
Art der Bestimmung der Tabellenbreite
Seitenanfang

Anzeigeeigenschaften

display: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none;
Anzeige von Elementen mit bestimmten Eigenschaften
cursor: [ url ...] [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ];
Cursorform
clip: rect(top, right, bottom, left) | auto;
Abschneiden des Inhaltes einer Box, wenn diese zu klein ist
overflow: visible | hidden | scroll | auto:
Was wird mit Inhalt, der über eine Box hinausläuft
white-space: normal | pre | nowrap | pre-wrap | pre-line;
Art der Behandlung von Whitespaces
quotes: string string | none;
Anführungszeichen
z-index: auto | zahl;
Stack-Reihenfolge von Blockelementen
visibility: visible | hidden | collapse:
Sichtbarkeit von Blockelementen
unicode-bidi: normal | embed | bidi-override;
Bidirektionale Ausgabe von Text
direction: ltr | rtl;
Richtung der Textausgabe
Seitenanfang

Seitenweise Ausgabe

orphans: zahl;
Minimale Zeilenanzahl eines Absatzes am Ende der Seite
widows: zahl;
Minimale Zeilenanzahl eines Absatzes am Anfang einer Seite
size: länge [ länge ] | auto | portrait | landscape;
Größe oder Ausrichtung einer Seite
page-break-after: auto | always | avoid | left | right;
page-break-before: auto | always | avoid | left | right;
page-break-inside: auto | avoid;
Seitenumbruch
Seitenanfang

Generierte Inhalte

content: string | url | counter | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote;
Einfügen eines Inhalts / Anführungszeichen
:before
:after
Pseudoklassen für HTML-Elemente, danach können beliebige Stylesheets defineirt werden (Ränder, Inhalte, ...), sie werden dann vor oder nach dem Element realisiert
Seitenanfang

Sprachausgabe

azimuth: winkel | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards;
Horizontaler Winkel der Sprachquelle
elevation: winkel | below | level | above | higher | lower | inherit;
Vertikaler Winkel der Sprachquelle
cue-after: url | none;
cue-before: url | none;
cue: cue-before || cue-after;
Hervorheben eines Elementes mit Klängen
pause-after: zeit | prozent;
pause-before: zeit | prozent;
pause: zeit | prozent [ zeit | prozent ];
Pausen um ein Element
pitch: frequenz | x-low | low | medium | high | x-high;
pitch-range: zahl;
Sprachhöhe und Varianz des Frequenzbereichs
play-during: url [ mix || repeat ] | auto | none;
Hintergrundsound abspielen
richness: nummer;
Hall der Stimme
speak: normal | none | spell-out;
speak-header: once | always;
speak-numeral: digits | continuous;
speak-punctuation: | none;
Art der Sprache
speech-rate: zahl | x-slow | slow | medium | fast | x-fast | faster | slower;
Sprachgeschwindigkeit
stress: zahl;
Sprachgeschwindigkeit
voice-family: [ specific-voice | male | female | child ] ... ;
Art der Sprache
volume: zahl | prozent | silent | x-soft | soft | medium | loud | x-loud;
Laustärke

Anfang
  Seitenanfang
 Trennstrich  ...HTMLvorherige Seite  Trennstrich  nächste SeiteZugriff...

Kurs Web-Design