DIV und SPAN


(letzte Änderung an dieser Seite: 03.08.2010)

Folien



(letzte Synchronisation der PDF-Präsentation: 02.08.2017)

Falls keine PDF-Präsentation zu sehen ist, klicken Sie zum Download hier: Direktdownload PDF-Präsentation

Übungen

Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).

Die aktuelle Übung können Sie hier als txt-File 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.

CSS-Code
<!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:

HTML-Code
<!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).



Nach oben