TIPS
by
NETtMAN

CSS Einführung

CSS ist eine englische Abkürzung für Cascading-Style-Sheet und bedeutet auf deutsch: Ein Dokument in welchem Stil-Beschreibungen aufgeführt sind, die ausserdem in der angegebenen Reihenfolge ausgeführt werden.

Also :

Element : (Name des Elementes)
Länge : 50%
Höhe : 20%
Farbe : rot
u.s.w.

Durch das Ausführen in angegebener Reihenfolge können die oben angegebenen Eigenschaften nochmals benannt werden und erhalten dadurch die z. B. folgenden Werte:

Element : (Name des Elementes)
Länge : 10%
Höhe : 2%
Farbe : gelb
u.s.w.

weitere Angaben zum selben Element würden jeweils die zuvor genannten überschreiben!

Das macht eigentlich wenig Sinn, denn, warum sollte ein und dieselbe Eigenschaft mehrmals genannt werden, wenn doch die letzte Anweisung allein die gültige ist ?

Und wirklich tut dies auch niemand. Es sei denn, es soll etwas Bewegung in das Layout kommen. Führen Sie Ihre Maus Mal über folgende Box.

Schneller Langsamer
default
linear
ease-in
ease-out
ease-in-out
cubic-bezier
steps


So lässt sich also interaktiv das Layout verändern. Je nachdem, wo sich der Maus-Zeiger befindet, geschehen die im CSS definierten Bewegungen (Veränderungen von Eigenschaften).

Eigentlich geschieht diese Veränderung von Eigenschaften urplötzlich. Von einem Moment zum anderen. Mit Hilfe von Zeitangaben als Eigenschaft (transition oder auch keyframes) werden solche Bewegungen in zeitintensivere Abschnitte aufgeteilt wodurch Animation entsteht. Die Dauer und Art der Intervalle können genauestens für jede Eigenschaft (Position, Höhe, Breite, Abstände, Farben, Bilder, Hintergrundfarben oder Hintergrundbilder) angegeben werden. Sogar ein Versatz (Wartezeit bis zum Einsetzen der Bewegung) ist möglich.

Doch zunächst ist vielleicht noch nicht ganz klar, was mit Hilfe von CSS überhaupt gestaltet wird. Es geht immer um die Gestaltung von Webseiten. Diese bestehen aus HTML (Hypertext-Markup-Language) - Elementen. Eine Übersicht derartiger Elemente findet sich in der Beschreibung zu : HTML !

CSS ist einfach ein Teil von HTML und hat daher einen eigenen HTML-TAG namens STYLE. Innerhalb diesen TAG´s werden script-sprachen-mäßig, aufeinanderfolgend, alle zu ändernden Elemente benannt, um dann innerhalb geschweifter Klammern eine Liste von Eigenschaften und dazugehörigen Werten anzufügen. Das sieht wie folgt aus :

Element {Eigenschaft:Wert;}

wobei der Eigenschaften und Werte beliebig viele aufeinander folgen können. Etwa so :

Element {Eigenschaft:Wert;Eigenschaft:Wert;Eigenschaft:Wert;}

Element ist Platzhalter für alle HTML-Tags. Einschränkend können Pseudo-Elemente (eigentlich Zustände), Element-Attribute ([type="text"] / [type="checked"] / [class="classname"]), diverse Klassen (frei definierbar) und diverse Identifikationsbezeichnungen (frei definierbar) die TAG´s filtern. Mit den Zuständen ist gemeint, ob die Maus sich gerade über diesem Element befindet (:hover), ob die im Link angegebene URL mit der momentanen URL der Webseite übereinstimmt (:active), ob die im Link angegebene URL bereits in der Browser-History bekannt ist (:visited), ob ein Eingabefeld im Moment aktiv ist (:focus), ob ein Eingabefeld ein- oder ausgeschaltet oder gesetzt ist (:enabled / :disabled / :checked), ob einem Element Inhalt vordefiniert wird (:before / :after / :first-letter / :first-line / :last-line / :first-letter / :first-child / :last-child)- was normalerweise erst durch HTML geschieht), ob ein Element Bezug hat (:nth-child* / :first-of-type / :last-of-type). Ebengenannte Einschränkungen können miteinander kombiniert werden.

Obendrein kann Programmiersprachenähnliches - wenn - die betreffenden Elemente einschränken: (:not) betrifft demnach alle nichtbenannten Elemente. (:empty) betrifft alle Tabellenzellen ohne Inhalt.

* = NTH-CHILD betrifft ein berechnetes Element, wobei die Formel hierzu innerhalb von Klammern angefügt wird. Es kann das n`te Element + x sein, oder x oder even (gerade) oder odd (ungerade). Das sieht so aus :

:nth-child(3n+2)
:nth-child(7)
:nth-child(even)

Einschränkende Pseudo-Elemente / Pseudo-Klassen / Klassen / ID´s folgen direkt dem(n) gemeintem(n) Element(en). Beispiel:

h5:hover {background-color:green;}
Alle Elemete "h5" ändern ihre Hintergrundfarbe zu grün, sobald sich der Maus-Zeiger über ihnen befindet.




oder:
h5:nth-child(odd):hover {background-color:green;}

Jedes ungerade Element der Serie "H5" ändert seine Hintergrundfarbe zu grün, sobald sich der Maus-Zeiger über ihm befindet (wobei das erste Element die Nummer 0 hat weil Computer nun Mal bei 0 anfangen mit dem Zählen).




9.6.16 15:05
 


bisher 0 Kommentar(e)     TrackBack-URL

Name:
Email:
Website:
E-Mail bei weiteren Kommentaren
Informationen speichern (Cookie)



 Smileys einfügen
Myblog.de website reputation  Seitenreport - Die SEO und Website Analyse  Quality monitored by qualidator.com   Daisypath Friendship tickers OpenOffice

 responsive menu
 rauf
  runter