CSS
Wichtige Regeln in CSS, w3schools.com / codecademy.com
Wichtige Regeln in CSS, w3schools.com / codecademy.com
Kartei Details
| Karten | 29 |
|---|---|
| Sprache | Deutsch |
| Kategorie | Informatik |
| Stufe | Berufslehre |
| Erstellt / Aktualisiert | 24.08.2015 / 25.01.2024 |
| Weblink |
https://card2brain.ch/box/css1
|
| Einbinden |
<iframe src="https://card2brain.ch/box/css1/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
|
Wie wird ein Selektor bestimmt?
Selektorname {
Eigenschaft1: Wert1;
Eigenschaft2: Wert2;
...
}
Wozu werden Selektoren gebraucht?
um HTML-Elemente zu finden
Was ist speziell am Selektor id?
er wird pro Webseite einmal vergeben
er wird gebraucht um ein einzelnes, einzigartiges Element aus der Seite auszuwählen
Wie wird ein id-Selektor ausgewählt?
schreibe einen Hashtag gefolgt von der id des entsprechenden Elements
Wann wird der Selektor class benutzt?
wenn die entsprechende Eigenschaft mehrmals pro Seite angewendet wird
Wie wird der Selektor class aufgerufen?
mit einem Punkt gefolgt vom entsprechenden class-Namen
Was bedeutet der folgende Ausschnitt?
p.center {
text-align: center;
color: red;
}
alle p-Elemente mit der Klasse center übernehmen die gegebenen Eigenschaften
Was bedeutet der folgende Ausschnitt?
h1, h2, p {
text-align: center;
color: red;
}
die gegebenen Eigenschaften werden auf die Selektoren h1, h2 und p angewendet
Wann sprechen wir vom "box model"?
wenn es um Design und Layout geht
Was ist das "box model"?
jedes HTML-Element wird von einer Box umgeben die margins, borders, padding und content beinhaltet
Was soll das folgende bedeuten?
* { color: blue; background: white}
Der Stern ist ein sogenannter Universal-Selektor: er wählt alle Elemente aus.
Hier weist er allen Elementen eine blaue Farbe und einen weissen Hintergrund zu.
Was bedeutet der folgende Abschnitt?
div div p {
text-align: center;
}
alle p-Elemente, die zweimal in ein div-Element verschachtelt sind, werden zentriert
Was bedeutet der folgende Abschnitt?
div > p {
color: #ooffoo;
}
alle p-Elemente, die direkte "Kinder" sind vom div-Element, werden in der entsprechenden Farbe eingefärbt
Wie wird eine Pseudo-Klasse dargestellt?
Beispiel:
a:hover {
text-decoration: none;
}
mit a:hover wird definiert, wie ein Link sich verhalten soll, wenn man mit dem Cursor über ihn fährt
Nenne Pseudoklassen für Links?
a:hover --> ein Link, der mit dem Cursor berührt wird
a:link --> ein nicht besuchter Link
a:visited --> ein besuchter Link
Was wird mit dem folgenden Abschnitt dargestellt?
p:first-child { color: red; }
dasjenige p-Element, das das erste "Kind" ist von einem direkt übergeordnetem Element, wird rot eingefärbt
Was wird mit dem folgenden Abschnitt dargestellt?
p:nth-child(2) { color: red; }
dasjenige p-Element, das das zweite "Kind" ist von einem direkt übergeordnetem Element, wird rot eingefärbt
Welche Werte kann die Positionierungseigenschaft display einnehmen?
block, inline-block, inline und none
Was bewirkt folgende Zeile?
display: block;
- Element wird zu einem Block
- es kann kein anderes Element neben diesem Element platziert werden
- Element nimmt die volle Breite ein
Was bewirkt folgende Zeile?
display: inline-block;
- Element wird ebenfalls zu einem Block
- neben dem Element können jedoch weitere Elemente platziert werden
Was bewirkt die folgende Zeile?
display: inline;
- Element kann neben einem anderen platziert werden
- Element nimmt nur so viel Breite ein, wie es von seinem Inhalt her benötigt
- Element wird nicht als Block formatiert
Was bewirkt die folgende Zeile?
display: none;
lässt das Element mit seinem Inhalt komplett von der Seite verschwinden
Was bewirkt folgende Zeile?
margin: 20px 50px 10px 5px;
- Aussenabstand oben: 20px
- Aussenabstand rechts: 50px
- Aussenabstand unten: 10px
- Aussenabstand links: 5px
Welche Werte kann die Eigenschaft float einnehmen?
left und right
Was bewirkt die folgende Zeile?
clear: both;
Element geht allen "fliessenden" Elementen "aus dem Weg", sowohl rechts, wie auch links
Was bewirkt die folgende Zeile?
position: absolute;
- Element richtet sich aus nach dem ersten Eltern-Element, das nicht position: static hat
- gibt es kein solches Eltern-Element, richtet sich das Element relativ zu <html> aus
Was bewirkt die folgende Zeile?
position: relative;
es sagt dem Element, sich relativ zu der Position zu bewegen, in die es "gefallen" wäre, wenn es einfach den voreingestellten Wert static gehabt hätte
Was bewirkt die folgende Zeile?
position: fixed;
Element wird an den Bildschirm "geklebt", es bewegt sich beim scrollen mit
Was bewirkt folgende Zeile?
border: 1px dotted red;
Um das entsprechende Element wird ein Rahmen gezeichnet, der 1px breit, rot und gepunktet ist.
-
- 1 / 29
-
