Einstieg in CSS - Webseiten gestalten mit HTML und CSS. Grundlagen: Schriften, Farben und Gestalten mit dem Box-Modell. Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt. Gestaltung: Navigationen, Media Queries, Float-Layouts und Flexbox

Die tausendfach bewährte CSS-Einführung - jetzt noch besser und aktueller! Seit seiner ersten Auflage 2006 hat dieses Buch von Peter Müller schon vielen, vielen tausend Lesern geholfen, CSS zu lernen und zu verstehen.
Unser Autor erklärt Schritt für Schritt, was Sie bei der modernen Webgestaltung wissen müssen: von den grundlegenden Prinzipien bis hin zu den neuesten Entwicklungen. Immer kompetent, klar und verständlich. Anschauliche Beispiele aus der Praxis können Sie leicht auf eigene Projekte anwenden. Inkl. HTML5, CSS3 und einer guten Prise Humor.
Aus dem Inhalt:

• HTML und CSS im Schnelldurchlauf
• Das HTML-Grundgerüst
• HTML-Elemente für Überschriften, Text und Listen
• HTML-Elemente für Links, Bilder und mehr
• CSS kennen lernen: Schriften, Farben und Hyperlinks
• Selektoren, Einheiten und Farben
• Das Box-Modell
• Ordnung halten in den Stylesheets
• Eine horizontale Navigation per »display:inline«
• Ein Kontaktformular erstellen
• Fließtext, Webfonts und Druckversion
• Der Browser in Aktion: Kaskade, Vererbung oder Standardwert
• HTML-Tabellen erstellen und gestalten
• Kästchen verschieben mit »position«
• Media Queries
• Weitere mehrspaltige Layoutmethoden
• Containing Floats: gefloatete Elemente umschließen
• Gestaltung von Grafiken per CSS
• Eine floatbasierte horizontale Navigation
• Suchfunktion, Dropdown und Layouten per Flexbox

List of contents

  Vorwort ... 23
Teil I.  Die Einleitung ... 27
  1.  Das Web ist nicht aus Papier ... 29

       1.1 ... Papierdenken, Webseiten und enttäuschte Erwartungen ... 29
       1.2 ... Der Autor einer Webseite hat keine Kontrolle ... 30
       1.3 ... Webseiten sehen bei jedem Benutzer anders aus ... 32
       1.4 ... Übersicht: Eine kurze Geschichte des Weblayouts ... 35

  2.  HTML und CSS im Schnelldurchlauf ... 39

       2.1 ... Webseiten bestehen aus rechteckigen Kästchen ... 39
       2.2 ... HTML ist der Maurer, der rechteckige Kästchen erstellt ... 40
       2.3 ... CSS ist der Stylist, der die rechteckigen Kästchen gestaltet ... 43
       2.4 ... Entwickler-Tools -- HTML und CSS analysieren ... 46
       2.5 ... Auf einen Blick ... 47

