TYPO3, iOS & Web-Development Blog

CSS Pseudo-Klassen

Mit CSS Pseudo-Klassen lassen sich Elemente in Ihren Positionen oder Eigenschaften ohne zusätzliche CSS Klassen ansprechen. Wir nutzen also die Möglichkeiten des Browsers oder Positionen des Elements im HTML Markup. So lassen sich – zumindest in modernen Browsern – ganz einfach entsprechende Elemente selektieren und Style-Angabe definieren.

Eigenschaften Pseudo-Klassen

:hover

Durch die :hover Pseudo-Klasse lässt sich ein Mouse-Over Effekt nutzen. Mit diesem CSS Befehl werden oft Links beim Überfahren mit der Maus optisch anders dargestellt. Modifizieren lassen sich unter anderem Farbe und Unterstreichen. In modernen Browsern wird diese Pseudo-Klasse auch auf normalen, nicht Link-Elementen berücksichtigt. Somit können wir via CSS3 eine ganze aufklappbare Navigation erstellen (:hover & display).

:visited

Mit der CSS Pseudo-Klasse :visited lässt sich bereits besuchter Link grafisch anders darstellen und signalisiert so dem Besucher, dass er diese Seite bereits besucht hat.

:active

Die Pseudo-Klasse :active ermöglicht es, Links auf der aktuell geöffneten Seite anders darzustellen.

Positions Pseudo-Klassen

:first-child

Mit :first-child werden Elemente selektiert und angesprochen die nach dem entsprechenden Muster das erste „Kind-Element“ darstellen.

:last-child

Last-Child funktioniert genau wie First Child, jedoch wird hierbei das letzte Kind-Element der entsprechenden Selektion angesprochen.

:first-line

Fügt Style-Definitionen auf die erste Textzeile des selektierten Elements hinzu.

:first-letter

Mit First-Letter kann man das Aussehen des ersten Zeichens eines Elements anpassen.

:nth-child( <odd/even/Zahl> )

Mit der Pseudo-Klasse :nth-child lassen sich alle gerade bzw. ungeraden Elemente ansprechen. Ein einfaches Anwedungsbeispiel wären Tabellenzeilen oder Listen. So könnte man jede zweite Zeile mit einer leicht anderen Farbe hinterlegen. Auch ist es möglich dort z.B. jedes dritte Element (3n) anzusprechen. Zusätzlich ist es möglich jedes dritte Element – jedoch erst ab dem zweiten Element – anzusprechen (3n+2).

Wert Pseudo-Klassen

[attr=value]

Ebenfalls können wir Elemente direkt nach Attributen und entsprechenden Werten selektieren. Ein einfaches Beispiel: Wir selektieren alle Input-Felder vom Typ „Submit“: input[type=submit]

CSS Backgrounds: Hintergründe für HTML Elemente

Für HTML Elemente und natürlich auch den gesamten HTML „body“ bestimmen wir per CSS Befehl bei Bedarf Hintergründe. Ob Bilder, Farben oder Verläufe ist natürlich euch überlassen. Hier die wichtigsten Befehle für Backgrounds.

Hinweis: Auch hier kann die Mischschreibweise (background:) verwendet werden.

BefehlBedeutungMögliche Werte

background-image

Hintergrund-Bild

url(<meineUrl>)

background-repeat

Wiederholung des Bildes

none (keine), repeat-x (nur horizontal), repeat-y (nur vertikal)

background-position

Position des Ausgangs-Bildes

Integer Wert in Pixel (px), mm, cm, em oder Prozent (%). Vordefinierte Werte: left, right, center, top, bottom

background-color

Hintergrundfarbe

