Daniel Koch
CSS3. Die Referenz für Webentwickler

schnell+kompakt
ISBN: 978-3-86802-658-0

© 2014 entwickler.press
ein Imprint der Software & Support Media GmbH

http://www.entwickler-press.de
http://www.software-support.biz

Ihr Kontakt zum Verlag und Lektorat: lektorat@entwickler-press.de

Bibliografische Information Der Deutschen Bibliothek
Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar.

Lektorat: Theresa Vögle
Korrektorat: Lisa Pychlau-Ezli
Copy-Editor: Nicole Bechtel
Satz: Dominique Kalbassi
Umschlaggestaltung: Maria Rudi

Alle Rechte, auch für Übersetzungen, sind vorbehalten. Reproduktion jeglicher Art (Fotokopie, Nachdruck, Mikrofilm, Erfassung auf elektronischen Datenträgern oder andere Verfahren) nur mit schriftlicher Genehmigung des Verlags. Jegliche Haftung für die Richtigkeit des gesamten Werks, kann, trotz sorgfältiger Prüfung durch Autor und Verlag, nicht übernommen werden. Die im Buch genannten Produkte, Warenzeichen und Firmennamen sind in der Regel durch deren Inhaber geschützt.

Vorwort

Animationen, Schattenwürfe, runde Ecken, responsive Design, Spaltenlayouts und Media Queries: All das lässt sich dank CSS3 realisieren. Somit ist CSS3 – neben HTML5 – einer der Grundpfeiler modernen Webdesigns. Dieses Buch zeigt die neuen CSS3-Eigenschaften und beschreibt, wie man diese effektiv einsetzt. Zu jeder CSS3-Eigenschaft werden die verfügbaren Werte gezeigt. Webentwickler erhalten dadurch ein unverzichtbares Werkzeug für die tägliche Arbeit mit CSS3. Das Buch ist explizit darauf zugeschnitten, schnell und effizient die notwendigen Informationen zu liefern.

Der Fokus wird auf den CSS3-Eigenschaften liegen. „Ältere“ Eigenschaften werden aber, wenn sie in der Praxis besonders wichtig sind, ebenfalls berücksichtigt.

Das vor Ihnen liegende Buch ist als hilfreicher Begleiter für Ihre tägliche Style-Sheet-Arbeit konzipiert. Eine Einführung in CSS soll es hingegen nicht sein (was natürlich auch den Rahmen dieses Buchs sprengen würde). Es wird davon ausgegangen, dass Sie wissen, was CSS ist und wie es eingesetzt wird. Dazu gehört beispielsweise auch das Wissen, wie sich Eigenschaften weitervererben (inherit) lassen.

Sollten Sie während oder nach dem Lesen des Buchs Fragen oder Anmerkungen haben, Kontakt zum Autor aufnehmen oder Kritik bzw. Lob loswerden wollen, können Sie das über kontakt@medienwerke.de tun – Ihre Nachricht ist herzlich willkommen.

Berlin, September 2014

Daniel Koch

1 CSS-Maßeinheiten und Co.

In diesem Buch werden Sie bei vielen CSS-Eigenschaften als mögliche Werte Längenangabe oder Zahl finden. Die entsprechenden Informationen und eine Kurzzusammenfassung der möglichen Maßeinheiten finden Sie in diesem Kapitel. Darüber hinaus bekommen Sie eine Übersicht der möglichen Selektoren und deren tatsächliche Unterstützung durch die einzelnen Browser. Kurzum, die folgenden Seiten liefern alles, was Sie als CSS-Entwickler während Ihrer täglichen Arbeit benötigen.

Maßeinheiten

Viele CSS-Eigenschaften erwarten einen Wert mit einer entsprechenden Maßeinheit. Welche Maßeinheiten in CSS möglich sind, zeigen die Tabellen 1.1 bis 1.5.

Einheit

Beschreibung

Beispiel

em

Steht für bezogen auf die Schriftgröße des Elements. Ausnahme: Wird die Schriftgröße (font-size) mit em definiert, steht sie für bezogen auf die Schriftgröße des Elternelements.

font-size: 0.5em;

ex

Steht für bezogen auf die Höhe des Kleinbuchstabens x in diesem Element. Ausnahme: Wird die Schriftgröße (font-size) selbst mit ex definiert, steht sie für bezogen auf die Höhe des Kleinbuchstabens x im Elternelement.

font-size: 2.3ex;

px

Hierüber wird die Pixelanzahl angegeben. Die tatsächliche Größe ist abhängig von der Pixeldichte des Ausgabegeräts.

border-width: 2px;

Tabelle 1.1: Relative Längenangaben

Einheit

Beschreibung

Beispiel

cm

Zentimeter

font-size: 1cm;

in

Steht für Inch. 1 Inch entspricht 2.54 Zentimetern.

margin-left: 2in;

mm

Millimeter

border-width: 3mm;

pc

Diese Abkürzung steht für die typografische Maßeinheit Pica. 1 Pica entspricht 12 Punkt.

font-size: 4pc;

pt

Steht für die typografische Maßeinheit Punkt. 1 Punkt entspricht 0,0138 Inch oder 0,3527 Millimeter.

line-height: 14pt;

Tabelle 1.2: Absolute Längenangaben

Einheit

Beschreibung

Beispiel

%

Je nach verwendeter CSS-Eigenschaft relativ zur elementeigenen Größe oder zu der des Elternelements oder einem allgemeinen Kontext

line-height: 120%;

Tabelle 1.3: Prozentuale Angaben

Einheit

Beschreibung

Beispiel

deg

Grad (Kreis = 360 deg)

azimuth: 70deg;

grad

Neugrad (Kreis = 400 grad)

azimuth: 90grad;

rad

Radiant (1rad = 57.296 deg)

azimuth: 20rad;

Tabelle 1.4: Winkel

Einheit

Beispiel

Positive Ganzzahl

24

Negative Ganzzahl

-30

Positive reelle Zahl

2.6

Negative reelle Zahl

-4.3

Zahlenwerte

2 Herstellerkürzel

Die Browserhersteller haben sich bereits vor mehreren Jahren dazu entschlossen, CSS-Features zu implementieren, selbst wenn diese noch nicht offiziell zum CSS3-Standard gehörten. Damit es nach der Verabschiedung der finalen CSS3-Spezifkation aufgrund von veränderter CSS-Syntax keine Anzeigeprobleme gibt, sollte man herstellerspezifische Anweisungen verwenden. Ein Beispiel soll diesen Aspekt verdeutlichen.

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!