Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS

Größe: px

Ab Seite anzeigen:

Download "Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS"

Otto Schmitz
vor 7 Jahren
Abrufe

1 Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS

2 Themen Cascading Style Sheets CSS CSS einbinden Inline-Styles CSS im Dokumentkopf Externe Stylesheets Konzepte Typen-, Klassen-, ID-Selektoren, Pseudoklassen Boxmodell Positionierung Farben Textformatierung Textumfluss

3 Kurzwiederholung CSS

4 CSS Ganz wichtig / Grundidee: Trennung von Inhalt (HTML) und Darstellung (CSS)

5 CSS einbinden Unterschiedliche Möglichkeiten, CSS zu verwenden: Inline-Styles <h1 style= font-family: Arial; color: blue; > Diese Überschrift wird in der Schriftart Arial und blau dargestellt </h1> Stylesheetdefinition im Dokumentkopf <html><head><title>stylesheetdemonstration</title> <style type= text/css >  </style> color: red; font-family: Arial; Externe Stylesheets (eigene CSS-Datei) <html><head><title>beispiel: Externe CSS Datei</title> <link type="text/css" rel="stylesheet" media="all" href="style.css > </head> [ ]

6 CSS Selektoren In der Style Sheet Datei: CSS-Regeln in Form von Selektoren: Selektorname { Eigenschaft: Wert; } Arten von Selektoren: Typen-Selektoren Klassen-Selektoren ID-Selektoren Nachkommen-Selektoren

7 Farben Als RGB-Werte angegeben (RGB Rot, Grün, Blau) Angabe des Farbnamens, z.b. black oder Angabe des Hexadezimalwerte s (#000000) oder RGB-Angabe, z.b. rgb(0, 0, 0)

8 Farben? Farbwähler! Z.B. in Geany :

9 Farben Externe Tools, z.b.

10 Hausaufgaben

11 Hausaufgaben Webseitenvorlage / Template

12 Hausaufgaben Fügen Sie Ihrem HTML-Dokument Metainformationen hinzu (Name der Autorin / des Autors, Keywords, Beschreibung der Website). Darstellung einer Grafik im Logobereich Ergänzen Sie die horizontale Navigationsleiste um eine unsortierte Liste mit fünf Listenelementen. Schreiben Sie CSS-Code, um die Listenelemente nebeneinander, anstatt untereinander anzuzeigen. Tipp: display: inline; Entfernen Sie die Aufzählungszeichen der Listenelemente. Tipp: list-style-type: inline; Geben Sie den einzelnen Listenelementen per CSS eine Hintergrundfarbe. Fortgeschritten: Lassen Sie die Hintergrundfarbe der Listenelemente ändern, wenn sich der Mousezeiger über den jeweiligen Listenelementen befindet. Experimentieren Sie mit den Farben; verwenden Sie ggf. den Farbwähler Ihres HTML-Editors. Experimentieren Sie mit padding und margin: Wie verändert sich das Aussehen der Website, wenn Sie die Werte verändern? Ergänzen Sie den Fußbereich Ihrer Website um Hyperlinks zu anderen Seiten im WWW.

13 Lösungen

14 CSS II

15 Positionierung mit float float: left float: right

16 Positionierung mit float Positionierung von Div-Containern über float: <<Der Div-Container Linke Navigationsleiste wird rechts umflossen von dem Div-Container Inhaltsbereich >>: float: left; float:? clear: both;

17 Textumfluss Ohne float float: left float: right

18 Positionierung Drei Arten der Positionierung: relative: positioniert relativ zu der Position, die das positionierte Element im normalen Textfluss hat. absolute: positioniert eine Box entweder relativ zu einem ebenfalls positionierten Elternelement, oder absolut im Dokument. fixed: positioniert eine Box absolut; beim Scrollen bleibt die Box an ihrer Position stehen ( fixed ). <div style= position: absolute; left: 150px; top: 75px; background-color: silver >Lorem Ipsum</div>

positionieren Sie den Container absolut oder fixiert (fixed).

19 Übung 1: Positionierung Positionierung von Div-Containern: Erstellen Sie einen Div-Container von 250px Breite und 250px Höhe und positionieren Sie den Container absolut oder fixiert (fixed). Richten Sie den Container über die Angabe left: 15px; und top: 15px; vom Browserfenster aus.

20 CSS Pseudoklassen a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: gray; } U.a. Definition des Verhaltens von Elementen: a:hover bestimmt, wie sich die Darstellung des Hyperlinks verändert, wenn die Mouse über den Link fährt.

21 /

Ähnliche Dokumente

Allgemeine Technologien II Sommersemester Mai 2011 CSS

Allgemeine Technologien II Sommersemester 2011 02. Mai 2011 CSS Kursthemen Designparadigmen Framesets Tabellenbasierte Layouts -basierte Layouts: CSS & Co. Cascading Style Sheets CSS CSS einbinden