CSS

Aus ProgrammingWiki
< Web Engineering 1
Archivierte Version vom 2017-01-11T20:51:58+00:00. Aktuelle Version
WissenKönnenProjekt
  • 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 div und span
  • 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 style 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 style Tags im head Bereich des HTML Dokuments die Formatierungen anzugeben. Die noch bessere Alternative ist einen eigenständige .css Datei. Diese kann im head Bereich des HTML Dokuments einfach eingebunden werden.

Boxmodel

Mit margin werden die Abstände vom äußeren Rand zu den umgebenden Elementen festgelegt. Der border eines Elements gehört in seiner vollen Breite zum jeweiligen Element dazu. Die padding Einstellungen beschreiben den Abstand vom inneren Rand zu den enthaltenen Elementen.

  • Experimentieren Sie mit den Breiten der jeweiligen Elemente um deren Einfluss zu sehen
  • Legen Sie margin und padding nur für bestimmte Seiten fest
  • Definieren Sie einen border mit abgerundeten Ecken
  • Finden Sie heraus welche Möglichkeien bestehen um mit border einen 3D-Effekt zu erzeugen

Selektoren

Typ, class, id, Beziehung, Pseudo

TODO


Beispiellösung WE1-P3.zip