Warning: include_once(/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php): failed to open stream: No such file or directory in /var/www/html/fields/dbp11/local/config.php on line 4

Warning: include_once(): Failed opening '/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php' for inclusion (include_path='.:/opt/php/lib/php') in /var/www/html/fields/dbp11/local/config.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/fields/dbp11/local/config.php:4) in /var/www/html/pmwiki-2.2.86/pmwiki.php on line 1250
Datenbankpraktikum SS 2011 - Frontend - CSS

CSS

Cascading Style Sheets (CSS) werden verwendet, um Inhalt und Layout einer Website zu Trennen. Im HTML-Dokument steht ausschließlich der strukturierte Inhalt. Dieser wird mittels CSS in einer externen Datei formatiert. Durch diese Trennung wird eine einheitliche Seitengestaltung vereinfacht: Identische Elemente brauchen nur einmal in CSS formatiert werden, anstatt bei jeder Deklaration und das Layout kann für mehrere Seiten verwendet werden und einfach ausgetauscht werden.
In CSS werden HTML-Elemente mit ihrem Namen oder über Klassen (class) oder Instanz (id) Bezeichner identifiziert. Um geschachtelte HTML-Elemente auszuwählen, werden diese Bezeichner entsprechen Kaskadiert. Formatierungen für ein Element gelten auch für alle dessen Kinder, sofern diese auch entsprechend formatiert werden können und nicht explizit anders formatiert wurden.

CSS Version 3

CSS Version 3 bietet eine Reihe neuer Formatierungsmöglichkeiten, von denen die folgenden für die Gestaltung der Mitfahrzentrale verwendet wurden:
Durch Text- und Elementschatten wirken Elemente plastischer und Kanten wirken weniger hart.

box-shadow: 10px 10px 5px #888;
text-shadow: 2px 2px 2px #666;

Durch Pseudoelemente könne HTML-Elemente nach speziellen Regeln ausgewählt werden, um zum Beispiel den Hintergrund von Tabellenzeilen abwechselnd unterschiedlich einzufärben.

tr:nth-child(2n) {
	background-color: #7C82BA;
}
tr:nth-child(2n+1) {
	background-color: #B8BBDA;
}

Außerdem kann mit CSS3 auch der Zeilenumbruch innerhalb von Wörtern erzwungen werden, sollte z.B. vom Benutzer ein sehr langes Wort eingegeben worden sein, das ansonsten das Layout ungewollt verändern würde.

word-wrap: break-word;

Farbverläufe werden u.A. verwendet, damit Schaltflächen plastisch wirken, beispielsweise die Navigationsleiste. Die meisten Browser unterstützen diese CSS-Eigenschaft nicht direkt, stellen aber alle eine eigene Version bereit (z.B. Google Chrome).

background: linear-gradient(top, white, black);
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));

SCSS

Das Layout wurde nicht direkt in CSS erstellt, sondern in SCSS. Dieses bietet gegenüber CSS den Vorteil der Verwendung von Variablen für häufig verwendete Attribute und die Schachtelung von HTML-Elementen. Beides ist im nachfolgenden Beispielcode zu erkennen. Beim Aufruf der Website wird aus dem SCSS automatisch CSS generiert.

Beschreibung in SCSS

$farbe = green;
#main {
	position: relative;
	z-index: 0;
	.other-site {
		position: absolute;
		width: 70%;
		a:last-child {
			color: $farbe;
		}
	}
	.form_table {
		border: solid 2px;
		td {
			color: $farbe;
		}
		tr:first-child td {
			padding-top: 0.3em;
		}
	}
}

Daraus generiertes CSS

#main {
	position: relative;
	z-index: 0;
}
#main .other-site {
	position: absolute;
	width: 70%;
}
#main .other-site a:last-child {
	color: green;
}
#main .form_table {
	border: solid 2px;
}
#main .form_table td {
	color: green;
}
#main .form_table tr:first-child td {
	padding-top: 0.3em;
}

Sprockets

Der Aufbau einer Website in Ruby on Rails besteht aus einer Hauptseite, in die jeweils entsprechende Teilseiten eingebettet werden. Um diesem Aufbau auch in CSS zu folgen, wird Sprockets verwendet. Dabei handelt es sich um eine Erweiterung, die aus vielen Dateien Zeilenweise eine große Datei zusammensetzt. Dabei muss in der Hauptdatei mithilfe von Regeln festgelegt werden, in welcher Reihenfolge die anderen Dateien hinzugefügt werden sollen. Das Prinzip zeigt folgende Grafik:


Page last modified on August 22, 2013, at 11:16 AM