SlideShare ist ein Scribd-Unternehmen logo
Cascading Style Sheets
                                   Barrierefrei in die Zukunft




1 / 57   Cascading Style Sheets (CSS)
         Seminar, 09. und 10. Februar 2009
Agenda
 •  Theoretischer Teil
         1.    Einführung
         2.    Tools
         3.    CSS einbinden
         4.    Selektoren, Klassen und ID‘s
         5.    Maßeinheiten und Farbangaben
         6.    CSS-Eigenschaften




2 / 57     Cascading Style Sheets (CSS)
           Seminar, 09. und 10. Februar 2009
Agenda
 •  Praktischer Teil (Workshop)
         1.    Vorbereitung und Strukturierung des HTML Codes
         2.    Sinnvoller Aufbau und Struktur einer CSS-Datei
         3.    Positionierung von Inhaltsblöcken ohne Tabellen
         4.    Formulargestaltung mit CSS
         5.    Print.css – Spezielles CSS zur Formatierung der
               Druckausgabe




3 / 57     Cascading Style Sheets (CSS)
           Seminar, 09. und 10. Februar 2009
Ziele des Seminars
 •  Sensibilisierung für das Thema CSS
 •  Erste praktische Erfahrungen im Umgang
    mit Cascading Style Sheets
 •  Motivation zur selbstständigen Festigung
    und Erweiterung des erworbenen Wissens




4 / 57   Cascading Style Sheets (CSS)
         Seminar, 09. und 10. Februar 2009
1 | Einführung und Grundlagen

 Was sind
 Cascading Style Sheets?


5 / 57   Cascading Style Sheets (CSS)
         Seminar, 09. und 10. Februar 2009
Was sind Cascading Style Sheets?
 CSS ist eine deklarative Stylesheet-Sprache für
 strukturierte Dokumente, die vor allem zusammen
 mit HTML eingesetzt wird. CSS legt dabei fest, wie
 ein besonders ausgezeichneter Inhalt oder Bereich
 dargestellt werden soll, mit anderen Worten,
 man trennt den eigentlichen Inhalt von der
 optischen Gestaltung.

  Quelle: Wikipedia

6 / 57   Cascading Style Sheets (CSS)
         Seminar, 09. und 10. Februar 2009
Aufbau einer Webseite


                                             Interaktion (Javascript)

                                             Styling (CSS)

                                             Inhalt (HTML)




7 / 57   Cascading Style Sheets (CSS)
         Seminar, 09. und 10. Februar 2009
Das alte Modell




8 / 57   Cascading Style Sheets (CSS)
         Seminar, 09. und 10. Februar 2009
Das alte Modell




9 / 57   Cascading Style Sheets (CSS)
         Seminar, 09. und 10. Februar 2009
Das aktuelle Modell




10 / 57   Cascading Style Sheets (CSS)
          Seminar, 09. und 10. Februar 2009
Vorteile
 •        Leichter zu editieren
 •        Schnellerer Seitenaufbau
 •        Geringes Datenvolumen
 •        Barrierefreies Webdesign
 •        Google-freundlich!




11 / 57     Cascading Style Sheets (CSS)
            Seminar, 09. und 10. Februar 2009
Zusammenfassung
 •  Cascading Style Sheets sind
    Formatierungen, mit denen sich das
    Erscheinungsbild einer Website festlegen
    lässt.
 •  Diese Formatierungen werden vom
    eigentlichen Inhalt getrennt.



12 / 57   Cascading Style Sheets (CSS)
          Seminar, 09. und 10. Februar 2009
6 | CSS-Eigenschaften

 Das Box Modell




13 / 57   Cascading Style Sheets (CSS)
          Seminar, 09. und 10. Februar 2009
Das Box Modell
 Beschreibt, wie sich die Breite von
 Block-Elementen, unter Berücksichtung
 verschiedener zusätzlicher Style-Angaben
 berechnen lässt.

 Wichtig für die pixelgenaue Positionierung
 von Elementen!


14 / 57   Cascading Style Sheets (CSS)
          Seminar, 09. und 10. Februar 2009
Das Box Modell




15 / 57   Cascading Style Sheets (CSS)
          Seminar, 09. und 10. Februar 2009
Das Box Modell
 Ein Beispiel:

 div.box { width:300px; border:1px;!
  ! ! ! ! !padding: 10px; margin: 10px; }!

 Tatsächliche Breite:
 300px + (2 x 1px) + (2 x 10px) + (2 x 10px) = 342px




16 / 57   Cascading Style Sheets (CSS)
          Seminar, 09. und 10. Februar 2009