Wert als rgb(), rgba(), oder Hex (#). Auch möglich Standardfarben wie „green“, „blue“, „red“, „yellow“, …

background-attachmentHintergrund fixierenBleibt beim scrollen stehen (fixed), Scrollt mit (scroll)

background

Kombination / vereinfachte Schreibweise

background:#000000 url(…) center top;

Beispiele

.element {
    background-image:url(image.png);
    background-repeat:no-repeat;
    background-position:center center;
}
.element {
    background-image:url(image.png);
    background-position:center center;
}

CSS Positionierung – wenige Befehle viel Effekt.

Das große Thema in CSS: Die Positionierung. Sie umfasst relativ wenige Befehle. Diese haben jedoch eine große Wirkung auf die Darstellung im Browser. Mit diesen Anweisungen werden grundlegende Layouts erstellt wie Raster, Rahmengerüste, Navigationen und Co.

Der Befehl „position“ gibt an, wie das entsprechende HTML Element positioniert wird:

  • statisch im normalen HTML / CSS Fluss,
  • relativ zum HTML / CSS Fluss,
  • absolut (nimmt keine Höhe im HTML / CSS Fluss ein) oder
  • fixed (nimmt keine Höhe im HTML / CSS Fluss ein und bleibt beim Scrollen stehen).

Mit float setzen wir Boxen / Block-Elemente nebeneinander. „float:left“ um das entsprechende Element links anzuordnen, auf der rechten Seite wird umflossen – oder umgekehrt mit „float:right;“. Mit clear beenden wir den Umfluss wieder. Der CSS Befehl wird dabei auf das folgende Element angewendet – also auf jenes, das nicht mehr umfließen soll.

Die Angabe „display“ besagt, wie sich das Element verhalten soll:

  • none (das Element ist nicht sichtbar),
  • block (das Element verhält sich wie ein Block-Element – verursacht somit einen „Absatz“),
  • inline (das Element verursacht keinen Absatz) oder
  • inline-block (Element verursacht keinen Absatz, es können jedoch Block-Eigenschaften wie Margins hinzugefügt werden).

Durch die Befehle visibility und opacity stellen wir die Sichtbarkeit und die Transparenz ein. Anders als „display:none;“ wird bei „visibility:hidden;“ das Objekt zwar nicht gezeigt, der Platz aber für das Objekt weiterhin freigehalten.

Weiterlesen

CSS Außenabstände (Margins): Anweisungen auf einen Blick

Die Außenabstände (Margins) verhalten sich bei CSS ähnlich wie die Innenabstände (Paddings). Der Margin Befehl definiert den Abstand von Elementen zueinander.

Wir sorgen mit dem CSS Befehl Margin zum Beispiel für einen Spalt zwischen zwei „Boxen“. Auch hier können wir wieder die Mischschreibweise verwenden. Zulässig sind Außenabstände nur bei Block-Elementen wie div, p, ul, li, ….

BefehlBedeutungMögliche Werte
margin-topAußenabstand oben

Integer Wert in Pixel (px), mm, cm oder em

margin-right

Außenabstand  rechts

Integer Wert in Pixel (px), mm, cm oder em

margin-bottom

Außenabstand  unten

Integer Wert in Pixel (px), mm, cm oder em

margin-left

Außenabstand  links

Integer Wert in Pixel (px), mm, cm oder em

margin

Außenabstand  kombiniert

Integer Wert in Pixel (px), mm, cm oder em

margin: 10px;
alle Seiten 10px

margin: 10px 20px;
oben/unten 10px, rechts/links 20px

margin: 10px 20px 30px 40px;
oben 10px, rechts 20px, unten 30px, links 40px

CSS: Innenabstände (Paddings) – Befehle im Überblick

Innenabstände (Paddings) sorgen – wie der Name schon sagt – für die nötigen Abstände zwischen dem Inhalt der „Box“ und dem Rahmen / Ende der Box. Diese sollten nicht verwechselt werden mit den Außenabständen (Margins).

Haben wir beispielsweise eine Box mit blauem Hintergrund und wollen darauf weißen Text setzen, so sollten wir mit dem CSS Befehl einen definierten Innenabstand angeben. Dadurch erscheint der Text nicht direkt am „Rand der Box“. Mit einer „Padding“ Anweisung von 20 Pixeln erzeugen wir beispielsweise einen in vielen Fällen gut zu erkennenden Innenabstand zwischen Text und Rahmen. Das Erscheinungsbild des Textes wird über CSS für Schriften definiert. Um die CSS Datei klein zu halten, verwenden wir hier im Idealfall die Mischschreibweise (siehe unten).

BefehlBedeutungMögliche Werte

padding-top

Innenabstand oben

Integer Wert in Pixel (px), mm, cm oder em

padding-right

Innenabstand rechts

Integer Wert in Pixel (px), mm, cm oder em

padding-bottom

Innenabstand unten

Integer Wert in Pixel (px), mm, cm oder em

padding-left

Innenabstand links

Integer Wert in Pixel (px), mm, cm oder em

padding

Innenabstand kombiniert

Integer Wert in Pixel (px), mm, cm oder em

padding: 10px;alle Seiten 10pxpadding: 10px 20px;oben/unten 10px, rechts/links 20pxpadding: 10px 20px 30px 40px;oben 10px, rechts 20px, unten 30px, links 40px

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    padding:20px;
    padding-top:50px;
    padding-bottom:100px;
}

