Seite anzeigenÄltere VersionenLinks hierherPDF exportierenFold/unfold allNach oben Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt. ====== Grundlagen [CSS] ====== <accordion> <panel type="primary" title="CSS"> **Was ist CSS?**\\ \\ Wie HTML ist CSS nicht wirklich eine Programmiersprache. Es ist auch keine Markup-Sprache, sondern eine Stylesheet-Sprache, die es erlaubt für Elementen auf einer Internetseite das Aussehen festzulegen. Zum Beispiel benötigt man folgenden CSS-Code, um den ''body'' auszuwählen und seine Schriftfarbe blau einzufärben: <code css> body { color: blue; } </code> </panel> <panel type="primary" title="Verknüfpung"> Wir müssen das CSS im HTML-Dokument verknüpfen, sonst wird die CSS-Datei von dem Browser nicht berücksichtigt. <WRAP center round important 60%> Bei dieser vorgestellten Vorgehensweise ist es wichtig, dass das HTML-Dokument und die CSS-Datei im selben Ordner liegen. </WRAP> Füge in der HTML-Datei die folgende Zeile irgendwo in den Kopf (zwischen die <head>-Tags) <code css> <link href="style.css" rel="stylesheet" type="text/css"> </code> Die folgende Abbildung veranschaulicht die Verknüpfung.\\ Wichtig ist, dass das Attribut ''href'' den korrekten Dateinamen der CSS-Datei enthält. {{:informatik:css:css-veranschaulicht-verknuepfung.png?960|}} </panel> <panel type="success" title="Aufgabe #1"> <html> <iframe src="https://learningapps.org/watch?app=5753615" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe> </html> <panel type="primary" title="Regelsatz"> **Aufbau einer CSS-Regel** Lasst uns nun das CSS etwas genauer anschauen:\\ \\ {{:informatik:css:css-aufbau-regelsatz.png?600|}} \\ \\ Die ganze Struktur wird ''Regelsatz'' (oder oft nur »Regel«) genannt.\\ \\ Jetzt zu den der einzelnen Teilen eines Regelsatzes: ^ Bestandteil ^ Erklärung ^ | Selektor | Der HTML-Elementname steht direkt am Anfang der Regel. Er wählt die Elemente, die gestaltet werden sollen (in diesem Beispiel ''p'') aus. Um ein anderes Element zu gestalten, muss man nur den Selektor ändern. | | Deklaration | Eine einzelne Regel wie ''color: red;'' gibt an, welche Eigenschaft des Elements gestaltet werden soll. | | Eigenschaft | Art und Weise, wie das ausgewählte HTML-Element gestaltet werden soll. (In diesem Fall ist color eine Eigenschaft des <p> Elements.) In CSS wählst du aus, welche Eigenschaft gesetzt wird. | | Eigenschafts-Wert | Rechts neben der Eigenschaft, nach dem Doppelpunkt, steht der ''Wert'' der Eigenschaft. Dieser gibt eine von vielen Möglichkeiten wieder, wie die Eigenschaft das Aussehen eines Elements verändern kann. | <WRAP center round important 60%> **Beachte die Syntax!** * Hinter dem Selektor stehen die zugehörigen Regelsätze innerhalb geschwungener Klammern (''{}''). * Innerhalb einer Deklaration muss man einen Doppelpunkt ('':'') nutzen, um Eigenschaft und Wert zu trennen. * Am Ende jeder Deklaration muss ein Semikolon ('';'') gesetzt werden. </WRAP> </panel> <panel type="success" title="Aufgabe #2"> <html> <iframe src="https://learningapps.org/watch?app=5753856" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe> </html> </panel> <panel type="primary" title="Selektoren"> **Selektoren dienen dazu, bestimmt Elemente in einem HTML-Dokument auszuwählen. Auf diese können dann bestimmte Eigenschaften angewendet werden.**\\ \\ ^ Selektor ^ Erklärung ^ Syntax ^ Beispiel ^ Erläuterung des Beispiels ^ | Typselektor | Spricht alle Elemente eines bestimmten Typs (body, p, h1, usw.) im Elementbaum an. |''elementname'' | <code css>p { font-size: 18px } </code> | Jeder Textabsatz der Seite erhält eine Schriftgröße von 18px. | | Klassenselektor | Spricht alle Elemente einer bestimmten **Klasse** im Elementbaum an. |''.elementname'' | <code css>.warnung { background: red } </code> | Alle Elemente der Klasse ''warnung'' erhalten einen roten Hintergrund. | | ID-Selektor | Spricht das Element einer bestimmten **ID** im Elementbaum an. |''#id'' | <code css>#autor { font-weight: bold }</code> | Die Schrift des Elements mit der ID ''autor'' wird fett dargestellt. | </panel> <panel type="primary" title="div-Element"> Das **div-Element** ist dazu gedacht, mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einzuschließen.\\ Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, Bereiche zu erzeugen, die mit Hilfe von CSS formatiert werden können.\\ ''div'' bedeutet division, etwa Abteilung oder Bereich. \\ \\ **Beispiel**\\ \\ <code html> <div> <h2>Listenüberschrift</h2> <ul> <li>Listenpunkt 1</li> <li>Listenpunkt 2</li> <li>Listenpunkt 3</li> </ul> </div> </code> </panel> <panel type="primary" title="class-Attribut"> Das class-Attribut ordnet ein Element einer oder mehreren Klassen zu. Klassen sind ein HTML-Konzept, um gleichartige Elemente im HTML-Dokument zu kennzeichnen mit dem Ziel, diese mit einem Klassenselektor ansprechen zu können. Dabei müssen es nicht unbedingt gleichartige Elemente sein. \\ \\ **Beispiel** \\ In diesem Beispiel wird ein div-Element einer Klasse (hier: ''element1'') zugeordnet. Dieses gezeichnete div-Element wird nun mit dem Klassenselektor (hier: ''.element1'') angesprochen. \\ {{:informatik:css:css-veranschaulicht-div-element.png?960|}} </panel> <panel type="success" title="Aufgabe #3"> <html> <iframe src="https://learningapps.org/watch?app=5754263" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe> </html> </panel> <panel type="primary" title="Veranschaulicht"> Diese Abbildung soll die Anwendung von CSS noch einmal übersichtlich veranschaulichen. <WRAP center round todo 60%> Erkläre deinem Sitznachbarn mit Hilfe der Abbildung in eigenen Worten die Anwendung von CSS! </WRAP> </panel> </accordion>