CSS - Das umfassende Handbuch - Grundlagen, Praxisbeispiele, Referenz. Responsive Webdesign, Flexbox, SASS u. v. m. Inkl. CSS-Layouts, YAML, mobiles Webdesign. Aktuell zu CSS3

Das Buch für den Webentwickler in der neuen Auflage. Hier findet sich das vollständige Wissen zu CSS und Co. in einem Band. Einsteiger erhalten eine fundierte Einführung, professionelle Webentwickler einen Überblick über alle CSS-Technologien und Praxislösungen für CSS-Layouts sowie Tipps, um aus dem täglichen Webeinerlei herauszukommen.
Zahlreiche aktuelle Themen wie HTML5 und CSS3, CSS-Transitions, objektorientiertes CSS, JavaScript-Fallbacks, Responsive Webdesign mit CSS sowie viele Praxisbeipiele machen das Buch zu einem unentbehrlichen Werk für die tägliche Arbeit.
Aus dem Inhalt:

• HTML5 und CSS3
• Selektoren
• Einbindung von Stylesheets
• Positionierung mit CSS
• Transitionen und Animationen
• Layout und Styling mit CSS
• Webstandards und Barrierefreiheit
• Layouts mit Flexbox
• CSS kompilieren (Sass)
• Ajax, JavaScript und CSS
• Responsive Webdesign
• E-Mails mit CSS gestalten
• CSS-Frameworks (YAML, Foundation u. a.)
• CSS-Referenz: Detaillierte Übersicht aller Elemente, Eigenschaften und Klassen

Die Fachpresse zur Vorauflage:

c't: »Laborenz greift tief in seine über Jahre hinweg gefüllte CSS-Trickkiste«

Macromedia - Akademie der Medien: »Das beste deutschsprachige Handbuch zur modernen Webentwicklung mit Hilfe von CSS3 und HTML5«

der webdesigner: »Eine große Hilfe für jeden Webdesigner!«

List of contents

Vorwort ... 15

1. Was sind Cascading Stylesheets? ... 17

1.1 ... Warum sollten Sie Stylesheets nutzen? ... 17

1.2 ... Das CSS-Prinzip ... 20

1.3 ... Wie sieht ein Stylesheet aus? ... 21

2. HTML und CSS ... 25

2.1 ... Die Grundlage -- das semantische HTML-Dokument ... 25

2.2 ... Schnelleinstieg HTML ... 26

2.3 ... Code follows Content ... 29

2.4 ... Sektionen einer Webseite ... 33

2.5 ... HTML5 und CSS ... 36

3. Das erste Stylesheet -- »Hallo Welt!« auf CSS ... 41

4. Selektoren ... 47

4.1 ... Die verschiedenen Selektoren ... 48

4.2 ... Vererbung ... 76

4.3 ... Rangfolge und Kaskade ... 77

5. Einbinden von Stylesheets in HTML-Dateien ... 87

5.1 ... Stilanweisungen im HTML-Tag ... 87

5.2 ... Stilanweisungen im Dokumentenkopf ... 88

5.3 ... Verlinkte Stylesheets ... 89

5.4 ... Importierte Stylesheets ... 90

5.5 ... Medienspezifische Stylesheets ... 91

5.6 ... Media Queries für responsives Design ... 94

6. Kastenmodell (Boxmodell), Elementtypen und Layoutmodelle ... 101

6.1 ... Das Kastenmodell ... 101

6.2 ... Elementtypen in CSS ... 111

7. Layout mit CSS ... 115

7.1 ... Wichtige Eigenschaften zum Layouten ... 115

7.2 ... Die Positionierungsart (»position«) ... 116

7.3 ... »float« und »clear« ... 126

7.4 ... »display: table« und »display: inline-block« ... 135

7.5 ... Die Zukunft: native Layoutsysteme in CSS ... 139

7.6 ... Das Layout: fixiert, flexibel oder elastisch? ... 141

7.7 ... Der Zweispalter ... 145

7.8 ... Der Dreispalter ... 163

7.9 ... Flexbox: das flexible Kastenlayout ... 173

7.10 ... CSS-Layouttricks ... 190

7.11 ... Feststehende Bereiche und CSS-Frames ... 195

8. Das responsive Web für alle ... 201

8.1 ... Neues Denken ... 202

8.2 ... Der erste Schritt: flexible Layouts ... 210

8.3 ... Der zweite Schritt: anpassungsfähige Inhalte ... 213

8.4 ... Der dritte Schritt: Media Queries ... 219

8.5 ... Frameworks für die Entwicklung mobiler Apps ... 236

9. Styling mit CSS ... 245

9.1 ... Arbeiten mit Text ... 245

9.2 ... CSS-Menüs mit Listen ... 299

9.3 ... Tabellen und CSS ... 330

9.4 ... Schönere Formulare ... 342

9.5 ... Druckversion per CSS ... 365

9.6 ... Arbeiten mit Transparenz ... 369

9.7 ... Arbeiten mit Grafiken ... 370

9.8 ... »Runde Ecken« ... 390

9.9 ... CSS-Schatten ... 392

9.10 ... Verläufe mit CSS ... 397

9.11 ... Stylesheet-Wechsler ... 406

9.12 ... Styling mit CSS3 -- der CSS3 Zen Ocean ... 413

10. Transformationen, Transitionen und Animationen mit CSS ... 429

10.1 ... Elemente per CSS verschieben und drehen ... 429

10.2 ... Animierte Übergänge mit CSS ... 442

10.3 ... Animationen mit Keyframes ... 446

11. CSS und die Browser ... 451

11.1 ... Die Browserlandschaft ... 451

11.2 ... Browserweichen und -filter ... 464

11.3 ... Browsertesting ... 468

12. Effizientes Arbeiten mit CSS ... 473

