CSS Einführung CSS Frameworks - se.uni-hannover.de · 14.04.2010 CSS Einführung & CSS Frameworks Leif Singer [email protected] Seminar “Aktuelle Software-Engineering-Praktiken

14.04.2010

CSS Einführung&

CSS Frameworks

Leif [email protected]

Seminar “Aktuelle Software-Engineering-Praktiken für das World Wide Web”

mailto:[email protected]

mailto:[email protected]

Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010

Frage

2

• Anfragen von Kommilitonen: mit reinsetzen

• Ihr entscheidet:• “Gasthörer” erwünscht / nicht erwünscht?


Übersicht

• Grundlagen– Selektoren– Einbindung– Positionierung– Probleme

• Basis-Stylesheets

• Domänenspezifische Sprachen für CSS

3


GRUNDLAGEN

4


Grundlagen

5

• HTML strukturiert Inhalte– sehr allgemeine Tags, wenig Darstellung ableitbar (“Tabelle”, “Liste”)

• CSS sorgt für Darstellung– Farben, Schriften, Hintergründe– Rahmen, Abstände– Positionierung

• CSS hat folgende Form:selector {declarations*}


Grundlagen

6

• ein Selektor sucht HTML-Elemente aus• Deklarationen ändern die Eigenschaften der selektieren

Elemente

• Schriftfarbe für alle Überschriften vom Typ “h1” auf weiß* setzen:

* hexadezimal “FFFFFF”, abgekürzt “FFF”

h1 {color: #fff;}

selector {declarations*}


Grundlagen

7

• ein Selektor sucht HTML-Elemente aus• Deklarationen ändern die Eigenschaften der selektieren

Elemente

• alle Links mit einer schwarzen, gestrichelten Linie mit einem Pixel Breite umranden, aber nur oben:

a {border-top: 1px solid #000;

}

selector {declarations*

}


Grundlagen

8

• mehrere Tags selektieren

• alle Überschriften in einer serifenlosen Schrift darstellen:

h1, h2, h3, h4, h5, h6 {font-family: sans-serif;

}


Grundlagen

9

• Verschachtelung berücksichtigen

• alle Bilder, die sich in Absätzen befinden, sollen den Text rechts* um sich herumfliessen lassen:

* das Bild “schwebt” links vom Text

p img {float: left;

}


Grundlagen

10

• Verschachtelung 2: nur direkte Nachfahren

• alle Links, die sich direkt in einer Tabellenzelle befinden, grün einfärben:

• passt auf ...

td > a {color: #0c0;

}

<td><a href=”#”>Color me green!</a>

</td>


Grundlagen

11

• Verschachtelung 2: nur direkte Nachfahren

• alle Links, die sich direkt in einer Tabellenzelle befinden, grün einfärben:

• passt nicht auf ...

td > a {color: #0c0;

}

<td><p><a href=”#”>Can I haz green?</a>

</p></td>


Grundlagen

12

• Pseudo-Klassen

• alle Links grün einfärben, wenn sich die Maus über ihnen befindet – sonst rot:

a:link {color: red;

}a:visited { /* breits besucht */color: red;

}a:hover { /* Maus darüber */color: green;

}a:active { /* beim Klicken */color: red;

}


Grundlagen

13

• weitere Pseudo-Klassen sind ...

:first-child/* das erste Kind vom angegeben Typ */

p:first-child i/* i-Elemente in den ersten p-Elementen */

p i:first-child/* die ersten i-Elemente in allen p-Elementen */

:focus/* Elemente, die Tastatur-Fokus haben */

:lang/* Elemente, die einer bestimmten Sprache zugeordnet sind */


Grundlagen

14

• Definition und Verwendung von Klassen

• alle Tabellenzellen der Klasse “number” sollen ihren Inhalt rechtsbündig ausrichten:

• HTML dazu:

td.number {text-align: right;

}

<td class=”number”>23

</td><td>Glas Milch

</td>


Grundlagen

15

• Definition und Verwendung von eindeutigen IDs

• die Links in der Liste mit der ID “navigation” sollen nicht unterstrichen sein:

• HTML dazu:

ul#navigation a {text-decoration: none;

}

<ul id=”navigation”><li><a href=”index.html”>Startseite</a></li><li><a href=”imprint.html”>Impressum</a></li>

