CSS
Wie funktioniert CSS? Die Eigenschaften von Cascading Style Sheets (CSS) sind denen von HTML sehr ähnlich. Nehmen wir den Hintergrund inHTML
| <legend><body bgcolor="#000000"></legend> |
in CSS
| body {background-color: #000000;} |
Grundlegendes CSS-Modell: SELECTOR {PROPERTY: VALUE } Zuordnung Eigenschaft Wert der Eigenschaft body background-color: #000000 Wie werden CSS-Codes angewendet: Es gibt 3 Methoden der Anwendung CSS in HTML einzubinden 1. Direktformatierung des HTML-Elements - Inline Style
| <html><head><title>Example</title></head><body style="background-color:#ff0000;"><p> Das ist eine rote Seite.</p></body></html> |
2.Formatierung einer kompletten HTML-Datei - Block Style
| <html><head><title>Example</title><style type= "text/css"> body{background-color:#00000;}</style></head><body><p> Das ist eine schwarze Seite.</p></body></html> |
3. Die eleganteste Lösung, eine separate CSS Datei Bei dieser Methode werden die Stylesheetangaben genau wie im vorigen Beispiel geschrieben, Block-Style, der Unterschied ist, dass die Angaben in eine spezielle Datei, einer CSS Datei, eine einfache Textdatei mit der Erweiterung ".css", ausgelagert werden. In dieser Datei können alle Formatierungen aller Seiten untergebracht werden, es lässt sich das komplette Layout der Seite in dieser einen Datei festlegen.
| <link rel="stylesheet" type="text/css" href="style/style.css"/> |
Diese Zeile muss in den jeder Seite geschrieben werden die die Formatierung erhalten soll.
| <html><head><title>Mein Dokument</title><link rel="stylesheet" type="text/css" href="style/style.css"/> </head><body> |
So läßt sich CSS ganz einfach in jedes HTML Dokument eingebunden werden.
Hintergründe
| Befehl | Beschreibung | Werte |
|---|---|---|
| background | Hintergrund | background-color background-image background-repeat background-attachment background-position |
| background-attachment | Hintergrundgrafik feststellen oder rollbar machen | scroll fixed |
| background-color | Hintergrundfarbe | color-rgb color-hex color-name transparent |
| background-image | Hintergrundbild | url none |
| background-position | Position eines Hintergrundbildes | top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos |
| background-repeat | Wiederholung eines Hintergrundbildes | repeat repeat-x repeat-y no-repeat |
Rahmen
>| Befehl | Beschreibung | Wert |
|---|---|---|
| border | Rahmen | border-width border-style border-color |
| border-bottom | Rahmen unten | border-bottom-width border-style border-color |
| border-bottom-color | Rahmenfarbe unten | border-color |
| border-bottom-style | Art des Rahmens | border-style |
| border-bottom-width | Rahmenbreite unten | thin medium thick länge |
| border-color | Rahmenfarbe | color |
| border-left | Rahmen links | border-left-width border-style border-color |
| border-left-color | Rahmenfarbe links | border-color |
| border-left-style | Rahmenart links | border-style |
| border-left-width | Rahmenbreite links | thin medium thick length |
| border-right | Rahmen rechts | border-right-width border-style border-color |
| border-right-color | Rahmenfarbe rechts | border-color |
| border-right-style | Rahmenart rechts | border-style |
| border-right-width | Rahmenbreite rechts | thin medium thick länge |
| border-style | Rahmenart | none hidden dotted dashed solid double groove ridge inset outset |
| border-top | Rahmen oben | border-top-width border-style border-color |
| border-top-color | Rahmenfarbe oben | border-color |
| border-top-style | Rahmenart oben | border-style |
| border-top-width | Rahmenbreite oben | thin medium thick länge |
| border-width | Rahmenbreite | thin medium thick länge |
Klassifizierung
| Befehl | Beschreibung | Wert |
|---|---|---|
| clear | left right both none |
|
| cursor | Mauszeiger | 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 |
| display | Anzeige | none 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 |
| float | Position gegen ein anderes Element | left right none |
| position | Art der Positionierung | static relative absolute fixed |
| visibility | Sichtbarkeit | visible hidden collapse |
Abmessungen
>| Befehl | Beschreibung | Wert |
|---|---|---|
| height | Höhe | auto länge % |
| line-height | Zeilenabstand | normal länge % |
| max-height | Maximun Höhe | none länge % |
| max-width | Maximun Breite | none länge % |
| min-height | Minimum Höhe | länge % |
| min-width | Minimum Breite | länge % |
| width | Breite | auto % länge |
Schrift
| Befehl | Beschreibung | Wert |
|---|---|---|
| font | Schrift | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar |
| font-family | Schriftart | family |
| font-size | Schriftgröße | xx-small x-small small medium large x-large xx-large smaller larger länge % |
| font-size-adjust | none zahl |
|
| font-stretch | Schriftbreite | normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded |
| font-style | Schriftstil | normal italic oblique |
| font-variant | Buchstabenart | normal small-caps |
| font-weight | Schriftdicke | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
Listen
>| Befehl | Beschreibung | Wert |
|---|---|---|
| list-style | Listenart | list-style-type list-style-position list-style-image |
| list-style-image | Bild als Listenzeichen | none url |
| list-style-position | Position des Listenzeichens | inside outside |
| list-style-type | Listentyp | none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
| marker-offset | auto länge |
Abstand
>| Befehl | Beschreibung | Wert |
|---|---|---|
| margin | Abstand | margin-top margin-right margin-bottom margin-left |
|
margin-bottom |
Abstand nach unten | auto länge % |
|
margin-left |
Abstand nach links | auto länge % |
|
margin-right |
Abstand nach rechts | auto länge % |
| margin-top | Abstand nach oben | auto länge % |
Outlines
| Befehl | Beschreibung | Wert |
|---|---|---|
| outline | outline | outline-color outline-style outline-width |
| outline-color | Outlinefarbe | color invert |
| outline-style | Outlineart | none dotted dashed solid double groove ridge inset outset |
| outline-width | Outlinedicke | thin medium thick length |
Randabstände
| Befehl | Beschreibung | Wert |
|---|---|---|
| padding | Randabstand | padding-top padding-right padding-bottom padding-left |
|
padding-bottom |
Abstand nach unten | länge % |
|
padding-left |
Abstand nach links | länge % |
|
padding-right |
Abstand nach rechts | länge % |
| padding-top | Abstand nach oben | länge % |
Positionierung
| Befehl | Beschreibung | Wert |
|---|---|---|
| bottom | Abstand nach unten | auto % länge |
| clip | Ausschnitt | shape auto |
| left | Abstand nach links | auto % länge |
| overflow | oberflow | visible hidden scroll auto |
| right | Abstand nach rechts | auto % länge |
| top | Abstand nach oben | auto % länge |
| vertical-align | Vertikale Ausrichtung | baseline sub super top text-top middle bottom text-bottom länge % |
| z-index | Stapelreihenfolge | auto zahl |
Tabellen
| Befehl | Beschreibung | Wert |
|---|---|---|
| border-collapse | Rahmenmodell | collapse separate |
| border-spacing | Rahmenabstand | länge |
| caption-side | Position der Überschrift | top bottom left right |
| empty-cells | Behandlung von leeren Zellen | show hide |
| table-layout | Tabellenstruktur | auto fixed |
Inhalte und Zähler
| Befehl | Beschreibung | Wert |
|---|---|---|
| before | Inhalt einfügen | |
| after | Inhalt einfügen | |
| content | Inhalt einfügen | URL |
| counter | Zähler | |
| counter-increment | Zähler | |
| counter-reset | Zähler |