CSS

Aus ProgrammingWiki

Wechseln zu: Navigation, Suche

Wissen Können Projekt
  • 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. Innerhalb geschweifter Klammern werden die Definitionem einem HTML Element zugeordnet.

  • Erzeugen Sie die Datei style.css und übernehmen Sie den head Bereich in ein HTML Dokument
  • Übernehmen Sie die lokale style Definition in die CSS Datei und ändern Sie dort die Farbe
  • Überlegen Sie welche der Definitionen wohl bevorzugt wird und finden Sie heraus warum
  • Verschieben Sie Ihre CSS Datei in einen Unterordner und passen Sie den link entsprechend an

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
  • Versuchen Sie negative Werte für die verschiedenen Breiten zu definieren und machen Sie sich die Bedeutung des Effekts klar

Selektoren

Die im vorherigen Beispiel gezeigten CSS Definitionen wurden dort bestimmten HTML Elementtypen zugeordnet. Dies passierte einfach indem der Tag-Name vor die geschweiften Klammern geschrieben wurde. Da aber natürlich zumeist nicht alle Elemente des gleichen Typs auch gleich formatiert werden sollen, gibt es hier noch sehr viele weitere Möglichkeiten für solche Selektoren. Die verbreitetste Art beruht auf den Definitionen von id und class. Jedem HTML Element kann zur eindeutigen Identifikation ein beliebiger id-Attributwert gegeben werden. Zur Gruppierung von Elementen kann das Attribut class verwendet werden. Soll ein Element mehreren Klassen angehören, so können auch mehrere Klassennamen durch Leerzeichen getrennt dem Attribut zugeordnet werden.

Um in CSS ein Element mit einer bestimmten ID zu selektieren, wird anstelle des Typnamen nun der ID-Bezeichner mit vorangestelltem "#" verwendet. Analog können durch vorangestellten "." Klassen selektiert werden. Selektoren können kombiniert werden indem sie durch "," getrennt hintereinander geschrieben werden. Auch diverse Kombinationen hinsichtlich der HTML Struktur sind möglich.

  • Recherchieren Sie die Funktion des Leerzeichens bei der Kombination von Selektoren
  • Worin liegt der Unterschied zur Kombination mit ">"? Demonstrieren Sie!
  • Warum ist "Element 3" blau? Experimentieren Sie!
  • Definieren Sie für "Element 2" und "Element 3" eine andere Schriftart
  • Machen Sie sich die Bedeutung von Pseudoselektoren klar
  • Fügen Sie einen Link hinzu und nutzen Sie Pseudoselektoren um diesen verschiedenartig zu formatieren

Projekt und weitere Übungen

Mit dem neu erlangten Wissen, können Sie nun alle lokalen Formatierungen aus der Sudoku-Dokumentation entfernen und diese in eine eigene CSS Datei auslagern. Auch die SVG Formatierungen können ausgelagert werden. Die formatierenden Attribute eines Zeichenobjekts können dabei direkt in der CSS Datei verwendet werden.

Erzeugen Sie eine neue HTML Datei und definieren Sie dort die Sudoku-Spieloberfläche. Es bieten sich input Elemente an. Überlegen Sie sich geeignete IDs und Klassen damit Sie die Elemente später gut ansprechen können. Bedenken Sie, dass ein Feld verschiedene Zustände haben kann (wie "Vorgabefeld", "aktuelles Feld" und "Feld über dem sich die Maus befindet") und entsprechend unterschiedlich formatiert sein muss.

Beispiellösung
WE1-P3.zip (0.1 MB)

Mit E-Mails erreicht man sehr viele Kunden. Untersuchungen zeigen, dass der E-Mail-Versand deutlich effektiver ist als Facebook und Twitter zusammen. Deshalb ist die Attraktivität dieses Marketing-Tools wichtig. Anstatt reinen Text zu versenden, erwartet den Kunden ein ansprechendes Design, wobei es keine Rolle spielt, auf welchem Gerät (Handy, Tablet, Laptop) die E-Mails angezeigt werden. Um dies zu erreichen, verwendet man HTML-EMail-Templates. Diese bestehen aus einer Untermenge von HTML und CSS. Javascript oder irgendwelche Frameworks kommen nicht zum Einsatz.

  1. Informieren Sie sich zur Herstellung von HTML-Email-Templates mit folgenden Beiträgen: Nr. 1 und Nr. 2.
  2. Mit dem Interface für HTML-Emails (Dr. M. Hielscher) können Sie sich selbst HTML-Emails zusenden. Hierfür kopieren Sie Ihren entwickelten HTML-Code in das Textfeld und senden das Formular an Ihre eigene Emailadresse. Sie können ein lokal auf Ihrem Laptop gespeichertes Bild auswählen und verwenden, wie es auf der Interface-Seite angegeben ist. Zur schnellen Orientierung finden Sie im Folgenden zwei vollständige Beispiel-HTML-Emails: Beispiel 1 und Beispiel 2 (einfach Email-Adresse oben eintragen und abschicken).
  3. Entwerfen Sie selbst ein einfaches Template, setzen Sie rudimentäres HTML und CSS ein und integrieren Sie ein Bild. Senden Sie sich das Ergebnis zu.
  4. Zusatzaufgabe: Erschließen Sie unterschiedliche Anzeigeformate und Displaygrößen (Media-Queries).
Von „https://programmingwiki.de/Web_Engineering_1/CSS“
Persönliche Werkzeuge