Teil II.  HTML-Crashkurs -- Kästchen erstellen ... 49
  3.  Das HTML-Grundgerüst ... 51

       3.1 ... HTML -- Hyperlinks erstellen und »Etiketten kleben« ... 51
       3.2 ... Das HTML-Grundgerüst ist das Skelett einer Webseite ... 53
       3.3 ... Die Dokumenttyp-Definition -- ... 55
       3.4 ... Das Stammelement ... 55
       3.5 ... Informationen über die Webseite -- ... 56
       3.6 ... Der Inhalt der Webseite -- ... 59
       3.7 ... HTML-Elemente im Quelltext -- Anfangs-Tag, Inhalt und EndeTag ... 59
       3.8 ... Auf einen Blick ... 60

  4.  HTML-Elemente für Überschriften, Text und Listen ... 61

       4.1 ... Das Grundgerüst für die Startseite erstellen ... 62
       4.2 ... Die Seite in Bereiche einteilen: »header«, »nav«, »main«, »footer« und »div« ... 63
       4.3 ... Überschriften -- »h1« bis »h6« ... 66
       4.4 ... Fließtext -- Absätze und Hervorhebungen ... 68
       4.5 ... Über Block- und Inline-Elemente ... 70
       4.6 ... Listenkisten -- Aufzählungen und Nummerierungen ... 72
       4.7 ... Verschachtelte Listen ... 74
       4.8 ... Jeder Browser hat ein eingebautes Stylesheet ... 76
       4.9 ... Auf einen Blick ... 77

  5.  HTML-Elemente für Links, Bilder und mehr ... 79

       5.1 ... Hyperlinks -- das Besondere am World Wide Web ... 79
       5.2 ... Die Wegbeschreibung zur Grafik -- »img« ... 83
       5.3 ... Weitere HTML-Elemente zur Auszeichnung von Text ... 86
       5.4 ... Know-how -- Zeichensätze und Sonderzeichen ... 89
       5.5 ... Auf einen Blick ... 93

  6.  Von der Beispielseite zur Beispielsite ... 95

       6.1 ... Stimmt die Statik? Der HTML-Validator ... 95
       6.2 ... CSS zum Ausprobieren -- die W3C Core Styles ... 98
       6.3 ... Die Kontaktseite -- von der Seite zur Site ... 100
       6.4 ... Auf einen Blick ... 101

Teil III.  CSS Grundlagen -- Kästchen gestalten ... 103
  7.  CSS kennenlernen -- Schriften, Farben und Hyperlinks ... 105

       7.1 ... Ein Stylesheet ist eine Sammlung von Formatvorlagen ... 105
       7.2 ... Überblick: CSS und das Gestalten der HTML-Kästchen ... 106
       7.3 ... Das erste eigene Stylesheet ... 107
       7.4 ... Farben für Hintergrund und Schrift definieren ... 109
       7.5 ... Schriftgestaltung mit »font-family« und »font-size« ... 113
       7.6 ... Textgestaltung: Die Kontaktadresse im Fußbereich ... 115
       7.7 ... Hyperlinks gestalten ... 116
       7.8 ... Styles können an drei verschiedenen Stellen definiert werden ... 121
       7.9 ... Auf einen Blick ... 123

  8.  Selektoren, Einheiten und Farben in CSS ... 125

       8.1 ... Style -- der Aufbau einer CSS-Regel ... 125
       8.2 ... Ein Selektor wählt das zu gestaltende Kästchen aus ... 126
       8.3 ... Überblick: Die HTML-Elemente im DOM-Baum ... 128
       8.4 ... Selektoren kombinieren -- Nachfahren auswählen ... 130
       8.5 ... Eigene Namen vergeben -- »id« und »class« ... 132
       8.6 ... Spezifität -- das Punktesystem für Selektoren ... 136
       8.7 ... Werte und Maße in CSS -- die Qual der Wahl ... 139
       8.8 ... Farben definieren -- hexadezimal, RGB und Namen ... 141
       8.9 ... Auf einen Blick ... 143

  9.  Das Box-Modell ... 145

       9.1 ... Zunächst in modernen Browsern testen ... 145
       9.2 ... Das Box-Modell in der Übersicht ... 146
       9.3 ... Kalibrierung -- Abstände per Reset vereinheitlichen ... 152
       9.4 ... Webseite zentrieren mit »width« und »margin« ... 155
       9.5 ... Rahmenlinien erstellen -- »border« ... 158
       9.6 ... Ein bisschen Abstand drumherum -- »padding« ... 159
       9.7 ... Das Box-Modell und die farbliche Gestaltung ... 162
       9.8 ... Hintergrundgrafiken per CSS ... 164
       9.9 ... Vertikale Abstände kollabieren -- »collapsing margins« ... 170
       9.10 ... Auf einen Blick ... 175

