Web Engineering 1/CSS

Wiki-Quelltext dieser Seite.

{{Ziele|
* Struktur per HTML, Layout per CSS
* CSS ist eine Formatierungssprache
* Durch Selektoren werden Strukturelemente angesprochen
* Markierung von HTML Elementen mittels Klassen und IDs
* Klares Verständnis der Trennung von Inhalt und Gestaltung
|
* Gestaltung von Formularen
* Klar strukturierte Verwendung von Klassen und IDs
* Umgang mit den Strukturierungselementen <tt>div</tt> und <tt>span</tt>
* Verwendung von Selektoren verschiedenster Art
* Intuitiver Umgang mit der CSS Syntax
|
* Auslagerung der Styles in eine CSS Datei
* Entwurf der Spieloberfläche auf einer neuen HTML-Seite
* Klassifizierung der Oberflächenelemente (Analyse der möglichen Zustände eines Zahlenfelds)
* Style-Definition für die verschiedenen Klassen
}}

==Boxmodel==
{|
|style="width: 32em;vertical-align:top;"|<html>
<iframe width="100%" height="270" src="//jsfiddle.net/pw_we1/ojo7o3c3/embedded/css,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
Mit <tt>margin</tt> werden die Abstände vom äußeren Rand zu den umgebenden Elementen festgelegt. Der <tt>border</tt> eines Elements gehört in seiner vollen Breite zum jeweiligen Element dazu. Die <tt>padding</tt> Einstellungen beschreiben den Abstand vom inneren Rand zum den enthaltenen Elementen.
|}

==Selektoren==
TODO: Fiddle Selektoren



{{Projekt|Beispiellösung <document>WE1-P3.zip</document>}}