Abend 2a: 11.05.2016 - Vorkurs - HTML und CSS
HTML und CSS
HTML und CSS
-
- 1 / 22
-
Lernkarten
Welche Technik variert die Farbe eines Images?
Nenne 4 CSS Kombinatoren und deren Einfluss
- Kindselektor: e > f
- Nachfahrenselektor: e f
- Nachbarselektor: e + f
- Geschwisterselektor: e ~ f
Details unter: https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator
Einbinden von externen CSS Dateien
Gibt es abgesehen von der Syntax
<link rel="stylesheet" href="stylesheet.css">
eine weitere Möglichkeit eine externe CSS Datei einzubinden? Wenn ja, wie würde die aussehen?
Ja. Es können externe Stylesheets in eine anderes Stylesheet eingebunden werden.
@import "stylesheet1.css";
@import url('http://www.example.org/stylesheet2.css');
Optimierung CSS
Was könnte an folgendem Statement verbessert werden:
div.page ul#example {
padding: 2px 2px 2px 2px;
border-top-color: #ccc;
border-top-style: dotted;
border-top-width: 2px;
}
- Selektion über id könnte potentiell genügen
- Zusammenfassen von Eigenschaften
Beispiel:
#example {
padding: 2px;
border-top: 2px dotted #ccc;
}
Aus welchen Quellen können Stylesheets kommen und nach welchem Ablauf werden sie geladen?
Stylesheets können aus unterschiedlichen Quellen stammen:
- User agent – beispielsweise das Default Stylesheet des Browsers
- User – zum Beispiel die Browser-Einstellungen des Users
- Author – das ist das CSS, welches von der Website geliefert wird (egal, ob inline, embedded oder external)
Anschließend werden diese Deklarationen nach Herkunft und Wichtigkeit sortiert:
- Deklarationen im Browser-Stylesheet
- Deklarationen des Benutzers
- Deklarationen des Autors
- Wichtige Deklarationen (mit !important) des Autors
- Wichtige Deklarationen (mit !important) des Benutzers
Welche Möglichkeiten gibt es um eine SVG Grafik einzubinden?
SVG mittels IMG Tag einbinden:
<img src="chart.svg" alt="SVG mit img Tag laden" width="600" height="350" >
+ Grafik verhält sich wie ein Bild
- Keine Links möglich bzw. Javascript Manipulationen
SVG mittels Object Tag einbinden:
<object data="chart.svg" type="image/svg+xml" width="600" height="193">
<!-- Für Browser ohne SVG-Unterstützung -->
<img src="chart.png" width="600" height="193" alt="Alternatives PNG-Bild">
</object>
+ SVG Bild kann mit Links hinterlegt werden
+ Alternatives Bild kann angezeigt werden (für ältere Browser)
- Keine Javascript Interaktion mit dem Objekt möglich
SVG mittels CSS als Background einbinden.
<div style="background: url(pattern.svg);">...</div>
oder
<div style="width:100%; height: 150px; background: url("data:image/svg+xml;utf8,<svg>...</svg>")"> </div>
- Kein Resize
- Keine Javascript Interaktion möglich
SVG direkt in den Markup einbinden:
<svg width="96" height="96"><path … /></svg>
+ SVG kann mit Javascript manipuliert werden
- Markup wird grösser
Weshalb ist der CSS-Selektor nav ul li a { … } von der Performance her schlecht einzustufen?
In diesem Beispiel werden mehrere Descendant selectors (Verschachtelte Selektoren, Nachfahrenselektoren) verwendet. Da Browser CSS-Selektoren von rechts nach links abarbeiten, bewirkt dies, dass der Browser in mehreren Schritten vorgehen muss: Zuerst sucht der Browser alle a-Elemente im Dokument. Von diesen werden diejenigen verwendet, die in einem li-Element enthalten sind. Von diesen wiederum wird geprüft, ob sie in einem ul enthalten sind. Und schliesslich werden davon nur diejenigen ausgewählt, die auch in einem nav-Element enthalten sind. Dieser mehrstufige Vorgang ist entsprechend langsam.
Zudem werden in diesem Beispiel zwischen den Descendant selecors nur Element-Selektoren verwendet, die per se schon weniger effizient sind als z.B. ID- oder Klassen-Selektoren.
Welche HTML Declaration bezeichnet ein HTML 5 Dokument?
Webbrowser haben bekanntlich die Eigenschaft CSS-Styles unterschiedlich zu rendern. Was kann man dagegen tun?
- CSS Reset (z.B. normalize.css) verwenden, um bei allen Browsern eine ähnliche Darstellung zu erhalten
Wie lautet die Referenzierung im HTML-Dokument auf ein CSS-File?
Nenne 5 der neuen Elemente, welche mit HTML5 eingeführt wurden?
Sections:
<section>, <nav>, <article>, <aside>, <header>, <footer>, <main>
Text-level semantics:
<time>
Embedded content:
<video>, <audio>, <picture> (5.1)
Forms:
<datalist>, <progress>
Interactive elements:
<details> (5.1)
Was ist ein Css Style Guide?
Ziele eines Css Styleguides sind:
- erstelle Richtlinien für das schreiben von Css und Html Code.
- gib Nicht-Css-Experten eine Vorlage die sie in ihrem Projekt verwenden können
- verhilft zu einem einheitlichen Stil im Layout einer Website
Tool für das Erstellen eines Css Style Guides: http://documentcss.com/
HTML:
<p>Paragraph 1</p>
<section>
<p>Paragraph 2</p>
<h2>Heading</h2>
<p>Paragraph 3</p>
<div>
<p>Paragraph 4</p>
</div>
<p>Paragraph 5</p>
</section>
CSS:
h2 ~ p {...}
Frage: Welche(r) Paragraph(en) wird/werden selektiert?
Paragraph 3 und 5.
Es werden alle Paragraphen selektiert, die einen gemeinsamen Parent mit einem h2 haben (sibling von h2) und nach einem h2 kommen.
Wie lassen sich folgende Styles mittels OOCSS abstrahieren und dadurch wiederverwendbar machen und wie heisst das Prinzip dahinter? Wende die Abstrahierung auf die HTML-Elemente an.
/* Ausgangslage */
.box-1 {
border: 1px solid #ccc;
width: 200px;
height: 200px;
border-radius: 10px;
}
.box-2 {
border: 1px solid #ccc;
width: 120px;
height: 120px
border-radius: 10px;
}
/* Lösung: die visuellen Elemente werden in einer eigenen Klasse .box-border abstrahiert und dadurch wiederverwendbar */
.box-1 {
width: 200px;
height: 200px;
}
.box-2 {
width: 120px;
height: 120px;
}
.box-border{
border: 1px solid #CCC;
border-radius: 10px;
}
/* Die visuellen Elemente lassen sich nun auf unsere HTML-Elemente anwenden */
<div class="box-1 box-border">Lorem ipsum</div>
<div class="box-2 box-border">Lorem ipsum</div>
→ OOCSS-Prinzip: Struktur und visuelle Elemente trennen
HTML-Snippet:
<div class="content">
<div>
<p>Hello World</p>
</div>
</div>
CSS-Selektor:
.content > p
Frage:
Umfasst der CSS-Selektor den Paragraph mit dem Text "Hello World"?
Welche Selektion wird mit dem komplexen Selektor ul li:nth-child(3n+4) definiert (1 Richtige Antwort) ?
Was sind Vendor-Prefixes und wozu wurden diese eingeführt?
Vendor-Prefixes sind Browser- bzw. Rendering-Engine spezifische CSS-Eigenschaften, welche zu Kompatibilitätszwecken eingeführt wurden.
Dies wurde nötig, weil die festgelegten Standards von den Browser-Herstellern unterschiedlich schnell adaptiert wurden (werden) und zum Teils auch noch nicht verabschiedete Standards implementiert werden.
Am Beispiel 'Flexbox' sehen diese für die Major-Browser wie folgend aus:
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
Selektor Spezifität
Was für ein Spezifitätswert hat folgender Selektor:
#mycontent.test[lang="fr"]:hover
Welches ist die finale Reihenfolge für die Kaskade? (Wichtigste Deklaration am Schluss)
Welche 4 (7) Arten von Selektoren gibt es in CSS?
- Element selector: p { }
- Class selector: .green { }
- ID selector: #example { }
- Pseudo class selector: a:hover { }
- Attribute selector: a[href]{ }
- Universal selector: * {}
- Pseudo-Elemente selector: a::before { }
Michael: 5-7 ergänzt
Auf welche drei Arten kann man CSS auf HTML anwenden?
Inline-Styling: Direkt im HTML-Tag als Attribut
<input style="border: 1px solid blue">
Embedded Styling: Innerhalb vom HTML-Dokument mittels <style>-Tag
<style type="text/css">
input {
border: 1px solid blue;
}
</style>
External Stylesheet: Separates Dokument, das im Header vom HTML referenziert wird
<link rel="stylesheet" href="style.css" type="text/css">
Was ist eine CSS-Pseudo-Klasse und zeige ein Beispiel
CSS-Pseudo-Klassen sind Keywords, welche an einen Selektor angefügt werden, um einen bestimmten Zustand desselben zu selektieren.
Bsp.: bei einem Mouseover könnte dies folgendermassen aussehen.
a:hover {
color: green;
}
