Umgang mit Cascading Stylesheets - CSS by ojp13483

VIEWS: 108 PAGES: 5

									CSS-Befehle im Überblick:
Diese Übersicht bietet eine Aufstellung der wichtigsten CSS-Befehle. Da nicht alle Befehle in jedem
Browser Funktionieren, sollte die Seite immer in mehreren Browsern ( IE, Mozilla, Opera u.a.) getestet
werden.

Befehl (Größe)                 Beschreibung                             Wert

width :                        Breite und Höhe eines Elementes          Auto, Prozent, num. Wert in px oder pt
height                         z.B. Tabelle, Div-Container usw.         Auto, Prozent, num. Wert in px oder pt

Befehl (Außenabstand)          Beschreibung                             Wert

margin:                        Abstand zum Seitenrand /                 numerischer Wert in pt(Punkt) mm oder cm
                               Außenabstand bei Div

margin-top :                   Abstand nur oben                         numerischer Wert in pt(Punkt) mm oder cm

margin-right :                 Abstand nur rechts                       numerischer Wert in pt(Punkt) mm oder cm

margin-bottom:                 Abstand nur unten                        numerischer Wert in pt(Punkt) mm oder cm

margin-left :                  Abstand nur links                        numerischer Wert in pt(Punkt) mm oder cm

Befehl (Innenabstand)          Beschreibung                             Wert

padding:                       Innerer Abstand rundherum                Prozent oder num. Wert. (px, pt, mm, em)

padding-top:                   Innenabstand nur oben                    Prozent oder num. Wert. (px, pt, mm, em)

padding-right:                 Innenabstand nur rechts                  Prozent oder num. Wert. (px, pt, mm, em)

padding-bottom:                Innenabstand nur unten                   Prozent oder num. Wert. (px, pt, mm, em)

padding-left:                  Innenabstand nur links                   Prozent oder num. Wert. (px, pt, mm, em)

Befehl (Schrift)               Beschreibung                             Wert

font-family :                  Schriftart                               Arial, Times New Roman, etc.

font-size :                    Schriftgröße                             numerischer Wert in pt (Punkt) mm oder cm

font-style:                    Schriftstil                              normal,oblique, italic

font-weight:                   Schriftgewicht                           normal,bold,bolder,lighter

color :                        Schriftfarbe                             yellow, white, etc oder HTML Farbangabe

text-align:                    Textausrichtung                          left, right, center, justify (Blocksatz)

line-height:                   Zeilenabstand (Durchschuß)               numerischer Wert in pt(Punkt) mm oder cm

text-decoration:               Textgestaltung                           none, underline, overline, line-through

word-spacing:                  Wortabstand                              numerischer Wert in pt(Punkt) mm oder cm

letter-spacing:                Zeichenabstand                           numerischer Wert in pt(Punkt) mm oder cm

text-indent:                   Texteinrückung                           numerischer Wert in pt(Punkt) mm oder cm

text-transform:                Textart                                  capitalize, upppercase, lowercase, none

font-variant:                  Schriftvariante                          normal, small-caps

font-stretch                   Schriftbreite                            wider,narrower,ultra-condensed,ultra-expanded



HLW Haag - Einführung in CSS                 Angewandtes informationsmanagment             Dipl.Päd. Maria Illich-Edlinger
Befehl (Hintergrund)           Beschreibung                             Wert

background-color:              Hintergrundfarbe                         yellow, white oder HTML Farbangabe

background-image:              Hintergrundbild                          URL bzw. genaue Pfadangabe des Bildes
url(../bilder/grafik.gif)

background-repeat:             Hintergrundbild wiederholen              repeat, repeat-x, repeat-y, no-repeat
                               (kacheln)

background-attachment:         Hintergrundgrafik feststellen oder       scroll
                               rollbar machen                           fixed

background-position:           Position eines Hintergrundbildes         top left, top center, top right, center left,
                                                                        center center, center right, bottom left, bottom
                                                                        center, bottom right

Befehl (Rahmen)                Beschreibung                             Wert

                                                                        none, dotted, dashed, solid, double, groove,
border-style:                  Rahmentyp
                                                                        ridge, inset, outset

border-color :                 Rahmenfarbe                              Farbname oder Hex.

border-width :                 Rahmenbreite                             Auto, Prozent, num. Wert

border-height                  Rahmenhöhe                               Auto, Prozent, num. Wert

border-top-width:              Dicke der Rahmenlinie oben               thin,medium,thick, oder num. Wert (px)

border-bottom-width:           Dicke der Rahmenlinie unten              thin,medium,thick, oder num. Wert (px)

border-left-width:             Dicke der Rahmenlinie links              thin,medium,thick, oder num. Wert (px)

border-right-width:            Dicke der Rahmenlinie rechts             thin,medium,thick, oder num. Wert (px)

