CSS Basics, Dynamische Grössen // MM 08-11
Upcoming SlideShare
Loading in...5
×
 

CSS Basics, Dynamische Grössen // MM 08-11

on

  • 1,432 views

MM 08-11 - Präsentation vom 14.12.2009

MM 08-11 - Präsentation vom 14.12.2009

CSS Grundlagen, Grundlegende Eigenschaften, berechnen von Grössen und Schriftgrössen in "em"

Statistics

Views

Total Views
1,432
Views on SlideShare
1,264
Embed Views
168

Actions

Likes
0
Downloads
20
Comments
0

3 Embeds 168

http://know.namics.com 119
https://know.namics.com 45
http://www.slideshare.net 4

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Fragen, Verbesserungsvorschläge, Kritik, Lob?
  • Lies Seite 43 bis 49 als Vertiefung (Little Boxes)
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • Kurzvortrag.
  • Lies Seite 43 bis 49 als Vertiefung (Little Boxes)

CSS Basics, Dynamische Grössen // MM 08-11 CSS Basics, Dynamische Grössen // MM 08-11 Presentation Transcript

  • XHTML & CSS Lektionen 13-16 © 2009 by Noël Bossart
  • welcome. « Be yourself beautiful, and you will find the world full of beauty. » Persisches Sprichwort © 2009 by Noël Bossart
  • Ablauf heute The Box Model CSS Grundeigenschaften Pause CSS Positionen CSS Positionen
  • ? ?
  • homework Modernes Webdesign Kapitel 2.2.5 Aufgaben in den Unterlagen lösen Hello World mit DIV und margin/padding/border anreichern
  • the box model.
  • Das Box Model Modernes Webdesign Kapitel 2.2.5
  • Das Box Model Inhalt Modernes Webdesign Kapitel 2.2.5
  • Das Box Model width Inhalt Modernes Webdesign Kapitel 2.2.5
  • Das Box Model width Inhalt height Modernes Webdesign Kapitel 2.2.5
  • Das Box Model width Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
  • Das Box Model width border Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
  • Das Box Model width border Aussenabstand Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
  • Das Box Model Aussenabstand Lorem ipsu amet, cons Innenabstand adipiscing Inhalt Quisque ve sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
  • Das Box Model margin Lorem ipsu amet, cons adipiscing Inhalt Quisque ve sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
  • Das Box Model margin Lorem ipsu amet, cons adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
  • Das Box Model Lorem ipsu amet, cons adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
  • Das Box Model... immer? Lorem ipsu amet, cons adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
  • Das Box Model... immer? Lorem ipsu amet, cons adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
  • Das Box Model... immer? I N ! Lorem ipsu E amet, cons N adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
  • Box Model Bug width margin padding Modernes Webdesign Kapitel 6.8.8 Normal height margin padding height IE kleiner 7
  • CSS Notation margin: ; margin padding: ; padding object
  • CSS Notation margin: ; top margin padding: ; padding left object right bottom
  • CSS Notation margin: 10px ; top margin padding: 10px ; padding left object right bottom
  • CSS Notation margin-right: ; margin padding-left: ; padding object
  • CSS Notation margin-right: 0 ; margin padding-left: ; padding object right
  • CSS Notation margin-right: 0 ; margin padding-left: 0 ; padding left object right
  • Short Notation margin: ; margin padding: ; padding object
  • Short Notation margin: ; top margin padding: ; padding object bottom
  • Short Notation margin: 10px ; top margin padding: 10px ; padding object bottom
  • Short Notation margin: 10px ; top margin padding: 10px ; padding left object right bottom
  • Short Notation margin: 10px 0 ; top margin padding: 10px 0 ; padding left object right bottom
  • Short Notation margin: 10px 0 ; ➊ margin top padding: 10px 0 ; padding left object right bottom
  • Short Notation margin: 10px 0 ; ➊ margin top padding: 10px 0 ; padding ➋ left object right bottom
  • CSS Notation margin: ; margin padding object
  • CSS Notation margin: 10px ; top margin padding object
  • CSS Notation margin: 10px 0 ; top margin padding object right
  • CSS Notation margin: 10px 0 20px ; top margin padding object right bottom
  • CSS Notation margin: 10px 0 20px 5px ; top margin padding object left right bottom
  • CSS Notation margin: 10px 0 20px 5px ; top left right bottom
  • CSS Notation padding: ; margin padding object Modernes Webdesign Seite 220+221
  • CSS Notation padding: 10px 5px 15px 5px ; top margin padding object left right bottom Modernes Webdesign Seite 220+221
  • CSS Notation padding: 10px 5px 15px 5px ; top left right bottom Modernes Webdesign Seite 220+221
  • Block vs. Inline Modernes Webdesign Seite 69 - 75
  • Block vs. Inline Modernes Webdesign Seite 69 - 75
  • Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Modernes Webdesign Seite 69 - 75
  • Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Modernes Webdesign Seite 69 - 75
  • Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Modernes Webdesign Seite 69 - 75
  • Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Inline Elemente sind nur so gross wie ihr Inhalt & brechen am Zeilenende um. Modernes Webdesign Seite 69 - 75
  • Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Inline Elemente sind nur so gross wie ihr Inhalt & brechen am Zeilenende um. Block erzwingt immer einen Umbruch. Modernes Webdesign Seite 69 - 75
  • Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Inline Elemente sind nur so gross wie ihr Inhalt & brechen am Zeilenende um. Block erzwingt immer einen Umbruch. Selbst wenn etwas daneben Platz hätte. Modernes Webdesign Seite 69 - 75
  • more. aigain. delicious.com/noelboss/zbw+css+basics delicious.com/noelboss/zbw+css+boxmodel
  • the basics. © 2009 by Noël Bossart Form & Farbe
  • Grundlagen schaffen Jeder Browser bringt seine eigenen Styles mit. Diese können sich von Browser zu Browser unterscheiden. Es ist daher sinnvoll, zuerst alle Elemente auf einen definierten Zustand zurück zu setzen, damit man eine saubere Ausgangslage hat. Man kann dazu sein eigenes reset.css schreiben, oder aber eines von vielen aus dem Internet Verwenden. Ich empfehle das Yahoo User Interface (YUI) Reset CSS: developer.yahoo.com/yui/reset/
  • Pixel, Punkt. Um Schriftgrössen zu definieren kann man Pixel verwenden: + Feste Grösse + Pixel genaue Layouts - Wenig flexibel - Keinen Zusammenhang mit der Schrift - Nicht zoombar
  • Pixel, Punkt. Um die Nachteile von Grössenangaben in Pixel zu umgehen, kann man die Grössenangabe em verwenden. + Flexible Grösse + Fast Pixel genaue Layouts + Flexibel + Proportional zur Schriftgrösse + Zoombar
  • Einheit M = em Die Grösse von em (gesprochen emm) entspricht der Breite eines M. Wenn die Schriftgrösse 16px ist, ist 1em = 16px.
  • Einheit M = em Die Grösse von em (gesprochen emm) entspricht der Breite eines M. Wenn die Schriftgrösse 16px ist, ist 1em M = 16px.
  • Einheit M = em Die Grösse von em (gesprochen emm) entspricht der Breite eines M. Wenn die Schriftgrösse 16px ist, ist 1em M = 16px.
  • em em erlauben es, Abstände von Elementen proportional zur Schriftgrösse zu gestallten. Dies eignet sich insbesondere für horizontale Abstände, kann aber auch bei komplett fluiden Layouts eingesetzt werden.
  • em em erlauben es, Abstände von Elementen proportional zur Schriftgrösse zu gestallten. Dies eignet sich insbesondere für horizontale Abstände, kann aber auch bei komplett fluiden Layouts eingesetzt werden. Home Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris n lectus vel felis facilisis laoreet. Mauris vel eros non lectus ultric pretium. In adipiscing felis ac massa. Nulla ac lectus sit amet volutpat dignissim. Nam velit dui, ullamcorper a, viverra auc
  • em em erlauben es, Abstände von Elementen proportional zur Schriftgrösse zu gestallten. Dies eignet sich insbesondere für horizontale Abstände, kann aber auch bei komplett fluiden Layouts eingesetzt werden. Home Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris n lectus vel felis facilisis laoreet. Mauris vel eros non lectus ultric pretium. In adipiscing felis ac massa. Nulla ac lectus sit amet volutpat dignissim. Nam velit dui, ullamcorper a, viverra auc
  • em em erlauben es, Abstände von Elementen proportional zur Schriftgrösse zu gestallten. Dies eignet sich insbesondere für horizontale Abstände, kann aber auch bei komplett fluiden Layouts eingesetzt werden. Home 1em 0.5em Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris n lectus vel felis facilisis laoreet. Mauris vel eros non lectus ultric pretium. In adipiscing felis ac massa. Nulla ac lectus sit amet volutpat dignissim. Nam velit dui, ullamcorper a, viverra auc
  • em em erlauben es, Abstände von Elementen proportional zur Schriftgrösse zu gestallten. Dies eignet sich insbesondere für horizontale Abstände, kann aber auch bei komplett fluiden Layouts eingesetzt werden. Home 1em 0.5em Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris n lectus vel felis facilisis laoreet. Mauris vel eros non lectus ultric pretium. In adipiscing felis ac massa. Nulla ac lectus sit amet volutpat dignissim. Nam velit dui, ullamcorper a, viverra auc
  • em em erlauben es, Abstände von Elementen proportional zur Schriftgrösse zu gestallten. Dies eignet sich insbesondere für horizontale Abstände, kann aber auch bei komplett fluiden Layouts eingesetzt werden. Home 1em 0.5em Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris n 7.7em lectus vel felis facilisis laoreet. Mauris vel eros non lectus ultric pretium. In adipiscing felis ac massa. Nulla ac lectus sit amet volutpat dignissim. Nam velit dui, ullamcorper a, viverra auc
  • em em erlauben es, Abstände von Elementen proportional zur Schriftgrösse zu gestallten. Dies eignet sich insbesondere für horizontale Abstände, kann aber auch bei komplett Fluiden Layouts eingesetzt werden. Home 1em 0.5em Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris n 7.7em lectus vel felis facilisis laoreet. Mauris vel eros non lectus ultric pretium. In adipiscing felis ac massa. Nulla ac lectus sit amet volutpat dignissim. Nam velit dui, ullamcorper a, viverra auc
  • Berechnen von em Um em zu berechnen gibt es eine einfache Formel:
  • Berechnen von em Um em zu berechnen gibt es eine einfache Formel: Zielgrösse em = Ausgangsgrösse
  • Ausgangslage schaffen Die Browser haben eine Standard-Schriftgrösse von 16 Pixel. Möchte man für die Grundschrift eine Grösse von 12 Pixel einstellen, ergibt sich folgende Rechnung:
  • Ausgangslage schaffen Die Browser haben eine Standard-Schriftgrösse von 16 Pixel. Möchte man für die Grundschrift eine Grösse von 12 Pixel einstellen, ergibt sich folgende Rechnung: 12 Pixel = 0.75em 16 Pixel
  • Ausgangslage schaffen Die Browser haben eine Standard-Schriftgrösse von 16 Pixel. Möchte man für die Grundschrift eine Grösse von 12 Pixel einstellen, ergibt sich folgende Rechnung: 12 Pixel = 0.75em 16 Pixel body { font-size: 0.75em; }
  • Die Schriftgrösse « 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses. » w3schools.com/css/css_units.asp
  • Hintergründe Hintergründe können transparent sein, eine Farbe haben und / oder ein Bild beinhalten. Bilder können positioniert werden und sich in x oder y Richtung wiederholen. Eine vollständige Deklaration sieht folgendermassen aus: Farbe Bild repeat x/y
  • Hintergründe Diese Deklaration kann auch einzeln geschrieben werden:
  • Ränder Ränder brauchen eine “Dicke” einen Strich-Typ und eine Farbe, diese können einzeln oder zusammen deklariert sein:
  • find it. Sherlock Holmes © 2009 by Noël Bossart
  • Sherlock Holmes Verwende das Bild der Original-Seite als Vorlage und vervollständige den Code. Tipp: Beachte die CSS-Deklarationen um Hinweise zu erhalten, welche HTML Elemente fehlen und welche Klassen und ID’s sie haben.
  • home work
  • Hausaufgaben Do Sherlock Holmes
  • Prüfung: Basics & HTML Hintergrundwissen: Geschichte, Web 2.0 Die Basis-Technologien im Web und ihre Einsatzzwecke sowie Charakteristiken kennen Verschiedene HTML-Versionen, ihre Doctypes und Einsatzzwecke kennen, DTD? XML Regeln & XHTML Syntax kennen HTML Grundelemente kennen XHTML Syntax kennen (Tags, Attribute, Werte, auch Leere Elemente) Welche Elemente werden für bestimmte Bereiche einer Webseite eingesetzt? Insbesondere Wissen über die gängigsten Tags und ihre Attribute (img, a ...)
  • Prüfung: CSS Verschiedene Arten des Einbindens CSS Syntax: Selektoren, Gewichtung / Spezifität, Aufbau, Gültigkeit Eigenschaften & Werte Kaskade (nach welchen Regeln wird bestimmt, welcher Style Anwendung findet) Berechnen von Schriftgrössen in em Boxmodel verstehen & berechnen (Unterschied IE?) Unterschied zwischen Block & Inline Element kennen und anwenden
  • Prüfung: Anwendung Mit Hilfe von vorgegebenem CSS das HTML abbilden Mit Hilfe von HTML und Angaben über das gewünschte Aussehen CSS erstellen Box Model berechnen und aufzeichnen können Webseiten analysieren und Bestandteile benennen können
  • Ressourcen public.me.com/noelboss Links delicious.com/noelboss+zbw Link Feed feeds.delicious.com/rss/noelboss/zbw Slideshows slideshare.net/noelboss Fragen & Feedback noel.zbw@me.com more.