Links mit CSS formatieren


(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 - Links formatieren *****

CSS_4-1: Links formatieren

Formatieren Sie die Links im folgenden Text mit einem externen CSS-Stylesheet so:

Default-Status: rote Textfarbe, unterstrichen
Hover-Status: rote Textfarbe, nicht unterstrichen
Active-Status: weiße Textfarbe, rote Hintergrundfarbe, nicht unterstrichen
Besucht-Status: dunkelrote Textfarbe, unterstrichen


CSS-Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mein Lebenslauf</title>
<style type="text/css">
 
.haupttext {
font-family	: Arial, Verdana, sans-serif;
font-size	: 14px;
line-height	: 130%;
width 	: 500px;
margin 	: auto;
border 	: 2px solid green;
padding : 3px 8px 2px 8px;
}
 
</style>
</head>
 
<body>
<div class="haupttext">
	<h1>Mein Lebenslauf</h1>
 
 
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <a href="#" title="Zur Homepage meines frheren Arbeitgebers 'Schmitties Werkstatt'">Lorem ipsum</a> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus <a href="#" title="badische-zeitung.de">est Lorem</a> ipsum dolor sit amet.</p>
 
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo <a href="#" title="Wikipedia: Informatik, Abschnitt Programmierung">duo dolores et ea rebum</a>. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
 
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed <a href="#" title="Zur Homepage meines frheren Arbeitgebers 'Aldi Nord'">diam nonumy eirmod</a> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
 
</div>
 
</body>
</html>
 
Nach oben