10.  Ordnung halten und aufräumen ... 177

       10.1 ... Der Kommentar am Anfang ... 177
       10.2 ... Das Stylesheet in Abschnitte unterteilen ... 178
       10.3 ... Verschiedene Schreibweisen für Styles ... 180
       10.4 ... Die Reihenfolge der Deklarationen im Style ... 182
       10.5 ... Effektiv -- Kurzschreibweisen für »padding« und »margin« ... 183
       10.6 ... Mehrere Stylesheets erstellen und zentral einbinden ... 186
       10.7 ... Styles aufräumen: Die einzelnen Stylesheets ... 189
       10.8 ... Dateien in Unterordnern organisieren ... 194
       10.9 ... Der CSS-Validator ... 199
       10.10 ... Auf einen Blick ... 201

11.  Eine einfache horizontale Navigation ... 203

       11.1 ... Einfache horizontale Navigation mit »display: inline« ... 203
       11.2 ... Punktsieg -- Spezifität in der Praxis ... 209
       11.3 ... Von Elementen und Boxen ... 210
       11.4 ... Tabbed Navigation -- Navigation mit Registern ... 212
       11.5 ... Know-how -- das Box-Modell für Inliner ... 220
       11.6 ... Exkurs: Whitespace -- der Leerstellenpakt ... 223
       11.7 ... Auf einen Blick ... 227

12.  Ein Kontaktformular erstellen und gestalten ... 229

       12.1 ... Schritt 1: Das HTML für das Kontaktformular ... 229
       12.2 ... Schritt 2: Das Formular per CSS gestalten ... 235
       12.3 ... Schritt 3: Das Formular aktivieren und testen ... 240
       12.4 ... Exkurs: Ein mehrspaltiges Kontaktformular ... 242
       12.5 ... Auf einen Blick ... 244

13.  Webfonts, Fließtext und Druckversion ... 247

       13.1 ... Webfonts -- die Schriftart gleich mitliefern ... 247
       13.2 ... Fließtext gestalten ... 253
       13.3 ... Eine Druckversion für die Beispielseiten ... 258
       13.4 ... Favicon -- das Minilogo für Ihre Seiten ... 264
       13.5 ... Auf einen Blick ... 265

14.  HTML-Tabellen erstellen und gestalten ... 267

       14.1 ... Das HTML für Tabellen ... 267
       14.2 ... Tabellen gestalten per CSS -- ein Beispiel ... 272
       14.3 ... Übersichtliche Tabellen -- Hover und Zebrastreifen ... 276
       14.4 ... Auf einen Blick ... 279

15.  Der Browser und das CSS: Kaskade, Vererbung oder Standardwert ... 281

       15.1 ... Überblick: DOM-Baum und Kaskade ... 281
       15.2 ... Kaskade -- Stufe 1: Sammle alle relevanten Deklarationen ... 284
       15.3 ... Kaskade -- Stufe 2: Sortiere nach Wichtigkeit ... 287
       15.4 ... Kaskade -- Stufe 3: Sortiere nach Spezifität ... 290
       15.5 ... Kaskade -- Stufe 4: Sortiere nach Reihenfolge ... 291
       15.6 ... Die Vererbung (inheritance) ... 292
       15.7 ... Der Standardwert (initial value) ... 295
       15.8 ... Auf einen Blick ... 295

Teil IV.  CSS-Positionierung -- Kästchen verschieben ... 297
16.  Kästchen verschieben mit »position« ... 299

       16.1 ... »Flow« -- die Seite ist ein langer, ruhiger Fluss ... 300
       16.2 ... Versetzt weiterfließen -- »position: relative« ... 303
       16.3 ... Raus aus dem Fluss -- »position: absolute« ... 304
       16.4 ... Absolute Positionierung auf der Beispielsite ... 306
       16.5 ... Wie ein Fels in der Brandung -- »position: fixed« ... 311
       16.6 ... Positionierte Boxen und der »z-index« ... 313
       16.7 ... Auf einen Blick ... 316

17.  Kästchen verschieben mit »float« und »clear« ... 317

       17.1 ... Text um Bilder fließen lassen ... 317
       17.2 ... Praktisch -- CSS-Klassen zum Floaten ... 321
       17.3 ... Floats beenden mit »clear« ... 323
       17.4 ... Floats mit mehreren Boxen ... 326
       17.5 ... Zusammenfassung: Besonderheiten beim Floaten ... 331
       17.6 ... Auf einen Blick ... 332