Das Box Modell
 „Box Model Bug“ im Internet Explorer
 IE 6 addiert Innenabstände (padding) und
 Rahmenbreite (border) nicht zur Breite
 hinzu!

 Tatsächliche Breite im IE:
 300px + (2 x 1px) + (2 x 10px) + (2 x 10px) = 320px (!)



17 / 57   Cascading Style Sheets (CSS)
          Seminar, 09. und 10. Februar 2009
Typischer Workflow




   Photoshop-Layout                           HTML-Rohbau   CSS-Entwicklung




18 / 57   Cascading Style Sheets (CSS)
          Seminar, 09. und 10. Februar 2009

Weitere ähnliche Inhalte

Andere mochten auch

1.1 y 1.2 caracteristicas y funciones de so
1.1 y 1.2 caracteristicas y funciones de so1.1 y 1.2 caracteristicas y funciones de so
1.1 y 1.2 caracteristicas y funciones de so
Yesica Ramirez
 
Manual de instrucciones
Manual de instruccionesManual de instrucciones
Manual de instrucciones
Cardumo
 
Geopunkt Jurameer Schandelah - Grabungskampagne III - 2016
Geopunkt Jurameer Schandelah - Grabungskampagne III - 2016Geopunkt Jurameer Schandelah - Grabungskampagne III - 2016
Geopunkt Jurameer Schandelah - Grabungskampagne III - 2016
Matthias Trenkle
 
Expo edi
Expo ediExpo edi
Expo edi
Gustavo Hdz
 
Bildung, Visualität, Subjektivierung - Sichtbarkeiten und Selbstverhältnisse ...
Bildung, Visualität, Subjektivierung - Sichtbarkeiten und Selbstverhältnisse ...Bildung, Visualität, Subjektivierung - Sichtbarkeiten und Selbstverhältnisse ...
Bildung, Visualität, Subjektivierung - Sichtbarkeiten und Selbstverhältnisse ...
Benjamin Jörissen
 
La libertad
La libertadLa libertad
La libertad
Jose Madrigal
 
Unidad 7
Unidad 7Unidad 7
Nomenclatura de sales5
Nomenclatura de sales5Nomenclatura de sales5
Nomenclatura de sales5
Abraham Rayon
 
Was ist Inkasso?
Was ist Inkasso?Was ist Inkasso?
Was ist Inkasso?
eCollect
 
Anuncios
AnunciosAnuncios
Anuncios
adripaul
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
Cindy Gonzalez
 
DER LAUF DES LEBE
DER  LAUF  DES  LEBEDER  LAUF  DES  LEBE
DER LAUF DES LEBEDidolf
 
Public seal vertragsmanagement-2011
Public seal vertragsmanagement-2011Public seal vertragsmanagement-2011
Public seal vertragsmanagement-2011
Franz Schreiber
 
Tema 1 -_participacion_de_los_padres
Tema 1 -_participacion_de_los_padresTema 1 -_participacion_de_los_padres
Tema 1 -_participacion_de_los_padres
Rocio Castellanos
 
Estudio de mercadeo general
Estudio de mercadeo generalEstudio de mercadeo general
Estudio de mercadeo general
local publicidad
 

Andere mochten auch (18)

1.1 y 1.2 caracteristicas y funciones de so
1.1 y 1.2 caracteristicas y funciones de so1.1 y 1.2 caracteristicas y funciones de so
1.1 y 1.2 caracteristicas y funciones de so
 
Manual de instrucciones
Manual de instruccionesManual de instrucciones
Manual de instrucciones
 
Geopunkt Jurameer Schandelah - Grabungskampagne III - 2016
Geopunkt Jurameer Schandelah - Grabungskampagne III - 2016Geopunkt Jurameer Schandelah - Grabungskampagne III - 2016
Geopunkt Jurameer Schandelah - Grabungskampagne III - 2016
 
Expo edi
Expo ediExpo edi
Expo edi
 
Bildung, Visualität, Subjektivierung - Sichtbarkeiten und Selbstverhältnisse ...
Bildung, Visualität, Subjektivierung - Sichtbarkeiten und Selbstverhältnisse ...Bildung, Visualität, Subjektivierung - Sichtbarkeiten und Selbstverhältnisse ...
Bildung, Visualität, Subjektivierung - Sichtbarkeiten und Selbstverhältnisse ...
 
La libertad
La libertadLa libertad
La libertad
 
Unidad 7
Unidad 7Unidad 7
Unidad 7
 
Nomenclatura de sales5
Nomenclatura de sales5Nomenclatura de sales5
Nomenclatura de sales5
 
