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: Navigation, Media Queries, Float-Layouts und Flexbox ; inkl. Einführung in Flexbox]
Saved in:
| Main Author: | |
|---|---|
| Format: | Book |
| Language: | German |
| Published: |
Bonn
Rheinwerk-Verl.
2016
|
| Edition: | 2., aktualisierte und erw. Aufl. |
| Series: | Rheinwerk Computing
|
| Subjects: | |
| Online Access: | Inhaltstext Ausführliche Beschreibung Autorenbiografie Inhaltsverzeichnis Inhaltsverzeichnis |
| Physical Description: | 524 S. Ill., graph. Darst. |
| ISBN: | 3836236834 9783836236836 |
Staff View
MARC
| LEADER | 00000nam a2200000 c 4500 | ||
|---|---|---|---|
| 001 | BV042771376 | ||
| 003 | DE-604 | ||
| 005 | 20200114 | ||
| 007 | t | ||
| 008 | 150821s2016 gw ad|| |||| 00||| ger d | ||
| 015 | |a 15,N28 |2 dnb | ||
| 015 | |a 15,A47 |2 dnb | ||
| 016 | 7 | |a 1073276686 |2 DE-101 | |
| 020 | |a 3836236834 |9 3-8362-3683-4 | ||
| 020 | |a 9783836236836 |c kart. : EUR 29.90 (DE), EUR 30.80 (AT), sfr 38.90 (freier Pr.) |9 978-3-8362-3683-6 | ||
| 024 | 3 | |a 9783836236836 | |
| 035 | |a (OCoLC)913608218 | ||
| 035 | |a (DE-599)BVBBV042771376 | ||
| 040 | |a DE-604 |b ger |e rakddb | ||
| 041 | 0 | |a ger | |
| 044 | |a gw |c XA-DE-NW | ||
| 049 | |a DE-824 |a DE-523 |a DE-355 |a DE-1050 |a DE-860 |a DE-11 |a DE-859 |a DE-863 |a DE-573 |a DE-92 |a DE-1102 |a DE-858 |a DE-29T |a DE-B768 |a DE-473 |a DE-739 |a DE-703 |a DE-898 | ||
| 082 | 0 | |a 006.74 |2 22/ger | |
| 084 | |a ST 230 |0 (DE-625)143617: |2 rvk | ||
| 084 | |a ST 250 |0 (DE-625)143626: |2 rvk | ||
| 084 | |a ST 252 |0 (DE-625)143627: |2 rvk | ||
| 084 | |a ST 253 |0 (DE-625)143628: |2 rvk | ||
| 084 | |a 004 |2 sdnb | ||
| 100 | 1 | |a Müller, Peter |d 1960- |e Verfasser |0 (DE-588)1013505735 |4 aut | |
| 245 | 1 | 0 | |a Einstieg in CSS |b 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: Navigation, Media Queries, Float-Layouts und Flexbox ; inkl. Einführung in Flexbox] |c Peter Müller |
| 246 | 1 | 0 | |a HTML 5 CSS 3 fünf drei |
| 250 | |a 2., aktualisierte und erw. Aufl. | ||
| 264 | 1 | |a Bonn |b Rheinwerk-Verl. |c 2016 | |
| 300 | |a 524 S. |b Ill., graph. Darst. | ||
| 336 | |b txt |2 rdacontent | ||
| 337 | |b n |2 rdamedia | ||
| 338 | |b nc |2 rdacarrier | ||
| 490 | 0 | |a Rheinwerk Computing | |
| 650 | 0 | 7 | |a Cascading Style Sheets 3.0 |0 (DE-588)7750895-6 |2 gnd |9 rswk-swf |
| 650 | 0 | 7 | |a Webdesign |0 (DE-588)1041632088 |2 gnd |9 rswk-swf |
| 650 | 0 | 7 | |a HTML 5.0 |0 (DE-588)7704810-6 |2 gnd |9 rswk-swf |
| 689 | 0 | 0 | |a Webdesign |0 (DE-588)1041632088 |D s |
| 689 | 0 | 1 | |a HTML 5.0 |0 (DE-588)7704810-6 |D s |
| 689 | 0 | 2 | |a Cascading Style Sheets 3.0 |0 (DE-588)7750895-6 |D s |
| 689 | 0 | |5 DE-604 | |
| 710 | 2 | |a Rheinwerk Verlag |0 (DE-588)1081738405 |4 pbl | |
| 776 | 0 | 8 | |i Erscheint auch als |n Online-Ausgabe |z 978-3-8362-3684-3 |
| 856 | 4 | 2 | |m X:MVB |q text/html |u http://deposit.dnb.de/cgi-bin/dokserv?id=5299592&prov=M&dok_var=1&dok_ext=htm |3 Inhaltstext |
| 856 | 4 | 2 | |q text/html |u https://www.rheinwerk-verlag.de/einstieg-in-css_3806/ |3 Ausführliche Beschreibung |
| 856 | 4 | 2 | |q text/html |u https://www.rheinwerk-verlag.de/einstieg-in-css_3806/autor/ |3 Autorenbiografie |
| 856 | 4 | 2 | |m DNB Datenaustausch |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=028201672&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |3 Inhaltsverzeichnis |
| 856 | 4 | 2 | |m Digitalisierung UB Passau - ADAM Catalogue Enrichment |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=028201672&sequence=000004&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA |3 Inhaltsverzeichnis |
| 943 | 1 | |a oai:aleph.bib-bvb.de:BVB01-028201672 | |
Record in the Search Index
| DE-BY-863_location | 1340 1000 |
|---|---|
| DE-BY-FWS_call_number | 1340/ST 253 C18 M947(2) 1000/ST 253 C18 M947(2) |
| DE-BY-FWS_katkey | 589312 |
| DE-BY-FWS_media_number | 083101434712 083101376722 |
| _version_ | 1824554015926517760 |
| adam_text |
INHALT
INHALT
VORWORT 23
TEILI DIE EINLEITUNG
1 DAS WEB IST NICHT AUS PAPIER
29
1.1 PAPIERDENKEN, WEBSEITEN UND ENTTAEUSCHTE ERWARTUNGEN 29
1.2 DER AUTOR EINER WEBSEITE HAT KEINE KONTROLLE 30
1.2.1 RESPONSIV: DER BENUTZER BRINGT DEN BILDSCHIRM MIT 30
1.2.2 BARRIEREFREI: DER BENUTZER KANN DIE WUENSCHE DER WEBDESIGNER
IGNORIEREN 31
1.2.3 FAZIT: IM WEB BESTIMMT DER BENUTZER, NICHT DER AUTOR 31
1.3 WEBSEITEN SEHEN BEI JEDEM BENUTZER ANDERS AUS 32
1.3.1 WEBSEITEN BESTEHEN AUS QUELLTEXT 32
1.3.2 DER BROWSER MACHT AUS DEM QUELLTEXT EINE SICHTBARE WEBSEITE 33
1.3.3 DIE FLEXIBLE ZEITUNG: PAPIERSEITEN SIND STARR, WEBSEITEN FLEXIBEL
34
1.3.4 WEBSEITEN HABEN SCHICHTEN: HTML, CSS UND JAVASCRIPT 34
1.4 UEBERSICHT: EINE KURZE GESCHICHTE DES WEBLAYOUTS 35
1.4.1 FAST KEIN LAYOUT: MOSAIC UND NETSCAPE NAVIGATOR 35
1.4.2 MITTE DER 1990ER: LAYOUTS MIT HTML-TABELLEN UND FONT 36
1.4.3 DAS NEUE JAHRTAUSEND: CSS-LAYOUTS UND RESPONSIVES WEBDESIGN 37
1.4.4 FAZIT: DIE BROWSER BESTIMMEN, WAS GEHT 38
2 HTML UND CSS IM SCHNELLDURCHLAUF
39
2.1 WEBSEITEN BESTEHEN AUS RECHTECKIGEN KAESTCHEN 39
2.2 HTML IST DER MAURER, DER RECHTECKIGE KAESTCHEN ERSTELLT 40
2.2.1 DIE ERSTE WEBSEITE ERSTELLEN 40
2.2.2 DIE KAESTCHEN DER HTML-ELEMENTE SICHTBAR MACHEN 41
5
HTTP://D-NB.INFO/1073276686
INHALT
2.3 CSS IST DER STYLIST, DER DIE RECHTECKIGEN KAESTCHEN GESTALTET 43
2.3.1 DAS STYLING FUER DIE WEBSEITE-DIE ERSTE CSS-REGEL 43
2.3.2 EIN STYLE FUER DIE H1-UEBERSCHRIFT 44
2.4 ENTWICKLER-TOOLS-HTML UND CSS ANALYSIEREN 46
2.5 AUF EINEN BLICK 47
TEIL II HTML-CRASHKURS - KAESTCHEN ERSTELLEN
3 DAS HTML-GRUNDGERUEST 51
3.1 HTML - HYPERLINKS ERSTELLEN UND ETIKETTEN KLEBEN 51
3.1.1 HT WIE HYPERTEXT-TEXT MIT HYPERLINKS 52
3.1.2 M WIE MARKUP-ETIKETTEN KLEBEN 52
3.1.3 LWIE LANGUAGE-VOKABELN UND CRAMMATIKREGELN 52
3.1.4 MISSVERSTAENDNISSE ZU HTML 53
3.2 DAS HTML-CRUNDGERUEST IST DAS SKELETT EINER WEBSEITE 53
3.2.1 EINE GUTE ANGEWOHNHEIT- 1-KOMMENTARE- 53
3.2.2 EIN GRUNDGERUEST FUER EINE WEBSEITE ERSTELLEN 54
3.3 DIE DOKUMENTTYP-DEFINITION - !DOCTYPE HTML 55
3.4 DAS STAMMELEMENT HTML 55
3.5 INFORMATIONEN UEBER DIE WEBSEITE - HEAD 56
3.5.1 DIE ANGABE DES ZEICHENSATZES - CMETA CHARSET="UTF-8" 56
3.5.2 DER NAME DER SEITE - TITLE 57
3.5.3 DIE BESCHREIBUNG FUER SUCHMASCHINEN - META NAME="DESCRIPTION" 58
3.5.4 WEITERE META-ELEMENTE 58
3.6 DER INHALT DER WEBSEITE- BODY 59
3.7 HTML-ELEMENTE IM QUELLTEXT - ANFANGS-TAG, INHALT UND ENDE-TAG 59
3.8 AUF EINEN BLICK 60
6
INHALT
4 HTML-ELEMENTE FUER UEBERSCHRIFTEN, TEXT UND LISTEN 6I
4.1 DAS CRUNDGERUEST FUER DIE STARTSEITE ERSTELLEN 62
4.2 DIE SEITE IN BEREICHE EINTEILEN: HEADER, NAV, MAIN,
FOOTER UND DIV 63
4.2.1 VIER BEREICHE: HEADER, NAV, MAIN UND FOOTER 63
4.2.2 DER SCHUTZUMSCHLAG - DIV ID="WRAPPER" 64
4.2.3 DIE LAYOUTBEREICHE ERSTELLEN 65
4.2.4 VISUELL-SCHEMATISCHE DARSTELLUNG DER BEREICHE 65
4.3 UEBERSCHRIFTEN - HL BIS H6 66
4.3.1 BENUTZEN SIE UEBERSCHRIFTEN 67
4.3.2 UEBERSCHRIFTENEBENE NICHT AUFGRUND DER SCHRIFTGROESSE WAEHLEN 67
4.4 FLIESSTEXT-ABSAETZE UND HERVORHEBUNGEN 68
4.4.1 ABSAETZE-P WIE PARAGRAPH 68
4.4.2 TEXT HERVORHEBEN - STRONG UND EM 69
4.4.3 HTML-ELEMENTE VERSCHACHTELN - ZUERST GEOEFFNET,
ZULETZT GESCHLOSSEN 70
4.5 UEBER BLOCK- UND INLINE-ELEMENTE 70
4.5.1 BLOCKELEMENTE WERDEN SO BREIT, WIE ES GEHT 70
4.5.2 INLINE-ELEMENTE WERDEN NUR SO BREIT WIE IHR INHALT 71
4.5.3 DIE KONTUREN VON HTML-ELEMENTEN SICHTBAR MACHEN 71
4.6 LISTENKISTEN -AUFZAEHLUNGEN UND NUMMERIERUNGEN 72
4.6.1 AUFZAEHLUNGEN - UNGEORDNETE LISTEN MIT UL UND II 72
4.6.2 NUMMERIERUNGEN - GEORDNETE LISTEN MIT OL UND II 73
4.7 VERSCHACHTELTE LISTEN 74
4.7.1 EINE VERSCHACHTELTE LISTE ERSTELLEN 74
4.7.2 SCHEMATISCHE DARSTELLUNG DER VERSCHACHTELTEN LISTE 75
4.8 JEDER BROWSER HAT EIN EINGEBAUTES STYLESHEET 76
4.9 AUF EINEN BLICK 77
5 HTML-ELEMENTE FUER LINKS, BILDER UND MEHR
79
5.1 HYPERLINKS-DAS BESONDERE AM WORLD WIDE WEB 79
5.1.1 ANATOMIE EINES HYPERLINKS 80
7
INHALT
5.1.2 DIE NAVIGATION - EINE UNGEORDNETE LISTE MIT HYPERLINKS 81
5.1.3 LINKS AUF ANDERE DATEIEN - PDF, MP3 ETC 82
5.2 DIE WEGBESCHREIBUNG ZUR GRAFIK-IMG 83
5.2.1 DIE ATTRIBUTE ZU IMG 83
5.2.2 IMG-EINE GRAFIK AUFDER BEISPIELSEITE EINFUEGEN 84
5.2.3 EIN LOGO ALS UEBERSCHRIFT? 85
5.3 WEITERE HTML-ELEMENTE ZUR AUSZEICHNUNG VON TEXT 86
5.3.1 BEGINNE EINE NEUE ZEILE MIT BR 86
5.3.2 ADDRESS FUER KONTAKTADRESSEN 86
5.3.3 SPAN IST EIN SEMANTISCH NEUTRALES INLINE-ELEMENT 88
5.3.4 BLOCKQUOTE UND CITE FUER ZITATE 88
5.4 KNOW-HOW-ZEICHENSAETZE UND SONDERZEICHEN 89
5.4.1 UTF-8: WISSENSWERTES UEBER ZEICHENSAETZE 90
5.4.2 CHARACTER ENTITIES-DIE KODIERUNG VON SONDERZEICHEN 91
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 WBC CORE STYLES 98
6.3 DIE KONTAKTSEITE - VON DER SEITE ZUR SITE 100
6.4 AUF EINEN BLICK 101
TEIL III CSS GRUNDLAGEN
- KAESTCHEN GESTALTEN
7 CSS KENNENLERNEN - SCHRIFTEN, FARBEN
UND HYPERLINKS
105
7.1 EIN STYLESHEET IST EINE SAMMLUNG VON FORMATVORLAGEN 105
7.2 UEBERBLICK: CSS UND DAS GESTALTEN DER HTML-KAESTCHEN 106
7.3 DAS ERSTE EIGENE STYLESHEET 107
7.3.1 EIN STYLESHEET ERSTELLEN UND EINEN CSS-KOMMENTAR SCHREIBEN 107
8
INHALT
7.3.2 DIE VERBINDUNG ZWISCHEN HTML UND CSS - LINK 108
7.4 FARBEN FUER HINTERGRUND UND SCHRIFT DEFINIEREN 109
7.4.1 HINTERGRUND-UND SCHRIFTFARBE FUER BODY 109
7.4.2 HINTERGRUND-UND SCHRIFTFARBE FUER DIV#WRAPPER 110
7.4.3 HINTERGRUND- UND SCHRIFTFARBEN IM KOPFBEREICH 112
7.5 SCHRIFTGESTALTUNG MIT FONT-FAMILY UND FONT-SIZE 113
7.6 TEXTGESTALTUNG: DIE KONTAKTADRESSE IM FUSSBEREICH 115
7.7 HYPERLINKS GESTALTEN 116
7.7.1 HYPERLINKS - DAS HTML-ELEMENT A 116
7.7.2 BESUCHTE UND NICHT BESUCHTE HYPERLINKS 117
7.7.3 WENN DIE MAUS DARUEBER SCHWEBT-A:HOVER UND KOLLEGEN 119
7.7.4 OUTLINE-DIE UMRISSLINIE UM ELEMENTE MIT FOKUS 120
7.8 STYLES KOENNEN AN DREI VERSCHIEDENEN STELLEN DEFINIERT WERDEN 121
7.8.1 MOEGLICHKEIT 1: EXTERN - CSS-REGELN IN EINER EIGENEN CSS-DATEI 121
7.8.2 MOEGLICHKEIT 2: ZWISCHEN HEAD UND /HEAD IM ELEMENT STYLE 122
7.8.3 MOEGLICHKEIT 3: DIREKT IM HTML-ELEMENT MIT DEM ATTRIBUT STYLE 122
7.8.4 VORFAHRT-WELCHE STYLES GEWINNEN? 123
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 WAEHLT DAS ZU GESTALTENDE KAESTCHEN AUS 126
8.2.1 DER NAME DER KISTE - EINFACHE ELEMENTSELEKTOREN 127
8.2.2 MEHRERE KAESTCHEN AUF EINMAL - SELEKTOREN GRUPPIEREN MIT KOMMA 127
8.2.3 ALLE KAESTCHEN AUF DER SEITE-DER UNIVERSALSELEKTOR * 128
8.3 UEBERBLICK: DIE HTML-ELEMENTE IM DOM-BAUM 128
8.4 SELEKTOREN KOMBINIEREN - NACHFAHREN AUSWAEHLEN 130
8.4.1 BEISPIEL 1: SCHRIFTGESTALTUNG NUR FUER DEN SLOGAN IM KOPFBEREICH
130
8.4.2 BEISPIEL 2: AUFZAEHLUNGSZEICHEN NUR IN UNGEORDNETEN LISTEN
GESTALTEN 131
8.4.3 BEISPIEL 3: UNTERSCHIEDLICH NUMMERIERTE EBENEN BEI
GEORDNETEN LISTEN 132
9
INHALT
8.5 EIGENE NAMEN VERGEBEN - ID UND DASS 132
8.5.1 ES KANN NUR EINEN GEBEN - ID, DER SELEKTOR MIT DER RAUTE 133
8.5.2 GRUPPENBILDUNG- CLASS, DER SELEKTOR MIT DEM PUNKT 133
8.5.3 ID ODER KLASSE-WANN NIMMT MAN WAS? 135
8.5.4 SINNVOLLE NAMEN - ID UND CLASS SOLLTEN DIE BEDEUTUNG DES
ELEMENTS BESCHREIBEN 136
8.6 SPEZIFITAET -DAS PUNKTESYSTEM FUER SELEKTOREN 136
8.6.1 EINER WIRD GEWINNEN-SO FUNKTIONIERT SPEZIFITAET 136
8.6.2 EIN PAAR BEISPIELE FUER DIE PUNKTEWERTUNG 137
8.6.3 DIE SPEZIFITAET IST IN WIRKLICHKEIT EINE MATRIX 138
8.6.4 SPARSAM BENUTZEN - UEMPORTANT 138
8.7 WERTE UND MASSE IN CSS-DIE QUAL DER WAHL 139
8.7.1 GRUNDREGELN: DIE LEERSTELLE, DIE NULL UND DER ANFUEHRUNGSSTRICH 139
8.7.2 FUER DEN BILDSCHIRM - RELATIVE EINHEITEN 139
8.7.3 FUERDEN DRUCKER-ABSOLUTE EINHEITEN 140
8.8 FARBEN DEFINIEREN - HEXADEZIMAL, RGB UND NAMEN 141
8.9 AUF EINEN BLICK 143
9 DAS BOX-MODELL
145
9.1 ZUNAECHST IN MODERNEN BROWSERN TESTEN 145
9.2 DAS BOX-MODELL IN DER UEBERSICHT 146
9.2.1 ALLE BOXEN SIND GLEICH-DAS MODELL 146
9.2.2 DER INHALTSBEREICH - WIDTH (BREITE) UND HEIGHT (HOEHE) 147
9.2.3 DER INNENABSTAND - PADDING 148
9.2.4 DER RAHMEN DRUMHERUM - BORDER (RAHMENLINIEN) 149
9.2.5 DER AUSSENABSTAND - MARGIN 149
9.2.6 WENIG INTUITIV-DIE GESAMTBREITE EINER BOX BERECHNEN 150
9.2.7 EIN INTERAKTIVES BOX-MODELL ZUM AUSPROBIEREN 151
9.3 KALIBRIERUNG-ABSTAENDE PER RESET VEREINHEITLICHEN 152
9.3.1 RESET-ABSTAENDE ANNULIEREN UND HTML5-ELEMENTE BLOCKEN 152
9.3.2 RESTAURIERUNG-ABSTAENDE FUER DIE WICHTIGSTEN ELEMENTE NEU
DEFINIEREN 154
9.4 WEBSEITE ZENTRIEREN MIT WIDTH UND MARGIN 155
9.4.1 DIE BREITE EINES ELEMENTS - WIDTH 155
10
INHALT
9.4.2 DIE SEITE HORIZONTAL ZENTRIEREN MIT MARGIN: AUTO 156
9.5 RAHMENLINIEN ERSTELLEN - BORDER 158
9.6 EIN BISSCHEN ABSTAND DRUMHERUM - PADDING 159
9.6.1 DER ERSTE VERSUCH: EIN PADDING FUER DEN WRAPPER 159
9.6.2 BESSER: EIN PADDING FUER JEDEN LAYOUTBEREICH 160
9.7 DAS BOX-MODELL UND DIE FARBLICHE GESTALTUNG 162
9.7.1 DAS LOGO MITGESTALTEN - PADDING UND BORDER IN AKTION 162
9.7.2 DAS BOX-MODELL FUER DAS LOGO IM ENTWICKLER-TOOL DES FIREFOX 163
9.8 HINTERGRUNDGRAFIKEN PER CSS 164
9.8.1 HINTERGRUNDGRAFIK EINBINDEN - BACKGROUND-IMAGE 164
9.8.2 HINTERGRUNDGRAFIKEN WIEDERHOLEN - BACKGROUND-REPEAT 167
9.8.3 HINTERGRUNDGRAFIK POSITIONIEREN - BACKGROUND-POSITION 167
9.8.4 HINTERGRUNDGRAFIK FIXIEREN - BACKGROUND-ATTACHMENT 168
9.8.5 DIE KURZSCHREIBWEISE-BACKGROUND 169
9.8.6 DAS BOX-MODELL IST EIN BISSCHEN 3D 170
9.9 VERTIKALE ABSTAENDE KOLLABIEREN - COLLAPSING MARGINS 170
9.9.1 KOLLABIERENDE AUSSENABSTAENDE BEI AUFEINANDERFOLGENDEN
ELEMENTEN : 171
9.9.2 DAS BEISPIEL - EIN KOPFBEREICH MIT UEBERSCHRIFT UND ABSATZ 171
9.9.3 COLLAPSING MARGINS, TEIL 1: DIE UEBERSCHRIFT IM KOPFBEREICH 172
9.9.4 COLLAPSING MARGINS, TEIL 2: DER ABSATZ IM KOPFBEREICH 174
9.10 AUF EINEN BLICK 175
10 ORDNUNG HALTEN UND AUFRAEUMEN M
10.1 DER KOMMENTAR AM ANFANG 177
10.2 DAS STYLESHEET IN ABSCHNITTE UNTERTEILEN 178
10.2.1 TEIL 1: ALLGEMEINE STYLES 179
10.2.2 TEIL 2: STYLES FUER DIE LAYOUTBEREICHE 180
10.2.3 TEIL 3: SONSTIGE STYLES 180
10.3 VERSCHIEDENE SCHREIBWEISEN FUER STYLES 180
10.3.1 EINE TYPISCHE CSS-REGEL: EINE DEKLARATION PRO ZEILE 180
10.3.2 KURZE STYLES: ALLES IN EINER ZEILE 181
10.3.3 KOMBINIERTE UND GRUPPIERTE SELEKTOREN 181
11
INHALT
10.4 DIE REIHENFOLGE DER DEKLARATIONEN IM STYLE 182
10.4.1 MOEGLICHKEIT 1: DIE REIHENFOLGE ORIENTIERT SICH AM AUFBAU DER
BOXEN 182
10.4.2 MOEGLICHKEIT 2: ALPHABETISCH SORTIERTE DEKLARATIONEN 183
10.5 EFFEKTIV - KURZSCHREIBWEISEN FUER PADDING UND MARGIN 183
10.5.1 ALLE VIER SEITEN HABEN DEN GLEICHEN WERT 183
10.5.2 DIE REIHENFOLGE ENTSCHEIDET - NUR EINE SEITE HAT EINEN ANDEREN
WERT 184
10.5.3 UNTERSCHIEDLICHE WERTE FUER ALLE VIER SEITEN 185
10.5.4 PAARWEISE - OBEN = UNTEN UND LINKS = RECHTS 185
10.6 MEHRERE STYLESHEETS ERSTELLEN UND ZENTRAL EINBINDEN 186
10.6.1 TEILE UND HERRSCHE-AUFTEILUNG DER STYLES 186
10.6.2 EINES, SIE ZU BINDEN-DAS ZENTRALE STYLESHEET ZENTRALE.CSS 187
10.6.3 EINEN LINK ZUM ZENTRALEN STYLESHEET ERSTELLEN 188
10.6.4 @MEDIA- DEFINITION DER AUSGABEMEDIEN 188
10.7 STYLES AUFRAEUMEN: DIE EINZELNEN STYLESHEETS 189
10.7.1 DAS ZENTRALE STYLESHEET ZENTRALE.CSS IM UEBERBLICK 189
10.7.2 RESET UND RESTAURIERUNG DER ABSTAENDE - RESET.CSS 190
10.7.3 DIE GESTALTUNG FUER DEN BILDSCHIRM - BILDSCHIRM.CSS 192
10.8 DATEIEN IN UNTERORDNERN ORGANISIEREN 194
10.8.1 ORDNER ERSTELLEN UND DATEIEN VERSCHIEBEN 195
10.8.2 DIE PFADANGABE ZUM STYLESHEET AENDERN 197
10.8.3 PFADANGABEN ZU DEN GRAFIKEN AENDERN 197
10.9 DERCSS-VALIDATOR 199
10.10 AUF EINEN BLICK 201
11 EINE EINFACHE HORIZONTALE NAVIGATION
203
11.1 EINFACHE HORIZONTALE NAVIGATION MIT DISPLAY: INLINE 203
11.1.1 DIE LISTENELEMENTE IN DER NAVIGATION SELEKTIEREN 203
11.1.2 DAS STYLESHEET NAVI-INLINE.CSS ERSTELLEN 205
11.1.3 DEBUGGEN - FEHLER FINDEN MIT DEN ENTWICKLER-TOOLS IM BROWSER
207
11.1.4 FEINEINSTELLUNGEN-ABSTAENDE UND HYPERLINKS ANPASSEN 208
11.2 PUNKTSIEG - SPEZIFITAET IN DER PRAXIS 209
11.2.1 MARGIN-BOTTOM FUER UL 209
11.2.2 DIE FARBE DER HYPERLINKS 210
11.2.3 FEINEINSTELLUNGEN FUER DIE HYPERLINKS IN DER NAVIGATION 210
12
INHALT
11.3 VON ELEMENTEN UND BOXEN 210
11.3.1 IM QUELLTEXT ELEMENT, AM BILDSCHIRM BOX 211
11.3.2 DISPLAY AENDERT NUR DIE BOX, NICHT DAS ELEMENT 211
11.4 TABBED NAVIGATION - NAVIGATION MIT REGISTERN 212
11.4.1 SCHRITT 1: VORBEREITENDE MASSNAHMEN FUER DEN NAVIGATIONSBEREICH 212
11.4.2 SCHRITT 2: DIE HYPERLINKS IM NAVIGATIONSBEREICH ZU TABS MACHEN
213
11.4.3 SCHRITT 3: EINEN ROLLOVER-EFFEKT FUER DIE TABS DEFINIEREN 214
11.4.4 SCHRITT 4: SIE SIND HIER-AKTUELLE SEITE HERVORHEBEN 215
11.4.5 STANDARDKONFORM, BARRIEREFREI UND FLEXIBEL 218
11.4.6 OPTIONAL: ABGERUNDETE ECKEN MIT BORDER-RADIUS 219
11.5 KNOW-HOW-DAS BOX-MODELL FUER INLINER 220
11.5.1 ES GIBT VERSCHIEDENE ARTEN VON INLINE-ELEMENTEN 220
11.5.2 INLINE-BOXEN SIND ETWAS ANDERS ALS BLOCK-BOXEN 221
11.5.3 INLINE-BLOCKBOXEN SIND EIN MITTELDING 222
11.6 EXKURS: WHITESPACE - DER LEERSTELLENPAKT 223
11.6.1 EIN ZWISCHENRAUM, HINDURCHZUSCHAUN 223
11.6.2 WHITESPACE-LEERSTELLEN,TABULATOREN UND ZEILENUMBRUECHE 224
11.6.3 SO ENTSTEHT DER MYSTERIOESE ZWISCHENRAUM 224
11.6.4 SECHS MOEGLICHKEITEN ZUR ENTFERNUNG DER LUECKE 225
11.7 AUF EINEN BLICK 227
12 EIN KONTAKTFORMULAR ERSTELLEN UND GESTALTEN
229
12.1 SCHRITT 1: DAS HTML FUER DAS KONTAKTFORMULAR 229
12.1.1 DAS ELEMENT FORM DEFINIERT EIN FORMULAR 231
12.1.2 BESCHRIFTUNG DER FORMULARFELDER MIT LABEL 232
12.1.3 EIN GANZ NORMALES EINZEILIGES EINGABEFELD 232
12.1.4 EIN SPEZIELLES EINGABEFELD FUER E-MAIL-ADRESSEN 233
12.1.5 EIN MEHRZELLIGES EINGABEFELD MIT TEXTAREA 234
12.1.6 SUBMIT: EINE SCHALTFLAECHE ZUM ABSCHICKEN DER FORMULARDATEN 234
12.2 SCHRITT 2: DAS FORMULAR PER CSS GESTALTEN 235
12.2.1 EIN NEUES STYLESHEET FUER FORMULARE 235
12.2.2 DIE GESTALTUNG DES KONTAKTFORMULARS 236
12.2.3 KINDSELEKTOREN UND ATTRIBUTSELEKTOREN 239
13
INHALT
12.3 SCHRITT 3: DAS FORMULAR AKTIVIEREN UND TESTEN 240
12.3.1 DAS REISEZIEL FUER DIE FORMULARDATEN FESTLEGEN 240
12.3.2 DAS FERTIGE FORMULAR TESTEN 242
12.4 EXKURS: EIN MEHRSPALTIGES KONTAKTFORMULAR 242
12.5 AUF EINEN BLICK 244
13 WEBFONTS, FLIESSTEXT UND DRUCKVERSION 247
13.1 WEBFONTS-DIE SCHRIFTART GLEICH MITLIEFERN 247
13.1.1 KLASSISCHE SCHRIFTARTEN IM WEB 247
13.1.2 WEBFONTS IM UEBERBLICK 248
13.1.3 DIE GOOGLE FONTS - EINFACH UND KOSTENLOS 249
13.1.4 GOOGLE FONTS-SO GEHT'S 250
13.1.5 DEN FLIESSTEXT AUF DEN BEISPIELSEITEN GESTALTEN 251
13.2 FLIESSTEXT GESTALTEN 253
13.2.1 SCHRIFTGROESSE UND ZEILENABSTAND 253
13.2.2 ZITATE GESTALTEN 255
13.2.3 DEL UND INS FUER AENDERUNGEN AM TEXT 257
13.3 EINE DRUCKVERSION FUER DIE BEISPIELSEITEN 258
13.3.1 STYLESHEET NUR FUER DIE ANZEIGE AM BILDSCHIRM 259
13.3.2 EIN STYLESHEET NUR FUER DEN AUSDRUCK 259
13.3.3 GRUNDLEGENDE GESTALTUNG FUER DIE DRUCKVERSION 260
13.3.4 URL DER HYPERLINKS SICHTBAR MACHEN 262
13.4 FAVICON-DAS MINILOGO FUER IHRE SEITEN 264
13.5 AUF EINEN BLICK 265
14 HTML-TABELLEN ERSTELLEN UND GESTALTEN 267
14.1 DAS HTML FUER TABELLEN 267
14.1.1 EINE EINFACHE TABELLE BESTEHT AUS TABLE, TR UND TD 267
14.1.2 UEBERSCHRIFTEN IN TABELLEN STEHEN IN TH 269
14.1.3 LOGISCHE BEREICHE IN TABELLEN - THEAD, TBODY UND TFOOT 270
14.1.4 ZELLEN VERBINDEN - COLSPAN UND ROWSPAN 271
14
INHALT
14.2 TABELLEN GESTALTEN PER CSS - EIN BEISPIEL 272
14.2.1 DAS HTMLFUERDIE BEISPIELTABELLE 272
14.2.2 DIE GESTALTUNG DER BEISPIELTABELLE PER CSS 274
14.2.3 EINE TABELLE OHNE ZWISCHENRAEUME - BORDER-COLLAPSE: COLLAPSE 275
14.3 UEBERSICHTLICHE TABELLEN - HOEVER UND ZEBRASTREIFEN 276
14.3.1 EINE TABELLE MIT ZEBRASTREIFEN 276
14.3.2 TABELLENZEILEN MIT HOEVER-EFFEKT-TNHOVER 278
14.4 AUF EINEN BLICK 279
15 DER BROWSER UND DAS CSS: KASKADE, VERERBUNG
ODER STANDARDWERT 28I
15.1 UEBERBLICK: DOM-BAUM UND KASKADE 281
15.1.1 DER DOM-BAUM FUER DIE STARTSEITE 282
15.1.2 DREI KONZEPTE-KASKADE, VERERBUNG UND STANDARDWERT 282
15.1.3 DAS BEISPIEL: MARGIN-BOTTOM FUER UL.NAVMAIN 284
15.2 KASKADE-STUFE 1: SAMMLE ALLE RELEVANTEN DEKLARATIONEN 284
15.2.1 DAS BROWSER-STYLESHEET 285
15.2.2 DIE STYLESHEETS DES AUTORS - RESET.CSS 286
15.2.3 DIE STYLESHEETS DES AUTORS: NAVI-TABS.CSS 287
15.3 KASKADE - STUFE 2: SORTIERE NACH WICHTIGKEIT 287
15.3.1 NORMAL - DEKLARATIONEN OHNE LIMPORTANT 288
15.3.2 WICHTIG-DEKLARATIONEN MIT LIMPORTANT 288
15.3.3 DIE SORTIERUNG NACH WICHTIGKEIT IM UEBERBLICK 288
15.4 KASKADE - STUFE 3: SORTIERE NACH SPEZIFITAET 290
15.5 KASKADE - STUFE 4: SORTIERE NACH REIHENFOLGE 291
15.6 DIE VERERBUNG (INHERITANCE) 292
15.6.1 VERERBUNG MACHT EIN STYLESHEET UEBERSICHTLICHER 293
15.6.2 BESTIMMTE EIGENSCHAFTEN WERDEN NICHT VERERBT 293
15.6.3 POTENZIELLE PROBLEME BEI DER VERERBUNG RELATIVER WERTE 294
15.7 DER STANDARDWERT (INITIAL VALUE) 295
15.8 AUF EINEN BLICK 295
15
INHALT
TEIL IV CSS-POSITIONIERUNG - KAESTCHEN VERSCHIEBEN
16 KAESTCHEN VERSCHIEBEN MIT POSITION
29G
16.1 FLOW -DIE SEITE IST EIN LANGER, RUHIGER FLUSS 300
16.1.1 DREI BLOCK-BOXEN IM FLUSS 300
16.1.2 DREI VERKUERZTE BOXEN IM FLUSS 302
16.2 VERSETZT WEITERFLIESSEN - POSITION: RELATIVE 303
16.3 RAUS AUS DEM FLUSS - POSITION: ABSOLUTE 304
16.4 ABSOLUTE POSITIONIERUNG AUF DER BEISPIELSITE 306
16.4.1 ABSOLUTE POSITIONIERUNG RELATIV ZUM RAND DES BROWSERFENSTERS 306
16.4.2 ABSOLUTE POSITIONIERUNG MIT EINEM UMGEBENDEN,
RELATIV POSITIONIERTEN ELEMENT 308
16.4.3 KLEINE UEBUNG ZWISCHENDURCH: GRUNDLAGEN. EINE ZEILE
TIEFERSETZEN 310
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 KAESTCHEN VERSCHIEBEN MIT FLOAT UND DEAR
317
17.1 TEXT UM BILDER FLIESSEN LASSEN 317
17.1.1 DIE GRAFIK EINBINDEN 318
17.1.2 DIE GRAFIK FLOATEN MIT FLOAT:LEFT 319
17.1.3 EINEN ABSTAND ZWISCHEN GRAFIK UND TEXT DEFINIEREN 320
17.2 PRAKTISCH - CSS-KLASSEN ZUM FLOATEN 321
17.3 FLOATS BEENDEN MIT DEAR 323
17.4 FLOATS MIT MEHREREN BOXEN 326
17.4.1 DAS BEISPIEL: DREI BOXEN OHNE FLOAT 326
17.4.2 DREI KAESTCHEN NACH LINKS FLOATEN 327
17.4.3 DREI KAESTCHEN NACH RECHTS FLOATEN 328
17.4.4 FLOAT DROP-ZU WENIG PLATZ IM BROWSERFENSTER 329
17.4.5 FLOAT UND VERSCHIEDEN HOHE BOXEN 330
16
INHALT
17.5 ZUSAMMENFASSUNG: BESONDERHEITEN BEIM FLOATEN 331
17.6 AUF EINEN BLICK 332
18 CONTAINING FLOATS
- GEFLOATETE ELEMENTE
UMSCHLIESSEN
333
18.1 DIE BEISPIELSEITE ZUM UMSCHLIESSEN VON FLOATS 333
18.2 DAS PROBLEM: CEFLOATETE ELEMENTE RAGEN NACH UNTEN HERAUS 336
18.3 MEHRERE METHODEN ZUM UMSCHLIESSEN VON FLOATS 338
18.4 METHODE 1: ZUSAETZLICHES 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.9.1 DIE BEISPIELSEITE GALERIE.HTML 348
18.9.2 DAS CSS IN BILDSCHIRM.CSS IM UEBERBLICK 349
18.10 AUF EINEN BLICK 350
19 EINE FLOATBASIERTE HORIZONTALE NAVIGATION
353
19.1 VORBEREITUNGEN FUER 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: LINKZUSTAENDE GESTALTEN 358
19.5 KNOW-HOW: LINEARE FARBVERLAEUFE PER CSS3 360
19.5.1 DIE FARBEN DEFINIEREN: FARBWERT (COLOR) UND
VERLAUFSPUNKT (STOP) 361
19.5.2 DIE RICHTUNG DEFINIEREN: DEN VERLAUF DER FARBEN BESTIMMEN 361
19.6 AUF EINEN BLICK 363
17
INHALT
TEIL V MEHRSPALTIGE LAYOUTS MIT CSS
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 HINZUFUEGEN 370
20.4 SCHRITT 3: DEN SLOGAN NEU POSITIONIEREN 372
20.5 SCHRITT 4: EINE MEDIA QUERY FUER BREITE BROWSERFENSTER 373
20.5.1 EIN NEUES STYLESHEET FUER BREITERE BROWSERFENSTER 375
20.5.2 DAS LAYOUT DER BEISPIELSEITEN FUER BREITE BROWSERFENSTER 376
20.6 SCHRITT 5: DAS KONTAKTFORMULAR ANPASSEN 379
20.7 KNOW-HOW: BILDER FUER HOCHAUFLOESENDE BILDSCHIRME 381
20.7.1 DAS PROBLEM: HOCHAUFLOESENDE BILDSCHIRME BENOETIGEN MEHR PIXEL 381
20.7.2 GRAFIKEN NACH PIXELDICHTE SERVIEREN: IMG UND DAS
ATTRIBUT SRCSET X 382
20.7.3 DIE BEISPIELDATEIEN FUER HOCHAUFLOESENDE BILDSCHIRME OPTIMIEREN 383
20.8 AUF EINEN BLICK 385
21 ZWEISPALTIGES LAYOUT MIT FLOAT UND MARGIN 387
21.1 METHODEN ZUM LAYOUTEN PER CSS IM UEBERBLICK 387
21.1.1 DIE GEGENWART: DISPLAY, POSITION UND FLOAT 387
21.1.2 WEB DEVELOPER-LAYOUTMETHODEN AUF WEBSEITEN UNTERSUCHEN 388
21.1.3 DIE ZUKUNFT: LAYOUTMODULE VON CSS3 389
21.2 LAYOUT MIT FESTER BREITE PER FLOAT UND MARGIN 390
21.2.1 SCHRITT 1: EIN NEUES STYLESHEET ERSTELLEN UND EINBINDEN 391
21.2.2 SCHRITT 2: DEN NAVIGATIONSBEREICH NACH LINKS FLOATEN 392
21.2.3 SCHRITT 3: DEN TEXTBEREICH MIT EINEM AUSSENABSTAND VERSEHEN 394
21.2.4 SCHRITT 4: DIE NAVIGATIONSLISTE GESTALTEN 395
21.2.5 SCHRITT 5: DIE HYPERLINKS IN DER NAVIGATION GESTALTEN 396
21.2.6 SCHRITT 6: DEN AKTUELLEN NAVIGATIONSPUNKT HERVORHEBEN 397
21.2.7 SCHRITT 7: UEBERSCHRIFT AUSRICHTEN UND FUSSBEREICH CLEAREN 398
18
INHALT
21.3 FLEXIBLES LAYOUT MIT FESTER NAVIGATIONSSPALTE 400
21.B.1 FLUESSIG, ELASTISCH, FLEXIBEL, FRUSTRIERT 400
21.3.2 SO FUNKTIONIEREN FLEXIBLE LAYOUTS 400
21.3.3 DAS LAYOUT FLEXIBILISIEREN 401
21.4 FLEXIBLE LAYOUTS UND DAS BORDER-BOX-MODELL 403
21.4.1 DAS PROBLEM MIT DEM KLASSISCHEN BOX-MODELL VON CSS 403
21.4.2 DIE LOESUNG: DAS BORDER-BOX-MODELL MIT BOX-SIZING: BORDER-BOX
405
21.5 KNOW-HOW: DIE GLOBALE WIRKUNG VON CLEAR UND DER BFC 407
21.5.1 DIE GLOBALE WIRKUNG VON CLEAR IST MANCHMAL ERWUENSCHT 407
21.5.2 DIE GLOBALE WIRKUNG VON CLEAR AUF DER SEITE GALERIE.HTML 408
21.5.3 LOESUNGEN FUER DIE SEITE GALERIE.HTML 410
21.5.4 DER BLOCK FORMATTING CONTEXT (BFC) 410
21.6 AUF EINEN BLICK 412
22 MEHRSPALTIGE LAYOUTS MIT CONTENT FIRST
413
22.1 DIE HTML-ELEMENTE ASIDE UND SECTION 413
22.1.1 IDEAL FUER SIDEBARS: DAS HTML-ELEMENT ASIDE 414
22.1.2 INHALTE IN ABSCHNITTE UNTERTEILEN: DAS HTML-ELEMENT SECTION 414
22.2 ZWEISPALTIGE LAYOUTS: BEIDE BEREICHE MIT FLOAT 415
22.2.1 SCHRITT 1: ASIDE UND SECTION - INFOBEREICH IM HTML HINZUFUEGEN
415
22.2.2 SCHRITT 2: DIE CRUNDFORMATIERUNG IN BILDSCHIRM.CSS 417
22.2.3 SCHRITT 3: DESKTOP-VERSION MIT ZWEISPALTIGEM LAYOUT 418
22.2.4 OPTIONAL: SPALTEN UMDREHEN? INHALTSBEREICH NACH RECHTS FLOATEN
421
22.2.5 DAS FESTE, ZWEISPALTIGE FLOAT-LAYOUT FLEXIBILISIEREN 422
22.3 DREISPALTIGE LAYOUTS: FLOAT UND NEGATIVER MARGIN 423
22.3.1 DER AUSGANGSPUNKT: DIE STARTSEITE IM UEBERBLICK 423
22.3.2 SCHRITT 1: DEN INHALTSBEREICH FLOATEN UND NEGATIVEN
MARGIN ZUWEISEN 424
22.3.3 SCHRITT 2: INFO-UND NEWSBEREICH FLOATEN 426
22.4 BAEUMCHEN WECHSEL DICH FUER DIE LAYOUTBEREICHE 428
22.4.1 MOEGLICHKEIT 1: INFO-UND NEWSBEREICH TAUSCHEN DIE SEITEN 428
22.4.2 MOEGLICHKEIT 2: INHALTSBEREICH UND DOPPELTE SIDEBAR 429
22.5 AUF EINEN BLICK 431
19
INHALT
23 SUCHFUNKTION, DROPDOWN-MENUE UND
MOBILE NAVIGATION 433
23.1 EINE SUCHFUNKTION FUER IHRE SITE 433
23.1.1 SCHRITT 1: DAS HTML FUER DAS SUCHFORMULAR 434
23.1.2 SCHRITT 2: DAS SUCHFORMULAR PER CSS POSITIONIEREN 435
23.1.3 SCHRITT 3: DAS SUCHFORMULAR PER CSS GESTALTEN 437
23.1.4 OPTIONAL: EIN SERVERSEITIGES SUCHPROGRAMM EINBINDEN 439
23.2 DROPDOWN - HORIZONTALE NAVIGATION ZUM AUSKLAPPEN 440
23.2.1 DIE AUSGANGSPOSITION: DIE BEISPIELSEITEN MIT
ZWEI NAVIGATIONSEBENEN 440
23.2.2 SCHRITT 1: LISTENELEMENTE MIT CLEAR UNTEREINANDERSTELLEN 442
23.2.3 SCHRITT 2: DIE ZWEITE NAVIGATIONSEBENE VERSTECKEN 444
23.2.4 SCHRITT 3: DIE ZWEITE NAVIGATIONSEBENE WIEDER SICHTBAR MACHEN 445
23.2.5 SCHRITT 4: DIE LINKS IN DER ZWEITEN NAVIGATIONSEBENE GESTALTEN
446
23.2.6 AUF TOUCHSCREENS GIBT ES KEIN :HOVER 447
23.2.7 DROPDOWNS AUF TOUCHSCREENS MIT DOUBLE TAP TO CO 447
23.3 EINE MOBILE NAVIGATION NUR MIT CSS 449
23.3.1 SCHRITT 1: EINEN MENUE-LINK AUF DEN WEBSEITEN EINFUEGEN 449
23.3.2 SCHRITT 2: STYLESHEET ERSTELLEN MENUE-LINK GESTALTEN 451
23.3.3 SCHRITT 3: NAVIGATIONSBEREICH GESTALTEN 453
23.3.4 SCHRITT 4: DEN NAVIGATIONSBEREICH PER FLEXBOX VERSCHIEBEN 455
23.3.5 SCHRITT 5: DAS SUCHFORMULAR WIEDER EINBLENDEN 457
23.4 AUF EINEN BLICK 459
24 LAYOUTEN MIT DER FLEXBOX: DISPLAY:FLEX 46I
24.1 FLEXBOX: DAS CSS FLEXIBLE BOX LAYOUT MODULE 461
24.1.1 ENTSTEHUNG UND BROWSERKOMPATIBILITAET 462
24.1.2 FLEXBOX: NEUE MOEGLICHKEITEN OHNE ALTE PROBLEME 463
24.1.3 DIE FLEXBOX IST FUER EINDIMENSIONALE LAYOUTS GEDACHT 463
24.2 DER ERSTE SCHRITT: FLEXBOX DEFINIEREN MIT DISPLAY:FLEX 464
24.2.1 DIE FLEXBOX BASIERT AUF DEM ELTERN-KIND-PRINZIP 464
24.2.2 EINE FLEXBOX DEFINIEREN: DISPLAY:FLEX FUER DAS ELTERNELEMENT 465
20
INHALT
24.3 DIE AUSDEHNUNG DER FLEX-ITEMS BESTIMMEN MIT FLEX 467
24.3.1 ALLE FLEX-ITEMS SOLLEN GLEICH BREIT SEIN: FLEX: 1 467
24.3.2 VERHAELTNISMAESSIG EINFACH: FLEX-ITEMS MIT UNTERSCHIEDLICHER
BREITE 468
24.3.3 DIE REIHENFOLGE DER FLEX-ITEMS AENDERN MIT ORDER 469
24.4 FLEX IST KURZ FUER FLEX-GROW, FLEX-SHRINK UND FLEX-BASIS 470
24.4.1 DIE STANDARDWERTE FUER FLEX-GROW, FLEX-SHRINK UND FLEX-BASIS
470
24.4.2 DIE KURZSCHREIBWEISE FLEX IM DETAIL 471
24.4.3 KOMPLEX: SO BERECHNET DER BROWSER DIE GROESSE DER FLEX-ITEMS 472
24.5 DAS BOX-MODELL DER FLEXBOX: HAUPT- UND NEBENACHSEN 473
24.5.1 DAS FLEX-BOX-MODELL HAT EINE HAUPT-UND EINE NEBENACHSE 473
24.5.2 FLEX-DIRECTION AENDERT DIE FLUSSRICHTUNG: ROW WIRD ZU COLUMN
474
24.5.3 FLEX-WRAP ERMOEGLICHT EINE MEHRZELLIGE FLEXBOX 475
24.5.4 FLEX-FLOW IST DIE KURZSCHREIBWEISE FUER FLEX-DIRECTION
UND FLEX-WRAP 477
24.6 BEISPIEL: FLEXIBLES KONTAKTFORMULAR OHNE MEDIA QUERY 477
24.6.1 SCHRITT 1: FLEXBOX-CONTAINER DEFINIEREN 478
24.6.2 SCHRITT 2: DIE BESCHRIFTUNG - LABEL BEKOMMT EINE FESTE BREITE
479
24.6.3 SCHRITT 3: DIE EINGABEFELDER WERDEN FLEXIBEL 480
24.6.4 SCHRITT FUER SCHRITT: SO FUNKTIONIERT DAS FLEXIBLE FORMULAR 482
24.6.5 KLASSE. AB HEUTE DANN MIT FLEXBOX? - KOMMT DRAUF AN . 483
24.7 FLEXBOX: EIGENSCHAFTEN UND WERTE IN DER UEBERSICHT 484
24.7.1 EIGENSCHAFTEN UND WERTE FUER DIE FLEXIBILITAET 484
24.7.2 EIGENSCHAFTEN UND WERTE FUER AUSRICHTUNG UND VERTEILUNG 485
24.8 AUF EINEN BLICK 487
TEIL VI PATCHES, WERKZEUGE UND NUETZLICHE WEBSITES
25 PATCHWORK - FLICKEN IM CSS
491
25.1 IE UND CSS-ZWEI WELTEN BEGEGNEN SICH 491
25.1.1 EINE SUPERKURZE GESCHICHTE DES INTERNET EXPLORERS 492
25.1.2 CONDITIONAL COMMENTS-STYLES NURFUERDEN IE 492
25.2 DER INTERNET-EXPLORER-COUNTDOWN: 11,10,9 493
25.2.1 DIE BEISPIELSEITEN IM INTERNET EXPLORER 11 493
21
INHALT
25.2.2 DIE BEISPIELSEITEN IM INTERNET EXPLORER 10 494
25.2.B DIE BEISPIELSEITEN IM INTERNET EXPLORER 9 495
25.3 DIE BEISPIELSEITEN IM INTERNET EXPLORER 8 496
25.3.1 HTML5SHIV: NACHHILFE PER JAVASCRIPT FUER IE8 UND AELTER 497
25.3.2 DER IE8 KENNT KEINE MEDIA QUERIES 499
25.4 DIE BROWSERPRAEFIXE: -WEBKIT- UND CO 501
25.5 EIN FUNDAMENT FUER IHR CSS: NORMALIZE.CSS 502
25.6 AUF EINEN BLICK 503
26 WERKZEUGE UND NUETZLICHE WEBSITES
505
26.1 DIE BROWSER BESTIMMEN, WAS GEHT 505
26.1.1 DIE AKTUELLEN BROWSER IM UEBERBLICK 505
26.1.2 UNENTBEHRLICHER HELFER IM ALLTAG: CANIUSE.COM 507
26.2 BROWSERZUBEHOER-PRAKTISCHEADD-ONS 507
26.2.1 VIEW SOURCE CHART-QUELLTEXT ALS LAUTER LITTLE BOXES 507
26.2.2 WEB DEVELOPER -DAS SCHWEIZER OFFIZIERSMESSER (FIREFOX/CHROME) 508
26.2.3 COLORZILLA-DIE FARBENWAHL (FIREFOX UND CHROME) 509
26.3 EDITOREN FUER HTML UND CSS 509
26.4 EDITOREN ZUM BEARBEITEN VON GRAFIKEN 511
26.5 FTP-VEROEFFENTLICHEN VON WEBSEITEN 511
26.6 REFERENZEN UND WEBSITES ZU HTML UND CSS 512
26.6.1 NACHSCHLAGEWERKE ZU HTML 512
26.6.2 NACHSCHLAGEWERKE ZU CSS 513
26.6.3 IMMER EINEN BESUCH WERT: CSS-TRICKS.COM 514
INDEX 517
22
Inhalt
Inhalt
Vorwort. 23
TEIL I Die Einleitung
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.2.1 »Responsiv«: Der Benutzer bringt den Bildschirm mit. 30
1.2.2 »Barrierefrei«: Der Benutzer kann die Wünsche der Webdesigner
ignorieren. 31
1.2.3 Fazit: lm Web bestimmt der Benutzer, nicht der Autor . 31
1.3 Webseiten sehen bei jedem Benutzer anders aus. 32
1.3.1 Webseiten bestehen aus Quelltext. 32
1.3.2 Der Browser macht aus dem Quelltext eine sichtbare Webseite. 33
1.3.3 Die flexible Zeitung: Papierseiten sind starr, Webseiten flexibel . 34
1.3.4 Webseiten haben Schichten: HTML, CSS und JavaScript. 34
1.4 Übersicht: Eine kurze Geschichte des Weblayouts . 35
1.4.1 Fast kein Layout: Mosaic und Netscape Navigator. 35
1.4.2 Mitte der 1990er: Layouts mit HTML-Tabellen und font . 36
1.4.3 Das neue Jahrtausend: CSS-Layouts und responsives Webdesign. 37
1.4.4 Fazit: Die Browser bestimmen, was geht. 38
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.2.1 Die erste Webseite erstellen. 40
2.2.2 Die Kästchen der HTML-Elemente sichtbar machen. 41
5
Inhalt
2.3 CSS ist der Stylist, der die rechteckigen Kästchen gestaltet. 43
2.3.1 Das Styling für die Webseite-die erste CSS-Regel . 43
2.3.2 Ein Style für die »h1«-Überschrift. 44
2.4 Entwickler-Tools - HTML und CSS analysieren. 46
2.5 Auf einen Blick. 47
TEIL 11 HTAAL-Crashkurs - Kästchen erstellen
3 Das HTML-Grundgerüst 51
3.1 HTML - Hyperlinks erstellen und »Etiketten kleben«. 51
3.1.1 HT wie Hypertext-Text mit Hyperlinks. 52
3.1.2 M wie Markup - Etiketten kleben. 52
3.1.3 Lwie Language-Vokabeln und Grammatikregeln. 52
3.1.4 Missverständnisse zu HTML. 53
3.2 Das HTML-Grundgerüst ist das Skelett einer Webseite. 53
3.2.1 Eine gute Angewohnheit - I- Kommentare ~ . 53
3.2.2 Ein Grundgerüst für eine Webseite erstellen . 54
3.3 Die Dokumenttyp-Definition - !DOCTYPE html . 55
3.4 Das Stammelement htm! . 55
3.5 Informationen über die Webseite - head . 56
3.5.1 Die Angabe des Zeichensatzes “ metacharset="utf-8" . 56
3.5.2 Der Name der Seite — title . 57
3.5.3 Die Beschreibung für Suchmaschinen - meta name=''deschptionn . 58
3.5.4 Weitere »meta«-E!emente. 58
3.6 Der Inhalt der Webseite- body . 59
3.7 HTML-Elemente im Quelltext - Anfangs-Tag, Inhalt und Ende-Tag. 59
3.8 Auf einen Blick. 60
6
Inhalt
4 HTML-Elemente für Überschriften, Text und Listen 6i
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.2.1 Vier Bereiche: »header«, »nav«, »main« und »footer«. 63
4.2.2 DerSchutzumschiag- divid="wrapper" . 64
4.2.3 Die Layoutbereiche erstellen. 65
4.2.4 Visuell - schematische Darstellung der Bereiche. 65
4.3 Überschriften - »hl« bis »h6«. 66
4.3.1 Benutzen Sie Überschriften . 67
4.3.2 Überschriftenebene nicht aufgrund der Schriftgröße wählen . 67
4.4 Fließtext - Absätze und Hervorhebungen. 68
4.4.1 Absätze - »p« wie »paragraph«. 68
4.4.2 Text hervorheben - »strong« und »em«. 69
4.4.3 HTML-Elemente verschachteln - zuerst geöffnet,
zuletzt geschlossen. 70
4.5 Über Block-und Inline-Elemente. 70
4.5.1 Blockeiemente werden so breit, wie es geht. 70
4.5.2 Inline-Elemente werden nur so breit wie ihr Inhalt. 71
4.5.3 Die Konturen von HTML-Elementen sichtbar machen . 71
4.6 Listenkisten - Aufzählungen und Nummerierungen. 72
4.6.1 Aufzählungen - ungeordnete Listen mit »ul« und »li« . 72
4.6.2 Nummerierungen-geordnete Listen mit»ol« und »li«. 73
4.7 Verschachtelte Listen . 74
4.7.1 Eine verschachtelte Liste erstellen. 74
4.7.2 Schematische Darstellung der verschachtelten Liste. 75
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.1.1 Anatomie eines Hyperlinks. 80
7
Inhalt
5.1.2 Die Navigation - eine ungeordnete Liste mit Hyperlinks. Bl
5.13 Links auf andere Dateien - PDF, MP3 etc. 82
5.2 Die Wegbeschreibung zur Grafik - »img«. 83
5.2.1 Die Attribute zu »img« . 83
5.2.2 »img« -eine Grafik auf der ßeispielseite einfügen. 84
5.2.3 Ein Logo als Überschrift?. 85
53 Weitere HTML-Elemente zur Auszeichnung von Text. 86
53.1 Beginne eine neue Zeile mit »br« . 86
5.3.2 »address« für Kontaktadressen. 86
5.33 »span« ist ein semantisch neutrales inline-Element. 88
53.4 »blockquote« und »eite« für Zitate. 88
5.4 Know-how - Zeichensätze und Sonderzeichen . 89
5.4.1 UTF-8: Wissenswertes über Zeichensätze. 90
5.4.2 Character Entities-die Kodierung von Sonderzeichen. 91
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
63 Die Kontaktseite - von der Seite zur Site. 100
6.4 Auf einen Blick. 101
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
73 Das erste eigene Stylesheet. 107
73.1 Ein Stylesheet erstellen und einen CSS-Kommentar schreiben. 107
8
Inhalt
7.3.2 Die Verbindung zwischen HTML und CSS - »link«. 108
7.4 Farben für Hintergrund und Schrift definieren. 109
7.4.1 Hintergrund- und Schriftfarbe für »body«. 109
7.4.2 Hintergrund- und Schriftfarbe für »div#wrapper« . 110
7.4.3 Hintergrund- und Schriftfarben im Kopfbereich. 112
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.7.1 Hyperlinks - das HTML-Element »a« . 116
7.7.2 Besuchte und nicht besuchte Hyperlinks. 117
7.7.3 Wenn die Maus darüber schwebt - »a:hover« und Kollegen. 119
7.7.4 »outline« - die Umrisslinie um Elemente mit Fokus. 120
7.8 Styles können an drei verschiedenen Stellen definiert werden. 121
7.8.1 Möglichkeit 1: Extern-CSS-Regeln in einer eigenen CSS-Datei. 121
7.8.2 Möglichkeit 2: Zwischen head und /head im Element »style« . 122
7.8.3 Möglichkeit 3: Direkt im HTML-Element mit dem Attribut »style«. 122
7.8.4 Vorfahrt-welche Styles gewinnen?. 123
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.2.1 »Der Name der Kiste« - einfache Elementselektoren. 127
8.2.2 Mehrere Kästchen auf einmal - Selektoren gruppieren mit Komma. 127
8.2.3 Alle Kästchen auf der Seite - der Universaiselektor »*«. 128
8.3 Überblick: Die HTML-Elemente im DOM-Baum. 128
8.4 Selektoren kombinieren - Nachfahren auswählen. 130
8.4.1 Beispiel 1: Schriftgestaltung nur für den Slogan im Kopfbereich. 130
8.4.2 Beispiel 2: Aufzählungszeichen nur in ungeordneten Listen
gestalten. 131
8.4.3 Beispiel 3: Unterschiedlich nummerierte Ebenen bei
geordneten Listen. 132
9
Inhalt
8.5 Eigene Namen vergeben - »id« und »dass«. 132
8.5.1 Es kann nur einen geben - »id«, der Selektor mit der Raute. 133
8.5.2 Gruppenbildung-»dass«, der Selektor mit dem Punkt. 133
8.5.3 ID oder Klasse-wann nimmt man was?. 135
8.5.4 Sinnvolle Namen - »id« und »dass« sollten die Bedeutung des
Elements beschreiben. 136
8.6 Spezifität - das Punktesystem für Selektoren. 136
8.6.1 Einer wird gewinnen-sofunktioniert Spezifität. 136
8.6.2 Ein paar Beispiele für die Punktewertung. 137
8.6.3 Die Spezifität ist in Wirklichkeit eine Matrix. 138
8.6.4 Sparsam benutzen -»ümportant«. 138
8.7 Werte und Maße in CSS - die Qual der Wahl. 139
8.7.1 Grundregeln: Die Leerstelle, die Null und der Anführungsstrich. 139
8.7.2 Für den Bildschirm - relative Einheiten. 139
8.7.3 Für den Drucker-absolute Einheiten. 140
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.2.1 Alle Boxen sind gleich-das Modell. 146
9.2.2 Der Inhaltsbereich - »width« (Breite) und »height« (Höhe). 147
9.2.3 Der Innenabstand-»padding«. 148
9.2.4 Der Rahmen drumherum - »border« (Rahmenlinien). 149
9.2.5 Der Außenabstand - »margin« . 149
9.2.6 Wenig intuitiv-die Gesamtbreite einer Box berechnen . 150
9.2.7 Ein interaktives Box-Modell zum Ausprobieren . 151
9.3 Kalibrierung-Abstände per Reset vereinheitlichen. 152
9.3.1 Reset - Abstände annulieren und HTMLS-Elemente blocken. 152
9.3.2 Restaurierung - Abstände für die wichtigsten Elemente neu
definieren. 154
9.4 Webseite zentrieren mit »width« und »margin«. 155
9.4.1 Die Breite eines Elements - »width«. 155
10
Inhalt
9.4.2 Die Seite horizontal zentrieren mit »margin: auto«. 156
9.5 Rahmenlinien erstellen - »border«. 158
9.6 Ein bisschen Abstand drumherum - »padding« . 159
9.6.1 Der erste Versuch: Ein »padding« für den Wrapper. 159
9.6.2 Besser: Ein Padding für jeden Layoutbereich. 160
9.7 Das Box-Modell und die farbliche Gestaltung. 162
9.7.1 Das Logo mitgestalten - »padding« und »border« in Aktion. 162
9.7.2 Das Box-Modell für das Logo im Entwickler-Tool des Firefox. 163
9.8 Hintergrundgrafiken per CSS. 164
9.8.1 Hintergrundgrafik einbinden - »background-image«. 164
9.8.2 Hintergrundgrafiken wiederholen - »background-repeat«. 167
9.8.3 Hintergrundgrafik positionieren - »background-position«. 167
9.8.4 Hintergrundgrafik fixieren - »background-attachment«. 168
9.8.5 Die Kurzschreibweise - »background«. 169
9.8.6 Das Box-Modell ist ein bisschen 3D. 170
9.9 Vertikale Abstände kollabieren - »collapsing margins«. 170
9.9.1 Kollabierende Außenabstände bei aufeinanderfolgenden
Elementen. 171
9.9.2 Das Beispiel - ein Kopfbereich mit Überschrift und Absatz. 171
9.9.3 Collapsing margins, Teil 1: Die Überschrift im Kopfbereich . 172
9.9.4 Collapsing margins, Teil 2: Der Absatz im Kopfbereich. 174
9.10 Auf einen Blick. 175
10 Ordnung halten und aufräumen m
10.1 Der Kommentar am Anfang. 177
10.2 Das Stylesheet in Abschnitte unterteilen. 178
10.2.1 Teil 1: Allgemeine Styles. 179
10.2.2 Teil 2: Styles für die Layoutbereiche. 180
10.2.3 Teil 3: Sonstige Styles. 180
10.3 Verschiedene Schreibweisen für Styles. 180
10.3.1 Eine typische CSS-Regei: Eine Deklaration pro Zeile. 180
10.3.2 Kurze Styles: Alles in einer Zeile. 181
10.3.3 Kombinierte und gruppierte Selektoren. 181
11
Inhalt
10.4 Die Reihenfolge der Deklarationen im Style. 182
10.4.1 Möglichkeit 1: Die Reihenfolge orientiert sich am Aufbau der Boxen. 182
10.4.2 Möglichkeit 2: Alphabetisch sortierte Deklarationen. 183
10.5 Effektiv-Kurzschreibweisen für »padding« und »margin«. 183
10.5.1 Alle vier Seiten haben den gleichen Wert. 183
10.5.2 Die Reihenfolge entscheidet - nur eine Seite hat einen anderen Wert. 184
10.5.3 Unterschiedliche Werte für alle vier Seiten. 185
10.5.4 Paarweise - »oben = unten« und »links = rechts«. 185
10.6 Mehrere Stylesheets erstellen und zentral einbinden. 186
10.6.1 Teile und herrsche-Aufteilung der Styles. 186
10.6.2 Eines, sie zu binden - das zentrale Stylesheet »zentrale.css«. 187
10.6.3 Einen Link zum zentralen Stylesheet erstellen. 188
10.6.4 »@media« - Definition der Ausgabemedien . 188
10.7 Styles aufräumen: Die einzelnen Stylesheets. 189
10.7.1 Das zentrale Stylesheet »zentrale.css« im Überblick. 189
10.7.2 Reset und Restaurierung der Abstände-»reset.css«. 190
10.7.3 Die Gestaltung für den Bildschirm - »bildschirm.css«. 192
10.8 Dateien in Unterordnern organisieren. 194
10.8.1 Ordner erstellen und Dateien verschieben. 195
10.8.2 Die Pfadangabe zum Stylesheet ändern . 197
10.8.3 Pfadangaben zu den Grafiken ändern . 197
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.1.1 Die Listenelemente in der Navigation selektieren. 203
11.1.2 Das Stylesheet »navi-inline.css« erstellen . 205
11.1.3 »Debuggen« - Fehler finden mit den Entwickler-Tools im Browser. 207
11.1.4 Feineinstellungen-Abstände und Hyperlinks anpassen . 208
11.2 Punktsieg - Spezifität in der Praxis. 209
11.2.1 »margin-bottom« für »ul«. 209
11.2.2 Die Farbe der Hyperlinks. 210
11.2.3 Feineinstellungen für die Hyperlinks in der Navigation. 210
12
Inhalt
11.3 Von Elementen und Boxen. 210
11.3.1 Im Quelltext »Element«, am Bildschirm »Box«. 211
11.3.2 »display« ändert nur die Box, nicht das Element. 211
11.4 Tabbed Navigation - Navigation mit Registern. 212
11.4.1 Schritt 1: Vorbereitende Maßnahmen für den Navigationsbereich . 212
11.4.2 Schritt 2: Die Hyperlinks im Navigationsbereich zu Tabs machen . 213
11.4.3 Schritt 3: Einen Rollover-Effekt für die Tabs definieren. 214
11.4.4 Schritt4: »Sie sind hier«-aktuelle Seite hervorheben . 215
11.4.5 Standardkonform, barrierefrei und flexibel. 218
11.4.6 Optional: Abgerundete Ecken mit »border-radius«. 219
11.5 Know-how - das Box-Modell für Inliner. 220
11.5.1 Es gibt verschiedene Arten von inline-Eiementen. 220
11.5.2 Inlme-Boxen sind etwas anders als Block-Boxen. 221
11.5.3 Inline-Blockboxen sind ein Mittelding. 222
11.6 Exkurs: Whitespace - der Leerstellenpakt. 223
11.6.1 Ein Zwischenraum, hindurchzuschaun. 223
11.6.2 Whitespace-Leerstellen,Tabulatoren und Zeilenumbrüche. 224
11.6.3 So entsteht der mysteriöse Zwischenraum. 224
11.6.4 Sechs Möglichkeiten zur Entfernung der Lücke. 225
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.1.1 Das Element »form« definiert ein Formular. 231
12.1.2 Beschriftung der Formularfelder mit »label«. 232
12.1.3 Ein ganz normales einzeiliges Eingabefeld. 232
12.1.4 Ein spezielles Eingabefeld für E-Mail-Adressen. 233
12.1.5 Ein mehrzeiliges Eingabefeld mit »textarea« . 234
12.1.6 Submit: Eine Schaltfläche zum Abschicken der Formulardaten. 234
12.2 Schritt 2: Das Formular per CSS gestalten. 235
12.2.1 Ein neues Stylesheet für Formulare. 235
12.2.2 Die Gestaltung des Kontaktformulars. 236
12.2.3 Kindselektoren und Attributselektoren . 239
13
Inhalt
12.3 Schritt 3: Das Formular aktivieren und testen. 240
12.3.1 Das Reiseziel für die Formulardaten festlegen. 240
12.3.2 Das fertige Formular testen. 242
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.1.1 Klassische Schriftarten im Web. 247
13.1.2 Webfonts im Überblick. 248
13.1.3 Die Google Fonts - einfach und kostenlos . 249
13.1.4 Google Fonts - so geht's. 250
13.1.5 Den Fließtext auf den Beispielseiten gestalten. 251
13.2 Fließtext gestalten. 253
13.2.1 Schriftgröße und Zeilenabstand . 253
13.2.2 Zitate gestalten. 255
13.2.3 »de!« und »ins« für Änderungen am Text. 257
13.3 Eine Druckversion für die Beispielseiten. 258
13.3.1 Stylesheet nur für die Anzeige am Bildschirm. 259
13.3.2 Ein Stylesheet nur für den Ausdruck. 259
13.3.3 Grundlegende Gestaltung für die Druckversion. 260
13.3.4 URL der Hyperlinks sichtbar machen. 262
13.4 Favicon - das AAinilogo 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.1.1 Eine einfache Tabelle besteht aus »table«, »tr« und »td«. 267
14.1.2 Überschriften in Tabellen stehen in »th«. 269
14.1.3 Logische Bereiche in Tabellen - »thead«, »tbody« und »tfoot«. 270
14.1.4 Zellen verbinden - »colspan« und »rowspan«. 271
14
Inhalt
14.2 Tabellen gestalten per CSS - ein Beispiel. 272
14.2.1 Das HTMLfür die Beispieltabelle. 272
14.2.2 Die Gestaltung der Beispieltabelle per CSS. 274
14.23 Eine Tabelle ohne Zwischenräume - »border-collapse: collapse«. 275
143 Übersichtliche Tabellen - Hover und Zebrastreifen. 276
14.3.1 Eine Tabelle mit Zebrastreifen. 276
14.3.2 Tabelienzeilen mit Hover-Effekt-»tr.hover«. 278
14.4 Auf einen Blick. 279
15 Der Browser und das CSS: Kaskade, Vererbung
oder Standardwert 28i
15.1 Überblick: DOAA-Baum und Kaskade. 281
15.1.1 Der DOM-Baum für die Startseite. 282
15.1.2 Drei Konzepte - Kaskade, Vererbung und Standardwert. 282
15.1.3 Das Beispiel: »margin-bottom« für »ul.navmain« . 284
15.2 Kaskade - Stufe 1: Sammle alle relevanten Deklarationen . 284
15.2.1 Das Browser-Stylesheet. 285
15.2.2 Die Stylesheets des Autors - »reset.css« . 286
15.23 Die Stylesheets des Autors: »navi-tabs.css«. 287
15.3 Kaskade - Stufe 2: Sortiere nach Wichtigkeit. 287
153.1 Normal - Deklarationen ohne »(important« . 288
153.2 Wichtig - Deklarationen mit »limportant«. 288
1533 Die Sortierung nach Wichtigkeit im Überblick. 288
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.6.1 Vererbung macht ein Stylesheet übersichtlicher. 293
15.6.2 Bestimmte Eigenschaften werden nicht vererbt. 293
15.63 Potenzielle Probleme bei der Vererbung relativer Werte. 294
15.7 Der Standardwert (initial value). 295
15.8 Auf einen Blick. 295
15
Inhalt
TEIL IV CSS-Positionierung - Kästchen verschieben
16 Kästchen verschieben mit »position« 299
16.1 »Flow« - die Seite ist ein langer, ruhiger Fluss. 300
16.1.1 Drei Block-Boxen im Fluss . 300
16.1.2 Drei verkürzte Boxen im Fluss. 302
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.4.1 Absolute Positionierung relativ zum Rand des Browserfensters. 306
16.4.2 Absolute Positionierung mit einem umgebenden,
relativ positionierten Element. 30B
16.4.3 Kleine Übung zwischendurch: »Grundlagen.« eine Zeile
tiefersetzen . 310
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.1.1 Die Grafik einbinden . 318
17.1.2 Die Grafik floaten mit »floatrieft«. 319
17.1.3 Einen Abstand zwischen Grafik und Text definieren. 320
17.2 Praktisch - CSS-Klassen zum Floaten. 321
17.3 Floats beenden mit »clear«. 323
17.4 Floats mit mehreren Boxen. 326
17.4.1 Das Beispiel: Drei Boxen ohne »float« . 326
17.4.2 Drei Kästchen nach links floaten . 327
17.4.3 Drei Kästchen nach rechts floaten. 328
17.4.4 »float drop« - zu wenig Platz im Browserfenster. 329
17.4.5 »float« und verschieden hohe Boxen. 330
16
Inhait
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.9.1 Die Beispielseite »galerie.html«. 348
18.9.2 Das CSS in »bildschirm.css« im Überblick. 349
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.5.1 Die Farben definieren: Farbwert (»color«) und
Verlaufspunkt (»stop«). 361
19.5.2 Die Richtung definieren: Den Verlauf der Farben bestimmen. 361
19.6 Auf einen Blick. 363
17
nhalt
TEIL V Mehrspaltige Layouts mit CSS
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.5.1 Ein neues Stylesheet für breitere Browserfenster. 375
20.5.2 Das Layout der Beispielseiten für breite Browserfenster. 376
20.6 Schritt 5: Das Kontaktformular anpassen. 379
20.7 Know-how: Bilder für hochauflösende Bildschirme . 381
20.7.1 Das Problem: Hochauflösende Bildschirme benötigen mehr Pixel. 381
20.7.2 Grafiken nach Pixeldichte servieren: img und das
Attribut »srcset x«. 382
20.7.3 Die Beispieldateien für hochauflösende Bildschirme optimieren. 383
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.1.1 Die Gegenwart: »display«, »position« und »float«. 387
21.1.2 Web Developer-Layoutmethoden auf Webseiten untersuchen. 388
21.1.3 Die Zukunft: Layoutmodule von CSS3. 389
21.2 Layout mit fester Breite per »float« und »margin« . 390
21.2.1 Schritt 1: Ein neues Stylesheet erstellen und einbinden . 391
21.2.2 Schritt 2: Den Navigationsbereich nach links floaten. 392
21.2.3 Schritt 3: Den Textbereich mit einem Außenabstand versehen. 394
21.2.4 Schritt 4: Die Navigationsliste gestalten. 395
21.2.5 Schritt 5: Die Hyperlinks in der Navigation gestalten. 396
21.2.6 Schritt 6: Den aktuellen Navigationspunkt hervorheben . 397
21.2.7 Schritt 7: Überschrift ausrichten und Fußbereich clearen. 398
18
Inhalt
21.3 Flexibles Layout mit fester Navigationsspalte. 400
21.3.1 Flüssig, elastisch, flexibel, frustriert. 400
21.3.2 So funktionieren flexible Layouts. 400
21.3.3 Das Layout flexibilisieren. 401
21.4 Flexible Layouts und das Border-Box-l\Aodell. 403
21.4.1 Das Problem mit dem klassischen Box-Modell von CSS. 403
21.4.2 Die Lösung: Das Border-Box-Modeil mit »box-sizing: border-box«. 405
21.5 Know-how: Die globale Wirkung von »clear« und der BFC. 407
21.5.1 Die globale Wirkung von »clear« ist manchmal erwünscht. 407
21.5.2 Die globale Wirkung von »clear« auf der Seite »galerie.html«. 408
21.5.3 Lösungen für die Seite »gaierie.htm!«. 410
21.5.4 Der Block Formatting Context (BFC) . 410
21.6 Auf einen Blick. 412
22 Mehrspaltige Layouts mit »Content First« 413
22.1 Die HTAAL-Elemente »aside« und »section«. 413
22.1.1 Ideal für Sidebars: das HTML-Element »aside«. 414
22.1.2 Inhalte in Abschnitte unterteilen: das HTML-Element »section«. 414
22.2 Zweispaltige Layouts: beide Bereiche mit »float«. 415
22.2.1 Schritt 1: »aside« und »section« - Infobereich im HTML hinzufügen. 415
22.2.2 Schritt 2: Die Crundformatierung in »bildschirm.css«. 417
22.2.3 Schritt 3: Desktop-Version mit zweispaltigem Layout. 418
22.2.4 Optional: Spalten umdrehen? Inhaltsbereich nach rechts floaten. 421
22.2.5 Das feste, zweispaltige Float-Layout flexibilisieren. 422
22.3 Dreispaltige Layouts: »float« und negativer Margin. 423
22.3.1 Der Ausgangspunkt: die Startseite im Überblick. 423
22.3.2 Schritt 1: Den Inhaltsbereich floaten und negativen
Margin zuweisen . 424
22.3.3 Schritt 2: Info- und Newsbereich floaten . 426
22.4 »Bäumchen Wechsel dich« für die Layoutbereiche. 428
22.4.1 Möglichkeit 1: Info-und Newsbereich tauschen die Seiten. 428
22.4.2 Möglichkeit 2: Inhaltsbereich und doppelte Sidebar. 429
22.5 Auf einen Blick. 431
19
Inhalt
23 Suchfunktion, Dropdown-Menü und
mobile Navigation 433
23.1 Eine Suchfunktion für Ihre Site. 433
23.1.1 Schritt 1: Das HTMLfür das Suchformular. 434
23.1.2 Schritt 2: Das Suchformular per CSS positionieren. 435
23.1.3 Schritt 3: Das Suchformular per CSS gestalten . 437
23.1.4 Optional: Ein serverseitiges Suchprogramm einbinden . 439
23.2 Dropdown - horizontale Navigation zum Ausklappen. 440
23.2.1 Die Ausgangsposition: Die Beispielseiten mit
zwei Navigationsebenen . 440
23.2.2 Schritt 1: Listenelemente mit »clear« untereinanderstellen. 442
23.2.3 Schritt 2: Die zweite Navigationsebene verstecken . 444
23.2.4 Schritt 3: Die zweite Navigationsebene wieder sichtbar machen. 445
23.2.5 Schritt 4: Die Links in der zweiten Navigationsebene gestalten. 446
23.2.6 Auf Touchscreens gibt es kein »:hover«. 447
23.2.7 Dropdowns auf Touchscreens mit »Double Tap To Go«. 447
23.3 Eine mobile Navigation nur mit CSS. 449
23.3.1 Schritt 1: Einen Menü-Link auf den Webseiten einfügen. 449
23.3.2 Schritt 2: Stylesheet erstellen Menü-Link gestalten. 451
23.3.3 Schritt 3: Navigationsbereich gestalten . 453
23.3.4 Schritt 4: Den Navigationsbereich per Flexbox verschieben. 455
23.3.5 Schritt 5: Das Suchformular wieder einblenden. 457
23.4 Auf einen Blick. 459
24 Layouten mit der Flexbox: »displayrflex« 46i
24.1 Flexbox: Das »CSS Flexible Box Layout AAodule«. 461
24.1.1 Entstehung und Browserkompatibilität. 462
24.1.2 Flexbox: Neue Möglichkeiten ohne alte Probleme. 463
24.1.3 Die Flexbox ist für eindimensionale Layouts gedacht. 463
24.2 Der erste Schritt: Flexbox definieren mit »display:flex«. 464
24.2.1 Die Flexbox basiert auf dem »Eltern-Kind-Prinzip«. 464
24.2.2 Eine Flexbox definieren: »displayTIex« für das Elternelement. 465
20
Inhalt
24.3 Die Ausdehnung der Flex-ltems bestimmen mit »flex«. 467
24.3.1 Alle Flex-ltems sollen gleich breit sein: »flex: 1«. 467
24.3.2 »Verhältnismäßig« einfach: Flex-ltems mit unterschiedlicher Breite. 468
24.3.3 Die Reihenfolge der Flex-ltems ändern mit »order«. 469
24.4 »flex« ist kurz für »flex-grow«, »flex-shrink« und »flex-basis«. 470
24.4.1 Die Standardwerte für »flex-grow«, »flex-shrink« und »flex-basis« . 470
24.4.2 Die Kurzschreibweise »flex« im Detail. 471
24.4.3 Komplex: So berechnet der Browser die Größe der Flex-ltems . 472
24.5 Das Box-Modell der Flexbox: Haupt- und Nebenachsen. 473
24.5.1 Das Flex-Box-Modell hat eine Haupt- und eine Nebenachse. 473
24.5.2 »flex-direction« ändert die Flussrichtung: »row« wird zu »column« . 474
24.5.3 »flex-wrap« ermöglicht eine mehrzeilige Flexbox. 475
24.5.4 »flex-fiow« ist die Kurzschreibweise für »flex-direction«
und »flex-wrap«. 477
24.6 Beispiel: Flexibles Kontaktformuiar ohne Media Query. 477
24.6.1 Schritt 1: Flexbox-Container definieren . 478
24.6.2 Schritt 2: Die Beschriftung - »label« bekommt eine feste Breite. 479
24.6.3 Schritt 3: Die Eingabefelder werden flexibel. 480
24.6.4 Schritt für Schritt: So funktioniert das flexible Formular. 482
24.6.5 »Klasse. Ab heute dann mit Flexbox?« - »Kommt drauf an .«. 483
24.7 Flexbox: Eigenschaften und Werte in der Übersicht. 484
24.7.1 Eigenschaften und Werte für die Flexibilität. 484
24.7.2 Eigenschaften und Werte für Ausrichtung und Verteilung. 485
24.8 Auf einen Blick. 487
TEIL VI Patches, Werkzeuge und nützliche Websites
25 Patchwork - Flicken im CSS 491
25.1 IE und CSS - zwei Welten begegnen sich . 491
25.1.1 Eine superkurze Geschichte des Internet Explorers. 492
25.1.2 »Conditional Comments« - Styles nur für den IE. 492
25.2 Der Intemet-Explorer-Countdown: 11,10, 9. 493
25.2.1 Die Beispielseiten im Internet Explorer 11 . 493
21
Inhalt
25.2.2 Die Beispielseiten im Internet Explorer 10. 494
25.2.3 Die Beispielseiten im Internet Explorer 9. 495
25.3 Die Beispielseiten im Internet Explorer 8. 496
25.3.1 »HTML5Shiv«: Nachhilfe per JavaScript für IE8 und älter. 497
25.3.2 Der IE8 kennt keine Media Queries. 499
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.1.1 Die aktuellen Browser im Überblick. 505
26.1.2 Unentbehrlicher Helfer im Alltag: »caniuse.com«. 507
26.2 Browserzubehör - praktische Add-ons. 507
26.2.1 View Source Chart-Quelltext als »lauter little boxes«. 507
26.2.2 Web Developer-das Schweizer Offiziersmesser (Firefox/Chrome). 508
26.2.3 ColorZilla - die Farbenwahl (Firefox und Chrome). 509
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
26.6.1 Nachschlagewerke zu HTML. 512
26.6.2 Nachschlagewerke zu CSS. 513
26.6.3 Immer einen Besuch wert: »css-tricks.com«. 514
Index. 517
22 |
| any_adam_object | 1 |
| author | Müller, Peter 1960- |
| author_GND | (DE-588)1013505735 |
| author_facet | Müller, Peter 1960- |
| author_role | aut |
| author_sort | Müller, Peter 1960- |
| author_variant | p m pm |
| building | Verbundindex |
| bvnumber | BV042771376 |
| classification_rvk | ST 230 ST 250 ST 252 ST 253 |
| ctrlnum | (OCoLC)913608218 (DE-599)BVBBV042771376 |
| dewey-full | 006.74 |
| dewey-hundreds | 000 - Computer science, information, general works |
| dewey-ones | 006 - Special computer methods |
| dewey-raw | 006.74 |
| dewey-search | 006.74 |
| dewey-sort | 16.74 |
| dewey-tens | 000 - Computer science, information, general works |
| discipline | Informatik |
| edition | 2., aktualisierte und erw. Aufl. |
| format | Book |
| fullrecord | <?xml version="1.0" encoding="UTF-8"?><collection xmlns="http://www.loc.gov/MARC21/slim"><record><leader>00000nam a2200000 c 4500</leader><controlfield tag="001">BV042771376</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20200114</controlfield><controlfield tag="007">t</controlfield><controlfield tag="008">150821s2016 gw ad|| |||| 00||| ger d</controlfield><datafield tag="015" ind1=" " ind2=" "><subfield code="a">15,N28</subfield><subfield code="2">dnb</subfield></datafield><datafield tag="015" ind1=" " ind2=" "><subfield code="a">15,A47</subfield><subfield code="2">dnb</subfield></datafield><datafield tag="016" ind1="7" ind2=" "><subfield code="a">1073276686</subfield><subfield code="2">DE-101</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">3836236834</subfield><subfield code="9">3-8362-3683-4</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">9783836236836</subfield><subfield code="c">kart. : EUR 29.90 (DE), EUR 30.80 (AT), sfr 38.90 (freier Pr.)</subfield><subfield code="9">978-3-8362-3683-6</subfield></datafield><datafield tag="024" ind1="3" ind2=" "><subfield code="a">9783836236836</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(OCoLC)913608218</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)BVBBV042771376</subfield></datafield><datafield tag="040" ind1=" " ind2=" "><subfield code="a">DE-604</subfield><subfield code="b">ger</subfield><subfield code="e">rakddb</subfield></datafield><datafield tag="041" ind1="0" ind2=" "><subfield code="a">ger</subfield></datafield><datafield tag="044" ind1=" " ind2=" "><subfield code="a">gw</subfield><subfield code="c">XA-DE-NW</subfield></datafield><datafield tag="049" ind1=" " ind2=" "><subfield code="a">DE-824</subfield><subfield code="a">DE-523</subfield><subfield code="a">DE-355</subfield><subfield code="a">DE-1050</subfield><subfield code="a">DE-860</subfield><subfield code="a">DE-11</subfield><subfield code="a">DE-859</subfield><subfield code="a">DE-863</subfield><subfield code="a">DE-573</subfield><subfield code="a">DE-92</subfield><subfield code="a">DE-1102</subfield><subfield code="a">DE-858</subfield><subfield code="a">DE-29T</subfield><subfield code="a">DE-B768</subfield><subfield code="a">DE-473</subfield><subfield code="a">DE-739</subfield><subfield code="a">DE-703</subfield><subfield code="a">DE-898</subfield></datafield><datafield tag="082" ind1="0" ind2=" "><subfield code="a">006.74</subfield><subfield code="2">22/ger</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 230</subfield><subfield code="0">(DE-625)143617:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 250</subfield><subfield code="0">(DE-625)143626:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 252</subfield><subfield code="0">(DE-625)143627:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 253</subfield><subfield code="0">(DE-625)143628:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">004</subfield><subfield code="2">sdnb</subfield></datafield><datafield tag="100" ind1="1" ind2=" "><subfield code="a">Müller, Peter</subfield><subfield code="d">1960-</subfield><subfield code="e">Verfasser</subfield><subfield code="0">(DE-588)1013505735</subfield><subfield code="4">aut</subfield></datafield><datafield tag="245" ind1="1" ind2="0"><subfield code="a">Einstieg in CSS</subfield><subfield code="b">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: Navigation, Media Queries, Float-Layouts und Flexbox ; inkl. Einführung in Flexbox]</subfield><subfield code="c">Peter Müller</subfield></datafield><datafield tag="246" ind1="1" ind2="0"><subfield code="a">HTML 5 CSS 3 fünf drei</subfield></datafield><datafield tag="250" ind1=" " ind2=" "><subfield code="a">2., aktualisierte und erw. Aufl.</subfield></datafield><datafield tag="264" ind1=" " ind2="1"><subfield code="a">Bonn</subfield><subfield code="b">Rheinwerk-Verl.</subfield><subfield code="c">2016</subfield></datafield><datafield tag="300" ind1=" " ind2=" "><subfield code="a">524 S.</subfield><subfield code="b">Ill., graph. Darst.</subfield></datafield><datafield tag="336" ind1=" " ind2=" "><subfield code="b">txt</subfield><subfield code="2">rdacontent</subfield></datafield><datafield tag="337" ind1=" " ind2=" "><subfield code="b">n</subfield><subfield code="2">rdamedia</subfield></datafield><datafield tag="338" ind1=" " ind2=" "><subfield code="b">nc</subfield><subfield code="2">rdacarrier</subfield></datafield><datafield tag="490" ind1="0" ind2=" "><subfield code="a">Rheinwerk Computing</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Cascading Style Sheets 3.0</subfield><subfield code="0">(DE-588)7750895-6</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Webdesign</subfield><subfield code="0">(DE-588)1041632088</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">HTML 5.0</subfield><subfield code="0">(DE-588)7704810-6</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="689" ind1="0" ind2="0"><subfield code="a">Webdesign</subfield><subfield code="0">(DE-588)1041632088</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2="1"><subfield code="a">HTML 5.0</subfield><subfield code="0">(DE-588)7704810-6</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2="2"><subfield code="a">Cascading Style Sheets 3.0</subfield><subfield code="0">(DE-588)7750895-6</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2=" "><subfield code="5">DE-604</subfield></datafield><datafield tag="710" ind1="2" ind2=" "><subfield code="a">Rheinwerk Verlag</subfield><subfield code="0">(DE-588)1081738405</subfield><subfield code="4">pbl</subfield></datafield><datafield tag="776" ind1="0" ind2="8"><subfield code="i">Erscheint auch als</subfield><subfield code="n">Online-Ausgabe</subfield><subfield code="z">978-3-8362-3684-3</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">X:MVB</subfield><subfield code="q">text/html</subfield><subfield code="u">http://deposit.dnb.de/cgi-bin/dokserv?id=5299592&prov=M&dok_var=1&dok_ext=htm</subfield><subfield code="3">Inhaltstext</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="q">text/html</subfield><subfield code="u">https://www.rheinwerk-verlag.de/einstieg-in-css_3806/</subfield><subfield code="3">Ausführliche Beschreibung</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="q">text/html</subfield><subfield code="u">https://www.rheinwerk-verlag.de/einstieg-in-css_3806/autor/</subfield><subfield code="3">Autorenbiografie</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">DNB Datenaustausch</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=028201672&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">Digitalisierung UB Passau - ADAM Catalogue Enrichment</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=028201672&sequence=000004&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="943" ind1="1" ind2=" "><subfield code="a">oai:aleph.bib-bvb.de:BVB01-028201672</subfield></datafield></record></collection> |
| id | DE-604.BV042771376 |
| illustrated | Illustrated |
| indexdate | 2025-02-20T06:45:03Z |
| institution | BVB |
| institution_GND | (DE-588)1081738405 |
| isbn | 3836236834 9783836236836 |
| language | German |
| oai_aleph_id | oai:aleph.bib-bvb.de:BVB01-028201672 |
| oclc_num | 913608218 |
| open_access_boolean | |
| owner | DE-824 DE-523 DE-355 DE-BY-UBR DE-1050 DE-860 DE-11 DE-859 DE-863 DE-BY-FWS DE-573 DE-92 DE-1102 DE-858 DE-29T DE-B768 DE-473 DE-BY-UBG DE-739 DE-703 DE-898 DE-BY-UBR |
| owner_facet | DE-824 DE-523 DE-355 DE-BY-UBR DE-1050 DE-860 DE-11 DE-859 DE-863 DE-BY-FWS DE-573 DE-92 DE-1102 DE-858 DE-29T DE-B768 DE-473 DE-BY-UBG DE-739 DE-703 DE-898 DE-BY-UBR |
| physical | 524 S. Ill., graph. Darst. |
| publishDate | 2016 |
| publishDateSearch | 2016 |
| publishDateSort | 2016 |
| publisher | Rheinwerk-Verl. |
| record_format | marc |
| series2 | Rheinwerk Computing |
| spellingShingle | Müller, Peter 1960- 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: Navigation, Media Queries, Float-Layouts und Flexbox ; inkl. Einführung in Flexbox] Cascading Style Sheets 3.0 (DE-588)7750895-6 gnd Webdesign (DE-588)1041632088 gnd HTML 5.0 (DE-588)7704810-6 gnd |
| subject_GND | (DE-588)7750895-6 (DE-588)1041632088 (DE-588)7704810-6 |
| title | 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: Navigation, Media Queries, Float-Layouts und Flexbox ; inkl. Einführung in Flexbox] |
| title_alt | HTML 5 CSS 3 fünf drei |
| title_auth | 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: Navigation, Media Queries, Float-Layouts und Flexbox ; inkl. Einführung in Flexbox] |
| title_exact_search | 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: Navigation, Media Queries, Float-Layouts und Flexbox ; inkl. Einführung in Flexbox] |
| title_full | 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: Navigation, Media Queries, Float-Layouts und Flexbox ; inkl. Einführung in Flexbox] Peter Müller |
| title_fullStr | 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: Navigation, Media Queries, Float-Layouts und Flexbox ; inkl. Einführung in Flexbox] Peter Müller |
| title_full_unstemmed | 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: Navigation, Media Queries, Float-Layouts und Flexbox ; inkl. Einführung in Flexbox] Peter Müller |
| title_short | Einstieg in CSS |
| title_sort | einstieg in css webseiten gestalten mit html und css grundlagen schriften farben und gestalten mit dem box modell konzepte spezifitat kaskade und positionierung verstandlich erklart gestaltung navigation media queries float layouts und flexbox inkl einfuhrung in flexbox |
| title_sub | 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: Navigation, Media Queries, Float-Layouts und Flexbox ; inkl. Einführung in Flexbox] |
| topic | Cascading Style Sheets 3.0 (DE-588)7750895-6 gnd Webdesign (DE-588)1041632088 gnd HTML 5.0 (DE-588)7704810-6 gnd |
| topic_facet | Cascading Style Sheets 3.0 Webdesign HTML 5.0 |
| url | http://deposit.dnb.de/cgi-bin/dokserv?id=5299592&prov=M&dok_var=1&dok_ext=htm https://www.rheinwerk-verlag.de/einstieg-in-css_3806/ https://www.rheinwerk-verlag.de/einstieg-in-css_3806/autor/ http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=028201672&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=028201672&sequence=000004&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA |
| work_keys_str_mv | AT mullerpeter einstiegincsswebseitengestaltenmithtmlundcssgrundlagenschriftenfarbenundgestaltenmitdemboxmodellkonzeptespezifitatkaskadeundpositionierungverstandlicherklartgestaltungnavigationmediaqueriesfloatlayoutsundflexboxinkleinfuhrunginflexbox AT rheinwerkverlag einstiegincsswebseitengestaltenmithtmlundcssgrundlagenschriftenfarbenundgestaltenmitdemboxmodellkonzeptespezifitatkaskadeundpositionierungverstandlicherklartgestaltungnavigationmediaqueriesfloatlayoutsundflexboxinkleinfuhrunginflexbox AT mullerpeter html5css3funfdrei AT rheinwerkverlag html5css3funfdrei |
Description
THWS Würzburg Teilbibliothek SHL, Raum I.2.11
| Call Number: |
1340 ST 253 C18 M947(2) |
|---|---|
| Copy 1 | ausleihbar Available Place a Hold |
THWS Würzburg Zentralbibliothek Lesesaal
| Call Number: |
1000 ST 253 C18 M947(2) |
|---|---|
| Copy 1 | ausleihbar Available Place a Hold |