WebTech - Wolf 9
Grundlagen
Grundlagen
Fichier Détails
| Cartes-fiches | 19 |
|---|---|
| Langue | Deutsch |
| Catégorie | Informatique |
| Niveau | Autres |
| Crée / Actualisé | 05.02.2021 / 14.02.2021 |
| Lien de web |
https://card2brain.ch/box/20210205_webtech_wolf_9
|
| Intégrer |
<iframe src="https://card2brain.ch/box/20210205_webtech_wolf_9/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
|
Was ist ein Selektor?
- steht im CSS vor den gewungenen Klammern
- Wenn mehrere Selektoren die gleichen Eigenschaften erhalten sollen, notiert man die Selektoren nacheinander und trennt sie mit Komma.
- es wird also zwischen Groß- und Kleinschreibung unterschieden.
- immer anhand ihrer Funktion und nicht anhand ihres Aussehens benennen.
Arten:
- Einfache Selektoren
- Kombinatoren: zwei Selektoren werden mit Operator oder Leerraum verkettet
Erläutere den Typselektor
- element {...}
- HTML-Element mit dem Namen element
- <element>
Erläutere den Klassenselektor
- .klname
- Element mit der Klasse klname
- <p class="klname">
- der Name sollte Sinn ergeben
Erläutere den ID-Selektor
- #elemid
- Element mit der ID elemid
- <p id="elemid">
- der Name sollte Sinn ergeben
- kombinierte Selektoren bspw. Klasse und ID machen wenig sinn, da ID eindeutig
Universalselektor
- *
- jedes Element
- <p>
- kann verwendet werden um alle Elemente auszuwählen * { }
- oder alle Elemente in einem Element. main * { }
Wie spricht verwendet man im CSS den Attributselektor (generell und Teilwerte)?
wenn man generell im CSS ein Attribut ansprechen möchte:
- jedes Element, bei dem das Attribut vorhanden ist: [attributname] {...}
Nachfolgende Beispiele anhand des Attributs title:
[title=wert] { }
- Alle Attribute, bei denen das Attribut (der title) 100% diesem Wert entspricht
[title~=wert] { }
- Alle Attribute, bei denen der das alleinstehende Wort "wert" enthalten ist
- bspw. <div title="abc wert xyz"
[title^=wert] { }
- jedes Element, bei dem das Attribut attr mit der Textfolge wert anfängt
- <elem title="werter">
[title$=wert] { }
- jedes Element, bei dem das Attribut attr mit der Textfolge wert endet
- <elem title="endwert">
[title*=wert] { }
- jedes Element, bei dem das Attribut attr die Textfolge wert enthält
- <elem title="bewertung">
[title | = wert] { }
- Jedes Element, bie dem im Attribut der Wert am Anfang mit einem Bindestrich steht
- bspw. <div title="wert-xyz">
Zähle dir bekannte einfache CSS Selektoren auf
- Typselektor
- Klassenselektor
- ID-Selektor
- Universalselektor
- Attributselektor (3 Stück, Wert am Anfang, Ende, Mitte)
Was ist eine Pseudoklasse?
- Hierbei handelt es sich um Elemente, die nicht über gewöhnliche Selektoren erreicht werden können.
Eine Pseudoklasse in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand abzufragen. So steht beispielsweise :hover für Elemente, die gerade mit dem Mauszeiger berührt werden.
Welche Pseudoklassen kennst du mit für a-Elemente?
:link
- ein unbesuchter Hyperlink
:visited
- ein besuchter Hyperlink
Welche Pseudoklassen kennst du für Benutzerinteraktionen mit Maus und Tastatur?
Generelle Infos:
- Es handelt sich hierbei um dynamische Pseudoklassen.
- Man muss bedenken, dass man hier zwischen Tablet, Phone und PC unterscheidet
:hover
- hold over, wenn der cursor sich darauf befindet
:active
- wenn ein Link/Element gerade aktiv ist
:focus
- wenn ein Link/Element mit dem Tabulator angewählt wird
:placeholder-shown
- wird bei input Elementen verwendet, spricht den paceholder-Text eines Elementes an
Welche User-Interface-Pseudoklassen kennst du?
Diese werden bei Formularelementen verwendet:
:enabled
- anwählbar, freigegeben
:disabled
- nicht anwählbar, deaktiviert
:checked
- ausgewählt
Was weisst du über Struktur-Pseudoklassen?
Es können somit Elemente anhand der Position in der Dokumentstrukur angewählt werden. Dazu gehören:
- Wurzel des Dokuments (:root) und leere Elemente (:empty) --> CSS Level 2
- Struktur-Pseudoklassen für (normale) Kind-Elemente (:first-child, etc.)
- Struktur-Pseudoklassen für bestimmte Kind-Elemente (:nth-of-type, first-of-type etc.)
Was weisst du über Struktur-Pseudoklassen für (normale) Kind-Elemente?
Allgemein:
- Man benötigt sie, um bestimmte Kind-Elemente in der HTML-Dokumentstruktur auszuwählen.
- Man nennt es auch Nachfahren-Element.
- Sie werden vorallem verwendet um Tabellen einzufärben
- setzt man bspw. in die Klammern (odd) für ungerade Zahlen, werden alle ungeraden Spalten eingefärbt, analog (even) alle geraden
:first-child
- erstes Kind-Element eines HTML-Elements
- CSS Level 2
:last-child
- letztes Kind-Element eines HTML-Elements
- CSS Level 3
:nth-child()
- man wählt ddas n-te-Kinder-Element eines Eltern Elements aus
- CSS Level 3
:nth-last-child()
- vergleichbar funktioniert diese Pseudoklasse, nur dass die Aufzählung von hinten beginnt
- CSS Level 3
:only-child
- somit spricht man jene Elemente an, die als einzige Elemtente in einem Element enthalten sind.
- CSS Level 3
Was weisst du über die Struktur-Selektoren bestimmte Kind-Elemente?
Dieser wird verwendet, wenn mehrere Elemente des gleichen Typs in einem Element enthalten sind. Somit kann man genau bestimmen, welche selektiert werden sollen:
:first-of-type oder :last-of-type
- ein Element, das das erste/letzte Kind-Element eines bestimmten Typs ist
- CSS Level 3
:nth-of-type(n)
- Ein Element, das das n-te gleichartige Kind-Element eines Eltern-Elements ist. Für n sind auch die Werte odd und even möglich (ungerade, gerade)
- CSS Level 3
:nth-last-of-type(n)
- die Zählung fängt von hinten an (Rest vgl. :nth-of type)
- CSS Level 3
:only-of-type
- Ein Element, wenn es das einzige Kind dieses Typs im Eltern-Element ist
- CSS Level 3
:
Was weisst du über Sprachpseudoklassen und Negotiations-Pseudoklassen?
:lang(de)
- selektiert Elemente, bei denen die Sprache bspw. mit dem Attribut lang="de" versehen wurde
- CSS Level 2
:not(s)
- selektiert Elemente, auf die Selektor s nicht zutrifft
:matches(s1,s2,...)
- selektiert alle Elemente, auf die Selektor s1 und s2... zutreffen
- CSS Level 3
Was weisst du über Pseudoelemente für nicht vorhandene Elemente?
::first-letter
- selektiert das erste Zeichen in einer Zeile
::first-line
- selektiert die erste Zeile in einem Absatz
::before
- fügt vor einem Element einen Inhalt ein und formatiert diesen auch
::after
- fügt nach einem Element einen Inhalt ein und formatiert diesen
Was weisst du über die Kombination von Selektoren und deren Verkettung?
E F (Nachfahrenselektor)
- F wird selektiert, wenn es ein Nachfahre eines Eltern-Elements ist.
- CSS Level 1
E > F (Kindselektor)
- F wird nur selektiert, wenn es ein direkter Nachfahre eines Eltern-Elements ist
- CSS Level 2
E + F (Nachbarselektor)
- F wird nur selektiert, wenn es direkt nach E vorkommt (im gleichen Eltern Element)
- CSS Level 2
E~F (Geschwisterselektor)
- F wird nur selektiert, wenn es nach E vorkommt (im gleichen Eltern-Element)
- CSS Level 3
Was bedeutet Geschwisternbeziehung?
Elemente sind auf der gleichen Ebene im Element.
Was gilt es zu beachten für perfomantes CSS?
- Verkettungen und Kombinatoren wenn möglich vermeiden
- Sinnlose Selektoren vermeiden (direkt ID ansprechen und nicht zusätzlich die Klasse)
- Achtung vor dem Universalselektor
