Links mit CSS formatieren
Falls über diesem Text keine PDF-Präsentation zu sehen ist, wurde diese von Ihrem Browser direkt runtergeladen (wenn Sie z.B. mit Safari@Mac surfen). Sie könnnen zum Download auch hier klicken: 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>