html-css-basic

Question 1

Wie werden diese Selectors bezeichnet?

h1, h2, h3, h4, h6 {
font-size: 16px;
}

body, html {
   margin: 0;
}
#sitebar, #footer {
   background-color: red;
}

Answer 1

group-selector

Mehrere selectors mit gleichen Eigenschaften werden durch Kommas getrennt und zu einer Gruppe zusammenfasst.

Question 2

Wie starte ich ein Projekt in Espresso?

Answer 2

In Espresso
1. einen neues Projekt anlegen.
Dafür muss ein Projektfolder angelegt und ausgewählt werden, in den alle zukünftigen Projektdateien und Folder hineinkommen.

Question 3

Wie sieht das Grundgerüst einer HTML-Seite aus?

Question 4

Wie nennt man diese selectors?

body {
font-family: helvetica;
}

h1 {
font-size: 16px;
}

Answer 4

Tag-Selector

Stylen einen Html-Tag wie body oder h1.

Question 5

Wie können mehrere class-selectors kombiniert werden?

Answer 5

Classes mit Leerzeichen am Element auflisten.

<h1>…</h1>

.head { …}
.big {…}
.light{ …}

Question 6

Wie kann der Abstand vom Text zum Rand vergrößert werden?

<div>eine Esel kommt selten allein</div>

mit

.box {
width: 200px;
border: 1px solid red;
}

Answer 6

padding zufügen

.box {
   padding: 20px;
   width:200px;
   border: 1px solid red;
}

Question 7

Wie erleichtere ich mir in Espresso ein Grundgerüst für eine HTML-Datei zu erstellen?

Answer 7

1. Espresso neues File öffnen
2. Abspeichern mit korrekter Endung .html
3. Snippet Actions öffnen, click auf html 5 doc

Question 8

Werden alls CSS-Styles im DOM vererbt?

vererben: CSS-Eigenschaft des parent-element werden automatisch auf die child-elements angewendet.

Answer 8

Nein! Nur wenn es Sinn macht.

Vererbt werden Schrifteigenschaften
Nicht vererbt werden Abstände, Ränder, Positionierungen

Question 9

Welche Regel gilt für die Benennung von Ordner und Dateien?

Answer 9

alles klein schreiben
keine Sonderzeichen wie ä, ö, …
keine Leerzeichen

Dateiendung für Dateien .html oder .htm

Question 10

Welche Farbe und Schriftgröße hat diese Überschrift?

<h1>Überschrift</h1>

h1 {
   color: blue;
   font-size: 28px;
}
.big {
   color: yellow;
   font-size: 36px
}
.light {   
    color: red;
}

Answer 10

font-size: 36px;

color: red;

Question 11

Welche Default-CSS-Werte für 
display: ?
height: ?
width: ?
haben Elemente wie div, h1 oder p?

Answer 11

display: block;
width: 100%;
height: auto;

Question 12

Welche Default-CSS-Eigenschaften haben divs für height und width?

Answer 12

width: 100%;
height: auto;

Question 13

Welche CSS-Einheiten für Größenangaben haben wir kennengelernt?

Answer 13

Pixel —> width: 200px;

Prozent —> width: 100%;

Question 14

Was muss ich zwingend bei der Verwendung des id-selectors beachten?

#sitebar {
   background-color: grey;
}

Answer 14

Der id-selector darf genau für ein Element im DOM (HTML-Struktur) verwendet werden. Der ID-selector ist unique.

<div> …</div>

Question 15

Was ist der Fehler, wenn in Espresso die Snippet-Palette leer ist?

Answer 15

Das File wurde nicht abgespeichert oder nicht mit der richtigen Endung .html.

Question 16

Was ist das besondere an der Vorschau von Espresso?

Answer 16

Die Vorschau funktioniert “live” ohne speichern der Datei.

Question 17

Was heisst DOM?

Answer 17

Document Object Model

DOM ist der Baum der HTML-Elemente, der Strutkur der Seite.

Question 18

Warum sollten sie unbedingt die Autovervollständigung von Espresso nutzen?

Answer 18

Fehler bei der Eingabe vermeiden und Geschwindigkeit.

Question 19

Warum sollten bestimmte CSS-Styles reseted werden?

Bitte ein Beispiel angeben.

Answer 19

Browser definieren HTML-Tags mit bestimmten Styles, die verwirrend stören und einfach unpraktisch sind.

