Peter Müller

Einstieg in HTML und CSS

Webseiten erstellen mit HTML und CSS - ganz ohne Vorwissen

• Broschiertes Buch

Produktbeschreibung

Sie suchen eine gute Einführung in die Gestaltung von Webseiten mit HTML und CSS? Dann liegen Sie mit diesem Buch genau richtig! Unser Autor Peter Müller erklärt Ihnen hervorragend, 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. einer guten Prise Humor.

Aus dem Inhalt:

Schnellstart HTML und CSSSchriften, Farben, HyperlinksSelektoren und EinheitenStylesheets ordnenKontaktformular und TabellenBox-ModellSpezifität, Kaskade und VererbungPositionierungMedia Queries und MehrspaltigkeitMobile VersionLayouts mit Flexbox und CSS Grid

Die Fachpresse zur Vorauflage:

Mac Life: »Wer eigene Webseiten responsiv gestalten möchte, sollte sich dieses pfiffige Lehrbuch für Theorie und Praxis unbedingt ansehen.«

Publisher: »Auf 507 Seiten bietet Peter Müller [...] einen tollen Einstieg in HTML und CSS. «

gweep.at: »Der Einstieg in die Welt von HTML und CSS ist mit diesem Buch unübertroffen. Eine sehr gute Ausgangsbasis mit garantierten Erfolg zur eigenen Webseite.«

Produktdetails

• Rheinwerk Computing
• Verlag: Rheinwerk Computing / Rheinwerk Verlag
• Artikelnr. des Verlages: 459/09089
• 2., erw. Aufl.
• Seitenzahl: 528
• Erscheinungstermin: 7. Juli 2022
• Deutsch
• Abmessung: 228mm x 175mm x 32mm
• Gewicht: 959g
• ISBN-13: 9783836290890
• ISBN-10: 3836290898
• Artikelnr.: 63616659

Autorenporträt

Peter Müller arbeitet seit vielen Jahren als IT-Dozent und versteht es, komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen. Er ist als Autor des CSS-Bestsellers "Little Boxes" bekannt, dessen neueste Auflage unter dem Titel "Einstieg in CSS" erschienen ist.

Inhaltsangabe

Materialien zum Buch ... 26

Geleitwort ... 27

Vorwort ... 29

1. Wissenswertes über Webseiten ... 33

1.1 ... Webseiten sehen bei jedem Benutzer anders aus ... 33

1.2 ... Webseiten bestehen aus Quelltext ... 34

1.3 ... Quelltext besteht aus HTML, CSS und JavaScript ... 36

1.4 ... Webseiten werden von einem Browser dargestellt ... 39

1.5 ... Editoren zum Schreiben und Bearbeiten von Quelltext ... 41

1.6 ... Referenzen und Nachschlagewerke zu HTML und CSS ... 42

1.7 ... Auf einen Blick ... 44

2. HTML kennenlernen: Die erste Webseite erstellen ... 45

2.1 ... Webseiten bestehen aus rechteckigen Kästchen ... 45

2.2 ... HT-M-L: die »HyperText Markup Language« ... 46

2.3 ... Jede Webseite hat ein HTML-Grundgerüst ... 48

2.4 ... Der und das Stammelement ... 51

2.5 ... HTML-Elemente können im Anfangs-Tag Attribute enthalten ... 52

2.6 ... enthält wichtige Infos über die Webseite ... 53

2.7 ... enthält den sichtbaren Bereich der Webseite ... 57

2.8 ... Der Kopfbereich mit Überschrift und Slogan ... 59

2.9 ... Entwicklerwerkzeuge im Browser: HTML untersuchen ... 60

2.10 ... Auf einen Blick ... 63

3. CSS kennenlernen: Die erste Webseite gestalten ... 65

3.1 ... Jeder Browser hat ein fest eingebautes Stylesheet ... 65

3.2 ... Das HTML für als schematische Darstellung ... 67

3.3 ... Das erste eigene Stylesheet: »style.css« ... 68

3.4 ... Die erste eigene CSS-Regel: Hintergrund- und Schriftfarbe für ... 70

3.5 ... Den Kopfbereich selektieren und gestalten ... 72

3.6 ... Entwicklerwerkzeuge: CSS im Browser untersuchen ... 74

3.7 ... Auf einen Blick ... 76

4. HTML-Elemente für Text: Überschriften, Absätze, Hervorhebungen und Listen ... 77

4.1 ... Überschriften strukturieren den Inhalt: bis ... 78

4.2 ... Absätze und Hervorhebungen:

, , ... 80

4.3 ... Webseiten von Anfang an in unterschiedlichen Viewports testen ... 82

4.4 ... Listen erstellen mit

