css einführung css frameworks - se.uni-hannover.de · 14.04.2010 css einführung & css...
Post on 03-Sep-2019
32 Views
Preview:
TRANSCRIPT
14.04.2010
CSS Einführung&
CSS Frameworks
Leif Singerleif.singer@inf.uni-hannover.de
Seminar “Aktuelle Software-Engineering-Praktiken für das World Wide Web”
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?
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Übersicht
• Grundlagen– Selektoren– Einbindung– Positionierung– Probleme
• Basis-Stylesheets
• Domänenspezifische Sprachen für CSS
3
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
GRUNDLAGEN
4
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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*}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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*}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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*
}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Grundlagen
8
• mehrere Tags selektieren
• alle Überschriften in einer serifenlosen Schrift darstellen:
h1, h2, h3, h4, h5, h6 {font-family: sans-serif;
}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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;
}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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>
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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>
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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;
}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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 */
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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>
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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>
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
EINBINDUNG
16
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Einbindung von CSS
17
• “inline”:
• ... wenig sinnvoll: wird schnell unübersichtlich.
<p style=”text-align: right;”>Lorem ipsum dolor sit amet, ...
</p>
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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>
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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>
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Einbindung von CSS
20
• per CSS @import-Direktive– immer zu Beginn eines CSS-Dokuments:
@import url(“style.css”);
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
POSITIONIERUNG
22
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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")
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
CSS Box Model
24
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
CSS Positionierung
25
• Elemente können per float: left und float: right bestimmen, dass sie an folgenden Elementen “kleben”
• Bild und Text, ohne floating
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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;}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
PROBLEME MIT CSS
29
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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 {...}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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;
}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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 ...
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
BASIS-STYLESHEETS
34
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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”, ...
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
DEMO: BASELINE
36
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
DOMÄNENSPEZIFISCHE SPRACHEN FÜR CSS
37
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Domänenspezifische Sprachen für CSS
39
• Verschachtelung von Selektoren
ul#menu { list-style: none;}ul#menu li { display: inline;}ul#menu li a { text-decoration: none;}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Domänenspezifische Sprachen für CSS
40
• Verschachtelung von Selektoren
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Domänenspezifische Sprachen für CSS
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;}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Domänenspezifische Sprachen für CSS
42
• Verschachtelung von Eigenschaften
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Domänenspezifische Sprachen für CSS
• Variablen
43
a { color: #c198f2;}
.
.
.
.
ul#menu { border-color: #c198f2;}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Domänenspezifische Sprachen für CSS
• Variablen
44
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Domänenspezifische Sprachen für CSS
• Arithmetik – bspw. mit Farben
45
a { color: #c198f2;}
ul#menu { border-color: #8f66c0; /* etwas dunkler als die Links */}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Domänenspezifische Sprachen für CSS
• Arithmetik – bspw. mit Farben
46
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Domänenspezifische Sprachen für CSS
• Mixins
47
#sidebar { border: 1px black solid; display: inline; float: left;}
#content img { background-color: #fafafe; display: inline; float: left;}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Domänenspezifische Sprachen für CSS
• Mixins
48
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Domänenspezifische Sprachen für CSS
• 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%;}
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
Domänenspezifische Sprachen für CSS
• Mixins mit Parametern
50
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
DEMO: COMPASSBASIS-STYLESHEETS KOMBINIERT MIT SASS
51
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
ZUSAMMENFASSUNG
52
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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
Leif Singer: CSS Einführung & CSS Frameworks 14.04.2010
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?
top related