Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Lambda School > [S1L1] User Interfaces 1 > Flashcards

[S1L1] User Interfaces 1 Flashcards

-Semantic HTML -CSS Selector -CSS Specificty

1
Q

Ist Semantic Markup === Meaningful Code?

A
  • Ja, weil:
  • Lesbarkeit für Maschinen und Menschen
  • Neue Developer müssen deinen Code lesen können
  • SEO
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Wie viele h1 Tags sollten auf einer Website sein?

A

-Nur einer, damit der Browser weiß, dass es das wichtigste ist.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Möchte man die meisten Tags oder die wenigsten Tags in semnatic Markup nutzen?

A

-Die kleinste Anzahl an Tags

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Was ist ein Placeholdersymbol für einen href in HTML?

A

-Das Hashtag #

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Was können Tags?

A

-Untereinander neben einem tag stehen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Sollte man Double oder Single Quotes benutzen?

A

-Nicht wichtig, aber man sollte sich für eine Variante entscheiden

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Dürfen h2, h3 etc mehrmals auftauchen in HMTL?

A

Ja

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Was bedeutet * {
color: red;
}

A

Alle Elemente des HTML werden rot gefärbt.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Wie gibt man an, dass alle h1 Tags rot sein sollen?

A

h1 {
color: red;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Wie kann man angeben, dass nur ein h1 in einem header rot sein soll?

A

header h1 {
color: red;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Wie werden die Tag Einschränkungen definiert?

A
  • Sequentiell bei header h1 {} werden zuerst die header gesucht und dann die h1 darin
  • Wenn man die Reihenfolge vertauscht funktioniert dies nicht mehr
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Was ist sans-serif and serif Font?

A
  • Sans bedeutet ohne Serifen

- Serifen ist mit Serifen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Was ist der Unterschied zwischen Font und font-family?

A

-font-family kann z.B. sans-serif und serif definieren

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Wann sollten Fonts gequoted werden?

A

Wenn sie spaces im Namen haben:

-font-family: ‘Comic Sans MS’;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Wie kann man Fonts priorisieren?

A
  • Mit Kommas trennen, aber der letzte Eintrag sollte ein Browser erkennbarer Font sein
  • font-family: ‘Comic Sans MS’, ‘Open Sans’, sans-serif;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Sollte man floats benutzen in CSS?

A

Nein, es ist ein schlechter Layout-Stil.

-Lieber text-align: right;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Wird in CSS ein Element geändert, wenn es allgemein oder spezifisch angesprochen wird?

A

-Immer die spezifischste Regel eines Elementes wird angewandt und als wichtigest angesehen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Wie ist die Reihenfolge der Priorisierung in HTML/CSS?

A

Universal * -> Elements -> Classes -> ID -> Embedded -> Inline -> !important

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Was ist der Unterschied zwischen .intro p und p.intro und p .intro?

A

p .-intro bedeutet es wird ein intro class Element in einem P gesucht <p class="intro">

p.intro bedeutet es wird nur ein Identifier genutzt</p>

20
Q

Was ist der Unterschied zwischen head und header Tag?

A
  • ist für Dokumenten Styling und Links

- ist für den header wie in einer Zeitschrift

21
Q

Was kann man mit CSS text-decoration: erreichen?

A

-Text verzieren mit Unterstrichen oder Überstrichen

22
Q

Was bedeutet CSS display: flex;

A

-Positioniert Elemente in Zeilen bzw. Spalten und verteilt den freien Raum mit justify um alles gleichmäßig anzuordnen

23
Q

Was bedeutet Semantisch in Bezug auf HTML?

A
  • Einem Inhalt semantische Bedeutung geben

- Maschinen und Menschen die Bedeutung des Codes definieren

24
Q

Wofür ist das section Tag gut?

A

-Um andere Tags und Elemente darin einzuschließen und ihnen die semantische Bedeutung einer zusamenhängenden Sektion zu geben

25
Wofür steht h1?
- Für einen Header, also eine Hauptüberschrift auf einer HTML Seite - Es sollte nur einen davon geben - Sehr großer Font
26
Wofür steht das header Tag ?
- Für einen Header wie oben als Hauptüberschrift auf einer Zeitung. - Hier können Logos, Navigation und Button genutzt werden
27
Was ist der Eric-Meyer-Reset?
-Ein quelloffenes Tool/CSS code, welcher den Browser zu einem CSS-Reset zwingt
28
Kann man sich in HTML Custom Tags erstellen wie lambdaSchool?
-Ja, aber es wird empfohlen HTML5 Tags zu nutzen um mehr semantische Bedeutung zu geben.
29
Was bedeutet semantisch?
-Das etwas Bedeutung hat
30
Was ist an einem HTML Tag semantisch?
-Durch die Bennenuing des Tags weiß man sofort wofür es verwendet werden soll.
31
Was wäre ein nicht-semantischer Anatz an HTML Tags?
-Einfach viele divs benutzen und jeweils eine Klasse zuordnen.
32
Was sind die Nachteile, wenn man keine semantischen Tags nutzt?
- Wenig Klarheit - Suchmaschinen ranken die Seite schlechter im SEO - Namenskonventionen der div Klassen ist wahllos - Behinderte Menschen können die Website nicht benutzen
33
Wann sollte man divs benutzen anstatt semantischen HTML?
-Wenn man nicht Bedeutung verliehen möchte, sondern z.B: Platz oder Positionierung schaffen möchte
34
Wozu kann das section Tag genutzt werden?
- Um einer Sektion semantischen Ausdruck zu verleihen - Man kann z.B: zwei divs zum Trennen, in eine section tun - Section Tag splitted den Inhalt der divs in zwei Hälften
35
Wofür stehet CSS?
-Cascading Style Sheets
36
Was für Elemente gibt es in CSS?
- Universal Selectors - Elements - IDs - Classes
37
Was ist der Universal/Wildcard Selector?
* { color: red; } - Betrifft jedes Element - Ist der am wenigsten wichtigste Selector und wird von jedem spezifischerem Selector überschrieben
38
Was ist der Element Selector?
h1 { color: blue; } - Betrifft alle Elemente mit dem Namen - Spezifischer als Universal aber weniger Spezifisch als Klasse oder ID
39
Was ist der Klassen Selector?
.example-class { color: red; } - Betrifft alle Elemente die die Klasse besitzen - Ist spezifischer als ein Element Selector - Kann viele Elemente mit den Klassen betreffen
40
Wie kann man einem HTML Element mehrere Klassen zuweisen?
h1 class="a b huhn ei" -Dabei wird die unterste kaskardierende Regel im CSS auf das Element angewandt .a { color: red; }
41
Was sind in CSS Pseudo-Klassen?
- z.B. wenn man nur das letzte Element anspricht mit h1: last-child { color: red; } - Spezifischer als Klassen oder Element Selectoren
42
Wan benutzt man Pseudoi-Klassen?
- Wenn die Anzahl der Elemente die man mit CSS ansprechen will unbekannt ist - z.B. Javascript entfernt und fügt Elemente hinzu,. daher sind die Elemente dynamisch anzusprechen
43
Was ist der ID Selector?
#example-id { color: red;} - Sollte nur ein spezifisches Element betreffen - Wenn man Klassen nicht nutzen kann sollte man dies nutzen - Werden für das Ansprechen in Javascript benutzt - Spezifischer als Klassen, Pseudo oder Element Selectors
44
Was sind inline-Styles eines HTML Elementes?
h1 stryle="color: red" - Sollte vermieden werden außer innerhalb von Javascript libraries - Ist spezifischer alls alle Selectoren außer !important
45
Was ist ein embedded style in HTML?
style h1 { color: red;} /style -Sollte nicht unbedingt verwendet werden -Benötigt kein externe css Dokument mehr -Weniger spezifisch als inline styles und !important -Performant und kann SEO Vorteile bringen
46
Was ist das spezifischste/wichtigste CSS Elemente?
!important
47
Was sind die Nachteile von embedded style in HTML?
- Durch das Verwenden des style Tags im HTML sehr hohe Kopplung - Wenig Wiederbenutzbarkeit und Wartbarkeit des Codes

Lambda School (59 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions