Cascading Style Sheet

Mit CSS lassen sich Objekte frei auf Webseiten positionieren und mit Konturen, Hintergrundfarben, Bildern, Schatten und Transparenzen versehen. Texte können mit den klassischen typografischen Merkmalen versehen werden. Hyperlink werden dort auch deffiniert.

CSS-Vorgaben (Selektoren,Attribute und Werte)

Eigenschaften werden über Selektoren zugewiesen. Der p-Tag aus HTML ist jetzt ein Selektor und anschließend
wird das Attribut oder der Wert zugewiesen.

Beispiel:

p { font-family: Verdana;
fontsize: 12px
}

CSS Link zu w3schools

selektor { eigenschaft; wert; }

Durch die zentrale Eingabe aller Formate in einer „Cascading Style Sheet“ – Datei können spätere Änderungen in komplexen Portalen in einer Datei ausgeführt werden und finden aber Anwendung in allen Dateien welche auf diese CSS verweisen.

Die Darstellung für die Ausgabegeräte kann auch in dieser CSS statt finden. Mit Hilfe der CSS lässt sich also eine vollständige Trennung zwischen Form und Inhalt einer Seite erreichen. Die Darstellung ist abhänig vom Ausgabe Medium, der Inhalt stets der selbe und muss nicht geändert werden.

CSS ist kein HTML sondern eine Ergänzung zu HTML. In HTML wird der Inhalt strukturell ausgezeichnet und in CSS werden die Vorgaben gemacht, wie was dargestellt wird.

Firefox, Safari und Chrome CSS 2.0 korrekt um, während der Internet Explorer nur eine mangelhafte Darstellung bietet.

Verwendete Schrift sollte auf dem User-System vorhanden sein oder mit geliefert werden. Am besten eignet sich Verdana. Es besteht auch die Möglichkeit verschiedene zu zu weisen, erst 1 dann zwei und 3 … . Dann nimmt das system die Schrift welche vorhanden ist.

Maßeinheiten werden am besten als px (Pixel) und % (Prozent) ausgewiesen, da andere Angaben wie pt, pc, mm, cm, je nach Betriebssystem zu unterschiedlichen Darstellungen führt. So wird an einem MAC die Schrift eben anders erscheinen.

Vererbungsprinzip

Viele CSS-Vorgaben für ein Element gelten für alle in ihm enthaltenen Elemente, außer es wurde speziell was anderes definiert. Übergeordnete Elemente werden auch als Ancestor-Elemente (Vorfahren), direkt übergeordnet als Parent-Elemente (Eltern) bezeichnt. darin enthaltenen Elemente werden entsprechend Descendants (Nachfahren), direkt enthaltene Child-Elemete (Kinder) genannt. Hintergrundfarben werden nicht vererbt.

Pseudoklassen und Pseudoelemnte

Zustand der Hyperlinks können wie nachfolgend beschrieben werden. Die Reihenfolge muss eingehalten werden!

a:link (noch nicht besuchte Seite)
a:visited (bereits besuchte Seite)
a:focus (mit der Tabulatortaste fokussiert)
a:hover (Maus darüber)
a:activ (Maus gedrückt)

Die Information, ob der Link schon besucht wurde oder nicht, wird automatisch durch den Browser mitgeteilt. Diese Info kommt aus der Chronik oder History. Die Zustände, also Farbe oder Unterstrich müssen dem Link aber noch zugewiesen werden. Diese Zustände können aber nicht nur bei Links Anwendung finden, sondern können auch bei anderen Elementen angewandt werden.

Pseudoelemte Beispiel in CCS3, mit 2 Doppelpunkten um eine Unterscheidung zu bekommen. Dies wird aber noch nicht von allen Browsern anerkannt.p::first-letter

Pseudelemte für automatisch erzeugten Inhalt.

Mit CSS kann automatisch Text und Bild anhängen ohne das diese im Queltext von HTML auftauchen. Diese werden beim Laden der seite automatisch generiert.

:befor bzw. :after (Inhalt welcher vorher oder nachher eingefügt wird.)

Diese Methode kann man z.B. anwenden um an Links ein kleines Icon zu platzieren. Hierzu muss nicht in der HTML-Datei bei jedem Link der Verweis auf das IMG (Bild) erstellt werden. Sondenr es wird in der CSS-datei mit dem Pseudoelemt automatisch erzeugt.

a:after {content: url(…………………._link.gif):
}

Innenabstände innerhalb eines Rahmen können mit dem Attribut „padding“ festgelegt werden.

p { padding: 5px }

p { padding: oben rechts unten links }
p { padding: 5px 15px 5px 15px }

Hintergründe / Grafik einbinden das kann über eine Bild welches via URL angegeben wird einbinden.

background-image: url(pfad/zur/garfik.jpg)

Die Werte des Hintergrundes lassen sich flexibel gestalten. So kann zu dem auch noch eine Hintergrundfarbe oder als Wasserzeichen eingesetzt werden.

Kachelmuster steuern

p {
background-repeat: repeat; (wiederholen, Standardwert)

background-repaet: repeat-x; (nur waagerecht wiederholen)
background-repaet: repeat-y; (nur senkrecht wiederholen)
background-repaet: no-repeat; (nicht wiederholen)
}

Hintergrundbild positionieren

p {
background-image: url(grafik.jpg)
;
background-repeat: no-repeat;
background-position: 20px 50px;
}

Andere Attribute für die Position sind:

background-position: top; (oben bündig)
background-position: buttom; (unten bündig)
background-position: center; (zentriert)
background-position: left; (links bündig)
background-position: right; (rechts bündig)

Wasserzeichen – Effekt

p {
background-image: url(grafik.jpg);

background-repeat: no-repeat;
background-position: 20px 50px;
background-attachment: fixed;
}

Möglich Werte sind hierfür scroll oder fixed.

Festlegen von Konturstärken

#links {
border-left-width: 2.5em;

border-left-style: solid;
border-color: red;
padding-left: 2.5em;
text-align:justify
}

Oder

H1 {
border-width: 1px 2px 3px 4px;
}

Kontursstärke

p {
border-top-witdth: 1px;

border-right-width: 2px;
border-buttom-width: 3px;
border-left-width: 4px;
}

Identischen Elementen unterschiedliche Eigenschaft zuzuweisen.

<p>Dies ist der erste Absatz.</p><p> class=“hervorgehoben“>Dies ist der erste Absatz.</p>
<p>Dies ist der erste Absatz.</p>

In den CSS-Eigenschaften sollte dann für den Part hervorgehoben ausgezeichnet werden.

p.hervorgehoben {color: blue;
font-weight: bold;
}

Mit der CSS-Syntax p.hervorgehoben kann man allerdings nur Absätze <p> formatieren. Wenn andere Elemente, wie Überschriften angesprochen werden sollen, einfach  das p vor dem Punkt weg lassen.

Es gibt verschiedene Möglichkeiten in CSS zu Positionieren. Dies legt lediglich die Art der Positionierung fest, aber noch nicht exakt
fest!

img#logo { position: static; }
Mit dem Standard static werden die Objekte positioniert, in dem diese sich gegenseitig verdrängen. Hier wird in der Regel die Eigenschaft margin oder float vergeben.
img#logo { position: relative; }
Hier müssen die Angaben für top, left, right, bottom gemacht werden, sonst verhält sich das wie oben bei static.

img#logo { position: absolute; }
Hier müssen die Angaben für top, left, right, bottom gemacht werden.
Diese Objekt liegen jetzt eine Ebene höher und verdrängen dadurch nicht mehr. Verschieden Objekte können sich jetzt aber Überlagern.

img#logo { position: fixed; }
Ähnlich wie absolut, bleibt aber an Ort und Stelle, selbst wenn der Rest der Seite gescrollt wird.

 Festlegen der Ebenenhierarchie

Mit dem Attribut z-index 1; (=Objekttiefe<). Je höher der Wert desto weiter vortne liegt das Objekt. Also z-index 5000 liegt deutlich weiter vorne.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Time limit is exhausted. Please reload CAPTCHA.