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

Tipp: Der Übersichtlichkeit halber empfiehlt es sich oft, die Kommentare im Stylesheet grafisch zu markieren, z.B.

/* ------------------ Header ----------------- */

Ü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 - Kommentare *****

CSS_6-1: CSS-Definitionen kommentieren

Kommentieren Sie die Stilangaben des folgenden Dokuments und verwenden Sie dabei diese Texte:
• zentrale Definitionen fuer Inhaltsbereich
• Fehlermeldungen und Systemmeldungen
• rechte Spalte
• Quicklinks – Schnellauswahl m. rotem Text
• Statistiken und Tabellen

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" xml:lang="de-de" lang="de-de" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="robots" content="noindex, nofollow" /> <title>Informationen zu CSS</title> <link href="textpattern.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="textpattern.js"></script> <script type="text/javascript"> <!--   var cookieEnabled = checkCookies();   if (!cookieEnabled) { confirm('Für die Benutzung von Textpattern muss der Browser Cookies akzeptieren.'); }   function poweredit(elm) { var something = elm.options[elm.selectedIndex].value;   // Add another chunk of HTML var pjs = document.getElementById('js');   if (pjs == null) { var br = document.createElement('br'); elm.parentNode.appendChild(br);   pjs = document.createElement('P'); pjs.setAttribute('id','js'); elm.parentNode.appendChild(pjs); }   if (pjs.style.display == 'none' || pjs.style.display == '') { pjs.style.display = 'block'; }   if (something != '') { switch (something) { default: pjs.style.display = 'none'; break; } }   return false; }   addEvent(window, 'load', cleanSelects); --> </script> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> div#quicklink { border: 3px solid #ffcc33; padding: 0.5em; background-color: white; position: absolute; z-order: 999; top: 7em; right: 1em; width: auto; height: auto; max-height: 90%; max-width: 75em; }   div#quicklink div { overflow: auto; }   div#quicklink #ql-close { position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; padding: 0px; background-color: #c66; color: #fff; }   div#hauptbereich #ql-help { position: absolute; right: 2.5em; top: 4px; }   div#hauptbereich table { width: 100%; margin-top: 0.5em; table-layout: fixed; } div#hauptbereich .ql-id, div#quicklink .ql-url { display: none; }   div#hauptbereich td, div#quicklink th { overflow: hidden; }   div#quicklink .ql-title, div#quicklink .ql-teaser { width: 15em; }   div#spalte_rechts .ql-section { width: 6em; }   div#spalte_rechts .ql-posted, div#quicklink .ql-lastmod { width: 7em; }   div#spalte_rechts .ql-category1, div#quicklink .ql-category2 { width: 8em; }   div#tabelle_statistik tr.odd { background-color: #f8f8ff; }   div#tabelle_statistik td { padding: 0.2em 0; }   div#tabelle_statistik th { padding: 0.2em 0.2em; }   div#tabelle_statistik th a.asc { background: transparent url(txp_img/arrowupdn.gif) no-repeat right 2px; padding-right: 14px; }   div#tabelle_statistik th a.desc { background: transparent url(txp_img/arrowupdn.gif) no-repeat right -18px; padding-right: 14px; }   #fehlermeldung { position: absolute; top: 0; right: 0; padding: 0.5em 2em; }   #fehlermeldung-msg.success { color: white; background-color: #8c8; }   #fehlermeldung-msg.failure { color: white; font-weight: bold; background-color: #f00; } </style> </head>