CSS Rahmen: Befehle und Optionen

Wir definieren über CSS Befehle ebenfalls den Rahmen von HTML Objekten. Dazu weisen wir diesem mindestens eine Rahmenstärke zu. Um Farbe und Stil des Rahmens zu modifizieren, verwenden wir weitere Befehle. Dazu können wir ebenfalls die Mischschreibweise von CSS nutzen.

Ein Beispiel für einen gemischten Rahmen-Befehl:border:2px dotted red;  (2 Pixel stark, gepunktet, rot)

So reicht eine Anweisung, um Stärke, Farbe und Stil anzugeben. Somit sparen wir uns einige Zeilen CSS Code und halten den Quellcode schlank. Auch ist es mit CSS möglich, bei Rahmen nur bestimmte Seiten anzusprechen. Das funktioniert zum Beispiel so: „border-top:3px solid green;“

Dies versieht den Rahmen am Kopf eines Objektes mit den definierten Eigenschaften zur Darstellung. In diesem Fall handelt es sich um einen durchgezogenen, 3 Pixel starken, grünen Rahmen. Per CSS Anweisung können bei Rahmen Innenabstand und Außenabstand festgelegt werden, damit Inhalte, beziehungsweise benachbarte Elemente, sich nicht zu nahe kommen.

Den Rahmen Abrunden können wir mir dem Befehl border-radius.

BefehlBedeutungMögliche Werte

border-width

Rahmenstärke / Dicke

Integer Wert in Pixel (px), mm, cm oder em

border-color

Rahmenfarbe