18.  Containing Floats -- gefloatete Elemente umschließen ... 333

       18.1 ... Die Beispielseite zum Umschließen von Floats ... 333
       18.2 ... Das Problem: Gefloatete Elemente ragen nach unten heraus ... 336
       18.3 ... Mehrere Methoden zum Umschließen von Floats ... 338
       18.4 ... Methode 1: Zusätzliches HTML-Element und »clear« ... 339
       18.5 ... Methode 2: Set a float to fix a float ... 340
       18.6 ... Methode 3: Ohne »float« und »clear« -- »overflow: hidden« ... 342
       18.7 ... Methode 4: Auch ohne »float« und »clear« -- »display:table« ... 344
       18.8 ... Methode 5: Der Micro Clearfix Hack ... 345
       18.9 ... Die Galerieseite in die Beispielsite einbauen ... 346
       18.10 ... Auf einen Blick ... 350

19.  Eine floatbasierte horizontale Navigation ... 353

       19.1 ... Vorbereitungen für die floatbasierte Navigation ... 354
       19.2 ... Schritt 1: Den Navigationsbereich gestalten ... 355
       19.3 ... Schritt 2: Die Links in der Navigation gestalten ... 357
       19.4 ... Schritt 3: Linkzustände gestalten ... 358
       19.5 ... Know-how: Lineare Farbverläufe per CSS3 ... 360
       19.6 ... Auf einen Blick ... 363

Teil V.  Mehrspaltige Layouts mit CSS ... 365
20.  Media Queries -- eine mobile Version erstellen ... 367

       20.1 ... Bestandsaufname: Die Beispielseiten auf einem Smartphone ... 367
       20.2 ... Schritt 1: Die feste Layoutbreite entfernen ... 369
       20.3 ... Schritt 2: Die Anweisung »meta viewport« hinzufügen ... 370
       20.4 ... Schritt 3: Den Slogan neu positionieren ... 372
       20.5 ... Schritt 4: Eine Media Query für breite Browserfenster ... 373
       20.6 ... Schritt 5: Das Kontaktformular anpassen ... 379
       20.7 ... Know-how: Bilder für hochauflösende Bildschirme ... 381
       20.8 ... Auf einen Blick ... 385

21.  Zweispaltiges Layout mit »float« und »margin« ... 387

       21.1 ... Methoden zum Layouten per CSS im Überblick ... 387
       21.2 ... Layout mit fester Breite per »float« und »margin« ... 390
       21.3 ... Flexibles Layout mit fester Navigationsspalte ... 400
       21.4 ... Flexible Layouts und das Border-Box-Modell ... 403
       21.5 ... Know-how: Die globale Wirkung von »clear« und der BFC ... 407
       21.6 ... Auf einen Blick ... 412

22.  Mehrspaltige Layouts mit »Content First« ... 413

       22.1 ... Die HTML-Elemente »aside« und »section« ... 413
       22.2 ... Zweispaltige Layouts: beide Bereiche mit »float« ... 415
       22.3 ... Dreispaltige Layouts: »float« und negativer Margin ... 423
       22.4 ... »Bäumchen wechsel dich« für die Layoutbereiche ... 428
       22.5 ... Auf einen Blick ... 431

23.  Suchfunktion, Dropdown-Menü und mobile Navigation ... 433

       23.1 ... Eine Suchfunktion für Ihre Site ... 433
       23.2 ... Dropdown -- horizontale Navigation zum Ausklappen ... 440
       23.3 ... Eine mobile Navigation nur mit CSS ... 449
       23.4 ... Auf einen Blick ... 459

24.  Layouten mit der Flexbox: »display:flex« ... 461

       24.1 ... Flexbox: Das »CSS Flexible Box Layout Module« ... 461
       24.2 ... Der erste Schritt: Flexbox definieren mit »display:flex« ... 464
       24.3 ... Die Ausdehnung der Flex-Items bestimmen mit »flex« ... 467
       24.4 ... »flex« ist kurz für »flex-grow«, »flex-shrink« und »flex-basis« ... 470
       24.5 ... Das Box-Modell der Flexbox: Haupt- und Nebenachsen ... 473
       24.6 ... Beispiel: Flexibles Kontaktformular ohne Media Query ... 477
       24.7 ... Flexbox: Eigenschaften und Werte in der Übersicht ... 484
       24.8 ... Auf einen Blick ... 487