Was ist Inkasso?
Was ist Inkasso?Was ist Inkasso?
Was ist Inkasso?
 
Anuncios
AnunciosAnuncios
Anuncios
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
ONG SER
ONG SERONG SER
ONG SER
 
SCM-MechENGTrans
SCM-MechENGTransSCM-MechENGTrans
SCM-MechENGTrans
 
Brochure_NTGmBh
Brochure_NTGmBhBrochure_NTGmBh
Brochure_NTGmBh
 
DER LAUF DES LEBE
DER  LAUF  DES  LEBEDER  LAUF  DES  LEBE
DER LAUF DES LEBE
 
Public seal vertragsmanagement-2011
Public seal vertragsmanagement-2011Public seal vertragsmanagement-2011
Public seal vertragsmanagement-2011
 
Tema 1 -_participacion_de_los_padres
Tema 1 -_participacion_de_los_padresTema 1 -_participacion_de_los_padres
Tema 1 -_participacion_de_los_padres
 
Estudio de mercadeo general
Estudio de mercadeo generalEstudio de mercadeo general
Estudio de mercadeo general
 

Ähnlich wie CSS Seminar

Der Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren ProjektenDer Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren Projekten
OPEN KNOWLEDGE GmbH
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
Jens Grochtdreis
 
CSS Frameworks (09/2008)
CSS Frameworks (09/2008)CSS Frameworks (09/2008)
CSS Frameworks (09/2008)djesse
 
Webdesign
WebdesignWebdesign
WebdesignElli Ge
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
Wordcamp ber-2015-scss
Wordcamp ber-2015-scssWordcamp ber-2015-scss
Wordcamp ber-2015-scss
f_o
 
Objektorientiertes CSS
Objektorientiertes CSSObjektorientiertes CSS
Objektorientiertes CSS
Florian Gutwald
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
Noël Bossart
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
Peter Müller
 
CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11
Noël Bossart
 

Ähnlich wie CSS Seminar (11)

Der Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren ProjektenDer Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren Projekten
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
CSS Frameworks (09/2008)
CSS Frameworks (09/2008)CSS Frameworks (09/2008)
CSS Frameworks (09/2008)
 
Webdesign
WebdesignWebdesign
Webdesign
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Wordcamp ber-2015-scss
Wordcamp ber-2015-scssWordcamp ber-2015-scss
Wordcamp ber-2015-scss
 
Objektorientiertes CSS
Objektorientiertes CSSObjektorientiertes CSS
Objektorientiertes CSS
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11
 

Mehr von tutego

Der C++ Standard
Der C++ StandardDer C++ Standard
Der C++ Standardtutego
 
Schulung jQuery JavaScript-Bibliothek
Schulung jQuery JavaScript-BibliothekSchulung jQuery JavaScript-Bibliothek
Schulung jQuery JavaScript-Bibliothektutego
 
Schulung C++ Boost Bibliotheken
Schulung C++ Boost BibliothekenSchulung C++ Boost Bibliotheken
Schulung C++ Boost Bibliothekentutego
 
SQL-Updates mit der JDBC-API
SQL-Updates mit der JDBC-APISQL-Updates mit der JDBC-API
SQL-Updates mit der JDBC-APItutego
 
Die JSTL Tag-Library
Die JSTL Tag-LibraryDie JSTL Tag-Library
Die JSTL Tag-Librarytutego
 
Fundamentale Muster in Java
Fundamentale Muster in JavaFundamentale Muster in Java
Fundamentale Muster in Javatutego
 
JdbcTemplate aus Spring
JdbcTemplate aus SpringJdbcTemplate aus Spring
JdbcTemplate aus Springtutego
 
Schieberegler und analoge Anzeigen in Swing
Schieberegler und analoge Anzeigen in Swing Schieberegler und analoge Anzeigen in Swing
Schieberegler und analoge Anzeigen in Swing tutego
 
Einführung in den EventBus
Einführung in den EventBusEinführung in den EventBus
Einführung in den EventBus
tutego
 
Erweiteres for (foreach) in Java 5
Erweiteres for (foreach) in Java 5Erweiteres for (foreach) in Java 5
Erweiteres for (foreach) in Java 5tutego
 
Autoboxing in Java 5
Autoboxing in Java 5Autoboxing in Java 5
Autoboxing in Java 5tutego
 

Mehr von tutego (12)

Klassen
KlassenKlassen
Klassen
 
Der C++ Standard
Der C++ StandardDer C++ Standard
Der C++ Standard
 
Schulung jQuery JavaScript-Bibliothek
Schulung jQuery JavaScript-BibliothekSchulung jQuery JavaScript-Bibliothek
Schulung jQuery JavaScript-Bibliothek
 
