CSS - Das umfassende Handbuch. Aktuell zu CSS3 und HTML5, inkl. Mobiles Webdesign mit CSS, CSS-Layouts, CSS-Praxis, YAML, jQuery, Grids u.v.m.

von: Kai Laborenz

Galileo Press, 2011

ISBN: 9783836217255

Sprache: Deutsch

805 Seiten, Download: 23565 KB

Format: PDF, auch als Online-Lesen

geeignet für:

eBook anfordern

▸

Mehr zum Inhalt

CSS - Das umfassende Handbuch. Aktuell zu CSS3 und HTML5, inkl. Mobiles Webdesign mit CSS, CSS-Layouts, CSS-Praxis, YAML, jQuery, Grids u.v.m.

	Inhalt	6
	Vorwort	18
	1 Was sind Cascading Stylesheets?	20
	1.1 Warum sollten Sie Stylesheets nutzen?	21
	1.2 Das CSS-Prinzip	23
	1.3 Wie sieht ein Stylesheet aus?	24
	2 HTML und CSS	28
	2.1 Die Grundlage - das semantische HTML-Dokument	28
	2.2 Schnelleinstieg HTML	30
	2.3 Code follows Content	33
	2.4 Sektionen einer Webseite	37
	2.5 HTML 4, HTML5 oder XHTML?	40
	2.6 HTML5 und CSS	43
	2.6.1 HTML5 im Vergleich zu HTML 4 und XHTML	45
	2.6.2 Neue Elemente in HTML5	45
	2.6.3 HTML5 in der Praxis	47
	3 Das erste Stylesheet - »Hallo Welt!« auf CSS	50
	4 Selektoren	56
	4.1 Die verschiedenen Selektoren	57
	4.1.1 Einfache Element-Selektoren	57
	4.1.2 Class- und ID-Selektoren	59
	4.1.3 Kombinierte Selektoren	66
	4.1.4 Universal-Selektor	69
	4.1.5 Kind-Selektoren	72
	4.1.6 Folgeelement-Selektoren	75
	4.1.7 Attribut-Selektoren (CSS2 und CSS3)	77
	4.1.8 Pseudo-Klassen und Pseudo-Elemente	81
	4.1.9 CSS3-Pseudo-Selektoren	81
	4.1.10 Wiederholungs-Selektoren	83
	4.2 Vererbung	86
	4.3 Rangfolge und Kaskade	88
	4.3.1 Die Important-Anweisung	95
	5 Einbinden von Stylesheets in HTML-Dateien	98
	5.1 Stilanweisungen im HTML-Tag	98
	5.2 Stilanweisungen im Dokumentenkopf	99
	5.3 Verlinkte Stylesheets	100
	5.3.1 Individuelles Design durch Alternative Stylesheets	101
	5.4 Importierte Stylesheets	102
	5.5 Medienspezifische Stylesheets	103
	5.5.1 Medienspezifische Stylesheets mit CSS3	105
	6 Kastenmodell (Box-Modell), Elementtypen und Layoutmodelle	106
	6.1 Das Kastenmodell	106
	6.1.1 Zusammenfallende Außenabstände (Collapsing Margins)	109
	6.2 Elementtypen in CSS	114
	6.2.1 Block-Elemente	115
	6.2.2 Eingebundene Elemente	115
	6.2.3 Definition des Elementtyps	116
	6.2.4 Weitere Elementtypen	116
	6.3 Layout- und Positionierungsmodelle in CSS	117
	7 Positionierung mit CSS	120
	7.1 Die Positionierungsart (»position«)	120
	7.1.1 »position: static«	121
	7.1.2 »position: relative«	123
	7.1.3 »position: absolute«	125
	7.1.4 »position: fixed«	126
	7.2 »float« und »clear«	129
	7.2.1 »float« mit »clear« aufheben	134
	7.2.2 »clear« ohne zusätzliches Markup	136
	8 Layout mit CSS	142
	8.1 Fixiert, flexibel, oder elastisch?	143
	8.1.1 Vor und Nachteile	143
	8.1.2 Elastische Layouts und Browserzooms	145
	8.1.3 Auflösungsabhängige Layouts	146
	8.2 Der Zweispalter	147
	8.2.1 Zweispalter mit float	150
	8.3 Der Dreispalter	152
	8.3.1 Dreispalter flexibel	153
	8.3.2 Dreispalter mit festen Spaltenbreiten rechts und links	156
	8.3.3 Dreispalter mit flexibler Spaltenaufteilung und freier Wahl der Breiteneinheiten	160
	8.3.4 Elastischer Dreispalter mit Anpassung an Schriftgröße	166
	8.4 CSS-Layouttricks	171
	8.4.1 Das Problem der (nicht) gleich langen Spalten	171
	8.4.2 Zentrieren	180
	8.4.3 Minimale und maximale Breiten für flexible Layouts	185
	8.4.4 Feststehende Bereiche und CSS-Frames	188
	8.4.5 Auflösungsflexible Layouts	195
	9 Styling mit CSS	202
	9.1 Arbeiten mit Text	202
	9.1.1 Grundlegende Schriftformatierungen	202
	9.1.2 Typografie mit CSS	209
	9.1.3 Einfache Auszeichnungen	210
	9.1.4 Einbindung von Schriftarten per CSS	212
	9.1.5 Konstruktion einer konsistenten Typografie	224
	9.1.6 Überschriften mit CSS	228
	9.1.7 Initialen und Einrückungen	233
	9.1.8 Styling von Zitaten	240
	9.2 CSS-Menüs mit Listen	252
	9.2.1 Vertikale Menüs	253
	9.2.2 CSS-Flyout-Menüs	261
	9.2.3 Horizontale Menüs	265
	9.2.4 Menüs mit durchgehendem Hintergrund	274
	9.3 Tabellen und CSS	277
	9.4 Schönere Formulare	290
	9.4.1 Ordnung ist alles: die Struktur eines Formulars	291
	9.4.2 Pimp my Form	302
	9.4.3 Anpassen von Formular-Rahmenelementen	306
	9.4.4 Interaktionshilfen	307
	9.4.5 Fehlermeldungen	310
	9.5 Druckversion per CSS	313
	9.6 Arbeiten mit Transparenz	317
	9.6.1 Deckkraft von Ebenen steuern	317
	9.6.2 Ebenentransparenz mit voll deckendem Inhalt	319
	9.6.3 PNG: Grafiken mit weichem Verlauf (Alpha-Kanal)	322
	9.7 Arbeiten mit Grafiken	324
	9.7.1 Grafiken per CSS beschneiden	324
	9.7.2 CSS-Sprites	324
	9.7.3 Mehrfache Hintergründe (CSS3)	329
	9.7.4 Grafiken präsentieren - die CSS-Bildergalerie	331
	9.8 CSS-Effekte	342
	9.8.1 »Runde Ecken«	342
	9.8.2 CSS-Schatten	343
	9.8.3 Verläufe mit CSS	353
	9.9 Elemente per CSS verschieben und drehen	363
	9.10 CSS-Übergänge und Animationen	365
	9.10.1 Animierte Übergänge	365
	9.10.2 Animationen mit Keyframes	367
	9.11 Stylesheet-Wechsler	371
	9.11.1 Simpler Styleswitcher	375
	9.11.2 Styleswitcher mit JavaScript und Ajax	375
	9.11.3 Browserweichen für Stylesheets	378
	10 CSS und die Browser	380
	10.1 Die Browserlandschaft	380
	10.1.1 Browser-Marktanteile	382
	10.1.2 CSS-Unterstützung testen - der Acid-Test	384
	10.1.3 Browser mit WebKit-Engine (Chrome, Safari, Konqueror)	386
	10.1.4 Firefox (Gecko)	388
	10.1.5 Opera (Presto)	390
	10.1.6 Opera Mini und Opera Mobile	391
	10.1.7 Internet Explorer (Trident)	392
	10.1.8 Weitere Browser	394
	10.1.9 Lynx	395
	10.1.10 Screenreader	396
	10.2 Problemfall Internet Explorer	397
	10.2.1 hasLayout	398
	10.3 Browserweichen und -filter	399
	10.3.1 Strategien für die Anwendung von Browserweichen: »To hack or not to hack«	400
	10.3.2 Doctype-Switching und Browseremulationen	401
	10.3.3 Conditional Comments	404
	10.3.4 Browser-Sniffer	405
	10.3.5 CSS-Bugs per JavaScript beheben	406
	10.4 Browsertesting	406
	10.4.1 Virtualisierung	407
	10.4.2 Online-Screenshot-Dienste	409
	11 Effizientes Arbeiten mit CSS	412
	11.1 Arbeiten mit HTML-Vorlagen	412
	11.2 Design Patterns	415
	11.2.1 Design Pattern und Quellcode von Yahoo!	416
	11.3 Objektorientiertes CSS	418
	11.4 Alles auf null: Reset-Stylesheets	422
	11.5 Kurzschreibweise	427
	11.6 CSS-Präprozessoren	428
	11.6.1 Effizient CSS-Anweisungen schreiben mit LESS	430
	11.7 Stylesheets organisieren	434
	11.7.1 Ordnung durch Stylesheet-Module	435
	11.7.2 Filter-Management	436
	11.7.3 Kommentieren von Stylesheets	437
	11.7.4 Ein Standard für CSS-Kommentare: CSSDoc	438
	11.7.5 Sprung-Links, Inhaltsverzeichnis und Farbdefinitionen	440
	11.8 CSS im Entwurfsverfahren (Rapid Prototyping)	442
	11.8.1 Festlegen der Seitenstruktur in semantischem HTML	443
	11.8.2 Bereiche ausrichten in Ihrem bevorzugten Browser	444
	11.8.3 Einfügen der Inhalte	445
	11.8.4 Dynamische Bereiche umsetzen	446
	11.8.5 Benutzertests	446
	11.8.6 Finetuning, Browsertests und technische Optimierungen	448
	11.9 Fehlersuche in CSS-Dateien	448
	12 Arbeiten mit CSS-Frameworks	452
	12.1 YAML	454
	12.1.1 Klassische Spaltenlayouts	455
	12.1.2 Flexible Raster mit YAML	458
	12.1.3 YAMLBuilder	462
	12.1.4 Hilfreiche Klassen	463
	12.1.5 Formulare mit YAML	464
	12.1.6 Fazit	464
	12.2 Yahoo! Grids	465
	12.2.1 Weitere Aufteilung des Hauptbereichs	468
	12.2.2 Der YUI Grids Builder	470
	12.2.3 Yahoo! Grids anpassen	471
	12.2.4 Semantische Rollen für barrierefreie Grids	472
	12.2.5 Gleich lange Spalten mit Grids und JavaScript	473
	12.2.6 Fazit zu Yahoo! Grids	473
	12.3 Blueprint CSS	474
	12.3.1 Arbeiten mit Blueprint	475
	12.3.2 Blueprint-Raster anpassen	479
	12.4 Weitere CSS-Frameworks	480
	12.4.1 Rastersystem »960«	480
	13 Webstandards und Barrierefreiheit	484
	13.1 Webstandards beachten	484
	13.1.1 Was ist für eine standardkonforme Webseite erforderlich?	485
	13.1.2 Der W3C-Validator	487
	13.2 Suchmaschinenoptimierung mit CSS	489
	13.2.1 Schlanke Dokumente durch CSS	489
	13.2.2 Semantik für Suchmaschinen	490
	13.3 Zugängliche und benutzbare Websites mit CSS	493
	13.3.1 Grundsätze für zugängliche Websites	494
	13.3.2 Barrierefreie Sprung-Links	497
	13.3.3 Link-Auszeichnungen - Nützlich und barrierefrei	499
	13.3.4 Testen	501
	14 Ajax, JavaScript und CSS	504
	14.1 Austausch eines Stylesheets per JavaScript	504
	14.2 Klassen zuweisen mit »className«	505
	14.3 Stile mit »style« zuweisen	506
	14.4 Formularvalidierung mit CSS und JavaScript	507
	14.5 Tageszeitenabhängiger Styleswitcher	512
	14.6 Fadenkreuz für Tabellen	515
	14.7 JavaScript zur Umgehung von Browsereinschränkungen verwenden	517
	14.7.1 Browser- bzw. Fähigkeitserkennung	518
	14.7.2 JavaScript zur Erweiterung der Browserfähigkeiten nutzen	520
	15 Das mobile Web: Stylesheets, Mobiltelefone und PDAs	530
	15.1 Strategien für das mobile Web: mobilisieren statt miniaturisieren	530
	15.2 Mobile Standards	531
	15.3 Stylesheets für mobile Browser ausliefern	532
	15.3.1 Stylesheets per Media Query ausliefern	532
	15.3.2 User-Agent-Sniffing	534
	15.4 CSS-Design für den mobilen Einsatz	534
	15.5 Einzelne Geräte	537
	15.5.1 Betriebssysteme für Mobilgeräte und Organizer	537
	15.5.2 Safari auf dem iPhone und iPad	538
	15.5.3 Chrome auf Android-Geräten	546
	15.5.4 Opera Mini und Opera Mobile	548
	15.5.5 Weitere mobile Browser	551
	15.6 Frameworks für die mobile Entwicklung	551
	15.6.1 Mobile Boilerplate	551
	15.6.2 jQuery Mobile Framework	553
	15.6.3 jQTouch	559
	16 E-Mails mit CSS gestalten	562
	16.1 Grundsätzliche Probleme	562
	16.2 Lokale E-Mail-Clients	566
	16.2.1 Microsoft Outlook	566
	16.2.2 Mozilla Thunderbird	568
	16.2.3 Apple Mail	569
	16.3 Webmail-Dienste	569
	16.3.1 Google Mail	569
	16.3.2 Yahoo! Mail und Windows Live Mail	570
	16.3.3 GMX	571
	16.3.4 Web.de	572
	16.4 Strategien für E-Mail-Newsletter	573
	16.4.1 Techniken für mit CSS gestaltete und alle anderen E-Mails	573
	16.4.2 CSS-Eigenschaften im Einzelnen	577
	17 CSS3	580
	17.1 CSS-Spezifikationen	580
	17.1.1 CSS3 und die Browser	583
	17.1.2 Von Standards und Hersteller-Präfixen	584
	17.2 CSS3 - was können Sie heute verwenden?	584
	17.2.1 Selektoren	584
	17.2.2 Neue Eigenschaften für das Seitenlayout	585
	17.2.3 Neue Möglichkeiten für das Styling	587
	17.2.4 Übergänge, Transformationen und Animationen	589
	17.3 CSS3 Zen Ocean	589
	18 Werkzeuge für CSS-Entwickler	606
	18.1 CSS-Editoren	606
	18.1.1 TopStyle	606
	18.2 Website-Editoren	611
	18.2.1 Adobe Dreamweaver CS5.5	611
	18.2.2 Aptana Studio 2.0	623
	18.3 Analysewerkzeuge	626
	18.3.1 Firebug	626
	18.3.2 Web Developer Toolbar(s)	630
	18.3.3 Accessibility-Toolbar	631
	18.3.4 Calipers	632
	18.4 Optimierungswerkzeuge	633
	18.4.1 CSS-Minifier	633
	18.5 Eigene Tools herstellen: Benutzer-Stylesheets	635
	A CSS-Referenz	642
	A.1 Alphabetische Übersicht	642
	A.2 Pseudo-Elemente und Pseudo-Formate	645
	A.2.1 :link	645
	A.2.2 :visited	647
	A.2.3 :hover	648
	A.2.4 :focus	649
	A.2.5 :active	650
	A.2.6 :lang	651
	A.2.7 ::first-line	653
	A.2.8 ::first-letter	655
	A.2.9 :first-child	656
	A.2.10 ::before und ::after	657
	A.2.11 :not (CSS3)	659
	A.2.12 :empty (CSS3)	660
	A.2.13 :target (CSS3)	660
	A.2.14 :enabled, :disabled, :checked (CSS3)	661
	A.2.15 :last-child, :nth-child(), :nth-last-child() (CSS3)	661
	A.2.16 :first-of-type, :last-of-type, :nth-of-type(), :nth-last-of-type() (CSS3)	662
	A.2.17 :only-child, :only-of-type (CSS3)	663
	A.3 Inhaltserzeugung	663
	A.3.1 content (CSS2, Änderung in CSS 2.1)	663
	A.3.2 counter() und counters()	665
	A.3.3 counter-increment (CSS2)	667
	A.3.4 counter-reset (CSS2)	668
	A.3.5 quotes (CSS2)	669
	A.4 Schriftformatierungen	670
	A.4.1 font-family	670
	A.4.2 font-style	674
	A.4.3 font-variant	675
	A.4.4 font-weight	676
	A.4.5 font-size	677
	A.4.6 font-size-adjust (CSS, nicht in CSS 2.1, wieder da in CSS3)	678
	A.4.7 font-stretch (CSS2, nicht in CSS 2.1, wieder da in CSS 3)	679
	A.4.8 font	680
	A.4.9 @font-face (CSS2, nicht in CSS 2.1, wieder da in CSS3)	681
	A.4.10 text-decoration	684
	A.4.11 text-shadow (CSS2, nicht in CSS 2.1, wieder da in CSS3)	686
	A.4.12 text-transform	687
	A.4.13 text-size-adjust	688
	A.4.14 letter-spacing	689
	A.4.15 word-spacing (CSS2)	690
	A.4.16 white-space	691
	A.4.17 line-height	691
	A.4.18 text-indent	692
	A.4.19 text-align (Änderung in CSS 2.1)	693
	A.4.20 text-overflow (CSS3)	694
	A.4.21 vertical-align	695
	A.4.22 direction (CSS2)	698
	A.4.23 unicode-bidi (CSS2)	698
	A.5 Farben und Hintergründe	699
	A.5.1 color	699
	A.5.2 background-color	700
	A.5.3 background-image (Änderung in CSS3)	701
	A.5.4 background-repeat	702
	A.5.5 background-attachment	703
	A.5.6 background-position (Änderung in CSS 2.1)	703
	A.5.7 background-size	705
	A.5.8 background	705
	A.5.9 linear-gradient (CSS3)	707
	A.5.10 radial-gradient (CSS3)	708
	A.5.11 repeating-linear-gradient (CSS3)	710
	A.5.12 repeating-radial-gradient (CSS3)	712
	A.6 Kastenformatierungen	714
	A.6.1 margin	714
	A.6.2 padding	716
	A.6.3 border-width	717
	A.6.4 border-color	718
	A.6.5 border-style	719
	A.6.6 border-image (CSS3)	721
	A.6.7 border-radius (CSS3)	722
	A.6.8 border	723
	A.6.9 outline (CSS2)	724
	A.6.10 width	725
	A.6.11 height	726
	A.6.12 overflow (CSS2)	727
	A.6.13 clip (CSS2, Änderung in CSS 2.1)	728
	A.6.14 float	730
	A.6.15 clear	732
	A.6.16 position (CSS2)	734
	A.6.17 box-sizing (CSS3)	735
	A.6.18 top (CSS2)	736
	A.6.19 right (CSS2)	737
	A.6.20 bottom (CSS2)	738
	A.6.21 left (CSS2)	738
	A.6.22 visibility (CSS2)	739
	A.6.23 opacity (CSS3)	740
	A.6.24 z-index (CSS2)	741
	A.6.25 box-shadow (CSS3)	744
	A.6.26 column-count (CSS3)	745
	A.6.27 column-gap (CSS3)	746
	A.6.28 column-rule (CSS3)	746
	A.7 Listenformatierungen	747
	A.7.1 list-style-type	747
	A.7.2 list-style-image	749
	A.7.3 list-style-position	749
	A.7.4 list-style	750
	A.8 Anzeigemodus	751
	A.8.1 display (CSS1, Erweiterung in CSS2: table, Änderung in CSS 2.1, Erweiterung in CSS3: icon)	751
	A.9 Tabellenformatierungen	753
	A.9.1 table-layout (CSS2)	753
	A.9.2 caption-side (CSS2, nicht in CSS 2.1, wieder da in CSS3)	754
	A.9.3 border-collapse (CSS2, Änderung in CSS 2.1)	755
	A.9.4 border-spacing (CSS2)	756
	A.9.5 empty-cells (CSS2)	757
	A.9.6 speak-header (CSS2)	758
	A.10 Benutzeroberfläche	758
	A.10.1 cursor (CSS2)	758
	A.10.2 resize (CSS3)	760
	A.11 Seitenlayout mit @page	761
	A.11.1 size	761
	A.11.2 marks	762
	A.11.3 :left :right :first	763
	A.11.4 page-break-before, page-break-after	764
	A.11.5 page-break-inside	765
	A.11.6 page	766
	A.11.7 orphans, widows	766
	A.12 Sprachausgabe	767
	A.12.1 speak	767
	A.12.2 volume	768
	A.12.3 speech-rate	769
	A.12.4 pause	769
	A.12.5 cue	770
	A.12.6 play-during	771
	A.12.7 voice-familiy	772
	A.12.8 pitch	772
	A.12.9 stress	773
	A.12.10 richness	773
	A.12.11 azimuth	774
	A.12.12 elevation	775
	A.12.13 speak-punctuation	776
	A.12.14 speak-numeral	776
	A.13 Proprietäre CSS-Eigenschaften	777
	A.13.1 Microsoft	777
	A.13.2 Firefox	781
	A.13.3 WebKit	781
	A.13.4 Opera	783
	B Benennungen und Werte für Stylesheets	784
	B.1 Namen für Stylesheets, Klassen und IDs	784
	B.2 Längen- und Größenangaben	784
	B.2.1 Absolute Einheiten	785
	B.2.2 Relative Einheiten	785
	B.3 Prozentwerte	786
	B.4 Farben	786
	B.4.1 Hexadezimal (#RRGGBB oder #RGB)	786
	B.4.2 Prozentwerte rgb(rrr.rr%,ggg.gg%,bbb.bb%)	786
	B.4.3 Dezimalwerte rgb(rrr,ggg,bbb)	786
	B.4.4 Dezimalwerte mit Alpha-Kanal (CSS3)	787
	B.4.5 Schlüsselwörter	787
	B.5 URLs (url)	787
	B.6 Schlüsselwörter	788
	B.7 CSS-Kommentare	788
	C HTML5-Elemente	790
	D DVD zum Buch	794
	Index	796

CSS - Das umfassende Handbuch. Aktuell zu CSS3 und HTML5, inkl. Mobiles Webdesign mit CSS, CSS-Layouts, CSS-Praxis, YAML, jQuery, Grids u.v.m.

von: Kai Laborenz

CSS - Das umfassende Handbuch. Aktuell zu CSS3 und HTML5, inkl. Mobiles Webdesign mit CSS, CSS-Layouts, CSS-Praxis, YAML, jQuery, Grids u.v.m.

Kategorien

eBooks

Audiobooks