Kurzreferenz css

Seite 1 von 9

Kurzreferenz Cascading Stylesheets (CSS) Einbindung einer ausgelagerten CSS-Datei: <html> <head> <title>HTML-Datei verbunden mit ausgelagerter CSS-Datei</title> <link rel="stylesheet" type="text/css" href="formate.css"> </head> <body Einbindung einer ausgelagerten CSS-Datei mit der Zeile: <link rel="stylesheet" type="text/css" href="formate.css"> Der Befehl <link> ist ein Standalone-Tag und hat keinen Endtag. Der Befehl <link> muß im Kopfbereich (zwischen <head> und </head>) der HTML-Datei stehen. Mit der Eigenschaft href="…" wird der Name und gegebenenfalls der Pfad der CSS-Datei angegeben. </body> </html> Die Datei "formate.css" kann so aussehen (kein HTML-Grundgerüst; die Datei muss mit der Endung *.css gespeichert werden): body { background-color: #FF0000; } p { color: #CCCCCC; } Tagweises Formatieren: p { background-color: #FF0000; color: #FFFFFF; } Das Beispiel enthält eine Formatdefinition für p-Elemente, also für alle Absätze. Solche Formatdefinitionen haben immer den gleichen Aufbau und bestehen aus folgenden Teilen: 1.) Selektor: Als Selektor wird das bezeichnet, was vor den geschweiften Klammern steht. Der Selektor wählt aus, wofür die folgenden Definitionen gelten sollen. Im obigen Beispiel gelten die Formate für alle Absätze (p-Elemente). 2.) Definitionen: Die eigentlichen Definitionen zum Format stehen stets in geschweiften Klammern { und }. Sie bestehen darin, dass eine oder mehrere CSS-Eigenschaften notiert werden und einen Wert erhalten. Im oberen Beispiel werden etwa die CSS-Eigenschaften background-color (Hintergrundfarbe) und color (Schriftfarbe) verwendet. Der Eigenschaft background-color wird der Wert #FF0000 zugewiesen, und der Eigenschaft color der Wert #FFFFFF. Zwischen Eigenschaft und Wertzuweisung muss stets ein Doppelpunkt stehen. Abgeschlossen wird jede Definition immer mit einem Strichpunkt (;). p, h1, td { background-color: #FF0000; color: #FFFFFF; } Sollen mehrere verschiedene HTML-Elemente die gleiche Formatierung erhalten, so werden diese mit Kommata getrennt vor der geschweiften Klammer genannt. Das Beispiel obere enthält eine Formatdefinition für alle Absätze (p), für alle Überschriften erster Ordnung (h1) und für alle Zellen (td).

Seite 2 von 9

Klassenweises Formatieren: *.rot { background-color: #FF0000; } .grau { background-color: #CCCCCC; } Sie bestimmen eine Formatdefinition für eine Klasse, indem Sie im Selektor einen Stern und einen Punkt notieren und unmittelbar dahinter einen Namen für die Klasse angeben. Der Stern kann auch weggelassen werden. Der Klassenname darf keine Leerzeichen, Sonderzeichen und Umlaute enthalten. Als Klassennamen sollten Sie auch nicht die Namen von HTML-Elementen verwenden: *.body oder *.table sind also nicht so günstige Klassennamen und sorgen für Verwirrung, da es sich bei body und table um HTML-Elemente handelt. Geeigneter wären zum Beispiel Klassennamen wie diese: *.rot, *.gruen, *.hinterlegt, *.fliesstext. Im HTML-Dokument müssen Sie die Klassen allerdings auf die entsprechenden HTML-Elemente anwenden mit der Eigenschaft class="…". Ein und dieselbe Klasse kann mehrmals und auf verschiedene HTML-Elemente verteilt werden. Im unteren Beispiel (Ausschnitt einer HTML-Datei) wurden die Klassen *.rot und *.grau auf verschiedene HTML-Elemente (h1 und p) verteilt. <h1 class="rot">Diese Überschrift erster Ordnung ist rot hinterlegt.</h1> <p class="grau">Dieser Absatz ist hellgrau hinterlegt.</p> <p class="rot">Dieser Absatz ist rot hinterlegt.</p> 1. Anmerkung: Während Sie beim klassenweisen Formatieren die Klassen auf die entsprechenden HTML-Elemente verteilen müssen, entfällt diese Arbeit beim tagweisen Formatieren, weil dort alle HTML-Elemente derselben Sorte (zum Beispiel alle p = alle Absätze) automatisch ihr Aussehen ändern. 2. Anmerkung: Das klassenweise Formatieren ergänzt und überschreibt gegebenenfalls das tagweise Formatieren. Hierzu ein kleines Beispiel: Quelltext CSS-Datei: p { background-color: #0000FF; color: #FFFFFF; } *.rot { background-color: #FF0000; } Quelltext HTML-Datei (Ausschnitt): <p>Dieser Absatz ist blau hinterlegt, die Schriftfarbe ist weiß.</p> <p class="rot">Dieser Absatz ist rot hinterlegt, die Schriftfarbe ist weiß.</p> Kommentare: /* Kommentar */ Zwischen /* und */ kann in der CSS-Datei ein Kommentar stehen, der nicht als CSS-Angabe interpretiert wird. Anmerkung: Der Kommentar in einer CSS-Datei funktioniert wie der Kommentar in einer HTML-Datei: er dient eigenen Randnotizen, Bemerkungen und Erklärungen und wird nicht angezeigt oder interpretiert. In der HTML-Datei steht der Kommentar zwischen , in der CSS-Datei zwischen /* und */.

Seite 3 von 9

Schriftformatierung: p { font-family: Verdana, Arial, sans-serif; font-style: italic; font-variant: small-caps; font-size: 16px; font-weight: bold; letter-spacing: 2px; line-height: 22px; text-decoration: underline; color: #0000FF; } font-family: Schriftart Ist die erste angegebene Schriftart verfügbar, wird diese verwendet, falls nicht, wird die zweite Schriftart verwendet, u.s.w. Folgende generische Schriftfamilien sind fest vordefiniert - diese Angaben können Sie also neben Schriftartnamen benutzen: serif = eine Schriftart mit Serifen sans-serif = eine Schriftart ohne Serifen monospace = eine Schriftart mit dicktengleichen Zeichen font-style: Schriftstil Mit font-style können Sie den Schriftstil bestimmen. italic = Schriftstil kursiv normal = normaler Schriftstil font-variant: Schriftvariante Mit font-variant können Sie die Schriftvariante bestimmen. small-caps = Kapitälchen normal = normale Schriftvariante font-size: Schriftgröße Mit font-size können Sie die Schriftgröße bestimmen. Erlaubt ist eine numerische Angabe. Erfolgt die Größenangabe in Pixel, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: font-size: 14px;. font-weight: Schriftgewicht Mit font-weight können Sie das Schriftgewicht bestimmen. bold = fett bolder = extra-fett lighter = dünner normal = normales Schriftgewicht Nicht jede Schriftart unterstützt die Angaben bolder und lighter. letter-spacing: Zeichenabstand Mit letter-spacing können Sie den Abstand zwischen den Buchstaben bzw. Zeichen im Text bestimmen. Erlaubt ist eine numerische Angabe. Wird der Zeichenabstand in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: letter-spacing: 1px;. line-height: Zeilenhöhe Mit line-height können Sie die Zeilenhöhe bestimmen. Erlaubt ist eine numerische Angabe. Wird die Zeilenhöhe in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: line-height: 22px;. text-decoration: Textdekoration Mit dieser Eigenschaft können Sie zusätzliche Textformatierungen wie unterstrichenen oder durchgestrichenen Text erzwingen. Folgende Angaben sind möglich: underline = unterstrichen overline = überstrichen line-through = durchgestrichen none = normal (keine Text-Dekoration) color: Textfarbe Mit color können Sie die Textfarbe bestimmen. Erlaubt sind u. a. hexadezimale Farbangaben, zum Beispiel: color: #FF0000;.

Seite 4 von 9

Vertikale und horizontale Ausrichtung: td { text-align:right; vertical-align: top; }

text-align: horizontale Ausrichtung Mit text-align wird die horizontale Ausrichtung bestimmt. left = linksbündig ausrichten center = zentriert ausrichten right = rechtsbündig ausrichten vertical-align: vertikale Ausrichtung Mit vertical-align wird die vertikale Ausrichtung bestimmt (wird nicht überall und von allen Browsern unterstützt). top = obenbündig ausrichten middle = mittig ausrichten bottom = untenbündig ausrichten Außen- und Innenabstände: p { margin: 20px; padding: 10px; } margin: Außenabstand Außenabstand oder Abstand nach außen bedeutet: erzwungener Leerraum zwischen dem aktuellen Element zu seinem Elternelement oder Nachbarelement. Wird die Außenabstand in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: margin: 20px;. margin: Außenabstand von allen vier Seiten margin-top: Außenabstand von oben margin-right: Außenabstand von rechts margin-bottom: Außenabstand von unten margin-left: Außenabstand von links In besonderen Fällen ist es auch möglich, einen negativen Wert für den Außenabstand zu notieren, zum Beispiel: margin-left: -30px;. padding: Innenabstand Innenabstand bedeutet: erzwungener Leerraum zwischen dem Inhalt eines Elements zu seinem eigenen Elementrand, also zum Beispiel zwischen dem Text eines Elements und dem Rand dieses Elements. Wird die Innenabstand in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: padding: 10px;. padding: Innenabstand von allen vier Seiten padding-top: Innenabstand von oben padding-left: Innenabstand von links padding-bottom: Innenabstand von unten padding-right: Innenabstand von rechts Breite und Höhe: input { width: 200px; height: 22px; } width: Breite von Elementen Wird die Breite in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: width: 200px; Es ist auch möglich, die Breite in Prozent anzugeben. Dann folgt nach der Zahl die Einheit %, zum Beispiel: width: 25%;. height: Höhe von Elementen Wird die Höhe in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: height: 200px; Es ist auch möglich, die Höhe in Prozent anzugeben. Dann folgt nach der Zahl die Einheit %, zum Beispiel: height: 25%;.

Seite 5 von 9

Rahmen: td { border-width: 1px; border-style: otted; border-color: #FF0000; }

border-width: Rahmenstärke Mit border-width können Sie Stärke des Rahmens um ein Element bestimmen. Wird die Rahmenstärke in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: border-width: 1px;.

border-style: Rahmentyp Mit border-style können Sie den Rahmentyp festlegen. none = kein Rahmen (bzw. unsichtbarer Rahmen) dotted = gepunktet dashed = gestrichelt solid = durchgezogen border-color: Rahmenfarbe Mit border-color können Sie Rahmenfarbe bestimmen. Erlaubt ist u. a. eine hexadezimale Farbangabe. Hintergrundfarben und Hintergrundbilder: body { background-color: #FF0000; background-image: url(bilder/hintergrundbild.gif); background-repeat: no-repeat; background-attachment: fixed; } background-color: Hintergrundfarbe Mit background-color können Sie eine Hintergrundfarbe bestimmen. Erlaubt ist u. a. eine hexadezimale Farbangabe.

background-image: Hintergrundbild Mit background-image können Sie eine Hintergrundgrafik bestimmen (gegebenenfalls Pfad angeben). Per Voreinstellung wird die Hintergrundgrafik als Wallpaper (Tapetenmuster) wiederholt. Wird sowohl eine Hintergrundfarbe als auch ein Hintergrundbild notiert, so liegt das Hintergrundbild über der Hintergrundfarbe. Bei gekacheltem Hintergrundbild würde die Hintergrundfarbe nicht zu sehen sein (wenn das Hintergrundbild geladen ist).

background-repeat: Wiederholungseffekt Mit background-repeat können Sie das Wiederholungsverhalten einer Hintergrundgrafik, die Sie mit background-image einbinden, kontrollieren. repeat = wiederholen (Voreinstellung) repeat-x = nur eine Zeile lang waagerecht wiederholen repeat-y = nur eine Spalte lang senkrecht wiederholen no-repeat = nicht wiederholen, nur als Einzelbild anzeigen

background-attachment: Wasserzeichen-Effekt Bei längeren Elementen wandert ein Hintergrundbild beim Scrollen im Text optisch mit. Sie können jedoch erzwingen, daß das Hintergrund stehen bleibt (Wasserzeichen-Effekt). scroll = mitscrollen (Voreinstellung) fixed = Hintergrundbild bleibt stehen

Seite 6 von 9

Pseudoformate für Verweise: a:link { color:#00FF00; text-decoration:none; } a:visited { color:#00FF00; text-decoration:none; } a:hover { color:#FF00FF; text-decoration:none; } a:active { color:#CCCCCC; text-decoration:none; } Bei Pseudoformaten wird zunächst das betroffene HTML-Element notiert, im diesem Fall das HTML-Element für Verweise (a). Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, im Beispiel etwa link (für noch nicht besuchte Verweise), visited (für bereits besuchte Verweise), hover (für Verweise, während der Anwender mit der Maus darüber fährt), active (für angeklickte Verweise). a:link: noch nicht besuchte Verweise a:visited: bereits besuchte Verweise a:hover: Verweise, während der Anwender mit der Maus darüber fährt a:active: angeklickte Verweise Es empfiehlt sich, die selben Eigenschaften für a:link und a:visited zu vergeben, da manche Browser nicht oder nur unzureichend zwischen noch nicht besuchten und bereits besuchten Verweisen unterscheiden. Ebenen (allgemein): div-Element Das div-Element im HTML beschreibt eine Ebene und dient ausschließlich dazu, mit Stylesheets formatiert und positioniert zu werden. Zwischen <div> und </div> können weitere Elemente wie Absätze, Tabellen, Listen, Formulare, Bilder etc. stehen. Im unteren Beispiel (Ausschnitt einer HTML-Datei) wurde eine Ebene mit der Klasse *.ebene1 notiert: <div class="ebene1">Inhalte, welche in der Ebene stehen</div> Diese Ebene könnte in einer ausgelagerten CSS-Datei wie folgt formatiert werden: *.ebene1 { width: 150px; height: 150px; background-color: #FF0000; } Diese Ebene erhält also eine Breite und Höhe von je 150 Pixel und eine rote Hintergrundfarbe. Man unterscheidet absolut positionierte Ebenen und relativ positionierte Ebenen (s. u.).

Seite 7 von 9

Ebenen ohne spezielle Positionierung: *.ebene2 { width: 150px; height: 150px; } *.ebene3 { width: 150px; height: 150px; } Ebenen ohne spezielle Positionierung folgen dem normalen Elementfluss: wenn mehrere Ebenen ohne spezielle Positionierung notiert werden, so liegen diese alle untereinander. In dem oberen Beispiel würde zunächst die Ebene mit der Klasse *.ebene2 angezeigt werden und gleich darunter die Ebene mit der Klasse *.ebene3. *.ebene4 { width: 150px; height: 150px; float: left; } *.ebene5 { width: 150px; height: 150px; float: left; } *.ebene6 { width: 300px; height: 150px; clear: both; } float: Textumfluss Mit float können Sie bestimmen, daß nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen. left = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen. right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen. none = kein Umfluss (Normaleinstellung).

clear: Fortsetzung bei Textumfluss Mit clear können Sie einen Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen. left = Erzwingt bei float: left die Fortsetzung unterhalb. right = Erzwingt bei float: right die Fortsetzung unterhalb. both = Erzwingt in jedem Fall die Fortsetzung unterhalb. none = Erzwingt keine Fortsetzung unterhalb. (Normaleinstellung). Im oberen Beispiel liegen die Ebenen mit den Klassen *.ebene4 und *.ebene5 nebeneinander und die Ebene mit der Klasse *.ebene6 darunter.

Seite 8 von 9

Absolut positionierte Ebenen: *.ebene7 { position: absolute; left: 100px; top: 50px; width: 150px; height: 150px; z-index:1; } position: absolute Mit position: absolute wird die Ebene absolut positioniert. Die Position der Ebene wird gemessen vom Rand des Elternelements. top/left: Startposition des Elements von oben und links Eine absolut positionierte Ebene kann mit top und left positioniert werden. Mit diesen Angaben können Sie bestimmen, wo die Ebene von links und oben (ausgehend vom Elternelement) beginnt. Wird die Startposition in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: top: 50px;. z-index: Schichtposition bei Überlappung Sie können die Reihenfolge überlappender div-Bereiche definieren: Elemente mit höherer Nummer überdecken Elemente mit niedrigerer Nummer. Ebenen mit übergroßem Inhalt: *.ebene8 { width: 150px; height: 150px; overflow: hidden; } overflow: Verhalten bei übergroßem Inhalt Mit overflow können Sie bestimmen, wie übergroße innere Elemente behandelt werden. Beispiel: Wenn in einer Ebene mit einer Breite und Höhe von je 150 Pixel ein Bild liegt, welches 300x300 Pixel groß ist, so kann mit der Eigenschaft overflow geregelt werden, wie dieses übergroße Bild angezeigt wird. visible = Element wird so weit ausgedehnt, dass sein Inhalt auf jeden Fall komplett sichtbar ist. hidden = Element wird abgeschnitten, wenn es die Grenzen überschreitet. scroll = Element wird abgeschnitten, wenn es die Grenzen überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie in einem eingebetteten Framefenster. auto = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.

Seite 9 von 9

Inhalt: Einbindung einer ausgelagerten CSS-Datei Seite 1 Tagweises Formatieren Seite 1 Klassenweises Formatieren Seite 2 Kommentare Seite 2 Schriftformatierung Seite 3 Vertikale und horizontale Ausrichtung Seite 4 Außen- und Innenabstände Seite 4 Breite und Höhe Seite 4 Rahmen Seite 5 Hintergrundfarben und Hintergrundbilder Seite 5 Pseudoformate für Verweise Seite 6 Ebenen (allgemein) Seite 6 Ebenen ohne spezielle Positionierung Seite 7 Absolut positionierte Ebenen Seite 8 Ebenen mit übergroßem Inhalt Seite 8

Kurzreferenz css

Presentations & Public Speaking

Transcript of Kurzreferenz css