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
}}
==Allgemein==
Wie bereits bekannt, erlaubt das <tt>style</tt> Attribut eines HTML Elements erweiterte Formatierungen. Die Syntax des dort definierten Texts entspricht bereits der CSS Syntax. Aber es ist natürlich umständlich und vor allem schlechter Programmierstil, jedem HTML Element seine eigene Formatierung explizit mitzugeben. Die Formatierung sollte generell von der Strukturierung getrennt werden. Eine erste Möglichkeit besteht darin innerhalb eines <tt>style</tt> Tags im <tt>head</tt> Bereich des HTML Dokuments die Formatierungen anzugeben. Die noch bessere Alternative ist einen eigenständige <tt>.css</tt> Datei. Diese kann im <tt>head</tt> Bereich des HTML Dokuments einfach eingebunden werden.
==Boxmodel==
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 zu den enthaltenen Elementen.
{|
|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;"|
* ''Experimentieren Sie mit den Breiten der jeweiligen Elemente um deren Einfluss zu sehen''
* ''Legen Sie <tt>margin</tt> und <tt>padding</tt> nur für bestimmte Seiten fest''
* ''Definieren Sie einen <tt>border</tt> mit abgerundeten Ecken''
* ''Finden Sie heraus welche Möglichkeien bestehen um mit <tt>border</tt> einen 3D-Effekt zu erzeugen''
|}

==Selektoren==
{|
|style="width: 32em;vertical-align:top;"|<html>
<iframe width="100%" height="200" src="//jsfiddle.net/pw_we1/f0twgkd9/embedded/css,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
Typ, class, id, Beziehung, Pseudo

TODO
|}



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