JMBNET2

CSS- Tips

Reihenfolge und Gültigkeit

Wird eine Eigenschaft oder ein Regelsatz mehrfach deklariert, so wird die zuletzt deklarierte Eigenschaft verwendet.
Es existiert aber auch die Möglichkeit, einen bestimmten Wert als wichtig zu kennzeichnen. Dann wird der Wert dieser Eigenschaft nicht durch eine nachfolgende Deklaration mit identischer Gewichtung überschrieben.
Dies geschieht, indem nach dem Wert selbst ein Leerzeichen, ein Ausrufezeichen (!) sowie das Schlüsselwort important notiert werden, z.B.: h1 { color: red !important; }

Klassen, Selektoren etc.

Guckst Du hier
Voneinander unabhängige Selektoren, denen dieselben Eigenschaften zugewiesen werden, können mit Kommata getrennt werden.

einfache Selektoren

Universalselektor: *
Spricht alle Elemente im Dokument an

Typselektor: z.B. p {border: 2px;}
Umfasst alle Elemente eines Typs; hier z.B. alle Abschnitte (p)

Klassenselektor: mit Punkt vor dem Klassennamen
Aufruf dann mit <p class="beispiel">
Man kann auch den Klassenselektor mit dem Typselektor verbinden. Schreibweise: „elementname.klassenname“
Achtung:
.beispiel.hinweis meint Elemente, die der Klasse „beispiel“ und „hinweis“ angehören
.beispiel, .hinweis meint Elemente, der Klassen „beispiel“ oder „hinweis“ angehören (also wie zwei unabhängige Selektoren)
.beispiel .hinweis meint Elemente, die der Klasse „hinweis“ innerhalb der Klasse „beispiel“ angehören (wie Nachfahrenselektor)

ID-Selektore
Bezieht sich auf die Elemente, denen eine bestimmte ID zugeordnet ist: # gefolgt von ID-Name
da es sich um eine Identifikation handelt, sollte eine ID nur einmalig im Dokument vergeben werden. IDs eignen sich gut für das Abfragen von Formularwerten oder Setzen von Werten im Dokument; weniger für CSS Auszeichnungen.
Aufruf z.B. mit <div id="beispiel">

Pseudoklassen: mit Doppelpunkt
z.B. für :link, :visited, :hover, :active, :focus, :disabled, :enabled, :checked, :valid, :invalid
Für links (a Element) oder Checkboxen bzw. Eingabefelder 8input)

Kombinatoren

Kindselektor: e > f
Nur für f welches Kind (erster Nachfahre) von e ist

Nachfahrenselektor: e f
Nur für f welches Nachfahre (egal welcher Ordnung> von e ist

Nachbarselektor: e + f
Nur für f, die im Elementbaum direkt hinter e kommen; also z.B. für den ersten Absatz, der einer Überschrift H1 folgt; sich also nicht innerhalb des H1 tags befindet sondern auf gleicher Ebene

The lobotomized owl selector: * + *
Gilt für alle Elemente, denen auf derselben Ebene ein Geschwisterelement vorausgeht, also alle Elemente, welche nicht das erste Kind sind.

Geschwisterselektor: e ~ f
Alle f, die unterhalb von e in gleicher Ebene vorkommen

Kommentare

/* Kommentar */

Alignments

text-align : [left/right/center/justify];
Bezieht sich nicht auf ein Block Element sondern nur auf dessen inline Inhalt

Formatierung/Positionierung

Display

Display [block|inline] gibt an ob und wie ein Element angezeigt werden soll.
Ein und ist nur so breit wie nötig.

Float und clear

float:[left|right] gibt an, auf welcher Seite ein Element (z.B. Bild) in einem umfließenden Text erscheinen soll.
Elemente, die nach einem float Element kommen, werden um dieses herumfließen. Um das zu vermeiden, kann mit clear:[left|right|both] angegeben werden, auf welcher Seite nicht um ein float Element herum geflossen werden darf.
Nach Containern mit gefloateten Elementen (und dem umgebenden Text) am besten immer ein leeres div mit clear:both einfügen.

Clearfix Hack

Wenn ein gefloatetes Element (z.B. Bild) größer ist als das umgebende Element, dann schießt es über seinen Container hinaus (overflow).
Um das zu vermeiden kann mit overflow:auto Abhilfe geschaffen werden.

Etwas verstecken

Mit display:none wird ein Element überhaupt nicht dargestellt. Es beansprucht auch keinen Platz.
visibility:hidden hingegen beansprucht den Platz, der Inhalt wird aber nicht dargestellt.

Position

zur Positionierung gibt es position:[static|relative|absolute|fixed].
Static entspricht dem normalen Fluss. Top, bottom, left und right haben darauf keinen Einfluss.
Relative: Positionierung relativ zur normalen Position, d.h. mit left, top, bottom, right als Bezugspunkt etwas verschoben. Negative Werte sind möglich.
Fixed: Positionierung relativ zum Viewport (Fensterrahmen) und bleibt auch dort, wenn der Inhalt gescrollt wird. Das Element beansprucht an seiner Originalstelle keinen Platz. Absolute: Positionierung relativ(!) zum nächsten Vorfahren-Element. Falls kein Vorfahren Element angegeben ist, ist body das Vorfahrenelement. (Das Vorfahrenelement entscheidet also darüber, ob das neue Element mitgescrollt wird oder fix ist)

Bilder in einer Reihe, links- oder rechtsbündig

... sogar mit Rahmen
Dreimal singleimage:
Alles linksbündig, alle mit Rand, das mittlere mit Unterschrift und daneben geht es inline weiter. Wenn danach die Zeile (inline) komplett geschlossen werden soll, bitte ein clearfix (clear:both;) einfügen in div und /div.


Hier ein singleimageleft, ein singelimage und ein singleimageright. Auch hier ein nachgeschobenes clearfix.

an fixer position in Bezug auf Inhalt

Hier

steht

noch

viel

Text

drum
herum.

an fixer Position in Bezug auf den Fensterrahmen (in Home-Position, d.h. noch nicht gescrolltes Fenster)

Irgendwo oben müsste ein etwas kleineres Bild mit rotem Rahmen zu sehen sein.

Hovernder Bereich, der auch nicht mitscrollt

Hier wird eine Klase pageend definiert. Ganz unten steht jetzt in kleinerer Schrift: Das steht unten
Definiert ist es über {margin-top:0px; z-index:4; position:fixed;left:0em;height:1.1em; right: 0em; bottom:0; text-align:center; font-size:0.6em; vertical-align:top;line-height:1em; }
z-index, damit die Schrift immer oben bleibt

---

Impressum und Erklärung zum Datenschutz