Page Title

44:["$","title",null,{"children":"Data-Driven Web Engineering: Einführung CSS (Part 1) | pmeschenmoser-hslu | Observable"}] 4c:[] 48:{"id":"ae79739f6ba5390b","slug":"css-part1","title":"Data-Driven Web Engineering: Einführung CSS (Part 1)","thumbnail":"d74905af6c1a649b49c3a699d269ebf55903ed39be2f904bade376383ed45cf9","access_level":"public","create_time":"$D2022-04-05T19:26:37.346Z","update_time":"$D2023-04-05T09:17:00.264Z","view_time":null,"first_public_time":"$D2023-04-04T17:57:21.310Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":391,"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":15,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data-Driven Web Engineering: Einführung CSS (Part 1)","cells":[{"id":0,"value":"# Data-Driven Web Engineering: Einführung CSS (Part 1)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"- Letzte Woche haben wir uns die Auszeichnungssprache HTML, mit welcher Webpages strukturiert werden, genauer angeschaut. HTML bietet auch einige Möglichkeiten, um den Text zu formatieren: so sind beispielsweise kursive Überschriften oder unterstrichene Paragraphen umsetzbar.\n- Natürlich bedarf es für die Formatierung und Gestaltung von Webpages wesentlich mehr Möglichkeiten. Die Style-Sheetsprache CSS (*Cascading Style Sheets*) bietet eine grosse Vielfalt an Gestaltungsoptionen: von Innenabständen, über Farbverläufe bis hin zu Animationen.\n- Heute: grundlegendes Prinzip und Selektion von HTML-Elementen mit CSS\n- Unterstützende Literatur: Ackermann, Kapitel 3.1.1 und 3.1.3, sowie CSS-Referenz und CSS-Tutorials von w3Schools.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"## 1. Grundlegendes Prinzip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"- Wie HTML ist auch CSS keine Programmiersprache. In CSS werden vielmehr HTML-Elemente über verschiedene Strategien referenziert und ihre Style-Eigenschaften angegeben. Zum Beispiel sollen sämtliche Überschriften der Webpage eine rote Schriftfarbe besitzen.\n- Grundsätzlich gibt es mehrere Varianten, um ein HTML-Dokument mit CSS Style-Regeln zu verbinden. Eine Variante werden wir zunächst fokussieren: Die Style-Regeln können in einem HTML *style*-Element platziert werden. Typischerweise befindet sich dieses im *head*-Element des Dokuments. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"\n\n \n Page Title\n \n \n \n

This is a paragraph.

\n \n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"- In einer ObservableHQ-Zelle ist aber auch eine Abkürzung möglich, siehe unten. Wichtig zu wissen ist auch, dass in ObservableHQ die Regeln eines Style-Elements sich auch auf HTML-Elemente anderer Zellen beziehen können. Regeln werden ggf. höher/niedriger priorisiert. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"\n

Hello

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"- Und natürlich sehen wir schon, dass eine CSS-Regel den folgenden Aufbau hat. Siehe Zeilen 3-6. Zwischen den geschweiften Klammern befindet sich die Deklaration der CSS-Regel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"/*\n\n*/ ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"- Es gibt einen grossen Katalog an verfügbaren und dementsprechend vordefinierten CSS-Eigenschaften, siehe auch die Referenz auf w3Schools.\n- Erlaubte Werte zu kategorischen Eigenschaften sind ebenfalls vordefiniert, z.B. bei *display:block*. Bei vielen Eigenschaften werden jedoch numerische Werte (ggf. mit Einheit) erwartet, z.B. wenn es um die Angabe von Breiten, Innenabständen oder Schriftgrössen geht. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"## 2. Selektoren","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"- \"Über Selektoren wird also bestimmt, auf welche Elemente eine CSS-Regel angewandt wird.\" ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"### 2.1 Einfache Selektoren mit IDs, Tag- und Klassennamen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"- In Abschnitt 1 war der Selektor einer CSS-Regel immer durch den Tag-Namen *p* von Paragraphen-Elementen gegeben.\n- Beliebt ist auch die Selektion mithilfe von HTML-IDs und HTML-Klassen. Der ID des HTML-Elements wird bei der zugehörigen CSS-Regel eine Raute vorangestellt. Der Klasse des HTML-Elements wird analog ein Punkt vorangestellt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"\nHello\nWorld","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"- **Aufgaben**: Bearbeiten Sie auf w3Schools die ersten 3 Aufgaben zu CSS Selectors.\n- **Aufgabe**: Erstellen Sie eine kleine Überschrift mit dem *h6*-Tag und einer beliebigen ID. Erstellen Sie eine CSS-Regel, die die Überschrift *purple* erscheinen lässt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"\n

Kleine Überschrift

Ich habe Klasse aber bin gar nicht grün.

\n Ich bin ein Elternteil.\n

Ich bin ein Kind.

\n Ich bin ein weiteres Kind. \n

\n Ich bin ein Nachfahre. \n

\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"- Manchmal möchte man nur auf die direkten Kindelemente eines Elternelements zugreifen. Dies ist möglich durch die Kombination mittels einer spitzen Klammer, also mit einem Kindselektor:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"\n

Direktes Kind

\n \n

Kindeskind

\n \n

Hello