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 |
Attribution de licence | Non précisé (zbw) |
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.