DIV und SPAN
Folien
Falls keine PDF-Präsentation zu sehen ist: Direktdownload der PDF-Präsentation
Übungen
Zusätzliche Dateien (Bilder, Klassendiagramme, HTML-Vorlagen) finden Sie in der Materialsammlung. Diese Übungen können Sie als txt-Datei herunterladen.
Übungen: CSS - div, span
CSS_13-1: Span-Übungen
Sorgen Sie dafür, dass im folgenden Quelltext das Wort “grün” (und ähnliche) immer in grüner Farbe dargestellt wird, das Wort “blau” (und ähnliche) immer in blauer Farbe.
<p>Das Grün der grünen Bäume unter dem blauen Himmel spiegelt sich in deinen Augen wieder,<br />
Den blauen! Denn blau sind sie, wie der weite<br />
Ozean, der grüne.</p>
CSS_13-2: Gleiche Klasse für div und span
Gegeben sei der Code unten. Halten Sie auf einem Blatt Papier skizzenhaft fest, wie die Ausgabe ungefähr aussehen wird.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Übung div/span</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.hervorhebung {
font-weight : bold;
color : blue;
border : 2px solid red;
padding : 4px;
margin : 20px;
}
</style>
</head>
<body>
<p>Ma quande lingues coalesce, li <span class="hervorhebung">grammatica</span> del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser.</p>
<div class="hervorhebung" >Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser.</div>
</body>
</html>CSS_13-3: Box gestalten
Gegeben sei folgender Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Übung div</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div class="auffaellig">Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilita; de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica.</div>
</body>
</html>Betrachten Sie die Ausgabe im Browser. Ergänzen Sie den Code nun so, dass die Ausgabe aussieht wie im Bild 03css/css13-bild-box-gestalten.png . Beachten Sie das Verhalten bei unterschiedlichen Fenstergrößen (Tipp: Überlegen Sie für jede Himmelsrichtung, ob Sie Prozentwerte oder Pixelwerte benutzen).