Wert als rgb(), rgba(), oder Hex (#). Auch möglich: Standardfarben wie „green“, „blue“, „red“, „yellow“, …

border-style

Rahmenstil

einfach (solid), gepunktet (dotted), gestrichelt (dashed), …

border

Kombination / vereinfachte Schreibweise

border: width style color;

border-top/right/bottom/left

Kombination / vereinfachte Schreibweise für nur oben, rechts, unten, links

border-top: width style color;

border-collapseTabellenrahmenseparate (jede Zelle hat einen eigenen Rahmen), collapse (Zellerahmen sind verbunden)
border-spacingTabellenrahmen AbständeInteger Wert in Pixel (px), mm, cm oder em

outline-width

Konturstärke / Dicke

Integer Wert in Pixel (px), mm, cm oder em

outline-color

Konturfarbe

Wert als rgb(), rgba(), oder Hex (#). Auch möglich: Standardfarben wie „green“, „blue“, „red“, „yellow“, …

outline-style

Konturstil

einfach (solid), gepunktet (dotted), gestrichelt (dashed), …

outline

Kombination / vereinfachte Schreibweise

outline: width style color;

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    border:3px solid rgb(230,180,40);
    border-top:1px dotted red;
    border-right:3px dashed;
}

CSS Befehle für Schriften

Wir haben die Möglichkeit, Schriftart, Schriftgröße, -dicke, Farbe und Ausrichtung sowie die „Fallback-Schriftart“ zu definieren. Letztere nutzt der Browser nach Möglichkeit, falls die gewünschte Schrift nicht auf dem Computer des Benutzers installiert ist.

Mit speziellen Anweisungen ist es möglich, Text einzurücken oder die Groß- und Kleinschreibung zu erzwingen und zu steuern. Dadurch kann der Text in Normalschrift geschrieben werden. Er wird lediglich via CSS in Großbuchstaben oder Kleinbuchstaben umgewandelt – somit indiziert Google den Text in Normalschrift. Folgende CSS Befehle passen Schrift und Texte an:

BefehlBedeutungMögliche Werte

font-family

Schriftart

Verdana, Arial, Tahoma, …

Custom Fonts (Google WebFonts, TypeKit, fonts.com)

font-size

Schriftgröße

Integer Wert in Pixel (px), mm, cm oder em

font-variant

Schriftvariante

normal, caps, small-caps

font-weight

Schriftstärke / Dicke

normal, bold, light, 300, 500, 600, 700, je nach verwendeter Schrift

font-style

Schriftstil

normal, italic

color

Schriftfarbe

Wert als rgb(), rgba(), oder Hex (#). Auch möglich: Standardfarben wie „green“, „blue“, „red“, „yellow“, …

text-align

Ausrichtung

links (left), mittig (center), rechts (right) oder Blocksatz (justify)

text-decoration

Text Dekoration

unterstrichen (underline), überstrichen (overline), durchgestrichen (line-trough)

text-transform

Transformation

Kapitälchen (capitalize), Versalien / Großbuchstaben (uppercase), Kleinbuchstaben (lowercase)

text-indent

Einrückung

Integer Wert in Pixel (px), mm, cm oder em

line-height

Zeilenhöhe

Integer Wert in Pixel (px), mm, cm oder em

word-spacing

Wortabstand

Integer Wert in Pixel (px), mm, cm oder em

letter-spacing

Zeichenabstand/ Buchstabenabstand

Integer Wert in Pixel (px), mm, cm oder em

Weiterlesen

Was ist TYPO3? Das beliebte Content-Management-System

Ganz kurz & knapp

TYPO3 ist ein System für Ihre Website, mit der Sie diese ganz einfach selber verwalten können. Sprich: Seiten anlegen, Seiten löschen, Inhalte (Text & Bilder) anlegen, löschen und bearbeiten und vielem mehr. Dies ermöglicht Ihnen Ihre Website selber zu verändern. Sie interessieren sich für ein TYPO3 CMS?

Etwas genauer

TYPO3 ist ein 1998 erschienenes CMS (Content-Management-System), welches von Kasper Skårhøj entwickelt wurde. Mit einem CMS haben Sie die oben genannten Möglichkeiten – Sie können also Ihre Website in Eigenregie verändern – ganz ohne Programmierkenntnisse.

Das CMS selber zeichnet sich besonders durch die nahezu unbegrenzte Vielfalt an Verwendungsmöglichkeiten aus. Nebenbei ist es ein sehr schnelles System. TYPO3 weißt außerdem einige „Enterprise“ Funktionen auf – also Funktionen die normalerweise bei teuer zu erwerbenden Content-Management-Systemen vorhanden sind. Darunter unter anderem die „unterschiedlichen Arbeitsumgebungen“, mit der Sie Ihre Inhalte erst vollständig im Entwurfsmodus bearbeiten und erst danach „Live“ (Online) schalten sowie die wunderbar einfache Möglichkeit der Lokalisierung (Übersetzung von Inhalten in anderen Sprachen).

Somit ist TYPO3 nun ein „Enterprise Content-Management-System„. Wie bereits angesprochen ist TYPO3 ein CMS, welches sich zu 100% in nahezu jedem kleinsten Teil anpassen und erweitern lässt. Auch werden dem Entwickler / dem Kunden keine fertigen „Pflichtmodule“ vorgelegt. Mit TYPO3 ist prinzipiell alles realisierbar und das exakt so, wie Sie als Kunde es möchten. Wir haben also keine Barrieren und können somit schon vom „Content-Management-Framework“ sprechen – einem „Rahmengestell“ für Ihr Projekt, welches bereits die wichtigsten und aufwändigsten Features bietet.

Fazit

Mit TYPO3 ist nahezu alles realisierbar, was Sie sich vorstellen. Außerdem bietet das CMS Ihnen die Möglichkeiten Ihre Daten, Seiten und Inhalte selber zu bearbeiten. Ein perfektes System für jede (kleine und große) Webseite. Sollten Sie nun Interesse an einer Website mit TYPO3 haben, können Sie uns gerne eine Anfrage senden und wir erstellen Ihnen ein kostenfreies Angebot.

Folgende große Unternehmen nutzen TYPO3

Bilfinger SE, FTI Touristik GmbH, Lufthansa, Airbus, Bayer Technology Services, real, Carglass, Congstar (Deutsche Telekom AG), Penny Markt, Sixt, Villeroy & Boch, Philips Diktiersysteme, ThyssenKrupp Polysius, ThyssenKrupp Elevator, Konica Minolta, Leica Microsystems, Air France, und viele weitere