</ul>


EINBINDUNG

16


Einbindung von CSS

17

• “inline”:

• ... wenig sinnvoll: wird schnell unübersichtlich.

<p style=”text-align: right;”>Lorem ipsum dolor sit amet, ...

</p>


Einbindung von CSS

18

• per <style> im <head>:

• ebenfalls nicht so sinnvoll: wird mit jeder Seite neu geladen.

<head><style type="text/css">a {text-decoration: none;

}</style>

</head>


Einbindung von CSS

19

• per <link> im <head>:

• Super: wird nur einmal vom Browser geladen, liegt dann im Cache.

<head><link rel="stylesheet" type="text/css" href="style-print.css" media=”print” />

</head>


Einbindung von CSS

20

• per CSS @import-Direktive– immer zu Beginn eines CSS-Dokuments:

@import url(“style.css”);


Einbindung von CSS

21

• sinnvolle Auslagerung und Aufteilung möglich

• Organisation von Stylesheets ...– für verschiedene Medien (screen, handheld, print, ...)

• neu: CSS Media Queries ...‣ media="only screen and (max-device width:480px)"

– allgemeine CI bis seitenspezifische Styles– thematisch unterteilt– für verschiedene Browser

• Ladezeiten– importierte oder per <link> geladene Stylesheets müssen nur einmal

geladen werden, sind dann im Cache verfügbar

• Achtung – MSIE: maximal 31 Stylesheets je Datei laden


POSITIONIERUNG

22


CSS Positionierung

23

• es gibt zwei Arten von Elementen: block und inline

• inline-Elemente ...– nehmen sich so viel Platz wie sie brauchen

• block-Elemente ...– nehmen horizontal die ganze Breite (des Elternelements) ein– forcieren einen Zeilenumbruch

• interessant für Layouts: block-Elemente– Position und Dimensionen per CSS frei bestimmbar– Standard-Element für Positionierung: div (division – Unterteilung, Sektor)

Breite einer Box: “linke innere Seite des Rahmensbis rechts innere Seite des Rahmens”

... verschiedene Browser interpretieren das natürlich verschieden.

Inhalt

Padding

Margin

Rahmen ("border")


CSS Box Model

24


CSS Positionierung

25

• Elemente können per float: left und float: right bestimmen, dass sie an folgenden Elementen “kleben”

• Bild und Text, ohne floating


CSS Positionierung

26

• Elemente können per float: left und float: right bestimmen, dass sie an folgenden Elementen “kleben”

• Bild mit float: left – “klebt” links am Text– folgende Elemente, die nicht kleben möchten, sagen clear: left|right|both


CSS Positionierung

27

• relative Positionierung– Position nur relativ zur “natürlichen” Position “verrücken”– drücken weiterhin andere Elemente weg

• absolute Positionierung– Elemente nehmen relativ zu anderen keinen Platz mehr ein– schlecht für Layouts, die eben dieses Verhalten benötigen

... {position: absolute; top: 10px; right: 20px;}

... {position: relative; left: -20px;}


CSS Positionierung

• das Box Model ist zwar mächtig, aber nicht intuitiv– floating beeinflusst alle folgenden Elemente– Zentrierung über Trick mit dem Rand (margin)– vertikale Zentrierung noch umständlicher– Kästen, die eine Mindesthöhe haben, aber dennoch bei mehr Inhalt

mitwachsen – ebenfalls sehr umständlich (bspw. “Sidebars”)

• nicht zu vergessen: Unterschiede zwischen Browsern

• viel einfacheres Denkmodell: Zeilen und Spalten– passt sehr gut für sehr viele Fälle– in den 90ern mit Tabellen umgesetzt – aber dafür sind sie nicht da

28


PROBLEME MIT CSS

29


Probleme mit CSS

30

• keine Verschachtelung– Lesbarkeit leidet

• viele überflüssige Zeichen ...

ul#menu {...}ul#menu li {...}ul#menu li a {...}ul#menu li a:hover {...}ul#menu li a#active {...}ul#menu li a#active:hover {...}


Probleme mit CSS

31

• keine Variablen oder zumindest Konstanten– Farben einheitlich ändern