Beispiele
body => hat eine css margin-property
li => hat eine css lyst-style-property
kein Tag hat the box-resizing-property

also einfach ein file mit reset.css

body, ul, li {
padding:0;
margin: 0;
}

li {
list-style:none
}
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:after,
*:before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: inherit;
}

Question 20

Warum sind class-selektors versus tag-selectors wesentlich praktikabler einsetzbar?

Answer 20

Tag-selectors stylen immer alle entsprechenden Elemente dieser Gruppe. Nur mit class-selectors können Elemente individuell gestylt werden.

p {
 font-size: 16px
}
.paragraph-1 {
  font-size: bold
}

Question 21

Warum kann ein Element dass width: 100% definiert ist, nicht mit margin: 0 auto zentriert werden?

Answer 21

Da bei 100% Breite links und rechts kein Platz zum zentrieren ist.

Question 22

Warum haben div-Elements im body-element einen Abstand zum Browserrand?

body
|_div
|_div

Answer 22

Das body-element hat einen Default-Wert für margin.

Question 23

Ein Liste: ul kennzeichnet die liste und li die einzelnen Punkte der Liste 
<ul>
   <li>punkt 1</li>
   <li>punkt 2</li>
   <li>punkt 3</li>
</ul>

Answer 23

Ein Liste: ul kennzeichnet die liste und li die einzelnen Punkte der Liste 
<ul>
   <li>punkt 1</li>
   <li>punkt 2</li>
   <li>punkt 3</li>
</ul>

Question 24

Mit welcher CSS-Eigenschaft kann ein element nicht angezeigt werden / vom DOM ausgeblendet werden?

<div>mich siehst du nicht</div>

Answer 24

.away {
display: none;
}

Question 25

Können wir mit HTML gestalten?

Answer 25

Nein! HTML ist die Struktur eine Webseite. Gestaltet wird mit CSS (Cascading Style Sheets)
Trotzdem hat natürlich (fast) jedes HTML-Element eine visuelle Erscheinung!

Question 26

HTML-Elemente werden ineinander verschachtelt, um die Struktur einer Webseite aufzubauen (DOM).
Wie funktioniert die Verschachtelung und was hilft visuell?

Answer 26

# HTML-Elemente müssen korrekt ineinander verschachtelt werden.
# Vorstellung einer Kiste hilft: Eine Kiste die geöffnet wurde, kommt in die nächste Kiste und so weiter. Dabei müssen die Deckel immer passen
# Einrückem im Code hilft Fehler zu vermeiden

<p>
Hallo, das ist ein<b>schöner</b> text.
</p>

Question 27

HTML-Elemente ordnen sich im Textflow entweder mit Zeilensprung oder hintereinander an. Welche CSS-Eigenschaft ist hierfür verantwortlich?

Answer 27

display: block / inline;

Beispiel
.head-inline {
display:inline;
}

<h1>Überschrift</h1>

<p>Der Absatz schließt direkt an die Überschrift an.</p>

Question 28

HTML und CSS ist für jede Webseite einsehbar und kopierbar.

Wie für Chrome, Firefox, Safari?

Answer 28

1. Chrome: rechte Maustause > Elemente untersuchen
2. Firefox: FireBug PlugIn installieren, rechte Maustause > Element mit Firebug untersuchen
3. Safari: Entwicklermenü einschalten in Enstellungen ganz rechts, ganz unten, dann rechte Maustause > Element untersuchen

Question 29

height: auto;

ist der Default-CSS Wert. Warum macht das Sinn?

Answer 29

Die height des Element richtet sich nach der Größe des Inhalts - verkleinert oder vergrößert sich also automatisch.

Im Webdesign sind viele Größen relativ. Font-Size, Fenstergröße, width kann sich dynamisch nach User-Interaktion verändern. Feste Größen würden Lücken im Layout oder fehlende Inhalte verursachen.

Question 30

Block-Elemente haben die width: 100% als Default-Breitenangabe.
Warum ist es richtig clever auf fixe Größenangaben in Pixeln zu verzichten?

Answer 30

Bei Prozentangaben passt sich die Breite automatisch an zum Beispiel, wenn man das Fenster verkleiner bzw. vergrößert.

Anderes Beispiel: ein parent-element hat eine fixe width: 600px, die child-elements in Prozenten passen sich automatisch an.