CAS FEE - HTML-/CSS-Grundlagen
Komplett
Komplett
Welches JavaScript Framework ist am meisten bekannt bei den Studenten des CAS-FEE?
Was passt in das leere Feld?
Web-API / REST
Welche Option bezeichnet NICHT die Single Page App, die das Lernziel des CAS-FEE ist?
Nenne drei Vorteile die Git/GitHub bieten.
- Erlaubt es mehrere Versionen von einem File zu haben.
- Einfaches Wechseln zu einer früheren Version.
- Einfache Zusammenarbeit mit anderen Personen an einem Projekt.
Wie selektiert man NUR die direkten Kinderelemente von den Mutterelementen?
Mit >
Nenne drei Eigenschaften, welche beim CSS nicht vom Parent-Element zum Child-Element vererbt werden?
Antwortsmöglichkeiten: margin, padding, width, border, background-Eigenschaften, position etc. (mehr Antwortsmöglichkeiten hier http://www.thestyleworks.de/basics/inheritance.shtml)
Block vs. Inline: Welcher Punkt passt nicht zu einem Block-Element?
Wie können CSS Selektoren gruppiert werden, um dieselben Eigenschaften-Werte-Paare auf mehrere Selektoren anzuwenden?
Die zu gruppierenden Selektoren werden mit einem...
Es ist keine gute Idee für ein mehrspaltiges Layout mit Header- und Footer-Bereich eine Layout-Tabelle (<table><tr><td>...</td></tr>...</table>) zu verwenden. Welche Nachteile entstehen aus diesem Ansatz?
Mögliche Antworten:
- Der HTML-Code vermittelt nicht welche Bedeutung die einzelnen Bereiche haben. Der Code ist nicht semantisch.
- Screenreader lesen den gesamten Inhalt vor als würde es sich um eine Datentabelle handeln. Das ist für den Benutzer sehr mühsam.
- Nicht semantischer HTML-Code kann negative Auswirkungen auf das Ranking in Suchresultaten haben.
- Tabelle wird erst gerendert wenn sie komplett geladen ist.
Welches der folgenden HTML Tags ist keines der neuen, semantischen HTML5 Elemente?
Nenne drei einfache Typen von CSS Selektoren
- Class selector
- ID selector
- Element selector
Wer ist kein Mitglied der WHATWG?
Welches ist Best Practice um CSS auf HTML anzuwenden?
HTML Standard: Was versteht man unter "void elements"? Nenne zwei Beispiele
Mögliche Antwort:
"void elements" sind immer leer (Syntax erlaubt keinen Inhalt) und können ohne schliessenden tag geschrieben werden.
Mögliche Beispiele:
<area>
<base>
<br>
<col>
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>
Wie lautet der CSS-Selektor für einen Mouseover-Effekt auf einem Link?
Antwort: a:hover
Wie werden die Margins verteilt?
margin: 5em 10em 15em 20em;
CSS Performance: Welches ist der effizienteste Selektor?
wie wird das charset in html 5 deklariert?
Welche Renderengine hat Firefox?
Nenne einen Vorteil von SVG gegenüber Rastergrafiken
mögliche Antworten:
- SVG kann ohne Aliasing (Verpixelung) skaliert werden.
- SVG Primitive sind DOM Elemente und können damit gestyled und mit Eventhandlern versehen werden.
Schreibe einen CSS-Selektor, der nur den "ersten contextual article" aus dem folgenden HTML auswählt.
<main class="featured-articles">
<article>Featured article one</article>
<article>Featured article two</article>
</main>
<aside class="contextual-articles">
<article>Contextual article one</article>
<article>Contextual article two</article>
</aside>
Lösungen:
1) .contextual-articles article:first-child
2) aside article:first-child
CSS: Nenne eine Eigenschaft bei welcher es eine Kurzschreibweise gibt
- border
- padding
- margin
- background
- font
- list-style
Und ein Beispiel:
background: url(img/image.png) no-repeat top left;
Wie ist die Reihenfolge der CSS-Kaskade bezüglich importance (Wichtigkeit)?
Antwort:
1. User agent declarations (Browser interne Style-Definitionen)
2. User declarations (Im Browser festgelegte, Benutzerspezifische Style-Definitionen)
3. Author declarations (Style-Definitionen vom Seiten-Autor)
4. Author !important declarations
5. User !important declarations
Der letzte in der Kaskade "gewinnt" jeweils beim Überschreiben von Definitionen.
Welche Reihenfolge der Importance Rules gilt (letzte übersteuert)?
Welche Attribut-Definition ist falsch?
Warum kann das Attribut role="navigation" im tag <nav> Sinn ergeben?
Welcher ist der korrekte Doctype für standard HTML5?
Wieso gibt es verschiedene doctypes?
Antwrot: Die Angabe des Doctypes im Kopf des XHTML-Documents vereinbart die HTML-Version und teilt dem Browser mit, wie "sauber" das Dokument angelegt wird.
Welche Nachteile entstehen beim Einsatz von "Inline-Style"-Definitionen im HTML?
Antwort: schlechte Wartbarkeit, Durchmischung von Markup und Style im Code, schlechtere Performance
Wie schreibt man im CSS Comments? Mache ein Beispiel.
Antwort: /* Dieser Text wird nicht vom Browser gerendert */
Die Specificity eines Selektors wird berechnet, wenn
-
- 1 / 30
-
Flashcards
Welches JavaScript Framework ist am meisten bekannt bei den Studenten des CAS-FEE?
Was passt in das leere Feld?
Web-API / REST
Welche Option bezeichnet NICHT die Single Page App, die das Lernziel des CAS-FEE ist?
Nenne drei Vorteile die Git/GitHub bieten.
- Erlaubt es mehrere Versionen von einem File zu haben.
- Einfaches Wechseln zu einer früheren Version.
- Einfache Zusammenarbeit mit anderen Personen an einem Projekt.
Wie selektiert man NUR die direkten Kinderelemente von den Mutterelementen?
Mit >
Nenne drei Eigenschaften, welche beim CSS nicht vom Parent-Element zum Child-Element vererbt werden?
Antwortsmöglichkeiten: margin, padding, width, border, background-Eigenschaften, position etc. (mehr Antwortsmöglichkeiten hier http://www.thestyleworks.de/basics/inheritance.shtml)
Block vs. Inline: Welcher Punkt passt nicht zu einem Block-Element?
Wie können CSS Selektoren gruppiert werden, um dieselben Eigenschaften-Werte-Paare auf mehrere Selektoren anzuwenden?
Die zu gruppierenden Selektoren werden mit einem...
Es ist keine gute Idee für ein mehrspaltiges Layout mit Header- und Footer-Bereich eine Layout-Tabelle (<table><tr><td>...</td></tr>...</table>) zu verwenden. Welche Nachteile entstehen aus diesem Ansatz?
Mögliche Antworten:
- Der HTML-Code vermittelt nicht welche Bedeutung die einzelnen Bereiche haben. Der Code ist nicht semantisch.
- Screenreader lesen den gesamten Inhalt vor als würde es sich um eine Datentabelle handeln. Das ist für den Benutzer sehr mühsam.
- Nicht semantischer HTML-Code kann negative Auswirkungen auf das Ranking in Suchresultaten haben.
- Tabelle wird erst gerendert wenn sie komplett geladen ist.
Welches der folgenden HTML Tags ist keines der neuen, semantischen HTML5 Elemente?
Nenne drei einfache Typen von CSS Selektoren
- Class selector
- ID selector
- Element selector
Wer ist kein Mitglied der WHATWG?
Welches ist Best Practice um CSS auf HTML anzuwenden?
HTML Standard: Was versteht man unter "void elements"? Nenne zwei Beispiele
Mögliche Antwort:
"void elements" sind immer leer (Syntax erlaubt keinen Inhalt) und können ohne schliessenden tag geschrieben werden.
Mögliche Beispiele:
<area>
<base>
<br>
<col>
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>
Wie lautet der CSS-Selektor für einen Mouseover-Effekt auf einem Link?
Antwort: a:hover
Wie werden die Margins verteilt?
margin: 5em 10em 15em 20em;
CSS Performance: Welches ist der effizienteste Selektor?
wie wird das charset in html 5 deklariert?
Welche Renderengine hat Firefox?
Nenne einen Vorteil von SVG gegenüber Rastergrafiken
mögliche Antworten:
- SVG kann ohne Aliasing (Verpixelung) skaliert werden.
- SVG Primitive sind DOM Elemente und können damit gestyled und mit Eventhandlern versehen werden.
Schreibe einen CSS-Selektor, der nur den "ersten contextual article" aus dem folgenden HTML auswählt.
<main class="featured-articles">
<article>Featured article one</article>
<article>Featured article two</article>
</main>
<aside class="contextual-articles">
<article>Contextual article one</article>
<article>Contextual article two</article>
</aside>
Lösungen:
1) .contextual-articles article:first-child
2) aside article:first-child
CSS: Nenne eine Eigenschaft bei welcher es eine Kurzschreibweise gibt
- border
- padding
- margin
- background
- font
- list-style
Und ein Beispiel:
background: url(img/image.png) no-repeat top left;
Wie ist die Reihenfolge der CSS-Kaskade bezüglich importance (Wichtigkeit)?
Antwort:
1. User agent declarations (Browser interne Style-Definitionen)
2. User declarations (Im Browser festgelegte, Benutzerspezifische Style-Definitionen)
3. Author declarations (Style-Definitionen vom Seiten-Autor)
4. Author !important declarations
5. User !important declarations
Der letzte in der Kaskade "gewinnt" jeweils beim Überschreiben von Definitionen.
Welche Reihenfolge der Importance Rules gilt (letzte übersteuert)?
Welche Attribut-Definition ist falsch?
Warum kann das Attribut role="navigation" im tag <nav> Sinn ergeben?
Welcher ist der korrekte Doctype für standard HTML5?
Wieso gibt es verschiedene doctypes?
Antwrot: Die Angabe des Doctypes im Kopf des XHTML-Documents vereinbart die HTML-Version und teilt dem Browser mit, wie "sauber" das Dokument angelegt wird.
Welche Nachteile entstehen beim Einsatz von "Inline-Style"-Definitionen im HTML?
Antwort: schlechte Wartbarkeit, Durchmischung von Markup und Style im Code, schlechtere Performance
Wie schreibt man im CSS Comments? Mache ein Beispiel.
Antwort: /* Dieser Text wird nicht vom Browser gerendert */
Die Specificity eines Selektors wird berechnet, wenn