• hier soll der Hintergrund der Seite etwas dunkler sein als der Hintergrund des Inhalts– Änderungen an der einen Farbe bedingen Änderungen an der anderen– das sollte einfacher gehen: “etwas dunkler” kann man auch in Code

ausdrücken! – ... aber nicht in CSS.

body {background-color: #cc9900;

}div#content {background-color: #ffcc00;

}


Probleme mit CSS

32

• Positionierung umständlich– Box Model & Browserunterschiede– man löst immer wieder dieselben Probleme ...– Wieso das nicht einmal browserunabhängig für 99% der Anwendungsfälle

lösen?

• ... zwei Lösungsansätze:– Basis-Stylesheets

• Positionierung, aber auch Browserunterschiede, Typographie, Druckansicht– DSLs für CSS

• Lesbarkeit, Variablen, Redundanzen entfernen

‣ und viele Projekte ...


BASIS-STYLESHEETS

34


Basis-Stylesheets

35

• Hilfe bei Positionierung durch fertige Gitter

• “CSS Resets”

• professionelle Typographie

• konsistente Formulare

• vernünftige Voreinstellungen für den Druck

• “960 Grid System”, “Blueprint”, “Baseline”, ...


DEMO: BASELINE

36


DOMÄNENSPEZIFISCHE SPRACHEN FÜR CSS

37


Domänenspezifische Sprachen für CSS

38

• Sass kompiliert von einer CSS-artigen Sprache nach CSS– Verschachtelung, Variablen, Arithmetik, Mixins– @import wird durch Kompilierung aufgelöst – Anzahl der Dateien egal

• Compass verwendet Sass, unterstützt Basis-Stylesheets– bpsw. Blueprint

• Plugins für diverse serverseitige Frameworks– Ruby on Rails, Wordpress, ...– ... oder einfach beim Entwickeln immer kompilieren lassen



39

• Verschachtelung von Selektoren

ul#menu { list-style: none;}ul#menu li { display: inline;}ul#menu li a { text-decoration: none;}



40

• Verschachtelung von Selektoren



41

• Verschachtelung von Eigenschaften

div { border-top: 1px #000 solid; border-bottom: 1px #000 solid; border-left: 2px #f00 solid; border-right: 2px #f00 solid;}



42

• Verschachtelung von Eigenschaften



• Variablen

43

a { color: #c198f2;}

.

.

.

.

ul#menu { border-color: #c198f2;}



• Variablen

44



• Arithmetik – bspw. mit Farben

45

a { color: #c198f2;}

ul#menu { border-color: #8f66c0; /* etwas dunkler als die Links */}



• Arithmetik – bspw. mit Farben

46



• Mixins

47

#sidebar { border: 1px black solid; display: inline; float: left;}

#content img { background-color: #fafafe; display: inline; float: left;}



• Mixins

48



• Mixins mit Parametern

49

#header h1 { text-indent: -9999em; overflow: hidden; background-image: image_url(/images/logo.png); background-repeat: no-repeat; background-position: 50% 50%;}

li#overview { text-indent: -9999em; overflow: hidden; background-image: image_url(/images/overview.png); background-repeat: no-repeat; background-position: 20% 50%;}



• Mixins mit Parametern

50


DEMO: COMPASSBASIS-STYLESHEETS KOMBINIERT MIT SASS

51


ZUSAMMENFASSUNG

52


Zusammenfassung

53

• CSS Frameworks sind Abstraktionen auf CSS ...

• stellen fertige Lösungen bereit– Typographie, Formularelemente, ...

• stellen fertige Patterns bereit– insbesondere für Positionierung

• gleichen Schwächen der Sprache aus– verbesserte Lesbarkeit durch Verschachtelung– leichtere Änderungen durch Variablen und Farben-Arithmetik– Modularisierung durch Mixins


Zusammenfassung

54

• Ist der Mehraufwand gerechtfertigt? Für welche Aufgaben?

• Welche Ergänzungen sind sinnvoll? Welche nicht?

• Wer würde etwas davon selbst verwenden wollen?

Documents

CSS Einführung CSS Frameworks - se.uni-hannover.de · 14.04.2010 CSS Einführung & CSS Frameworks Leif Singer [email protected] Seminar “Aktuelle Software-Engineering-Praktiken