4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 18.12.2017, PC Pool
Stand und Ausblick Einführung: 17.10.2017, 12.00 Uhr (c.t.), HS 4 Fragestunde: 06.11.2017, 10.15 Uhr, PC Pool Fragestunde: 27.11.2017, 10.15 Uhr, PC Pool Fragestunde: 18.12.2017, 10.15 Uhr, PC Pool Fragestunde: 29.01.2018, 10.15 Uhr, PC Pool Klausurvorbereitung: 05.02.2018, 10.15 Uhr, PC Pool 48
WBT 10: Hintergrundgestaltung Hintergrundfarbe: CSS-Deklaration: background-color: (z. B. black, #000, rgb(0,0,0) ); Hintergrundbild: CSS-Deklaration: background-image: url(img/einkauf.png); CSS-Deklaration: background-repeat: repeat; (horizontal und vertikal wdh.) repeat-x; (horizontal wdh.) repeat-y; (vertikal wdh.) no-repeat; (keine wdh.) CSS-Deklaration: background-position: 5px 10px; CSS-Deklaration: background-attachement: (scroll oder fixed); 49
WBT 11: Schrift- und Textgestaltung Schriftgestaltung Schriftart und -familie: CSS-Deklaration: font-family: (z. B. Futura, `Century Gothic sans-serif ); Schriftgröße: CSS-Deklaration: font-size: (z. B. 16px; 2em; 18pt; medium); Schriftstil: CSS-Deklaration: font-style: (z. B. normal, italic, ); CSS-Deklaration: font-weight: (z. B. bold, bolder, normal); Zeilenabstand: CSS-Deklaration: line-height: (z. B. normal, 32px, 140%, 1.4 ); 50
WBT 11: Schrift- und Textgestaltung Textgestaltung Textfarbe: CSS-Deklaration: color: (z. B. black, #000, rgb(0,0,0) ); Textdekoration: CSS-Deklaration: text-decoration: underline blue solid; Textausrichtung: CSS-Deklaration: text-align: (z. B. left, right, center, justify ); 51
WBT 12: Gestaltung von Listen Listenformatierung: Aufzählungszeichen: CSS-Deklaration: list-style-type: (z. B. disc, circle, square); (<ul>) CSS-Deklaration: list-style-type: (z. B. decimal, lower-alpha ); (<ol>) Position von Aufzählungszeichen: CSS-Deklaration: list-style-position: (inside oder outside); Bilder von Aufzählungszeichen: CSS-Deklaration: list-style-image: url(check.jpg); 52
WBT 12: Gestaltung von Listen Horizontale Listen: Listen sind Blockelemente: nach jeder Listenzeile wird automatisch ein Zeilenumbruch generiert Blockelemente formatieren: Blockelemente können sich verhalten wie Inline-Elemente, wenn Sie mit der CSS-Deklaration: display: inline; versehen werden. 53
WBT 12: Gestaltung von Listen Formatierung von Hyperlinks: Hyperlinks mit dynamischen Pseudoklassen formatieren: Eine dynamische Pseudoklasse ist eine besondere Form eines CSS-Selektors, der Elemente auf Grund der Benutzeraktion formatiert. Pseudoklassen beginnen mit einem Doppelpunkt. Beispiele: Normalzustand des Hyperlinks: a:link {color:blue;} Besuchte Hyperlinks: a:visited {color:blue;} Maus zeigt auf Hyperlink (Mous-over): a:hover {color:blue;} Angeklickter Hyperlink: a:active {color:blue;} 54
WBT 13: Gestaltung von Tabellen Tabllenrahmen: CSS-Deklaration: border: 5px solid black; CSS-Deklaration: border-radius: 15px ; CSS-Deklaration: border-collapse: (separate oder collapse); CSS-Deklaration: border-spacing: 30px; Weitere Tabellen Formatierungen: Spaltenbreite: CSS-Deklaration: table-layout: (auto oder fixed); Tabellenhintergrund: CSS-Deklaration: tr:nth-child(even) (spricht gerade Tabellenzeilen an, also 0,2,4,6,8,10 ) CSS-Deklaration: tr:nth-child(odd) (spricht ungerade Tabellenzeilen an, also 1,3,5,7,9 ) 55
WBT 13: Übung Legen Sie eine Tabelle mit mindestens 10 Zeilen und 2 Spalten an. Bearbeiten Sie die Hintergrundfarben der Tabelle mit Hilfe von der CSS-Pseudoklasse nth:child. Geben Sie der gesamten Tabelle einen Rahmen. 1. Jede gerade Tabellenzeile sei weiß, jede ungerade Tabellenzeile grau. 2. Jede gerade Tabellenzeile sei blau, jede ungerade Tabellenzeile weiß. 3. Jede dritte Tabellenzeile ist grün. (Hinweis: Die verschiedenen Teilaufgaben können alle im gleichen Stylesheet hinterlegt werden. Blenden Sie die gerade nicht verwendeten CSS-Befehle mit Hilfe der Kommentarfunktion aus.) 56