Schulung C++ Boost Bibliotheken
Schulung C++ Boost BibliothekenSchulung C++ Boost Bibliotheken
Schulung C++ Boost Bibliotheken
 
SQL-Updates mit der JDBC-API
SQL-Updates mit der JDBC-APISQL-Updates mit der JDBC-API
SQL-Updates mit der JDBC-API
 
Die JSTL Tag-Library
Die JSTL Tag-LibraryDie JSTL Tag-Library
Die JSTL Tag-Library
 
Fundamentale Muster in Java
Fundamentale Muster in JavaFundamentale Muster in Java
Fundamentale Muster in Java
 
JdbcTemplate aus Spring
JdbcTemplate aus SpringJdbcTemplate aus Spring
JdbcTemplate aus Spring
 
Schieberegler und analoge Anzeigen in Swing
Schieberegler und analoge Anzeigen in Swing Schieberegler und analoge Anzeigen in Swing
Schieberegler und analoge Anzeigen in Swing
 
Einführung in den EventBus
Einführung in den EventBusEinführung in den EventBus
Einführung in den EventBus
 
Erweiteres for (foreach) in Java 5
Erweiteres for (foreach) in Java 5Erweiteres for (foreach) in Java 5
Erweiteres for (foreach) in Java 5
 
Autoboxing in Java 5
Autoboxing in Java 5Autoboxing in Java 5
Autoboxing in Java 5
 

CSS Seminar

  • 1. Cascading Style Sheets Barrierefrei in die Zukunft 1 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 2. Agenda •  Theoretischer Teil 1.  Einführung 2.  Tools 3.  CSS einbinden 4.  Selektoren, Klassen und ID‘s 5.  Maßeinheiten und Farbangaben 6.  CSS-Eigenschaften 2 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 3. Agenda •  Praktischer Teil (Workshop) 1.  Vorbereitung und Strukturierung des HTML Codes 2.  Sinnvoller Aufbau und Struktur einer CSS-Datei 3.  Positionierung von Inhaltsblöcken ohne Tabellen 4.  Formulargestaltung mit CSS 5.  Print.css – Spezielles CSS zur Formatierung der Druckausgabe 3 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 4. Ziele des Seminars •  Sensibilisierung für das Thema CSS •  Erste praktische Erfahrungen im Umgang mit Cascading Style Sheets •  Motivation zur selbstständigen Festigung und Erweiterung des erworbenen Wissens 4 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 5. 1 | Einführung und Grundlagen Was sind Cascading Style Sheets? 5 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 6. Was sind Cascading Style Sheets? CSS ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente, die vor allem zusammen mit HTML eingesetzt wird. CSS legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll, mit anderen Worten, man trennt den eigentlichen Inhalt von der optischen Gestaltung. Quelle: Wikipedia 6 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 7. Aufbau einer Webseite Interaktion (Javascript) Styling (CSS) Inhalt (HTML) 7 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 8. Das alte Modell 8 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 9. Das alte Modell 9 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 10. Das aktuelle Modell 10 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 11. Vorteile •  Leichter zu editieren •  Schnellerer Seitenaufbau •  Geringes Datenvolumen •  Barrierefreies Webdesign •  Google-freundlich! 11 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 12. Zusammenfassung •  Cascading Style Sheets sind Formatierungen, mit denen sich das Erscheinungsbild einer Website festlegen lässt. •  Diese Formatierungen werden vom eigentlichen Inhalt getrennt. 12 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 13. 6 | CSS-Eigenschaften Das Box Modell 13 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 14. Das Box Modell Beschreibt, wie sich die Breite von Block-Elementen, unter Berücksichtung verschiedener zusätzlicher Style-Angaben berechnen lässt. Wichtig für die pixelgenaue Positionierung von Elementen! 14 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 15. Das Box Modell 15 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 16. Das Box Modell Ein Beispiel: div.box { width:300px; border:1px;! ! ! ! ! !padding: 10px; margin: 10px; }! Tatsächliche Breite: 300px + (2 x 1px) + (2 x 10px) + (2 x 10px) = 342px 16 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 17. Das Box Modell „Box Model Bug“ im Internet Explorer IE 6 addiert Innenabstände (padding) und Rahmenbreite (border) nicht zur Breite hinzu! Tatsächliche Breite im IE: 300px + (2 x 1px) + (2 x 10px) + (2 x 10px) = 320px (!) 17 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  • 18. Typischer Workflow Photoshop-Layout HTML-Rohbau CSS-Entwicklung 18 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009