25:["$","title",null,{"children":"Data-Driven Web Engineering: Einführung CSS (Part 2) | pmeschenmoser-hslu | Observable"}] 49:T3130,- Und ein Blick in die Entwicklertools unseres Browsers bestätigt die Angaben:

4a:[] 29:{"id":"0d5ba2a15749cbc6","slug":null,"title":"Data-Driven Web Engineering: Einführung CSS (Part 2)","thumbnail":"2cf7be94a2a3f76ccf681746d78b12074170581b5c22da8efafed1e7e20a883c","access_level":"public","create_time":"$D2023-04-18T14:17:54.139Z","update_time":"$D2023-04-18T14:18:15.101Z","view_time":null,"first_public_time":"$D2023-04-18T14:17:54.139Z","has_unpublished_edits":null,"fork":{"id":"83e475306d1542ff","slug":"intro_css_part2","title":"Data-Driven Web Engineering: Einführung CSS (Part 2)","owner":{"id":"d453c31c6f30f58d","login":"pmeschenmoser-hslu","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"d453c31c6f30f58d","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":493,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a3b6ff689928461","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5a3b6ff689928461","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data-Driven Web Engineering: Einführung CSS (Part 2)","cells":[{"id":0,"value":"# Data-Driven Web Engineering: Einführung CSS (Part 2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"- Letzte Woche haben wir schon das Grundprinzip der Stylesheet-Sprache CSS kennengelernt. Über diverse Selektoren können wir bestimmen, auf welche HTML-Elemente CSS-Regeln mit verschiedenen Style-Eigenschaften angewandt werden sollen.\n- Die Selektion über ID, Klassen, Attribute, Pseudoelemente, Pseudoklassen und entsprechende Kombinationen ist möglich.\n- Bis dato wurden nur zwei Style-Eigenschaften behandelt (*font-size* und *color*), heute werden wir weitere kennenlernen. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"## 1. Höhe und Breite","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"- Höhe und Breite des Inhaltsbereichs von HTML-Elementen können wenig überraschend mit den Eigenschaften *width* und *height* angegeben werden.\n- Die Angaben sind in diversen Einheiten möglich, zu den verbreitesten gehören sicherlich die folgenden:\n - Einheit *px* für absolute Pixelangaben\n - Einheit *%* für Grössen relativ zur Grösse des Elternelements\n - Einheiten *vh* (viewport height) und *vw* (viewport width) für Grössen relativ zur Grösse des Browserfensters\n- Weitere Einheiten sind hier zu finden\n- Einheiten werden direkt hinter dem Zahlenwert, d.h. ohne Leerzeichen, angefügt\n- Beispiel eines div-Elements mit 50px Breite und 50px Höhe:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"\n\n

\n 1\n

\n2\n

\n 3\n

\n- Um den Inhalt des div-Elements erstellen wir zunächst einen *blue* gestrichelten (*dashed*) Rahmen mit einer Dicke von 6 Pixel:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"- **Aufgabe 2.1**: Erstellen Sie einen Paragraphen (*p*) mit 10 Pixel Aussenabstand auf allen Seiten und 40 Pixel Innenabstand auf der linken Seite. Der Rahmen soll 2px dick und nicht gestrichelt sein. Überprüfen Sie Ihr Ergebnis in den Entwicklertools Ihres Browsers.\n- **Passende Übungen auf w3Schools:** Margin (1-3), Padding (1-3), Box Model (1-4).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":442,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"## 3. Position","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"- Und wo genau soll das HTML-Element platziert werden? Hierzu kann der Wert für die CSS-Eigenschaft *position* und im Folgeschritt Werte für die CSS-Eigenschaften *top*, *bottom*, *left*, *right* angegeben werden.\n- *position:static* ist der Standardwert, der angenommen wird, falls keine *position*-Zuweisung erfolgt. So wird das Element standardmässig wird in den normalen Dokumentenfluss der Webpage eingefügt. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, \n

Mein Div-Block.

\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, \n

Mein Div-Block.

\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n

\n At vero eos et accusam et justo duo dolores et ea rebum.\n

Mein Div-Block.

\n sed diam voluptua.\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"- Schöne interaktive Beispiele, auch mit weiteren Eigenschaftswerten, finden Sie hier.\n- **Aufgabe 3.1:** Beschreiben Sie den Unterschied zwischen *position:fixed* und *position:sticky*.\n- **Aufgabe 3.2:** Beschreiben Sie Anwendungsfälle für die verschiedenen Eigenschaftswerte von *position*. Wann könnte sich also *position:xy* anbieten?\n- **Passende Übungen auf w3Schools**: Positioning (1-4)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"*Ihre Lösungen:*","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## 4. Farben und Hintergründe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"- Anstelle von verdefinierten CSS-Farben können Sie sich Farbe auch selbst mischen und den resultierenden Hexcode (beginnend mit #) verwenden: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"\n

\n At vero eos et accusam et justo duo dolores et ea rebum.\n

\n Mein Text 1\n

\n Mein Text 2\n

\n Mein Text 1\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"- **Aufgabe 4.1**: Passen Sie die obigen Farben innerhalb der Entwicklertools Ihres Browsers, nicht direkt in der ObservableHQ-Zelle, an. Wie verändert sich beispielsweise die Darstellung des oberen Fotos, wenn andere Werte der Eigenschaft *background-size* zugewiesen werden?\n- **Aufgabe 4.2**: Erstellen Sie auf cssgradient.io einen Farbverlauf, kopieren Sie von dort die CSS-Eigenschaften und färben Sie das folgende div-Element mit Ihrem Farbverlauf ein.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":383,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"## 5. Weitere Einbindungsarten für CSS in HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"- Bisher haben wir stets ein HTML Style-Element genutzt, um CSS-Regeln für andere HTML-Elemente anzugeben. Im ILIAS-Archiv *linking.zip* werden wir zwei weitere Einbindungsarten für CSS kennenlernen.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null