12.1 ... Arbeiten mit HTML-Vorlagen ... 473

12.2 ... Design Patterns ... 476

12.3 ... Stylesheets organisieren ... 482

12.4 ... CSS-Benennungsschemata: BEM, OOCSS, SMACSS & Co ... 491

12.5 ... Kurzschreibweisen ... 497

12.6 ... CSS-Präprozessoren ... 498

12.7 ... CSS im Entwurfsverfahren (Rapid Prototyping) ... 520

12.8 ... Fehlersuche in CSS-Dateien ... 526

12.9 ... Werkzeuge für CSS-Entwickler ... 528

13. Arbeiten mit CSS-Frameworks ... 561

13.1 ... Framework-Übersicht und Auswahlhinweise ... 562

13.2 ... Aufbau eines Rasters mit YAML ... 577

13.3 ... Aufbau eines Rasters mit Foundation ... 583

14. Webstandards und Barrierefreiheit ... 591

14.1 ... Webstandards beachten ... 591

14.2 ... Suchmaschinenoptimierung mit CSS ... 595

14.3 ... Zugängliche und benutzbare Websites mit CSS ... 601

15. Ajax, JavaScript und CSS ... 613

15.1 ... Austausch eines Stylesheets per JavaScript ... 613

15.2 ... Klassen zuweisen mit »className« ... 614

15.3 ... Stile mit »style« zuweisen ... 615

15.4 ... Formularvalidierung mit CSS und JavaScript ... 616

15.5 ... Tageszeitenabhängiger Styleswitcher ... 621

15.6 ... Fadenkreuz für Tabellen ... 624

15.7 ... JavaScript zur Umgehung von Browsereinschränkungen verwenden ... 626

16. E-Mails mit CSS gestalten ... 631

16.1 ... Grundsätzliche Probleme ... 631

16.2 ... Lokale E-Mail-Clients ... 633

16.3 ... Webmail-Dienste ... 637

16.4 ... CSS-Eigenschaften im Einzelnen ... 640

16.5 ... Strategien für E-Mail-Newsletter ... 642

Anhang ... 647

A ... CSS-Referenz ... 649

B ... Benennungen und Werte für Stylesheets ... 805

C ... HTML5-Elemente ... 811

Index ... 817

About the author

Kai Laborenz arbeitet seit 1994 als Webdesigner. Seidem hat er sein Wissen in zahlreichen Kursen und Workshops vermittelt, unter anderem beim E-Learning-Anbieter Akademie.de, wo er zudem als Webmaster tätig war. Er ist Geschäftsführer der Internetagentur Sunbeam und entwickelte Websites für Kunden wie BP und die deutsche Energieagentur.§

Summary

Grundlagen und Praxiswissen: Von Animationen bis Responsive Webdesign

Grundlagen, Praxisbeispiele, Referenz
Responsive Webdesign, Flexbox, SASS u.v.m.
Inkl. CSS-Layouts, YAML, Mobiles Webdesign

Das Buch für den Webentwickler in der neuen Auflage. Hier findet sich das vollständige Wissen zu CSS und Co. in einem Band. Einsteiger erhalten eine fundierte Einführung, professionelle Webentwickler einen Überblick über alle CSS-Technologien und Praxislösungen für CSS-Layouts sowie Tipps, um aus dem täglichen Webeinerlei herauszukommen.
Zahlreiche aktuelle Themen wie HTML5 und CSS3, CSS-Transitions, objektorientiertes CSS, JavaScript-Fallbacks, Responsive Webdesign mit CSS sowie viele Praxisbeipiele machen das Buch zu einem unentbehrlichen Werk für die tägliche Arbeit.

Aus dem Inhalt:

HTML5 und CSS3
Selektoren
Einbindung von Stylesheets
Positionierung mit CSS
Transitionen und Animationen
Layout und Styling mit CSS
Webstandards und Barrierefreiheit
Layouts mit Flexbox
CSS kompilieren (Sass)
Ajax, JavaScript und CSS
Responsive Webdesign
E-Mails mit CSS gestalten
CSS-Frameworks (YAML, Foundation u. a.)
CSS-Referenz: Detaillierte Übersicht aller Elemente, Eigenschaften und Klassen

Die Fachpresse zur Vorauflage:

c't: »Laborenz greift tief in seine über Jahre hinweg gefüllte CSS-Trickkiste«

Macromedia – Akademie der Medien: »Das beste deutschsprachige Handbuch zur modernen Webentwicklung mit Hilfe von CSS3 und HTML5«

der webdesigner: »Eine große Hilfe für jeden Webdesigner!«

Report

Die Fachpresse zur Vorauflage:

c't: "Laborenz greift tief in seine über Jahre hinweg gefüllte CSS-Trickkiste"

Macromedia - Akademie der Medien: "Das beste deutschsprachige Handbuch zur modernen Webentwicklung mit Hilfe von CSS3 und HTML5"

der webdesigner: "Eine große Hilfe für jeden Webdesigner!"

Product details

• Authors: Kai Laborenz
• Publisher: Rheinwerk Verlag
• Languages: German
• Product format: Hardback
• Released: 28.12.2015
• EAN: 9783836238762
• ISBN: 978-3-8362-3876-2
• No. of pages: 825
• Dimensions: 175 mm x 244 mm x 49 mm
• Weight: 1641 g
• Illustrations: m. zahlr. Abb.
• Series: Rheinwerk Computing; Rheinwerk Computing
• Subjects: Natural sciences, medicine, IT, technology > IT, data processing > Internet; Informatik, Webdesign, css3, html5, Web-Entwicklung, Responsive Webdesign, Flexbox, Computing, sass, Cascading Stylesheets, YAML, Mobiles Webdesign, Webseiten gestalten Web-Layouts