Teil VI.  Patches, Werkzeuge und nützliche Websites ... 489
25.  Patchwork -- Flicken im CSS ... 491

       25.1 ... IE und CSS -- zwei Welten begegnen sich ... 491
       25.2 ... Der Internet-Explorer-Countdown: 11, 10, 9 ... ... 493
       25.3 ... Die Beispielseiten im Internet Explorer 8 ... 496
       25.4 ... Die Browserpräfixe: »-webkit-« und Co ... 501
       25.5 ... Ein Fundament für Ihr CSS: »normalize.css« ... 502
       25.6 ... Auf einen Blick ... 503

26.  Werkzeuge und nützliche Websites ... 505

       26.1 ... Die Browser bestimmen, was geht ... 505
       26.2 ... Browserzubehör -- praktische Add-ons ... 507
       26.3 ... Editoren für HTML und CSS ... 509
       26.4 ... Editoren zum Bearbeiten von Grafiken ... 511
       26.5 ... FTP -- Veröffentlichen von Webseiten ... 511
       26.6 ... Referenzen und Websites zu HTML und CSS ... 512

  Index ... 517

About the author

Peter Müller arbeitet seit vielen Jahren als IT-Dozent und und ist als Autor eines CSS-Bestsellers bekannt, der es versteht, komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen.

Summary

Die tausendfach bewährte CSS-Einführung – jetzt noch besser und aktueller! Seit seiner ersten Auflage 2006 hat dieses Buch von Peter Müller schon vielen, vielen tausend Lesern geholfen, CSS zu lernen und zu verstehen. Unser Autor erklärt Schritt für Schritt, was Sie bei der modernen Webgestaltung wissen müssen: von den grundlegenden Prinzipien bis hin zu den neuesten Entwicklungen. Immer kompetent, klar und verständlich. Anschauliche Beispiele aus der Praxis können Sie leicht auf eigene Projekte anwenden. Inkl. HTML5, CSS3 und einer guten Prise Humor.

Aus dem Inhalt:

HTML und CSS im Schnelldurchlauf
Das HTML-Grundgerüst
HTML-Elemente für Überschriften, Text und Listen
HTML-Elemente für Links, Bilder und mehr
CSS kennen lernen: Schriften, Farben und Hyperlinks
Selektoren, Einheiten und Farben
Das Box-Modell
Ordnung halten in den Stylesheets
Eine horizontale Navigation per »display:inline«
Ein Kontaktformular erstellen
Fließtext, Webfonts und Druckversion
Der Browser in Aktion: Kaskade, Vererbung oder Standardwert
HTML-Tabellen erstellen und gestalten
Kästchen verschieben mit »position«
Media Queries
Weitere mehrspaltige Layoutmethoden
Containing Floats: gefloatete Elemente umschließen
Gestaltung von Grafiken per CSS
Eine floatbasierte horizontale Navigation
Suchfunktion, Dropdown und Layouten per Flexbox

Product details

• Authors: Peter Müller
• Publisher: Rheinwerk Verlag
• Languages: German
• Product format: Paperback / Softback
• Released: 01.10.2015
• EAN: 9783836236836
• ISBN: 978-3-8362-3683-6
• No. of pages: 524
• Dimensions: 172 mm x 231 mm x 27 mm
• Weight: 942 g
• Illustrations: m. Abb.
• Series: Rheinwerk Computing; Rheinwerk Computing
• Subjects: Natural sciences, medicine, IT, technology > IT, data processing > Internet; Informatik, Webdesign, css3, html5, website erstellen, html, Webseiten erstellen, Programmieren Entwickeln, Web-Entwicklung, Cascading Stylesheets