Reading...
Play button
Play button
Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
38 Cards in this Set
- Front
- Back
- 3rd side (hint)
|
import Direktive in HTML einbinden
|
<head>
<title>Mein Dokument</title> <style type="text/css"> @import url(site.css); @import url(navbar.css); @import url(footer.css); body {background: yellow;} </style> </head> |
Die @import Direktiven können am Anfang jedes Stylesheets stehen. Ein Stylesheet kann also ein weiteres Stylesheet importieren, das seinerseits ein drittes lädt.
|
|
|
Einbindung von CSS Datei mit Link-Elementen
|
<head>
<title>Ein Dokument</title> <link rel="stylesheet" type="text/css" href="basic.css" media="all" /> </head> |
|
|
|
Welche Werte für das Attribut <link media="..." /> gibt es?
|
media="all"
media="print" media="screen" |
|
|
|
Attribute des link-Elements
|
<link rel="stylesheet"
type="text/css" href="basic.css" media="screen" /> (...) |
Es ist möglich, alternative Stylesheets einzubinden! <link rel="stylesheet" type="text/css" href="basic.css" />
<link rel="alternate stylesheet" title="klassisch" type="text/css" href="oldschool.css" /> <link rel= alternate stylesheet" title="futuristisch" type="text/css" href="3000ad.css" /> |
|
|
Wie heißen die zwei wesentlichen Bestandteile der Kaskadierung?
|
Spezifität und Vererbung
|
|
|
|
Was beschreibt die Spezifität?
|
Mit Hilfe der Spezifität wird beschrieben, welches Gewicht die Deklaration für einen bestimmten Selektor bekommen soll.
|
Identifier für Elemente und Pseudoelemente (Spezifität: 0,0,0,1)
Identifier für Klassen, Pseudoklassen und Attribute (Sp. 0,0,1,0) ID-Identifier (Sp. 0,1,0,0) Eingebettete Stildef. (1,0,0,0) |
|
|
Spezifität - Identifier für Elemente, Pseudoelemente
|
0,0,0,1
|
|
|
|
Spezifität - Identifier für Klassen, Pseudoklassen und Attribute
|
0,0,1,0
|
|
|
|
Spezifität - ID-Identifier
|
0,1,0,0
|
|
|
|
Spezifität - Eingebettete (per-style-Attribut) Stildefinitionen
|
1,0,0,0
|
|
|
|
Wie werden die Werte für die Spezifität ermittelt?
|
Kumulativ
Die Werte werden mit von rechts nach links abnehmender Präzedenz sortiert (...) |
Ein Selektor, der zwei Identifier für zwei Elemente und eine Klasse enthält, hat demnach eine Spezifität von 0,0,1,2
|
|
|
Welches sind die vier Schritte der Kaskadierung?
|
1.Finde alle Deklarationen, die einen Selektor für ein bestimmtes Element enthalten
2.Sortiere alle Deklarationen nach ihrer expliziten Gewichtung und außerdem nach ihrer Herkunft (Autor, Leser, Benutzerprogramm) wobei Definitionen des Autors normalerweise Vorrang vor denen des Lesers haben) (...) |
3.Sortiere alle Deklarationen für ein best. Element nach ihrer Spezifität. Elemente mit höheren Spez. erhalten Vorrang vor solchen mit niedrigerem.
4.Sortiere alle Deklarationen nach der Reihenfolge ihres Erscheinens. Je näher eine Deklaration am Element steht, desto höher ihre Gewichtung ->Deklarationen aus importierten Stylesheets werden behandelt, als stünden sie vor allen Dekl. im importierenden Stylesheet |
|
|
Was ist eine Elementbox?
|
Ein Block-Level-Element erzeugt eine rechteckige, sogenannte Elementbox, die angibt, wie viel Platz ein bestimmtes Element einnimmt.
|
|
|
|
Was erzeugen Block-Elemente?
|
Block-Level-Elemente erzeugen standardmäßig eine Elementbox, die den Inhaltsbereich ihres Elternelements ausfüllt. (...)
|
Links und rechts neben einem Block-Element können keine anderen Elemente stehen. Dadurch erzeugen Block-Level-Elemente eine Art "Zeilenumbruch" vor und nach dem Element (p div)
|
|
|
Welche Regeln gelten für eine Elementbox?
|
1.Der Hintergrundbereich erstreckt sich über den Inhaltsbereich, Innenabstände und Rahmen bis zu den Außenkanten des Rahmens
2.Nur die Außenabstände (margins) sowie height und weight können den Wert auto annehmen (...) |
3.Negative Werte können nur für die Außenabstände festgelegt werden
4.Innenabstände (padding) und Rahmen Standardwert 0 od. none 5.Eigenschaft width bestimmt ausschließlich die Breite des Inhaltsbereichs (Breite von Innen- u. Außenabständen und Rahmen wird hinzugerechnet) (gleiches für height) |
|
|
Wie wird die Zeilenhöhe von Inline-Elementen festgelegt?
|
line-height (...)
|
Sämtliche Inline-Elemente bestizen eine Zeilenhöhe, die zu großen Teilen dafür verantwortlich ist, wie die Elemente dargestellt werden.
|
|
|
Anhand welcher Faktoren wird die Zeilenhöhe für einen Text ermittelt?
|
Anonymer Text
Em-Box Inhaltsbereich Durchschuss Inlinebox Zeilenbox |
|
|
|
Was wird als "anonymer Text" bezeichnet?
|
Sämtliche Zeichenketten, die sich nicht innerhalb eines Inline Elements befinden (...)
|
<p>Ich bin <em>so</em> glücklich</p> -> Ich bin glücklich ist der anonyme Text
|
|
|
Wie wird die Höhe der Em-Boxen gesteuert?
|
über die Eigenschaft font-size
|
|
|
|
Was wird als "Durchschuss" bezeichnet?
|
Die Differenz aus den Werten für font-size und line-height (...)
|
Das Ergebnis dieser Differenz wird halbiert und als so genannter Halb-Durchschuss anteilig der Ober und Unterseite des Inhaltbereiches zugerechnet
|
|
|
Was wird als Inlinebox bezeichnet?
|
Die durch die Addition von Inhaltsbereich und Durchschuss entstehende Box bezeichnet man als Inlinebox. (...)
|
Die Höhe der Inlinebox entspricht dem Wert für line-height
|
|
|
Wie wird die Höhe der Zeilenbox ermittelt?
|
Die Höhe der Zeilenbox entspricht dem Abstand zwischen dem höchsten und niedrigsten Punkt aller Inlineboxen, die sich in einer Zeile befinden. (...)
|
Die Oberkante der Zeilenbox schließt bündig mit der Oberkante der höchsten Inlinebox ab, während die Unterkante der ZB mit der Unterkante der niedrigsten Inlinebox bündig abschließt.
|
|
|
Wie wird der Inhaltsbereich definiert?
|
Inhaltsbereich kann dem Platz entsprechen, den die einzelnen Em-Boxen zusammen einnehmen. (...)
|
Alternativ kann der Inhaltsbereich auch durch die von den einzelnen Zeichen beschriebenen Boxen definiert werden.
|
|
|
9 Regeln für das Floating
|
1.Seitliche Außenkanten des Floats dürfen nicht über die seitlichen Innenkanten des umgebenden Blockelements hinausragen.
2.Einander zugewandte Außenkanten zweier Floats, die beide links od. rechts angeordnet wurden, dürfen sich nicht überschneiden 3.Einander zugewandten Außenkanten zweier Floats dürfen sich nicht überschneiden 4.Oberkante eines Floats darf nicht über die Oberkante seines umgebenden Blocks hinausragen (...) |
5.Oberkante eines Floats darf nicht höher liegen als die Oberkante eines früheren Floats od. Block-Elements
6.Oberkante eines Floats darf nicht über die Oberkante einer vorangehenden Zeilenbox mit Inhalt hinausragen 7.Steht links von einem links angeordneten Float ein weiterer Float, darf die rechte Außenkante des rechten Floats nicht über den Rand des umgebenden Elements hinausragen 8.Float muss immer so weit oben wie möglich angeordnet werden 9.Links angeordneter Float muss so weit links wie möglich stehen |
|
|
Was ist Floating?
|
Mit Hilfe des Floating können Elemente links od. rechts von ihrem umgebenden Block (dem nächsten Vorfahrenelement, das ein Block-Element ist) platziert werden. (...)
|
Der folgende Inhalt umfließt das Element (was nach bestimmten Regeln funktioniert)
|
|
|
Worauf wirken sich die Regeln für die Positionierung von Elementen aus?
|
Beim Positionieren von Elementen gibt es eine Reihe spezieller Regeln zu beachten. Diese wirken sich nicht nur auf den umgebenden Block des Elements aus, sondern auch auf dessen Darstellung im Dokument.
|
|
|
|
Welche Arten der Positionierung gibt es?
|
Statische Positionierung (static)
Relative Positionierung (relative) Absolute Positionierung (absolute) Feste Positionierung (fixed) |
|
|
|
Statische Positionierung (static)
|
Die Box für das Element wird angelegt wie üblich. Block-Elemente erzeugen eine rechteckige Box, die im Textfluss des Dokuments angeordnet wird. (...)
|
Inline-Boxen sorgen für die Erzeugung einer oder mehrerer Zeilenboxen, die im Fluss ihres Elternelements angeordnet werden.
|
|
|
Relative Positionierung (relative)
|
Die Elementbox wird um eine festgelegte Entfernung von ihrem ursprünglichen Ort verschoben. Als umgebender Block gilt der Bereich, den das Element eigentlich eingenommen hätte. (...)
|
Das Element behält seine Umrisse, als wäre es nicht positioniert worden. Der Raum, den das Element eigentlich eingenommen hätte, wird beibehalten.
|
|
|
Absolute Positionierung (absolute)
|
Die Box des Elements wird komplett vom Fluss des Dokuments ausgenommen und im Verhältnis zu seinem umgebenden Block platziert. Der umgebende Block kann entweder ein anderes Element oder der ursprüngliche umgebende Block sein. (...)
|
Der eigentlich vom Element eingenommene Platz wird wieder freigegeben, als existiere das Element an dieser Stelle nicht. Unabhängig davon, welche Art von Box dieses Element im normalen Fluss anlegen würde, wird bei der abs. Pos. für dieses Element eine Blockbox angelegt.
|
|
|
Feste Positionierung (fixed)
|
Das Element verhält sich, als wäre es mit dem Wert "absolute" positioniert worden. Bezugsgröße ist hier jedoch der gesamte Anzeigebereich (Viewport, z.B. Browserfenster)
|
|
|
|
Wie wird der umgebende Block für ein positioniertes Element ermittelt?
|
1.Das Wurzelelement (auch ursprünglich umgebender Block genannt) wird vom Benutzerprogramm definiert. (In HTML wird html als Wurzelelement gesehen -> einige Browser body)
2.Für nicht Wurzelelemente, deren Pos. als "relative" od. "static" definiert wurde, ist der umgebende Block der Inhaltsbereich des nächsten Vorfahren-Elements, sofern es sich dabei um ein Block-Element, eine Tabellenzelle oder ein Inline-Block-Element handelt. (Relativ pos. Elemente werden einfach nur verschoben, ohne dabei den umgebenden Block zu berücksichtigen) (...) |
3.Ist der Wert für die Pos. eines Nicht-Wurzelelements mit "absolute" festgelegt, gilt das nächste Vorfahren-Element (einer beliebigen Art) als umgebender Block, sofern dessen "position" einen anderen Wert als "static" hat
a.Handelt es sich bei dem Vorfahren um ein Block-Element, wird der umgebende Block von der Außenkante seiner Innenabstände begrenzt b)Ist der Vorfahre ein Inline-Element, wird der umgebende Block von dessen Inhaltsbereich begrenzt. |
|
|
Wie ist die Gleichung zur Horizontalen Anordnung von nicht-ersetzen, absolut positionierten Elementen?
|
left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = Breite des umgebenen Blocks
|
|
|
|
Wie ist die Gleichung nach der die Anordnung von nicht-ersetzen, absolut positionierten Elemente vertikal vorgenommen wird?
|
top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = Höhe des umgebenden Blocks
|
|
|
|
5 aufeinanderfolgende Regeln zur vertikalen Anordnung von ersetzen, absolut positionierten Elementen
|
1.Hat height den Wert auto, so wird der Wert height von der Eigenhöhe des Inhalts bestimmt.
2.Hat top den Wert auto, wird dieser durch den Wert für die statische Positino des Elements ersetzt 3.Hat bottom den Wert auto, werden alle für margin-top oder margin-bottom festgelegten auto Werte durch 0 ersetzt (...) |
4.Haben margin-top und margin-bottom zu diesem Zeitpunkt immer noch den Wert auto, erhalten beide den gleichen Wert, wodurch das Element vertikal zentriert wird
5.Gibt es zu diesem Zeitpunktnur noch eine Eigenschaft mit dem Wert auto, erhält diese den zur Lösung der Gleichung nötigen Wert |
|
|
5 aufeinanderfolgende Regeln zur horizontalen Anordnung von ersetzen, absolut positionierten Elementen
|
1.Hat widht den Wert auto, wird der berechnete Wert von width durch die Eigenbreite des Inhalts bestimmt.
2.Hat left den Wert auto, wird auto durch den Wert für die statische Position ersetzt 3.Hat left oder right immer noch den Wert auto, werden alle als auto festgelegten Werte in margin-left und margin-right durch 0 ersetzt (...) |
4.Haben margin-left und margin-right immer noch den Wert auto, erhalten beide den gleichen Wert (in Abhängigkeit zum umgebenden Block) wodurch das Element in seinem umgebenden Block zentriert wird
5.Hat nur noch eine Eigenschaft den Wert auto, wird dieser durch den Wert ausgetauscht, der nötig ist, um die Gleichung zu lösen |
|
|
Die Bestandteile einer Tabelle sind:
|
Tabelle - Spaltengruppen - Spalten - Zeilengruppen - Tabellenzeilen - Zellen
|
|
|
|
Wie wird die Tabellenbreite im Festbreitenmodell ermittelt?
|
1.Bei jeder Spalte, die einen anderen Wert für width besitzt als auto, wird dieser Wert auch benutzt
2.Wurde die Breiter einer Spalte mit auto angegeben, während die Zelle der ersten Tabellenzeile in dieser Spalte einen anderen Wert als auto hat, so bestimmt diese Zelle die Breite der Spalte (...) |
Wenn sich die betreffende Zelle über mehrere Spalten erstreckt, wird ihr Wert für die Breite durch die Anzahl der Spalten geteilt.
3.Alle Spalten, deren Breite danach immer noch den Wert auto hat, werden so dargestellt, dass sie möglichst gleich breit sind |
