- Shuffle
Toggle OnToggle Off
- Alphabetize
Toggle OnToggle Off
- Front First
Toggle OnToggle Off
- Both Sides
Toggle OnToggle Off
Front
How to study your flashcards.
Right/Left arrow keys: Navigate between flashcards.right arrow keyleft arrow key
Up/Down arrow keys: Flip the card between the front and back.down keyup key
H key: Show hint (3rd side).h key
PLAY BUTTON
PLAY BUTTON
33 Cards in this Set
- Front
- Back
- 3rd side (hint)
|
Was sind Schlüsselwörter?
|
Schlüsselwörter gelten immer für eine bestimmte Eigenschaft und haben für diese eine besondere Bedeutung. Es wird nicht zwischen Groß und Kleinschreibung unterschieden (...)
|
Das Schlüsselwort inherit stellt einen Sonderfall dar, weil es in allen Eigenschaften erlaubt ist und überall die gleiche Bedeutung hat (übernimm den Wert der entsprechenden Eigenschaft vom Elternelement) |
|
Was ist das besondere am Schlüsselwort inherit?
|
Es ist in allen Eigenschaften erlaubt und hat überall die gleiche Bedeutung (...)
|
übernimm den Wert der entsprechenden Eigenschaft vom Elternelement |
|
Wie wird ein reines blau dargestellt
|
#0000FF
|
|
|
Wofür steht #RRGGBB
|
Schreibweise, die aus drei Paaren von hexadezimalen Werten besteht.
|
Rot rot Grün grün Blau blau |
|
Wie kann man die RGB-Werte als Prozentwerte angeben?
|
rgb(rrr.rr%,ggg.gg%,bbb.bb%)
|
|
|
Wie kann man die rgb Farben nummerisch angeben?
|
rgb(rrr,ggg,bbb) -> erlaubt sind Werte zwischen 0 und 255
|
|
|
Wie werden Prozentwerte berechnet?
|
Prozentwerte werden immer relativ zu einem anderen Wert berechnet.
|
Bsp. font-size: 120% beziehen sich diese 120% auf den Wert für font-size des Elternelements |
|
Wie werden Längenwerte angegeben?
|
Längen und Entfernungen werden in Form einer positiven oder (wo erlaubt) neg. Zahl angegeben, auf die direkt eine aus zwei Buchstaben bestehenden Abkürzungen für die verwendete Längeneinheit folgt.
|
|
|
Was sind absolute Längeneinheiten?
|
Einheiten, die immer auf die gleiche Art gemessen werden
|
Inches, Zentimeter, Millimeter, Punkte(pt), Pica(pc) |
|
Was sind relative Längeneinheiten?
|
Längeneinheiten, die in Relation zu etwas anderem gemessen werden
|
Em-Höhe (em), x-Höhe (ex), Pixel (px) |
|
Em-Höhe (em)
|
Maßeinheit, die sich auf die Em-Höhe des verwendeten Zeichensatzes bezieht.
Entspricht der Höhe der Zeichenbox |
Schriften mit relativen Größenangaben versehen (1.2em = 120% für die Schriftgröße |
|
Universeller Selektor
|
*
|
|
|
Beschreibe den universellen Selektor
|
Der universelle Selektor * passt auf den Namen eines beliebigen Elements innerhalb der Dokumentsprache. Hat eine Regel keinen expliziten Selektor, wird automatisch der universelle Selektor benutzt.
|
Bsp.: * {color: red;} div * p {color: blue;} |
|
Typ-Selektor (Element-Selektor)
|
Muster:
element1 |
body {background: #FFF;} |
|
Beschreibe Typ-Selektor (Element-Selektor)
|
Dieser Selektor passt auf den Namen eines Elements in der Dokumentensprache. Es wird jede Instanz des Elementnamens innerhalb des Dokumentenbaumes gefunden.
|
p {font-size: 1em;} |
|
Nachfahren-Selektor (Kontext-Selektor)
|
Muster:
element1 element2 |
body h1 {font-size: 200%;} |
|
Beschreibe Nachfahren-Selektor (Kontext-Selektor)
|
Mit diesem Selektor kann ein Element ausgewählt werden, das von einem anderen Element innerhalb der Dokumentenhierarchie abstammt (d.h. Kind-, Enkel-, Großenkel usw.)
|
table tr td div ul li {color: purple;} |
|
Kind-Selektor
|
Muster:
element1 > element2 |
div > p {color: cyan;} |
|
Beschreibe Kind-Selektor
|
Mit diesem Selektor kann ein Element ausgewählt werden, das innerhalb der Dokumentenhierarchie ein Kindelement eines anderen Elements ist. Dieser Selektor ist restriktiver als der Nachfahren-Selektor, da er nur auf ein direktes Nachkommenelement passt
|
ul > li {font-weight: bold;} |
|
Selektor für benachbarte Geschwisterelemente
|
+
element1 + element2 |
table + p {margin-top: 2.5em;} |
|
Beschreibe Selektor für benachbarte Geschwisterelemente
|
Mit diesem Selektor kann der Autor ein Element auswählen, das in direkter Nachbarschaft zu einem anderen Element auf der gleichen Ebene in der Dokumentenhierarchie steht (...)
|
z.B. ein Absatz, der direkt auf eine Tabelle folgt Jeglicher Text zwischen den Elementen wird ignoriert. Es werden nur Elemente und ihre Positionen innerhalb der Dokumentenhierarchie berücksichtigt Bsp. h1 + * {margin-top: 0;} |
|
Klassen-Selektor
|
element1.klassenname
element1.klassenname1.klassenname2 |
|
|
Beschreibe Klassen-Selektor
|
Mit Hilfe der Punktnotation können Elemente ausgewählt werden, die einer bestimmten Klasse angehören. Die Bezeichnung der Klasse kann aus einem oder mehreren verketteten Werten bestehen. (...)
|
Der Name für den Wert der Klasse muss direkt auf den Punkt folgen. Wird dem Punkt kein Elementname vorangestellt, so passt der Selektor auf alle Elemente, die den entsprechenden Klassenwert enthalten. |
|
ID-Selektor
|
Muster:
element1#idname |
h1#page-title {font-size: 250%;} |
|
Beschreibe ID-Selektor
|
In CSS können mit Hilfe des ID-Selektors Elemente ausgewählt werden, die einen oder mehrere ID-Werte besitzen.
|
Dazu wird dem ID-Wert ein # vorangestellt. Steht vor dem # kein Elementname, passt der Selektor auf alle Elemente mit einem entsprechenden ID-Wert |
|
Einfacher Attribut-Selektor
|
element1[attr]
|
a[rel] {border-bottom: 3px double gray;} p[class] {border: 1px dotted silver;} |
|
Beschreibe Einfacher Attribut-Selektor
|
Mit Hilfe dieses Selektors können Autoren Elemente auswählen, die ein bestimmtes Attribut besitzen. Der Wert des Attributs spielt dabei keine Rolle.
|
Bsp: p[class] {border: 1px dotted silver;} |
|
Selektor für exakte Attributwerte
|
Muster
element1[attribut="wert"] |
a[rel="Home"] {font-weight: bold;} p[class="warnung"] {background: yellow;} |
|
Beschreibe Selektor für exakte Attributwerte
|
Mit Hilfe dieses Selektors können Autoren Elemente anhand des genauen und vollständigen Attributwerts auswählen
|
a[rel="Home"] {font-weight: bold;} p[class="warnung"] {background: yellow;} |
|
Selektor für Sprachattribute
|
Muster:
element1[lang|="lc"] |
html[lang|="en"] {color: red;} |
|
Pseudoklasse, die auf ein aktiviertes Element angewendet wird
|
:active
|
a:active {color: red;} *:active {background: blue;} |
|
Pseudoelement, das den erzeugten Inhalt enthält, der nach dem eigentlichen Inhalt eines Elements platziert wurde
|
:after
|
a.external:after {content: " " url(/icons/globe.gif);} p:after {content: " | ";} |
|
Beschreibe :after
|
Mit Hilfe dieses Pseudoelements können am Ende eines Elements erzeugte Inhalte eingefügt werden. (...)
|
Standardmäßig erzeugen diese Inhalte eine Inlinebox, was aber mit der Eigenschaft display geändert werden kann |