border-left-color:             Rahmenfarbe links                        Farbname oder Hex.
                               (auch right, top, bottom)

border-left-style:             Rahmenart links                          none, dotted, dashed, solid, double, groove,
                               (auch right, top, bottom)                ridge, inset, outset

border-left-width:             Rahmenbreite links                       thin , medium, thick, length oder px-angabe
                               (auch right, top, bottom)

Befehl (Aufzählung)            Beschreibung                             Wert

list-style-type:               Listentyp für Tag <ul> oder <li>         none, disc, circle, square, decimal

list-style-image:              Grafik als Aufzählungszeichen
                                                                        URL bzw. genaue Pfadangabe der Grafik
url(../ordner/grafik.gif)      festlegen (z.B. einen Pfeil)

Befehl (Hyperlinks)            Beschreibung                             Wert

                               Link (definiert für alle Link-Zustände
a:                                                                      nahezu alle CSS Befehle, wie Größe, Farbe
                               die Standardeinstellungen

a:link                         Link vor dem Besuch der Seite            nahezu alle CSS Befehle, wie Größe, Farbe

a:visited                      Besuchter Link                           nahezu alle CSS Befehle, wie Größe, Farbe

a:active                       Angeklickter Link                        nahezu alle CSS Befehle, wie Größe, Farbe

a:hover                        Link beim Drüberfahren (Maus)            nahezu alle CSS Befehle, wie Größe, Farbe



HLW Haag - Einführung in CSS               Angewandtes informationsmanagment               Dipl.Päd. Maria Illich-Edlinger
Befehl (Position)              Beschreibung                            Wert

position:absolute
                                                                       top:* px, left:* px,
position:relative              Positionsart (position) von Text
                                                                       bottom:* px, right:* px,
position:fixed                 Bildern, Div-Tags etc..
                                                                       (* = numerischer Wert)
position:static

Befehl (Klassifizierung)       Beschreibung                            Wert

visibility:                    Sichtbarkeit eines Elementes            visible, hidden

overflow:                      Überlauf eines Div-Tags                 visible, hidden, scroll, auto

                               sorgt dafür, dass andere Elemente
float:                         (z.B. text) um einen Container oder     left, right, none
                               Grafik herumfließen

                               hebt float-Befehle wieder auf,
                               beispielsweise um einen über die
clear:                                                                 both, left, right, none
                               komplette Breite der Seite
                               gehenden Fußbereich zu definieren

scrollbar-face-color:
scrollbar-highlight-color:     Farbe der Scrolleisten
                                                                       yellow, white oder HTML Farbangabe
scrollbar-arrow-color:         Beispiele Scrollbar mit Farbe
scrollbar-shadow-color:

                                                                       s-resize, e-resize,n-resize,crosshair, etc.
cursor:                        Cursorform
                                                                       Beispiele unter Mauszeiger

filter:flipH()                 Bild, Text spiegeln                     -

filter:flipV()                 Bild, Text kippen                       -

filter:Invert()                Bild invertieren                        Filter-Beispiele unter CSS-Filter

filter:Gray()                  Bild (Graubild)                         -

filter:XRay()                  Ergibt Foto-Negativ-Effekt              -

                               Text, Bild, input, etc.
zoom:X                                                                 Numerischer Wert
                               Objekt X-fach vergrößern

Tabellen <table>, Tabellenzeilen <tr> und Tabellenzellen <td>:
Für Tabellen gelten alle gängigen Definitionen für Schrift, Hintergrund, Rahmen, Abstand und Textausrichtung.

Einbinden im Kopf der HTML-Datei
<style type= "text/css">
Definition der Stile
</style>

Einbinden durch eine separate Datei
<link rel= "stylesheet" type= "test/css" href= "Datei.css">
Datei muss die Endung .css haben und eine reine Textdatei sein.


http://css.talky.de/index.php - noch etwas mehr CSS-Befehle in einer Übersicht

http://www.css4you.de/css-a-z.html - gute alphabetische Übersicht der Befehle mit Beispielen



HLW Haag - Einführung in CSS                Angewandtes informationsmanagment                 Dipl.Päd. Maria Illich-Edlinger
Numerische Angaben
Bei numerischen Angaben zu CSS-Eigenschaften, also etwa bei Schriftgrößen, Absatzabständen oder Rändern,
stehen Ihnen die weit verbreiteten Maßeinheiten zur Verfügung. Dabei sind absolute Angaben (z.B. Millimeter) und
relative Angaben (z.B. Prozent gegenüber "normal") möglich. Benutzen Sie für Ihre Angaben die folgenden
Abkürzungen:




Abkürzung Angabetyp            Bedeutung                                                       Beispiele

pt           absolut           Steht für Punkt. Typografische Maßeinheit. 1 Punkt              font-size:12pt;
                               entspricht 1/72 Inches.                                         line-height:14pt;

pc           absolut           Steht für Pica. Typografische Maßeinheit. 1 Pica entspricht     font-size:1pc;
                               12 Punkt.                                                       line-height:1.2pc;

in           absolut           Steht für Inch. Allgemeines Längenmaß im angelsächsischen border-width:0.1in;
                               Raum. 1 Inch entspricht 2.54 Zentimetern.                       margin-left:1in;

mm           absolut           Steht für Millimeter. Allgemeines Längenmaß. 1000. Teil des margin-bottom:10mm;
                               Urmeters.                                                       width:70mm;

cm           absolut           Steht für Zentimeter. Allgemeines Längenmaß. 100. Teil des font-size:1cm;
                               Urmeters.                                                       top:2.54cm;

px           absolut/relativ Steht für Pixel. Abhängig von der Pixeldichte des                 border-width:3px;
                               Ausgabegeräts, relativ also von Ausgabegerät zu                 margin-right:60px;
                               Ausgabegerät, absolut dagegen auf ein und das selbe
                               Ausgabegerät bezogen.

em           relativ           Steht für bezogen auf die Schriftgröße des Elements.            font-size:1.2em;
                               Ausnahme: wenn die font-size-Eigenschaft (also die              line-height:1.5em;
                               Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht
                               diese für bezogen auf die Schriftgröße des
                               Elternelements.

ex           relativ           Steht für bezogen auf die Höhe des Kleinbuchstaben x in         text-transform:uppercase;
                               diesem Element. Ausnahme: wenn die font-size-Eigenschaft font-size:1.3ex;
                               (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt
                               wird, steht diese für bezogen auf die Höhe des
                               Kleinbuchstaben x im Elternelement.

%            relativ           Steht für Prozent. Je nach CSS-Eigenschaft relativ zur          font-size:10pt;
                               elementeigenen Größe, oder zu der des Elternelements, oder line-height:120%;
                               zu einem allgemeineren Kontext. Bei nebenstehendem
                               Beispiel ist die Angabe zur Zeilenhöhe (line-height) relativ zur
                               Schriftgröße (font-size) zu interpretieren.




HLW Haag - Einführung in CSS                Angewandtes informationsmanagment           Dipl.Päd. Maria Illich-Edlinger
Benutzen Sie bei numerischen Bruchzahlen stets den Punkt als Dezimalzeichen, nicht das deutsche Komma, also
etwa 0.2cm und nicht 0,2cm. Auch Minuswerte sind bei einigen Wertzuweisungen möglich, markiert wie üblich durch
das Minuszeichen.
Sie können also sehr exakte Angaben notieren, doch Web-Seiten werden in der Regel auf Bildschirmen
ausgegeben, und Bildschirme bestehen heutzutage aus Pixeln, wobei die Pixeldichte der einzelnen Bildschirme sehr
unterschiedlich sein kann. Der Computer muss Ihre Angaben für die Ausgabe am Bildschirm letztlich in Pixel
umrechnen. Dabei kann es zu enttäuschenden Ergebnissen kommen. So erscheinen Schriftgrößen, die an einem
Bildschirm gut lesbar sind, in einer anderen Umgebung eventuell als zu klein. Leider sind daran auch die
unterschiedlichen Basiseinstellungen der Betriebssysteme mit schuld. So wird unter Windows-Systemen eine
Berechnungsgrundlage von 96dpi (Dots per Inch) für die Darstellung von Schriftarten verwendet (bei der Einstellung
"große Schriftarten" gar 120dpi), unter Systemen wie Linux und Macintosh sind es dagegen 72dpi.


Deshalb erscheinen Schriftgrößen, die unter Windows sauber aussehen, unter den anderen genannten Systemen
oft mickrig, während Schriftgrößen, die dort angenehm aussehen, unter Windows wiederum klobig wirken. Aber
auch direkte Angaben in Pixeln lösen das Problem nicht unbedingt. Ein Pixel auf einem 13-Zoll-Notebook-Bildschirm
mit 1024×768 Pixeln Bildschirmauflösung wirkt ganz anders als ein Pixel auf einem 19-Zoll-Desktop-Bildschirm mit
der gleichen Bildschirmauflösung.


Andere Angaben wie em oder Prozentwerte umgehen zwar das Problem der unterschiedlichen
Bildschirmdarstellungen - aber erstens kann man bei einer Angabe wie 1.2em kaum von "Formatierung" reden, und
zweitens bereiten solche Angaben auch andere Probleme. So kann es beispielsweise durch das Prinzip der
natürlichen Vererbung passieren, dass Schriftarten bei mehrfach verschachtelten Elementen (etwa bei Listen oder
Tabellen) immer kleiner oder größer werden.




HLW Haag - Einführung in CSS            Angewandtes informationsmanagment           Dipl.Päd. Maria Illich-Edlinger

								
To top