,
und
1. ... 84
   
   4.5 ... Listen verschachteln: Eine Liste in einer Liste ... 87
   
   4.6 ... Über Blockelemente, Inline-Elemente und die Eigenschaft »display« ... 89
   
   4.7 ... Auf einen Blick ... 90
   
   5. Hyperlinks -- das Besondere am Web ... 91
   
   5.1 ... Das Standardverhalten von Hyperlinks ... 91
   
   5.2 ... Anatomie eines Hyperlinks: Linktext ... 92
   
   5.3 ... Hyperlinks und sinnvolle Linktexte: das »Klicken-Sie-hier«-Syndrom ... 94
   
   5.4 ... Hyperlinks in neuem Tab oder Fenster öffnen ... 95
   
   5.5 ... Eine Navigation ist eine Liste mit Links ... 96
   
   5.6 ... Eine grundlegende Gestaltung für die Navigation ... 97
   
   5.7 ... Im Fußbereich einen Link »Nach oben« einfügen ... 102
   
   5.8 ... Besondere Links: Dateien, E-Mail und Telefon ... 106
   
   5.9 ... Auf einen Blick ... 108
   
   6. HTML-Elemente für Bilder, Audio und Video ... 109
   
   6.1 ... Über Grafikformate im Web: JPEG, GIF, PNG, SVG & Co ... 109
   
   6.2 ... Ein Bild als Logo einbinden mit ... 111
   
   6.3 ... Pixelbilder und hochauflösende Bildschirme ... 114
   
   6.4 ... Bilder mit flexibler Breite: »max-width: 100%« ... 119
   
   6.5 ... Abbildungen beschriften: und ... 122
   
   6.6 ... »Lazy Loading«: Seiten mit vielen Bildern optimieren ... 124
   
   6.7 ... Let there be sound: Audiodateien einbinden mit ... 125
   
   6.8 ... Bewegte Bilder einbinden mit ... 127
   
   6.9 ... Auf einen Blick ... 131
   
   7. HTML-Elemente zur Strukturierung von Webseiten und Inhalten ... 133
   
   7.1 ... Die semantischen Strukturelemente auf einen Blick ... 134
   
   7.2 ... Kopfbereiche auszeichnen mit ... 134
   
   7.3 ... Navigationsbereiche erstellen mit ... 137
   
   7.4 ... Der Hauptinhalt einer Webseite steht in ... 140
   
   7.5 ... Fußbereiche auszeichnen mit ... 141
   
   7.6 ... Inhaltliche Abschnitte erstellen mit ... 142
   
   7.7 ... In sich geschlossene, eigenständige Blöcke mit ... 144
   
   7.8 ... Bereiche mit zusätzlichen Informationen: ... 148
   
   7.9 ... Elemente mit semantisch neutral gruppieren ... 150
   
   7.10 ... Auf einen Blick ... 152
   
   8. Weitere HTML-Elemente zur Auszeichnung von Text ... 153
   
   8.1 ... Zitate auszeichnen mit und ... 153
   
   8.2 ... Einen Zeilenumbruch erzwingen mit
   ... 157
   
   8.3 ... Kontaktinformationen auszeichnen mit ... 157
   
   8.4 ... Zeitangaben für Menschen und Maschinen: ... 159
   
   8.5 ... Ausklappbare Inhalte: und ... 161
   
   8.6 ... Änderungen am Text dokumentieren: und ... 164
   
   8.7 ... Kurz vorgestellt: , und ... 166
   
   8.8 ... Weitere Inline-Elemente in der Übersicht ... 167
   
   8.9 ... Know-how: Zeichensätze und Sonderzeichen ... 169
   
   8.10 ... Auf einen Blick ... 172
   
   9. HTML-Elemente zum Erstellen von Formularen ... 173
   
   9.1 ... Interaktion mit Besuchern basiert auf HTML-Formularen ... 174
   
   9.2 ... Das Element definiert ein Formular ... 174
   
   9.3 ... Einzeilige Eingabefelder erstellen und beschriften: und ... 176
   
   9.4 ... Mehrzeilige Eingabefelder erstellen und beschriften: und ... 180
   
   9.5 ... Zum Anklicken: eckige Kontrollkästchen, runde Optionsfelder und ausklappbare Auswahllisten ... 181
   
   9.6 ... Formularfelder gruppieren mit
   und die Gruppe beschriften mit

   ... 185
   
   9.7 ... Ein Button zum Abschicken der Formulardaten ... 186
   
   9.8 ... Ein DSGVO-kompatibles Kontaktformular erstellen ... 187
   
   9.9 ... Auf einen Blick ... 193
   
   10. HTML-Elemente zum Erstellen von Tabellen ... 195
   
   10.1 ... Eine einfache HTML-Tabelle: , und , und ... 198
   
   10.4 ... Zellen verbinden mit »colspan« und »rowspan« ... 199
   
   10.5 ... HTML-Tabellen erstellen und gestalten -- ein Beispiel ... 200
   
   10.6 ... Auf einen Blick ... 204
   
   11. Von der Webseite zur Website ... 205
   
   11.1 ... Fine-Tuning für die Startseite ... 205
   
   11.2 ... Das HTML überprüfen mit dem HTML-Validator ... 210
   
   11.3 ... Die Seiten »News«, »Über uns« und »Kontakt« erstellen ... 212
   
   11.4 ... Inhalte für die Seite »News« hinzufügen ... 216
   
   11.5 ... Ein Bild auf der Seite »Über uns« einfügen ... 220
   
   11.6 ... Kontaktdaten und Formular für die Seite »Kontakt« ... 222
   
   11.7 ... Die Seiten »Impressum« und »Datenschutz« ... 225
   
   11.8 ... Auf einen Blick ... 226
   
   12. CSS kennenlernen: Syntax, Box-Modell, Farbwerte und Einheiten ... 227
   
   12.1 ... Überblick: Webseiten gestalten per CSS ... 227
   
   12.2 ... Wichtige Vokabeln: Der Aufbau einer CSS-Regel ... 228
   
   12.3 ... Es gibt drei verschiedene Möglichkeiten, CSS zu speichern ... 229
   
   12.4 ... Das Box-Modell kennenlernen: »padding«, »border« und »margin« ... 231
   
   12.5 ... Farbnamen in CSS: Einfach, aber nicht sehr flexibel ... 236
   
   12.6 ... Weit verbreitet: Hexadezimale Farbangaben mit #rrggbb ... 238
   
   12.7 ... Die Alternative: Farben mit rgb() -- auch mit Transparenz ... 240
   
   12.8 ... Nützliche Werkzeuge und Websites zur Arbeit mit Farben ... 242
   
   12.9 ... Wichtige Einheiten: px, em, rem, % & Co ... 245
   
   12.10 ... Auf einen Blick ... 248
   
   13. Die wichtigsten Selektoren und Spezifität ... 249
   
   13.1 ... Einfache Selektoren: Elemente, Gruppierung und »*« ... 250
   
   13.2 ... Klassen sind klasse: Der Selektor mit dem Punkt ... 251
   
   13.3 ... IDs sind einmalig: Der Selektor mit der Raute ... 253
   
   13.4 ... Überblick: Die HTML-Elemente im DOM-Baum ... 254
   
   13.5 ... Nachfahren auswählen: Der Selektor mit dem Leerzeichen ... 256
   
   13.6 ... Selektoren zum Auswählen von Kindelementen ... 256
   
   13.7 ... Nachbar- und Geschwisterselektoren mit + und ~ ... 260
   
   13.8 ... Attributselektoren haben eckige Klammern: [attribut] ... 261
   
   13.9 ... Quellen zum Nachschlagen von weiteren Selektoren ... 265
   
   13.10 ... Spezifität: Einige Selektoren sind wichtiger als andere ... 266
   
   13.11 ... Auf einen Blick ... 268
   
   14. Der Browser und das CSS: Kaskade, Vererbung oder Standardwert ... 269
   
   14.1 ... Die Kaskade: Wichtigkeit, Spezifität und Reihenfolge ... 269
   
   14.2 ... Intuitiv: Die Reihenfolge im CSS entscheidet ... 271
   
   14.3 ... Ungewohnt: Spezifität ist wichtiger als Reihenfolge ... 272
   
   14.4 ... Ausnahme: »!important« gewinnt immer ... 274
   
   14.5 ... Nichts gefunden? Vererbung oder Standardwert ... 275
   
   14.6 ... Die Kaskade im Browser analysieren ... 277
   
   14.7 ... Übersicht: Kaskade, Vererbung oder Standardwert ... 278
   
   14.8 ... Auf einen Blick ... 280
   
   15. Schrift und Text gestalten per CSS ... 281
   
   15.1 ... Klassische Schriftarten mit und ohne Serifen im Web ... 281
   
   15.2 ... Die Schriftart definieren mit »font-family« ... 283
   
   15.3 ... Die Systemschrift des Geräts: Gut lesbar und echt schnell ... 285
   
   15.4 ... Webfonts -- die Schriftart gleich mitliefern ... 287
   
   15.5 ... Schnell und einfach: Google Fonts direkt von Google ... 288
   
   15.6 ... Auf der sicheren Seite: Google Fonts selbst ausliefern ... 291
   
   15.7 ... Gut lesbarer Text: »font-size« und »line-height« ... 295
   
   15.8 ... Listen: Aufzählungszeichen gestalten per CSS ... 299
   
   15.9 ... Hyperlinks: Unterstreichung gestalten mit »text-decoration« ... 303
   
   15.10 ... Hyperlinks: Linkzustände gestalten mit Pseudoklassen ... 305
   
   15.11 ... Externe Hyperlinks kennzeichnen mit »::after« ... 309
   
   15.12 ... Weitere Eigenschaften zur Gestaltung von Schrift und Text ... 312
   
   15.13 ... Auf einen Blick ... 315
   
   16. Abstände gestalten mit dem Box-Modell ... 317
   
   16.1 ... Das klassische Box-Modell für Blockboxen ... 317
   
   16.2 ... Die Breite begrenzen: »min-width« und »max-width« ... 318
   
   16.3 ... Der Abstand zum Rand: »padding« ... 320
   
   16.4 ... Rahmenlinien gestalten mit »border« und »border-radius« ... 323
   
   16.5 ... Blockboxen horizontal zentrieren mit »margin: auto« ... 327
   
   16.6 ... Abstände zwischen den Elementen mit »margin« ... 328
   
   16.7 ... »Collapsing Margins«: Vertikale Außenabstände kollabieren ... 329
   
   16.8 ... Das intuitivere Box-Modell: »box-sizing: border-box« ... 335
   
   16.9 ... Das Box-Modell für Inline-Boxen ... 337
   
   16.10 ... Inline-Block: Blockboxen, aber nebeneinander ... 338
   
   16.11 ... Auf einen Blick ... 339
   
   17. Boxen gestalten per CSS ... 341
   
   17.1 ... Hintergrundgrafiken per CSS einbinden und gestalten ... 341
   
   17.2 ... Lineare Farbverläufe: »background-image« und »linear-gradient()« ... 348
   
   17.3 ... Schattenboxen mit »box-shadow« ... 350
   
   17.4 ... Gestalten mit dem Box-Modell: Zitate als Kundenstimmen ... 352
   
   17.5 ... »Call to Action«: Hyperlinks in Buttons verwandeln ... 355
   
   17.6 ... Boxen am Bildschirm ausblenden: »visually-hidden« ... 360
   
   17.7 ... Auf einen Blick ... 363
   
   18. Ordnung halten: Stylesheets organisieren ... 365
   
   18.1 ... Stylesheets strukturieren mit Kommentaren ... 366
   
   18.2 ... Verschiedene Schreibweisen für CSS-Regeln ... 367
   
   18.3 ... CSS überprüfen mit dem CSS-Validator ... 371
   
   18.4 ... Modulbauweise: Ein zentrales Stylesheet erleichtert die Entwicklung ... 372
   
   18.5 ... Die Stylesheets für die einzelnen Module erstellen ... 374
   
   18.6 ... Das Modul »basis.css« ist das Fundament ... 376
   
   18.7 ... Das Modul »layout.css« für Seitenlayout und Layoutbereiche ... 379
   
   18.8 ... Das Modul »navi-inline.css« für die Navigation ... 381
   
   18.9 ... Das Modul »content.css« zur Gestaltung der Inhalte ... 382
   
   18.10 ... Das Modul »forms.css« für Kontaktdaten und Formulare ... 383
   
   18.11 ... Ein neues Modul für ein modernes Layout ... 384
   
   18.12 ... Auf einen Blick ... 391
   
   19. Media Queries und responsives Webdesign ... 393
   
   19.1 ... »Responsives Webdesign«: Das Web wird flexibel ... 393
   
   19.2 ... Medientypen definieren das Ausgabemedium ... 394
   
   19.3 ... Media Queries = Medientypen + Medieneigenschaften ... 397
   
   19.4 ... Media Queries brauchen den »Meta-Viewport« ... 401
   
   19.5 ... Media Queries und die Suche nach dem Breakpoint ... 403
   
   19.6 ... Auf einen Blick ... 404
   
   20. Der Flow und die Eigenschaft »position« ... 405
   
   20.1 ... Blockboxen, der Flow und »position: static« ... 405
   
   20.2 ... Versetzt weiterfließen mit »position: relative« ... 407
   
   20.3 ... Raus aus dem Flow mit »position: absolute« ... 408
   
   20.4 ... Der Trick: »absolute« und »relative« kombinieren ... 409
   
   20.5 ... Wie ein Fels in der Brandung -- »position: fixed« ... 412
   
   20.6 ... Scrollen und dann stehen bleiben: »position: sticky« ... 413
   
   20.7 ... Positionierte Boxen und der »z-index« ... 414
   
   20.8 ... Auf einen Blick ... 417
   
   21. Schweben und schweben lassen: »float« ... 419
   
   21.1 ... Text um eine Abbildung fließen lassen mit »float« ... 419
   
   21.2 ... Floats beenden mit »clear: both« ... 423
   
   21.3 ... Floats umschließen mit »display: flow-root« ... 424
   
   21.4 ... Praktisch: Klassen zum Floaten und Clearen ... 425
   
   21.5 ... Das Umschließen von Floats mit »@supports« ... 427
   
   21.6 ... Auf einen Blick ... 428
   
   22. Flexbox: Mehrspaltige Layouts mit »display: flex« ... 429
   
   22.1 ... Flexbox und Grid -- das moderne CSS-Layout ... 429
   
   22.2 ... Flex-Container erstellen mit »display: flex« ... 431
   
   22.3 ... Die Fließrichtung von Flex-Items kontrollieren mit »flex-flow« ... 434
   
   22.4 ... Flex-Items an der Hauptachse ausrichten mit »justify-content« ... 438
   
   22.5 ... Flex-Items an der Querachse ausrichten mit »align-items« und »align-self« ... 439
   
   22.6 ... Automatische Abstände für Flex-Items mit »margin« ... 442
   
   22.7 ... Flexibilität für Flex-Items: Die Zauberformel »flex: 1« ... 444
   
   22.8 ... Flexbox in Aktion: Den Footer am unteren Rand des Browserfensters platzieren ... 447
   
   22.9 ... Die Reihenfolge von Flex-Items ändern ... 450
   
   22.10 ... Auf einen Blick ... 451
   
   23. Eine responsive Navigation erstellen ... 453
   
   23.1 ... Die responsive Navigation im Überblick ... 453
   
   23.2 ... Schritt 1: Prüfen, ob JavaScript im Browser aktiv ist ... 457
   
   23.3 ... Schritt 2: Die mobile Navigation gestalten ... 459
   
   23.4 ... Schritt 3: Den Menübutton im HTML einfügen ... 461
   
   23.5 ... Schritt 4: Den Menübutton per CSS gestalten ... 464
   
   23.6 ... Schritt 5: Die Navigation per CSS ausblenden ... 468
   
   23.7 ... Schritt 6: Die Navigation mit dem Menübutton einblenden ... 470
   
   23.8 ... Schritt 7: Eine horizontale Navigation für breitere Viewports ... 471
   
   23.9 ... Die Navigation im Fußbereich gestalten ... 473
   
   23.10 ... Auf einen Blick ... 474
   
   24. CSS-Grid: Mehrspaltige Layouts erstellen mit »display: grid« ... 477
   
   24.1 ... Ein »Grid« ist ein Raster und schafft Ordnung ... 477
   
   24.2 ... Mehrspaltiges Layout nur für moderne Browser: »@supports« ... 478
   
   24.3 ... Das erste Grid-Layout: Drei Boxen nebeneinander ... 479
   
   24.4 ... Flexbox und Grid sind ein gutes Team ... 485
   
   24.5 ... Grid-Items manuell platzieren mit nummerierten Grid-Linien ... 488
   
   24.6 ... Grid-Items manuell platzieren mit benannten Grid-Bereichen ... 493
   
   24.7 ... Die Grid-Zauberformel: Responsiv ohne Media Query ... 497
   
   24.8 ... Die wichtigsten Grid-Eigenschaften in der Übersicht ... 502
   
   24.9 ... Auf einen Blick ... 504
   
   25. Flexible Icons und responsive Bilder ... 505
   
   25.1 ... Flexible Icons: Skalierbare Symbole mit SVG ... 505
   
   25.2 ... SVG-Icons mit als Datei einbinden ... 507
   
   25.3 ... SVG-Icons kann man im Editor bearbeiten ... 509
   
   25.4 ... SVG-Icons inline direkt im HTML einfügen ... 510
   
   25.5 ... Unterschiedliche Bilder je nach Pixeldichte des Bildschirms ... 512
   
   25.6 ... Unterschiedliche Bilder je nach Viewportbreite ... 513
   
   25.7 ... Auf einen Blick ... 518
   
   Index ... 519
   
   

   ... 195 10.2 ... Tabellenüberschriften stehen in	... 197 10.3 ... Tabellen strukturieren:

   , und , und ... 198
   
   10.4 ... Zellen verbinden mit »colspan« und »rowspan« ... 199
   
   10.5 ... HTML-Tabellen erstellen und gestalten -- ein Beispiel ... 200
   
   10.6 ... Auf einen Blick ... 204
   
   11. Von der Webseite zur Website ... 205
   
   11.1 ... Fine-Tuning für die Startseite ... 205
   
   11.2 ... Das HTML überprüfen mit dem HTML-Validator ... 210
   
   11.3 ... Die Seiten »News«, »Über uns« und »Kontakt« erstellen ... 212
   
   11.4 ... Inhalte für die Seite »News« hinzufügen ... 216
   
   11.5 ... Ein Bild auf der Seite »Über uns« einfügen ... 220
   
   11.6 ... Kontaktdaten und Formular für die Seite »Kontakt« ... 222
   
   11.7 ... Die Seiten »Impressum« und »Datenschutz« ... 225
   
   11.8 ... Auf einen Blick ... 226
   
   12. CSS kennenlernen: Syntax, Box-Modell, Farbwerte und Einheiten ... 227
   
   12.1 ... Überblick: Webseiten gestalten per CSS ... 227
   
   12.2 ... Wichtige Vokabeln: Der Aufbau einer CSS-Regel ... 228
   
   12.3 ... Es gibt drei verschiedene Möglichkeiten, CSS zu speichern ... 229
   
   12.4 ... Das Box-Modell kennenlernen: »padding«, »border« und »margin« ... 231
   
   12.5 ... Farbnamen in CSS: Einfach, aber nicht sehr flexibel ... 236
   
   12.6 ... Weit verbreitet: Hexadezimale Farbangaben mit #rrggbb ... 238
   
   12.7 ... Die Alternative: Farben mit rgb() -- auch mit Transparenz ... 240
   
   12.8 ... Nützliche Werkzeuge und Websites zur Arbeit mit Farben ... 242
   
   12.9 ... Wichtige Einheiten: px, em, rem, % & Co ... 245
   
   12.10 ... Auf einen Blick ... 248
   
   13. Die wichtigsten Selektoren und Spezifität ... 249
   
   13.1 ... Einfache Selektoren: Elemente, Gruppierung und »*« ... 250
   
   13.2 ... Klassen sind klasse: Der Selektor mit dem Punkt ... 251
   
   13.3 ... IDs sind einmalig: Der Selektor mit der Raute ... 253
   
   13.4 ... Überblick: Die HTML-Elemente im DOM-Baum ... 254
   
   13.5 ... Nachfahren auswählen: Der Selektor mit dem Leerzeichen ... 256
   
   13.6 ... Selektoren zum Auswählen von Kindelementen ... 256
   
   13.7 ... Nachbar- und Geschwisterselektoren mit + und ~ ... 260
   
   13.8 ... Attributselektoren haben eckige Klammern: [attribut] ... 261
   
   13.9 ... Quellen zum Nachschlagen von weiteren Selektoren ... 265
   
   13.10 ... Spezifität: Einige Selektoren sind wichtiger als andere ... 266
   
   13.11 ... Auf einen Blick ... 268
   
   14. Der Browser und das CSS: Kaskade, Vererbung oder Standardwert ... 269
   
   14.1 ... Die Kaskade: Wichtigkeit, Spezifität und Reihenfolge ... 269
   
   14.2 ... Intuitiv: Die Reihenfolge im CSS entscheidet ... 271
   
   14.3 ... Ungewohnt: Spezifität ist wichtiger als Reihenfolge ... 272
   
   14.4 ... Ausnahme: »!important« gewinnt immer ... 274
   
   14.5 ... Nichts gefunden? Vererbung oder Standardwert ... 275
   
   14.6 ... Die Kaskade im Browser analysieren ... 277
   
   14.7 ... Übersicht: Kaskade, Vererbung oder Standardwert ... 278
   
   14.8 ... Auf einen Blick ... 280
   
   15. Schrift und Text gestalten per CSS ... 281
   
   15.1 ... Klassische Schriftarten mit und ohne Serifen im Web ... 281
   
   15.2 ... Die Schriftart definieren mit »font-family« ... 283
   
   15.3 ... Die Systemschrift des Geräts: Gut lesbar und echt schnell ... 285
   
   15.4 ... Webfonts -- die Schriftart gleich mitliefern ... 287
   
   15.5 ... Schnell und einfach: Google Fonts direkt von Google ... 288
   
   15.6 ... Auf der sicheren Seite: Google Fonts selbst ausliefern ... 291
   
   15.7 ... Gut lesbarer Text: »font-size« und »line-height« ... 295
   
   15.8 ... Listen: Aufzählungszeichen gestalten per CSS ... 299
   
   15.9 ... Hyperlinks: Unterstreichung gestalten mit »text-decoration« ... 303
   
   15.10 ... Hyperlinks: Linkzustände gestalten mit Pseudoklassen ... 305
   
   15.11 ... Externe Hyperlinks kennzeichnen mit »::after« ... 309
   
   15.12 ... Weitere Eigenschaften zur Gestaltung von Schrift und Text ... 312
   
   15.13 ... Auf einen Blick ... 315
   
   16. Abstände gestalten mit dem Box-Modell ... 317
   
   16.1 ... Das klassische Box-Modell für Blockboxen ... 317
   
   16.2 ... Die Breite begrenzen: »min-width« und »max-width« ... 318
   
   16.3 ... Der Abstand zum Rand: »padding« ... 320
   
   16.4 ... Rahmenlinien gestalten mit »border« und »border-radius« ... 323
   
   16.5 ... Blockboxen horizontal zentrieren mit »margin: auto« ... 327
   
   16.6 ... Abstände zwischen den Elementen mit »margin« ... 328
   
   16.7 ... »Collapsing Margins«: Vertikale Außenabstände kollabieren ... 329
   
   16.8 ... Das intuitivere Box-Modell: »box-sizing: border-box« ... 335
   
   16.9 ... Das Box-Modell für Inline-Boxen ... 337
   
   16.10 ... Inline-Block: Blockboxen, aber nebeneinander ... 338
   
   16.11 ... Auf einen Blick ... 339
   
   17. Boxen gestalten per CSS ... 341
   
   17.1 ... Hintergrundgrafiken per CSS einbinden und gestalten ... 341
   
   17.2 ... Lineare Farbverläufe: »background-image« und »linear-gradient()« ... 348
   
   17.3 ... Schattenboxen mit »box-shadow« ... 350
   
   17.4 ... Gestalten mit dem Box-Modell: Zitate als Kundenstimmen ... 352
   
   17.5 ... »Call to Action«: Hyperlinks in Buttons verwandeln ... 355
   
   17.6 ... Boxen am Bildschirm ausblenden: »visually-hidden« ... 360
   
   17.7 ... Auf einen Blick ... 363
   
   18. Ordnung halten: Stylesheets organisieren ... 365
   
   18.1 ... Stylesheets strukturieren mit Kommentaren ... 366
   
   18.2 ... Verschiedene Schreibweisen für CSS-Regeln ... 367
   
   18.3 ... CSS überprüfen mit dem CSS-Validator ... 371
   
   18.4 ... Modulbauweise: Ein zentrales Stylesheet erleichtert die Entwicklung ... 372
   
   18.5 ... Die Stylesheets für die einzelnen Module erstellen ... 374
   
   18.6 ... Das Modul »basis.css« ist das Fundament ... 376
   
   18.7 ... Das Modul »layout.css« für Seitenlayout und Layoutbereiche ... 379
   
   18.8 ... Das Modul »navi-inline.css« für die Navigation ... 381
   
   18.9 ... Das Modul »content.css« zur Gestaltung der Inhalte ... 382
   
   18.10 ... Das Modul »forms.css« für Kontaktdaten und Formulare ... 383
   
   18.11 ... Ein neues Modul für ein modernes Layout ... 384
   
   18.12 ... Auf einen Blick ... 391
   
   19. Media Queries und responsives Webdesign ... 393
   
   19.1 ... »Responsives Webdesign«: Das Web wird flexibel ... 393
   
   19.2 ... Medientypen definieren das Ausgabemedium ... 394
   
   19.3 ... Media Queries = Medientypen + Medieneigenschaften ... 397
   
   19.4 ... Media Queries brauchen den »Meta-Viewport« ... 401
   
   19.5 ... Media Queries und die Suche nach dem Breakpoint ... 403
   
   19.6 ... Auf einen Blick ... 404
   
   20. Der Flow und die Eigenschaft »position« ... 405
   
   20.1 ... Blockboxen, der Flow und »position: static« ... 405
   
   20.2 ... Versetzt weiterfließen mit »position: relative« ... 407
   
   20.3 ... Raus aus dem Flow mit »position: absolute« ... 408
   
   20.4 ... Der Trick: »absolute« und »relative« kombinieren ... 409
   
   20.5 ... Wie ein Fels in der Brandung -- »position: fixed« ... 412
   
   20.6 ... Scrollen und dann stehen bleiben: »position: sticky« ... 413
   
   20.7 ... Positionierte Boxen und der »z-index« ... 414
   
   20.8 ... Auf einen Blick ... 417
   
   21. Schweben und schweben lassen: »float« ... 419
   
   21.1 ... Text um eine Abbildung fließen lassen mit »float« ... 419
   
   21.2 ... Floats beenden mit »clear: both« ... 423
   
   21.3 ... Floats umschließen mit »display: flow-root« ... 424
   
   21.4 ... Praktisch: Klassen zum Floaten und Clearen ... 425
   
   21.5 ... Das Umschließen von Floats mit »@supports« ... 427
   
   21.6 ... Auf einen Blick ... 428
   
   22. Flexbox: Mehrspaltige Layouts mit »display: flex« ... 429
   
   22.1 ... Flexbox und Grid -- das moderne CSS-Layout ... 429
   
   22.2 ... Flex-Container erstellen mit »display: flex« ... 431
   
   22.3 ... Die Fließrichtung von Flex-Items kontrollieren mit »flex-flow« ... 434
   
   22.4 ... Flex-Items an der Hauptachse ausrichten mit »justify-content« ... 438
   
   22.5 ... Flex-Items an der Querachse ausrichten mit »align-items« und »align-self« ... 439
   
   22.6 ... Automatische Abstände für Flex-Items mit »margin« ... 442
   
   22.7 ... Flexibilität für Flex-Items: Die Zauberformel »flex: 1« ... 444
   
   22.8 ... Flexbox in Aktion: Den Footer am unteren Rand des Browserfensters platzieren ... 447
   
   22.9 ... Die Reihenfolge von Flex-Items ändern ... 450
   
   22.10 ... Auf einen Blick ... 451
   
   23. Eine responsive Navigation erstellen ... 453
   
   23.1 ... Die responsive Navigation im Überblick ... 453
   
   23.2 ... Schritt 1: Prüfen, ob JavaScript im Browser aktiv ist ... 457
   
   23.3 ... Schritt 2: Die mobile Navigation gestalten ... 459
   
   23.4 ... Schritt 3: Den Menübutton im HTML einfügen ... 461
   
   23.5 ... Schritt 4: Den Menübutton per CSS gestalten ... 464
   
   23.6 ... Schritt 5: Die Navigation per CSS ausblenden ... 468
   
   23.7 ... Schritt 6: Die Navigation mit dem Menübutton einblenden ... 470
   
   23.8 ... Schritt 7: Eine horizontale Navigation für breitere Viewports ... 471
   
   23.9 ... Die Navigation im Fußbereich gestalten ... 473
   
   23.10 ... Auf einen Blick ... 474
   
   24. CSS-Grid: Mehrspaltige Layouts erstellen mit »display: grid« ... 477
   
   24.1 ... Ein »Grid« ist ein Raster und schafft Ordnung ... 477
   
   24.2 ... Mehrspaltiges Layout nur für moderne Browser: »@supports« ... 478
   
   24.3 ... Das erste Grid-Layout: Drei Boxen nebeneinander ... 479
   
   24.4 ... Flexbox und Grid sind ein gutes Team ... 485
   
   24.5 ... Grid-Items manuell platzieren mit nummerierten Grid-Linien ... 488
   
   24.6 ... Grid-Items manuell platzieren mit benannten Grid-Bereichen ... 493
   
   24.7 ... Die Grid-Zauberformel: Responsiv ohne Media Query ... 497
   
   24.8 ... Die wichtigsten Grid-Eigenschaften in der Übersicht ... 502
   
   24.9 ... Auf einen Blick ... 504
   
   25. Flexible Icons und responsive Bilder ... 505
   
   25.1 ... Flexible Icons: Skalierbare Symbole mit SVG ... 505
   
   25.2 ... SVG-Icons mit als Datei einbinden ... 507
   
   25.3 ... SVG-Icons kann man im Editor bearbeiten ... 509
   
   25.4 ... SVG-Icons inline direkt im HTML einfügen ... 510
   
   25.5 ... Unterschiedliche Bilder je nach Pixeldichte des Bildschirms ... 512
   
   25.6 ... Unterschiedliche Bilder je nach Viewportbreite ... 513
   
   25.7 ... Auf einen Blick ... 518
   
   Index ... 519
   
   

   Rezensionen

   »Wer seine Webseiten selber erstellen und aufmotzen möchte, findet hier ein ideales Begleitbuch.« Mac Life 202212

   Kundenbewertungen

   Schreiben Sie eine Kundenbewertung zu diesem Produkt und gewinnen Sie mit etwas Glück einen 15,- EUR bücher.de–Gutschein!

   Bewertung schreiben Bewertung schreiben

   Bewertung schreiben Bewertung schreiben

    

   Ein Marktplatz-Angebot für "Einstieg in HTML und CSS" für 19,90 €

   ... 195 10.2 ... Tabellenüberschriften stehen in	... 197 10.3 ... Tabellen strukturieren:

   Zustand	Preis	Porto	Zahlung	Verkäufer	Rating
   leichte Gebrauchsspuren	19,90 19,90 €	4,80 4,80 €	Banküberweisung Zum Angebot	annekri	100,0%	Zum Angebot