Kommentare

Folien Übungen #Webentwicklung #CSS Stand 03.08.2010

Folien

Falls keine PDF-Präsentation zu sehen ist: Direktdownload der PDF-Präsentation

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

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

Übungen

Zusätzliche Dateien (Bilder, Klassendiagramme, HTML-Vorlagen) finden Sie in der Materialsammlung. Diese Übungen können Sie als txt-Datei 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

<!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>