html-css-basic Flashcards
(30 cards)
Wie werden diese Selectors bezeichnet?
h1, h2, h3, h4, h6 {
font-size: 16px;
}
body, html {
margin: 0;
}
#sitebar, #footer {
background-color: red;
}
group-selector
Mehrere selectors mit gleichen Eigenschaften werden durch Kommas getrennt und zu einer Gruppe zusammenfasst.
Wie starte ich ein Projekt in Espresso?
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.
Wie sieht das Grundgerüst einer HTML-Seite aus?
Wie nennt man diese selectors?
body {
font-family: helvetica;
}
h1 {
font-size: 16px;
}
Tag-Selector
Stylen einen Html-Tag wie body oder h1.
Wie können mehrere class-selectors kombiniert werden?
Classes mit Leerzeichen am Element auflisten.
<h1>…</h1>
.head { …}
.big {…}
.light{ …}
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;
}
padding zufügen
.box {
padding: 20px;
width:200px;
border: 1px solid red;
}
Wie erleichtere ich mir in Espresso ein Grundgerüst für eine HTML-Datei zu erstellen?
- Espresso neues File öffnen
- Abspeichern mit korrekter Endung .html
- Snippet Actions öffnen, click auf html 5 doc
Werden alls CSS-Styles im DOM vererbt?
vererben: CSS-Eigenschaft des parent-element werden automatisch auf die child-elements angewendet.
Nein! Nur wenn es Sinn macht.
Vererbt werden Schrifteigenschaften
Nicht vererbt werden Abstände, Ränder, Positionierungen
Welche Regel gilt für die Benennung von Ordner und Dateien?
alles klein schreiben
keine Sonderzeichen wie ä, ö, …
keine Leerzeichen
Dateiendung für Dateien .html oder .htm
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;
}
font-size: 36px;
color: red;
Welche Default-CSS-Werte für display: ? height: ? width: ? haben Elemente wie div, h1 oder p?
display: block;
width: 100%;
height: auto;
Welche Default-CSS-Eigenschaften haben divs für height und width?
width: 100%;
height: auto;
Welche CSS-Einheiten für Größenangaben haben wir kennengelernt?
Pixel —> width: 200px;
Prozent —> width: 100%;
Was muss ich zwingend bei der Verwendung des id-selectors beachten?
#sitebar {
background-color: grey;
}
Der id-selector darf genau für ein Element im DOM (HTML-Struktur) verwendet werden. Der ID-selector ist unique.
<div> …</div>
Was ist der Fehler, wenn in Espresso die Snippet-Palette leer ist?
Das File wurde nicht abgespeichert oder nicht mit der richtigen Endung .html.
Was ist das besondere an der Vorschau von Espresso?
Die Vorschau funktioniert “live” ohne speichern der Datei.
Was heisst DOM?
Document Object Model
DOM ist der Baum der HTML-Elemente, der Strutkur der Seite.
Warum sollten sie unbedingt die Autovervollständigung von Espresso nutzen?
Fehler bei der Eingabe vermeiden und Geschwindigkeit.
Warum sollten bestimmte CSS-Styles reseted werden?
Bitte ein Beispiel angeben.
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;
}
Warum sind class-selektors versus tag-selectors wesentlich praktikabler einsetzbar?
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
}
Warum kann ein Element dass width: 100% definiert ist, nicht mit margin: 0 auto zentriert werden?
Da bei 100% Breite links und rechts kein Platz zum zentrieren ist.
Warum haben div-Elements im body-element einen Abstand zum Browserrand?
body
|_div
|_div
Das body-element hat einen Default-Wert für margin.
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>
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>
Mit welcher CSS-Eigenschaft kann ein element nicht angezeigt werden / vom DOM ausgeblendet werden?
<div>mich siehst du nicht</div>
.away {
display: none;
}
Hallo, das ist einschöner text.
Überschrift
Der Absatz schließt direkt an die Überschrift an.
